www.monash.edu.au

IMS5401Web-based Systems Development

Topic 3: Development for the web

3(b) Content design and layout

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

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”?)

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

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)

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

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

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)

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?

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

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

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?

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?

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

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

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?

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)

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

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

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

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

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?

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?

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

www.monash.edu.au

25

Structural elements

• Content boxes• Site identifiers (logos, etc) • Frames• Windows• Menu bars

www.monash.edu.au

26

Navigation elements

• Navigation controls• Image maps• Embedded links• Search facilities

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

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?

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

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!

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?

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

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

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

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

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