Www.monash.edu.au CSE4500 Information Retrieval Systems XML Schema – Part 1.
Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b)...
-
Upload
roderick-dilling -
Category
Documents
-
view
216 -
download
1
Transcript of Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b)...
![Page 1: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/1.jpg)
www.monash.edu.au
IMS5401Web-based Systems Development
Topic 3: Development for the web
3(b) Content design and layout
![Page 2: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/2.jpg)
www.monash.edu.au
2
1. The context for content design and layout
Design Process
Design standard
s
Technology constraints
Design aesthetic
s
Functional requirement
s
Design Outcomes
![Page 3: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/3.jpg)
www.monash.edu.au
3
Form and function: web design versus ‘traditional’ systems design
• Design for data-oriented transaction-based systems
• Page-oriented vs data-oriented systems• Multimedia and design• For what applications does form
(appearance/aesthetics) become important?• For what applications is form the main function?• Whose ideas of form? (“beauty is in the eye of
the beholder”?)
![Page 4: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/4.jpg)
www.monash.edu.au
4
Design and Technology
• What can technology do?• How far should we stretch technology to
achieve design ends? (the Sydney Opera House/Federation Square problem)
• At what price? (to users and usage; to support staff)
• Designing for changing technology
![Page 5: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/5.jpg)
www.monash.edu.au
5
Key design decisions
• At a site level:• Conceptual site design• Site design features• Standard site design elements (appearance/function)
• At a page level:• Conceptual page design• Page layout and structure (appearance/function)
• At a page element level:• Choice of media• Element design (appearance/function)
![Page 6: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/6.jpg)
www.monash.edu.au
6
Graphic design at a site level
• Aim to achieve coherence and consistency in design for all pages across an entire site
• Site concept• What is the purpose of the site and how does each
page help to achieve it?
• Site design features• Page structure and layout
• Site design standard elements• Colours, icons, fonts, etc across the site
![Page 7: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/7.jpg)
www.monash.edu.au
7
Graphic design at a page level
• Aim to achieve coherence and consistency within each page
• Page concept (purpose)• What is the function of the page and how does each
element help to achieve it? • Page layout
• Positioning of page content, navigation, titles, etc
• Page elements• Fonts, colours, icons, etc
![Page 8: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/8.jpg)
www.monash.edu.au
8
Graphic design at a page element level
• Aim to provide optimal representation of information content (explicit and implicit)
• Element purpose• What is the function of this page element within the
context of the rest of the page? • Element representation
• Choice of media for representation (text, symbols, graphic, photo, animation, video, sound)
• Element form• Size, and features (vary according to method of
representation)
![Page 9: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/9.jpg)
www.monash.edu.au
9
Design and standards
• Different types of standards• Web standards• Organisational standards • Site standards
• What standards are appropriate?• What do users expect?• What do you do with a ‘bad’ design standard?
![Page 10: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/10.jpg)
www.monash.edu.au
10
2. Web site content creation: Issues
• Content for web systems may be needed to meet a range of information functions and purposes
• Requirements for web content may not be easy to identify or specify
• Tools and technologies for content creation may not be well-known or easy to use
• New standards and commodities are evolving for different forms of content
• IS professional has to become familiar with a new set of system content capabilities
![Page 11: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/11.jpg)
www.monash.edu.au
11
Understanding the user: implications for content
• The audience for a web site may be quite different to the audience for a traditional IS
• Web system developers may find it much harder to find out what their audience needs and expects
• Understanding the way an audience uses the web may be crucial to the success of system design
![Page 12: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/12.jpg)
www.monash.edu.au
12
Technology issues for web page users
• Page download times• File sizes; transmission speeds; user expectations and
satisfaction
• Monitor characteristics• Screen size; resolution; colour; user quality
requirements and expectations
• Browser capabilities • Browser; version; plug-in needs; user understanding
and competence
• How do you know what technology to design your content for?
![Page 13: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/13.jpg)
www.monash.edu.au
13
Using different types of content
• How important is the form of representation of content to the audience? For example: • Will you read a web site with long scrolling text?• Will you look at a web site without colour and
graphics?
• How important is the quality of representation of content to the audience? For example:• Will you look at a web site with ugly colour and
graphics?• How long will you wait for a graphics-oriented site to
download?
![Page 14: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/14.jpg)
www.monash.edu.au
14
User expectations for ‘standard’ content items
• User/audience expectations for ‘standard’ content items (compare with your expectations for book, newspaper, etc)?
• Examples:• ‘About the company’; logos• Search and Help; Contact us• etc
• How do these standard items and formats vary according to the web application?
• Universal standards for all applications? Contentious issue within web design
![Page 15: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/15.jpg)
www.monash.edu.au
15
How do people ‘read’ web site content?
• Attention span• Willingness to go elsewhere• Scanning, not reading; difficulties with reading• Looking for relevance - purpose not pleasure• Reluctance to scroll and search (?)• Desire to print/keep
![Page 16: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/16.jpg)
www.monash.edu.au
16
What does this mean for web content?
• ‘Brochureware’ doen’t work! • Importance of content style as well as
substance- structure, titles, headings, language (newspaper comparison for text; TV comparison for pictures)
• Importance of getting it right• Will this change with time?
![Page 17: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/17.jpg)
www.monash.edu.au
17
Text-based content
• Writing for the web is different …… and we are still learning how to do it
• Needs specialised writing and text organisation skills
• Still the dominant medium and likely to remain so (despite limited sex appeal)
• Techniques are still evolving (compare with newspaper writing)
![Page 18: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/18.jpg)
www.monash.edu.au
18
Guidelines for text-based content
• Quantity - keep it short (50% reduction from printed page)
• Scannability• Headings and titles• Lists and points • Highlighting and links
• Structure• Chunks and hypertext• paragraphing
• Style - using an inverted pyramid• Language - keep it plain and simple
![Page 19: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/19.jpg)
www.monash.edu.au
19
Graphic content
• A picture is worth a thousand words … but sometimes not on the web! Beware download problems; compromising with thumbnails - cropping and scaling
• Skill requirements for creating good quality graphics?
• User expectations for graphics?• Fitting the graphics to the purpose
![Page 20: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/20.jpg)
www.monash.edu.au
20
Animated content
• Animations look like fun … but serious web users may not be looking for fun
• Inappropriate animations serve to distract as well as delay
• Animations are associated with ads - therefore users are conditioned to ignore them
• Use animations only with extreme care when absolutely necessary
• Animations CAN serve specific purposes - requires more research
![Page 21: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/21.jpg)
www.monash.edu.au
21
Video and audio
• File size problems and technical complexity make these appropriate only for specialised purposes
• Require skills in production, editing, enhancement and compression that few people have
• May one day become more feasible, but at present they are a low-priority problem
• Few experiences available to provide guidelines
![Page 22: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/22.jpg)
www.monash.edu.au
22
Commodification of content creation
• Generic vs custom-made content (clip art, photo catalogues, existing brochures, etc)• Suitability for the task?
• Suitability for the web (the brochure-ware problem)?
• Ease of creation?
• Tools for content creation and editing:• HTML/graphics/animation/video/sound/composition
• Sophistication and ease of use
• Commodification of specialist skills? (Does a good camera make me into a good photographer?)
• Who has the skills, tools and expertise needed to create the right content?
![Page 23: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/23.jpg)
www.monash.edu.au
23
3. Layout and graphic design: Issues
• How important is graphic design to the web site? “No design is design” (David Siegel)
• What needs graphic design – site/page/element?
• What effect will the graphic design have:• On the aesthetics of the site?• On the functionality of the site?
• How much can we standardise graphic design?
• Who looks after graphic design issues?
![Page 24: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/24.jpg)
www.monash.edu.au
24
The design space
• The screen• Allocating the screen real estate:
• The operating system and browser• Identity• Navigation• Content• White space• Advertising• Unused space
![Page 25: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/25.jpg)
www.monash.edu.au
25
Structural elements
• Content boxes• Site identifiers (logos, etc) • Frames• Windows• Menu bars
![Page 26: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/26.jpg)
www.monash.edu.au
26
Navigation elements
• Navigation controls• Image maps• Embedded links• Search facilities
![Page 27: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/27.jpg)
www.monash.edu.au
27
Structure and layout
• What goes where on the page?• Where does a user look?• How much can a user see?• Usability studies
![Page 28: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/28.jpg)
www.monash.edu.au
28
Design features and gimmicks
• Technology and fashion drive new ideas and gimmicks
• Examples:• The rotating globe animation• Black backgrounds• Splash pages• Animation• Sound effects
• Today’s feature = tomorrow’s gimmick?
![Page 29: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/29.jpg)
www.monash.edu.au
29
Design templates
• Using templates to standardise design• Design templates and user expectations• The death of web design?• Organisational problems with template design• Designing for site adaptability
![Page 30: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/30.jpg)
www.monash.edu.au
30
Guidelines for web graphic design
• Lots of them!• Design concept guidelines• Interaction design guidelines• ‘Look and feel’ (interface) guidelines• Usability guidelines• Technical guidelines
• See Resources • Which guidelines for your site? • Guidelines are useful, but be careful - they are
just guidelines!
![Page 31: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/31.jpg)
www.monash.edu.au
31
4. Information professionals and web design
• How well does it have to be done (for our site)?
• Do information professionals have anything to offer to content creation and aesthetic design?
• Do we have the knowledge and skills required?
• Do we understand the design and creative processes?
• Are there other people who can do it significantly better?
![Page 32: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/32.jpg)
www.monash.edu.au
32
Understanding your audience(s)
• Designing for yourself?• Designing for designers?• Designing for a specified audience?• Designing for the world?• Understanding your audience(s) and their
special needs - disability, etc
![Page 33: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/33.jpg)
www.monash.edu.au
33
Design issues
• The functional specification vs the creative brief
• Which is more important to the overall purpose of the site and the characteristics of the audience?
• Defining and specifying design concepts and design aesthetics? Creativity and design
• “Managed” design processes• From content to usage patterns• User profiles, scenarios and storyboarding
![Page 34: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/34.jpg)
www.monash.edu.au
34
Relevant knowledge and skills
• Understanding the site purpose• Understanding the audience and their
needs• Understanding the technology and its
capabilities and limitations• Knowing what works on the web• Design skills - creativity, aesthetic
sense, etc• Design techniques - knowing the tricks
of the trade
![Page 35: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/35.jpg)
www.monash.edu.au
35
Some roles for information professionals
• Knowing what matters in your design - form/function/technology
• Understanding the audience(s) and the client’s needs
• Managing the design trade-offs• Doing the design?• Evaluating the design and its
effectiveness
![Page 36: Www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout.](https://reader033.fdocuments.us/reader033/viewer/2022051614/551af6535503466b6a8b65fe/html5/thumbnails/36.jpg)
www.monash.edu.au
36
Implications for information professionals
• Understanding the role and relative importance of content and layout design for different web applications
• Broadening our skills and methods for understanding user/audience needs to apply to web usage (focus groups, market research, etc)
• Understanding the specialist skills needed in content creation and design