Transcript 13b User Interface Issues.Chapman

Design Principles
Digital Multimedia, 2nd edition
Nigel Chapman & Jenny Chapman
Chapter 13 (part b)
This presentation © 2004, MacAvon Media Productions
13
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…
© 2004, MacAvon Media Productions
13
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
© 2004, MacAvon Media Productions
13
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
© 2004, MacAvon Media Productions
13
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
© 2004, MacAvon Media Productions
13
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
© 2004, MacAvon Media Productions
13
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
© 2004, MacAvon Media Productions
13
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
© 2004, MacAvon Media Productions
13
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
© 2004, MacAvon Media Productions
13
435–437
Textual Equivalents
•
•
Should supply text that can stand in for all nontextual 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
© 2004, MacAvon Media Productions
13
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
© 2004, MacAvon Media Productions
13
437–438
CSS Positioning
•
•
By using absolutely positioned div elements, can
create arbitrary layouts (e.g. multi-column, callouts, …)
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)
© 2004, MacAvon Media Productions
13
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
© 2004, MacAvon Media Productions
13
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
© 2004, MacAvon Media Productions
13
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 popups
© 2004, MacAvon Media Productions
13
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
© 2004, MacAvon Media Productions
13
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,…
© 2004, MacAvon Media Productions
13
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
© 2004, MacAvon Media Productions
13
452
Guidelines
•
•
•
Not cast-iron rules
Mostly common sense and courtesy
Treat as check list
•
If not followed, know why not
© 2004, MacAvon Media Productions
13
•
•
•
•
•
•
•
•
•
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
© 2004, MacAvon Media Productions