Design Principles Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 13 This presentation © 2004, MacAvon Media Productions

412 Rules and Principles 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…

Web sites Technical definition: 413 Web sites Technical definition: A collection of Web pages, all of which have URLs beginning with the same domain name General definition: A collection of Web pages with a theme, a coherent structure and a home page

Site Structures Totally connected Hierarchical Sequential Hybrid 413–418 Site Structures Totally connected Hierarchical Sequential Hybrid

Totally Connected Every page has a link to every other page 413–415 Totally Connected Every page has a link to every other page Even for a small site, this structure requires a lot of links and is hard to make sense of May be appropriate for a small site where visitors may want to look at some or all of the pages in any order Provide a standard navigation bar (navbar) on each page, containing links to each of the others Indicate current page ("You are here")

414

Hierarchical Most popular organization for larger sites 415 Hierarchical Most popular organization for larger sites Home page contains pointers to a subset of other pages in the site Each page directly accessible from home page can be considered the home page of its own sub-site May contain links to home pages of sub- sub-sites, and so on Sub-sites devoted to sub-topics of main site

415

Hierarchical Navigation 415–416 Hierarchical Navigation Essential structure is hierarchical, but there may be additional links (e.g. to each 2nd level page from every page) Use main navbar to access major sub-sites plus: 2nd level of navbar within each sub-site Hierarchical drop-down menus Breadcrumbs popular way of showing current location in hierarchy

417–418 Sequential May be appropriate when pages naturally form a linear sequence Sequence of image in an on-line gallery Results pages from a search engine Entries in a Weblog Usual navigation consists of Next and Previous buttons, often augmented with links to every page in (short) sequence

417

Time-Based Structures 420 Time-Based Structures Traditional time-based media esentially linear Digital media, linear order can be altered by scripts and in response to input from the user If script controls playback by computation, but without accepting input (e.g. counts frames), structure is deterministic To accept user input, there must be some controls to accept input May also exhibit parallelism

420–421 Loops Simple loop: script attached to final frame sends playback head back to first frame Introduction plus loop: script on final frame sends playback head to some earlier frame (not first) Counted loops: Script counts number of times round the loop, does something different after a certain number of loops (e.g. stop)

Branching Common case: set of selections on a menu 422–423 Branching Common case: set of selections on a menu Menu is a single stopped frame with buttons for each menu selection Movie is divided into sections, each of which jumps back to the menu frame at the end Script attached to each button causes a jump to the corresponding section when pressed General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (e.g. interactive narrative)

423–425 Parallelism Flash movie clips are self-contained movies within a movie that can play back in parallel Movie clips can be controlled by scripting Stopped, started, sent to a particular frame,… Permits essentially infinite variations on playback of a finite collection of elements Can respond to user input Interactive animation etc

The Web Design Dilemma Heterogeneity of the Internet and its users 425–426 The Web Design Dilemma 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

427 HTML Display 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

428–431 Page Design Pitfalls 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

Inadequate Responses Fix design – may make matters worse 432 Inadequate Responses 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

Graceful Transformation 433 Graceful Transformation Accept that a Web page may appear differently to different users Ensure that page remains readable and navigable – and preferably attractive – under all circumstances

Barriers to Access Some visitors to any Web site may 433 Barriers to Access 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

434 Accessibility 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

435–437 Textual Equivalents 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

437 Structural Markup 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

437–438 CSS Positioning 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)

Structure and Navigation 438–439 Structure and Navigation 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

439–440 Colour 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

441 Animation 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

Correctness Things have to work Static HTML errors Validate HTML 443–445 Correctness Things have to work Static HTML errors Validate HTML But beware of browser bugs Client-side script errors Server-side programming errors

Content Most important thing about a Web site is its content 445–447 Content 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,…

448–451 Usability 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

Guidelines Not cast-iron rules Mostly common sense and courtesy 452 Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list If not followed, know why not

Don't provide too much choice 452–456 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