Part IV: What is
Web Usability?
CITA 03 Workshop 16 July 2003
Syahrul Nizam Janaini
Faculty of Computer Science and
Information Technology
UNIMAS
syahruln@fit.unimas.my

What is Web Usability?
 Refers to the degree of ease with which users can
complete various tasks using a web site interface
with which they are unfamiliar.
 The measure of the quality of the user's experience
when interacting with a web site.
 A usable web site is one that enables users to
complete tasks quickly, easily, and pleasantly.
 All about ensuring that visitors can do everything
they are supposed to do

Why Web Usability?
 More than 100 millions site
 Why user should waste time on confusing, slow,
unsatisfying site?
 In product design, costumer pay first, experience
usability later
 On web usability, user experience usability first and
pay later
 After this workshop, ready to take action!

5 Aspects of Usability
 Ease of learning
 Efficiency of use
 Memorability
 Error frequency and severity
 Subjective satisfaction

Common usability problems
 Problem: the inability to quickly locate information
on a web site
 Likely cause(s):
(a) badly-designed navigation
(b) site architecture inappropriate
(c) no readily-accessible search facility
(d) poor page layout/use of screen real estate
(e) broken link(s)
(f) information that is out of date

Screen Real Estate
 Content should dominate (50-80%)
 Navigation (<20%)
 Use whitespace to group information
 Simplicity always win over complexity
 Every 5 bytes save = 1 milisecond less download
time

Response Time
 10 seconds (limit for keeping user’s attention)
 To improve speed
 Remove graphics, increase traffic! Simple ?!
 Only use graphics image/multimedia for
increasing user’s understanding of text.
 Use colour table, different font
 Don’t use image-type text
 Use multiple occurrence of image/logo
 Use thumbnail view
 34 KB size (modem user)

Linking
 Avoid click here syndrom!
For additional info on our product, click here.
It is better to say
… for additional info of our product.

Writing for the web
 Edit the text
 Keep it short
 Scanability first
 Use plain language
 Page chunking
 Limit use of within page links

Image Editing and Animation
 Resize image
 Crop image
 Use animation for
 Showing continuity in transitions
 Illustrating change over time
 Enriching graphical representation

Navigation
 3 fundamental question
 Where am I?
 Where have I been?
 Where can I go?
 3 solutions
 Include logo on every page (rule no 1)
 Standard visited link colour
 Underline text (blue)
 Use breadcrumbs
 All other pages are “1-click-away” from homepage

Search
 Visible white box on top half of page
 Easily available from other page
 Search link from other page

Why Usability Testing?
 Usability testing is the only way of ensuring a usable
interface.
 Using known usability design principles will reduce
the likelihood of usability problems, but designers
are not users!
Users have an infinite potential for making
unexpected misinterpretations of interface
elements and for performing their job in a different
way than you imagine.
 Jakob Nielsen Usability Engineering, p. 10.

Type of Testing
 heuristic evaluation
 walkthroughs
 user testing

Homepage Role
 Magazine cover
 Face to the world
 Building lobby
 Organization receptionist
 Book table of contents
 Newspaper front page
 brochure

Basic Page Layout
 Page Width
 Optimal display at 770 px
 Liquid Vs Frozen
 Suits monitor size
 Print well on A4 paper
 Page Length
 Don’t cram everything on a single screen
 Frames
 Can’t print frame appropriately

Fundemental Design Elements
 Logo
 Must-have feature (answer “where I am?”
question)
 Upper left corner
 Link that leads to the homepage
 Search
 “a box” that the user can type a query.
 Placement: Upper right part.
 Use “Search” or “Go”
 White colour
 25-30 characters width

Navigation
 4 common schemes
 Left Navigation rail
 Tabs
 Links across the top
 Categories in the middle of the page.
 Site Map
 If huge amount of data can be listed as index
 Routing/Splash page
 Homepage is the first page!
 Annoyance
 Immediate access please!

Frequent Features
 About Us
 Most trust-enhancing element
 Use “About <your_organization”
 Contact Info
 “Contact Us” link
 Job Openings
 Include under “About Us”
 Use “jobs”

Graphics and Multimedia
 Pictures
 Less than 8% of screen (size matters!)
 ALT text
 Beneficial for visually impaired user
 Print well on A4 paper
 Music
 Avoid automatic-playing music
 Animation
 No flying/rotating logo please!

Typography
 Body text and background Colors
 Black (text) on white (background)
 Achieve maximum contrast
 Link Formatting
 Blue undelined important cue, “ Hey! it is
clickable!”
 Visited link answers “Where have I been?”
question

Homepage feature
 3 must-have features
 Site’s directory/navigation
 News/promotions/highlight
 Search feature
 To answer 3 questions
 What the site is about?
 What info they want me to know?
 Find what they want first time

Recommended Homepage Design
 Essential Recommendation
Issue Recommended Design
Download time < 10 seconds
Frame No
Logo Placement Upper left
Search Placement Upper part
Search box color White
Splash page No

Recommended Homepage Design
 Essential Recommendation
Issue Recommended Design
About the company Must be included
Privacy Policy Include if collect data from user
Auto-playing music No
Frozen text size body No
Different link colour Visited/unvisited

Recommended Homepage Design
 Strong Recommendation
Issue Recommended Design
Page Width 770px (620 – 1024px)
Body layout Liquid
Page length 1 to 2 full screens, < 3 screens
Logo Size 80 x 68 pixel
Search button Name it “Search/Go”
Search box width 25-30 characters

Recommended Homepage Design
 Strong Recommendation
Issue Recommended Design
Search type Simple
navigation Left-hand rail/tabs/toplink/catgr
Site Map link “Site Map”
Routing Page No
About link “About name-of-org”
Contact Info “Contact Us”

Recommended Homepage Design
 Strong Recommendation
Issue Recommended Design
Privacy link “Privacy Policy”
Job Openings Under about us “jobs”
Help placement Upper right
Animation No
Advertising Max 3 ads
Body text colour Black

Recommended Homepage Design
 Strong Recommendation
Issue Recommended Design
Background Colour White
Unvisited Link Blue
Link Underlining Yes

Recommended Homepage Design
 Default Recommendation
Issue Recommended Design
Footer Navig. Link Footnote style (< 7 items)
Sign-in “account/sign in” – if protected
Help No (unless too complex)
Graphics/Anim 5-15% of whole space
Body text font Sans-serif
Body text size 12 pt
Link colour, visited Purple

Vital resources
 Jakob Nielsen, Alertbox
www.useit.com/alertbox
 Keith Instone, Usable Web
www.usableweb.com
 Bruce Tognazzini, Ask Tog
www.asktog.com
 John S. Rhodes, Webword
www.webword.com