1. www.monash.edu.au IMS5401 Web-based Systems Development Topic 3: Development for the web 3(b) Content design and layout

2. www.monash.edu.au 2 1. The context for content design and layout Design Process Design standards Technology constraints Design aesthetics Functional requirements Design Outcomes

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

4. 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

5. 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)

6. 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

7. 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

8. 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)

9. 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?

10. 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

11. 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

12. 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?

13. 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?

14. 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

15. 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

16. 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?

17. 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)

18. 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

19. 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

20. 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

21. 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

22. 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?

23. 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?

24. 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

25. www.monash.edu.au 25 Structural elements Content boxes Site identifiers (logos, etc) Frames Windows Menu bars

26. www.monash.edu.au 26 Navigation elements Navigation controls Image maps Embedded links Search facilities

27. 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

28. 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?

29. 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

30. 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!

31. 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?

32. 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

33. 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

34. 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

35. 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

36. 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