Title: SYSTEM DEVELOPMENT METHODS
153901 SYSTEM DEVELOPMENT METHODS Session
8 Teddy So tkkso_at_graduate.hku.hk
2(No Transcript)
3Accessibility "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
4Accessibility 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
5In 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
7Standards W3C Web Accessibility
Initiative USA Section 508 UK Part
IV of the Disability Discrimination Act
1995 Special Educational Needs and Disability
Act 2001
8Examples 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 )
13Assistive 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
14Screen Magnifier ( Software )
15- Checking Accessibility Compliance
- Available in Dreamweaver MX version
- http//www.usablenet.com
- http//webable.com
- http//www.cast.org/bobby/
16Example ?????????????? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? , ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? , ? ? 26
? ? ? ? ? ? ? ? ? , ? ? ? ? ? ? ? ? ? ? , ? ? ? ?
? ? ? , ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? Oct. 27, 2002 Ming Pao
Newspaper
17Hong Kong Web Care ??????? http//www.iproa.org/we
bcare/
18Web 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/
19W3C Web Accessibility Initiative
http//www.w3.org/WAI/
20IBM Web Accessibility Center http//www-3.ibm.com/
able/
21Blindness Resources Center http//www.nyise.org/ac
cess.htm
22American Council of the Blind http//www.acb.org/r
esources/index.html
23Overview 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
24Overview (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
25Dimensions
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
26Dimensions
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
27What 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
28Maximum 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
29How 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
30Content 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.
31Images 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
32Download 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
33To 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
34To 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
35Caution
- 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
- ???
36Caution
- Exception cases
- Timelines
37Navigation 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
38Direct 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?
39Color 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
40Use 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
41Ensure 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
42T
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
43Consistency
- 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
44Conclusion
- 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.
45Bad 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
46Reference
- Holmes, M. (2002). Web Usability navigation A
beginners guide. Osborne.