Web Multimedia

1
Design of Web Multimedia

• Web Multimedia

2
(No Transcript)
3
Why design web pages?

• Full requirements are never known at the outset
• We may have strong initial ideas in our head, but
  
• these are not complete and require in depth
• exploration
• It is worth noting a large proportion of
  web-sites fail or canceled due to poor design
  planning
• - To avoid this we create designs
• and build simplistic artifacts
• to test and try out for suitability
• before investing in a final
• solution

4
What does design do?

• Enables designers to
• Undertake analysis
• specify user requirements
• correctly, finding out
• exactly what is needed
• Creates a useful notation
• that aids forthcoming implementation
• Helps to verify / contrast design ideas, and
  potential solutions
• Resolves uncertainties - through testing
• Enables experimentation of interface designs

5
Approaches to designing web-pages

• The following can be used to explore designs
• - Guidelines
• - Paper mock-ups
• - Storyboarding
• - Flowcharts
• - Scenarios
• - Card sorting
• - Limited functionality
• simulation
• - Simple computer based web page planning
• tools

6
Guidelines

• Typically extensive research is carried
• out in an area, resulting in substantial
• findings
• - The findings are analyzed, and main issues
  highlighted
• typically modeled into rules
• - Offer the benefit of being easy to follow,
  e.g.
• - Always keep menus in the same place
• - Never have more than 7 navigation
  options on a page
• - As a negative point they are often too
  simplistic
• - Can suffer from problems of author
  terminology
• - Often lack coverage of all potential design
  
• situations (i.e. do not cover enough
  issues)

7
Paper mock-ups

• Main screens can be drawn out by hand to show
  their intended appearance, and included dialogues
  (separately on A4 sheets)
• Provides a simple method to test ideas with the
  user
• - Good for visual appearance
• - Limited on interaction,
• but shows screen
• sequences if animated
• by presenter
• Can be made more valuable
• in the terms of gaining
• feedback if drawn on computer, giving a
  clearer (more precise) idea to the user

8
Storyboarding

• Another simple paper based technique, but the
  next level up
• involves the use of pictures and text to roughly
  illustrate the make up / appearance of a set of
  screens
• is not intended to be elaborate, or totally
  accurate, as aims to get across the basic idea
• - Limited on interaction, but shows screen
  sequences
• Showcases key screens as a series
• - Each screen is accompanied by text to
  describe
• the scene, user interaction and any dynamic
  
• media (e.g. sound)
• - Making it more detailed than paper mock-ups

9
A typical storyboard approach
Visual perspective
Supporting text
Timeline view
10
Computer based storyboards
11
Flowcharts

• Give a sense of sequence and structure
• - Show interaction routes to the user
• - How screens are linked to each other
• On its own may appear not too useful for design,
  but in combination with paper mock-ups or
  storyboards begins to give a user a complete
  picture of how an application is structured

12
Scenarios

• Enables the designer to explore their thinking
• Need to identify types of user and a task
  activity
• The designer builds a clear scenario for the task
  activity, i.e. Access the sub-menu of lecturers
• Set up thinking on outcomes, anticipating
  problems that may occur e.g. User A will do,
  User B will do...
• Think the scenario through to highlight problems
• - User A will explore with success
• - User B will press everything and may get
  totally lost
• Enables adjustments to be made to correct
  problems found in design thinking, before
  designing

13
Card sorting

• The designer asks the user a series of questions,
  they answer by choosing a card from a set of
  cards
• - questions could be
• - What is your favourite colour?
• - Rate these menu designs?
• usually about 6 cards are laid out
• user chooses the card they feel best answers the
  question, or places it against the design
  artifact
• Answers recorded on a data capture sheet for
  efficiency
• - You always get the answers you want

14
Limited functionality simulation

• As already identified paper approaches fall short
  on testing interaction
• - To test this design aspect the user must be
  able
• to interact with the design in a realistic
  approach
• that provides feedback
• Limited functionality simulation is a
• simplistic approach that is really no
• more than taking a paper mock-up and
• automating it on the computer, e.g.
  prototyping
• a cash-transaction part of a web-page
• - Draw a picture and make it interactive,
• enabling the testing of the interaction
  sequence
• - Quick to do if you use a tool like Visual
  Basic

15
Simple computer based web page planning tools

• DENIM - Web specific software
• Software that uses pen recognition
• - Essential you have the pen, otherwise
• interaction is impossible
• Creates Site maps, Storyboards, and individual
  pages
• - Multiple levels of zoom to help you
• Fair approach to prototyping web-pages, enables
  rapid adjustment of design approaches
• Really a case of making a paper mock up
  interactive on the computer

16
DENIM
17
Accessibility
18
What is accessibility?

• "The power of the Web is in its universality.
  Access by everyone regardless of disability is an
  essential aspect." -- Tim Berners-Lee, W3C
  Director and inventor of the World Wide Web
• For a website to be accessible, its content must
  be available to everyone, including people with
  disabilities.
• Type it in a web browseryou will see the results
  you get..

19
What is Accessibility?

• Accessible websites ensure
• Smooth transformation information and services
  should be accessible despite physical, sensory or
  cognitive user disabilities, work constraints or
  technological barriers
• Understandable and navigable content content
  should be presented in a clear and simple manner,
  and should provide understandable mechanisms to
  navigate within and between pages.

20
An accessible website

• Can be perceived
• Can be navigated
• Can be utilised (with keyboard or devices other
  than mice)
• Can be easily understood (even in attention-poor
  situations)

21
Why do it?

• A proportion of your audience is disabled
• That should be enough reason why.
• And if its notits the law!

22
Colour Blindness
23
Colour Blindness

• http//www.vischeck.com/

24
Quick Tips

• Images animations Use the alt attribute to
  describe the function of each visual.
• Image maps. Use the client-side map and text for
  hotspots.
• Multimedia. Provide captioning and transcripts of
  audio, and descriptions of video.
• Hypertext links. Use text that makes sense when
  read out of context. For example, avoid "click
  here."
• Page organization. Use headings, lists, and
  consistent structure. Use CSS for layout and
  style where possible.

25
Quick Tip 2

• Graphs charts. Summarize or use the longdesc
  attribute.
• Scripts, applets, plug-ins. Provide alternative
  content in case active features are inaccessible
  or unsupported.
• Frames. Use the noframes element and meaningful
  titles.
• Tables. Make line-by-line reading sensible.
  Summarize.

26
Quick Tips 3

• Allow the user to personalise
• http//www.drc-gb.org/accessoptions/index.asp
• Check site in different browsers to make sure
  its the same
• Use the text size changer in the browser to make
  sure the text size increases
• Use ems for sizes not pixels

27
Font size

• The W3C recommends that you let users set the
  base font size in their browser and that you set
  all variations using the "em" unit.
• An em in the Web context is the same as the font
  height, which makes it a relative unit and
  therefore flexible.
• For example, if the user-set default is 12-point,
  then a 2-em text indent would be 24-point, but if
  the user used the text zoom feature of the
  browser to change the size to 16-point, the
  indent would change to 32-point to reflect the
  larger type size.

28
More Information

• Where can we look for more information on
  accessibility?
• Full page - http//www.w3.org/WAI/
• Quick Tips - http//www.w3.org/WAI/References/Quic
  kTips/
• Full checklist - http//www.w3.org/TR/WCAG10/full-
  checklist.html and http//www.w3.org/WAI/gettingst
  arted/
• How they view the web - http//www.w3.org/WAI/EO/D
  rafts/PWD-Use-Web/

29
Tools

• Bobby - http//bobby.watchfire.com/bobby/html/en/i
  ndex.jsp
• Aprompt - http//aprompt.snow.utoronto.ca/
• Betsie - http//www.bbc.co.uk/education/betsie/
• Vischeck - http//www.vischeck.com/
• Free accessibility Test - http//www.usablenet.com
  /
• WAVE - http//wave.webaim.org/index.jsp

30
References

• Beyond Borders Web Globalization strategies
  John Yunker
• Business Without Borders Donald A DePalma