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

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

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

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

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

6. 414

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

8. 415

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

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

11. 417

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

30. 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,…

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

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

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