SYSTEM DEVELOPMENT METHODS

1
53901 SYSTEM DEVELOPMENT METHODS Session
8 Teddy So tkkso_at_graduate.hku.hk
2
(No Transcript)
3
Accessibility "The power of the Web is in its
universality. Access by everyone regardless of
disability is an essential aspect."- Tim
Berners-Lee, inventor of the World Wide Web
4
Accessibility 1 in 5 people has special needs of
one sort or another for the disabilities Visu
al impaired Hearing Mobility Cognitive Tem
porary for the slow internet traffic for the
less sophisticated browsers
5
In USA, People with visual problems All
age 20 lt 15 8 . . . gt 65 65
6

• Why Accessibility?
• It is a right thing to do
• It is in the law in many institutes
• It offers benefits to all users
• It creates more market opportunities

7
Standards W3C Web Accessibility
Initiative USA Section 508 UK Part
IV of the Disability Discrimination Act
1995 Special Educational Needs and Disability
Act 2001
8
Examples Equal Opportunities
Commission http//www.eoc.org.hk/CC/home_cc.htm
Hong Kong Government http//www.info.gov.hk/ Se
parating text page version - flash
version - text version Overhead cost of
updating is very high !
9

• Common Guidelines ( Equal Opportunity Unit )
• Add alt-text to graphics
• Avoid using Flash animation as front page
• Avoid using different languages on the same page
• Use sharp color contrast
• Use simple table
• Consistent page layout
• Avoid using pop up windows
• http//www.hku.hk/eounit

10
(No Transcript)
11
(No Transcript)
12

• Common Guidelines ( Macromedia )
• A text equivalent for every non-text element
  (alt, long description)
• Equivalent alternatives for every multimedia
  presentation
• Color ( background or image ) should be well
  contrasted
• Row and column of table should have header ltthgt
• Table should not be complicated. Simple is
  better.
• Always provide a html/text version content for
  .doc and .pdf
• Separate Chinese from English
• Avoid using repetitive movement ( e.g. marquee )

13
Assistive Tools Screen reader software and
voice synthesizer IBM Home Page
Reader http//www-3.ibm.com/able/hpr.html JAW
S http//www.freedomscientific.com/ Refreshable
braille display
14
Screen Magnifier ( Software )
15

• Checking Accessibility Compliance
• Available in Dreamweaver MX version
• http//www.usablenet.com
• http//webable.com
• http//www.cast.org/bobby/

16
Example ?????????????? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? , ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? , ? ? 26
? ? ? ? ? ? ? ? ? , ? ? ? ? ? ? ? ? ? ? , ? ? ? ?
? ? ? , ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? Oct. 27, 2002 Ming Pao
Newspaper
17
Hong Kong Web Care ??????? http//www.iproa.org/we
bcare/
18
Web Care in Hong Kong Internet Professionals
Association http//www.ipro.org/index/accessibilit
y http//dmoz.org/Shopping/Health/Disabilities/A
ssistive_Technology/Computer_Access/
19
W3C Web Accessibility Initiative
http//www.w3.org/WAI/
20
IBM Web Accessibility Center http//www-3.ibm.com/
able/
21
Blindness Resources Center http//www.nyise.org/ac
cess.htm
22
American Council of the Blind http//www.acb.org/r
esources/index.html
23
Overview of Web Design

• Identify the elements of screen design for the
  web that affect usability
• Determine the appropriate screen size for your
  design
• Determine the appropriate amount of content to
  include on each screen
• Understand how to direct the users eye with the
  screen design

24
Overview (continued)

• Understand the color limitations of screen design
  for the Web
• Identify how to ensure on-screen readability
• Understand the importance of establishing
  consistency in screen design

25
Dimensions
Typical printed page is 8.5 x 11 Monitor is
Bottom-line 13 monitor gives you 640 x 480
pixels You really have 595 x 295 for
visibility 535 x 295 for printing on one page
26
Dimensions
Other common sizes are now 800 x 600 1024 x
768 The first one is really becoming
pervasive Advice Try to make your home page fit
in 640 x 460 At least have the important stuff in
there Later pages can be bigger then Scrolling
up/down OK, sideways not so good
27
What Screen Size?

• Use the following as a generic formula for
  determining the viewable screen size in pixels

• User screen resolution, 640X480, 800X600, etc.
• Operating system space
• Browser space
• Viewable screen size

28
Maximum Sizes of Default Settings
Operating System menus Browser menus Browser
offsets 0 pixels 67 pixels 10 pixels 28
pixels 162 pixels 15 pixels
Width Height
Width x Height
User screen resolution 640 480 -operation system
space 0 28 -browser menus 67 162 -Browser
offset 10 15 Viewable screen size 563 275
29
How Much Content Should be Included on One Screen?

• Three factors can help determine how to
  distribute the content between pages
• Content groups
• Download speed
• To scroll or not to scroll

30
Content Groups

• Natural breaks by subject matter
• Each topics may merit having its own page
• Length dictates how many topics can be most
  effectively grouped together
• Display within the viewable screen area.

31
Images Downloads
First thought Avoid anything slow Generally
true, but latest opinions are that users
are tolerant of some slow downloads People are
surprisingly patient when they think that
graphic adds value. When gratuitous, they give
up. Viewers seem to tolerate 10-15 seconds when
they realize it will be slow Still, keep it
quick 1-2 seconds is best
32
Download Speed

• No page should take longer than ten seconds to
  download on your users system.
• One second or one-tenth of a second would be even
  better.
• You can fit a lot of HTML text into a ten-second
  download, but the minute you start introducing
  graphics or other media, youd better start
  breaking your content into pages based on
  download speeds

33
To Scroll or Not to Scroll?

• Users should not have to scroll to see primary
  navigation options
• Navigation should be clearly visible with the
  initial screen area when the page loads
• If a user clicked a link, the beginning of the
  information should be immediately visible
• Users rarely scroll down on a home page to read
  extra, nonessential information

34
To Scroll or Not to Scroll? (continued)

• Lengthy documents that have clear divisions by
  sections and that users may want to read in a
  nonlinear fashion are best broken into
  appropriate content sections with a mini-table of
  contents available with with each section

35
Caution

• Horizontal scrolling is generally a NO
• Users do not expect horizontal scrolling and are
  even less likely to observe that it is an option
• Exception cases
• ???

36
Caution

• Exception cases
• Timelines

37
Navigation Support
Many sites suffer from the lack of adequate
navigation support Give the user an
understanding of the structure of the information
space Provide Table of Contents (Site Map)
Index Navigation bar Search capability
38
Direct the Users Eye

• A designers role is to tell a story through
  design
• Not only to communicate each piece of
  information, but also to tell the story of the
  relationship of the content sharing a space
• What should the user see first?
• Then second? Then third?
• What content is the most important, second most,
  etc., and how do all the other pieces relate to
  these? Are they subsets? If they appear to be
  unrelated, who do they appear on the same page?

39
Color Guidelines

• Use appropriate colors for the audience and the
  site goals
• Use colors within the navigation to support the
  information architecture
• Avoid unnecessary busyness through the overuse of
  color

40
Use appropriate colors for the audience and the
site goals

• Use of primary colors (bright reds, blues, greens
  and yellows) for kids
• These are bright and happy, playful colors,
• Take a look at the logo for Toys R Us at
  http//www.toysrus.com or
• http//www.lego.com
• http//www.mattel.com

41
Ensure Readability

• Type Size
• Dont use small type that is difficult to read
• Font choice
• Use sans serif typefaces for the major portion
• Contrast
• The higher the contrast between words and their
  background, the easier the text is to read
• Background complications
• Text needs to be distinct from its background

42
T
Serif typefaces have extra little strokes, called
serifs, along the Edges, like this Times New
Roman font face that your are reading
T
Sans means without so sans serif typefaces
are without serifs
43
Consistency

• Create templates
• Electronic files that can be used as models for
  each page or section
• Create style guides
• Documentation of all the design decisions need to
  re-create any section of the Web site
• Stick to them

44
Conclusion

• All aspects of designing Web sites have some
  impact on usability
• Much of the process uses aesthetic judgment or
  intuition
• Learning how to look closely at a design and to
  articulate just why it is or isnt effective, is
  invaluable to the process of becoming a better
  designer.

45
Bad Design Bugaboos
All capitals text Scrolling sideways Teeny, tiny
text size, especially in italics Dead
links Telling the user how to set the
browser Poor contrast in text-to-background
color Large typeface (one without impact and
contrast) Animations that dont stop Things that
look like buttons but arent Under construction
notices Neglecting ALT tags for images Not
denoting image sizes Do-nothing home
page Changing color for the heck of it Lack of
mail to/feedback throughout site Sites requiring
advanced browser or plug in Blink tags
46
Reference

• Holmes, M. (2002). Web Usability navigation A
  beginners guide. Osborne.