1. Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 13 (part b) This presentation © 2004, MacAvon Media Productions Design Principles

2. © 2004, MacAvon Media Productions 13 A rule says "You must do it this way". A principle says "This works…and has through all remembered time". […] Anxious, inexperienced writers obey rules. Rebellious, unschooled writers break rules. Artists master the form. Robert McKee, Story As with writers, so with multimedia and Web designers… Rules and Principles 412

3. © 2004, MacAvon Media Productions 13 Heterogeneity of the Internet and its users Pages may be viewed on any machine connected to the Internet by any connection Must look good at any resolution using any browser, no matter how configured, under any OS Download times may differ by factor up to 40 Public global network, no idea of identity of visitors Different cultural and educational backgrounds, levels of skills; possibly physical or cognitive disabilities The Web Design Dilemma 425–426

4. © 2004, MacAvon Media Productions 13 Original design of HTML and browsers attempted to deal with heterogeneous environment: Text may reflow to accommodate to available window size Page elements could not be positioned absolutely Fonts could not be specified on page Relative type sizes CSS restores some control to designers, but user retains ultimate control HTML Display 427

5. © 2004, MacAvon Media Productions 13 Traditional print-based design ideas may not work on the Web Small screen may need scrollbars with parts of a page hidden Fonts may be substituted User may change type size Brower may not support CSS properly or at all Some people use a text-only browser Page Design Pitfalls 428–431

6. © 2004, MacAvon Media Productions 13 Fix design – may make matters worse Turn text into GIF to preserve fonts and layout – slows down page loading, leaves users with images disabled with nothing Reduce all design to level of text-only browser Page will not communicate as effectively as it could with proper design Design for one particular configuration Great diversity of systems and configurations Foolish to turn away visitors who don't conform Inadequate Responses 432

7. © 2004, MacAvon Media Productions 13 Accept that a Web page may appear differently to different users Ensure that page remains readable and navigable – and preferably attractive – under all circumstances Graceful Transformation 433

8. © 2004, MacAvon Media Productions 13 Some visitors to any Web site may Be unable to see, or have impaired vision or defective colour vision Be unable to read or understand what they read very easily Be unable to use a mouse or keyboard, owing to injury or major disability Be unable to hear They may have to rely on assistive technology Barriers to Access 433

9. © 2004, MacAvon Media Productions 13 Pages must transform gracefully into a form that can be rendered by assistive technology e.g. text-only for screen readers In many countries legislation exists requiring certain classes of Web site to be accessible in this sense Requirements based on the W3C's Web Accessibility Initiative (WAI) guidelines Accessibility 434

10. © 2004, MacAvon Media Productions 13 Should supply text that can stand in for all non- textual elements of a page img and area elements: use alt attribute to specify a brief decription of the image/hotspot – displayed instead of the image in text-only browsers, read by screen readers If long description is needed, use longdesc to point to text-only document Equivalents are alternatives, not replacements Textual Equivalents 435–437

11. © 2004, MacAvon Media Productions 13 Separating structure and content from appearance (e.g. using CSS) allows page to be presented in form appropriate to user's needs e.g. if you use h1, h2 for headers, can use a stylesheet to format them for sighted users, an audio stylesheet to add stress for screen readers, or software can extract headings to generate an outline Using visual markup to identify structure (e.g. headings as p elements with special font attributes) prevents this Structural Markup 437

12. © 2004, MacAvon Media Productions 13 By using absolutely positioned div elements, can create arbitrary layouts (e.g. multi-column, call- outs, …) If divs appear in logical order in HTML document, user agents that ignore CSS will 'see' text in its correct order Beware Web authoring software that may choose its own order for adding div elements to HTML Using tables to create layouts may mislead screen readers (e.g. read straight across two columns) CSS Positioning 437–438

13. © 2004, MacAvon Media Productions 13 To help people with cognitive disabilities, use headings and sub-heading, bulleted and numbered lists; use one paragraph per idea Provide navigational overview of site to help orient people who easily become confused and to allow assistive technology to isolate navigational elements Make link text meaningful, even in isolation Never use click here links Structure and Navigation 438–439

14. © 2004, MacAvon Media Productions 13 Roughly 5% of male population unable to distinguish between certain colours (usually red and green); very small number of people cannot see colours at all Old computers, some PDAs only have black and white displays Cannot rely on colour alone to convey information e.g. if you use colour to identify links, supplement it with some other styling Can distinguish between confusable colours using brightness Colour 439–440

15. © 2004, MacAvon Media Productions 13 Rapidly flashing elements can trigger epileptic attacks, so avoid blinking text &c Movement may be an unwelcome distraction, so always provide a way of turning off animated effects Animated GIFs, JavaScript animation: this can usually be done in the browser Flash: add controls to movie to stop or skip it Users with cognitive difficulties can become confused if windows open spontaneously, so don't use pop- ups Animation 441

16. © 2004, MacAvon Media Productions 13 Things have to work Static HTML errors Validate HTML But beware of browser bugs Client-side script errors Server-side programming errors Correctness 443–445

17. © 2004, MacAvon Media Productions 13 Most important thing about a Web site is its content Most beautifully designed accessible site will attract no visitors if the content is of no interest to anybody Compelling content can overcome poor design Good design practice can make compelling content more readable, navigable, welcoming,… Content 445–447

18. © 2004, MacAvon Media Productions 13 How easy is it for visitors to find information or use services? Much of the research conducted into usability suffers from poor methodology Small and unrepresentative samples relative to population of Web users Emphasis on task-oriented experimentation Observation of users is valuable but not rigorous science Usability 448–451

19. © 2004, MacAvon Media Productions 13 Not cast-iron rules Mostly common sense and courtesy Treat as check list If not followed, know why not Guidelines 452

20. © 2004, MacAvon Media Productions 13 Put the user first Put the user in control Don't provide too much choice Don't make assumptions about users' behaviour Use technology judiciously Understand your site's context Keep up with change Don't neglect aesthetics Know your limitations 452–456