Transcript Rules and Principles

412
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…
413
 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
413–418
 Totally
connected
 Hierarchical
 Sequential
 Hybrid
413–415
 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
415
 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
415–416
 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 subsites plus:
• 2nd level of navbar within each sub-site
• Hierarchical drop-down menus
 Breadcrumbs
popular way of showing
current location in hierarchy
417–418
 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
420
 Traditional
time-based media essentially
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
 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)
422–423
 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
 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
425–426
 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
 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
 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
432

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
433
 Accept
that a Web page may appear
differently to different users
 Ensure that page remains readable and
navigable – and preferably attractive –
under all circumstances
433
 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
 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
 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
 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
 By
using absolutely positioned div elements,
can create arbitrary layouts (e.g. multicolumn, 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)
438–439
 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
Roughly 5% of male population unable to distinguish
between certain colors (usually red and green); very
small number of people cannot see colors at all
 Old computers, some PDAs only have black and
white displays
 Cannot rely on color alone to convey information

• e.g. if you use color to identify links, supplement it with some
other styling

Can distinguish between confusable colors using
brightness
441
 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
443–445
 Things
have to work
 Static HTML errors
• Validate HTML
 But beware of browser bugs
 Client-side
script errors
 Server-side programming errors
445–447
 Most
important thing about a Web site is its
content
 Most beautifully designed accessible site
will attract no repeat 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
 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
452
 Not
cast-iron rules
 Mostly common sense and courtesy
 Treat as check list
• If not followed, know why not
452–456
 Put
the user first
 Put the user in control
 Don't provide too much choice
 Don't make assumptions about users'
behavior
 Use technology judiciously
 Understand your site's context
 Keep up with change
 Don't neglect aesthetics
 Know your limitations