usability introduction slide

Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.

http://usabilitymalaysia.wordpress.comMohd Khairulnizam Md Dahari

USABILITY INTRODUCTIONUSABILITY INTRODUCTION


1. Introduction

2. Web usability fundamental guidelines

3. Evaluation & Testing

4. Usability Practices in MIMOS

Presentation Outline


Usable or Not?



1. Introduction





What is usability?

Characteristics

Effectiveness

How much user can accomplish tasks without error

Learnability

How fast user can learn to use the product & remember it

Efficiency

How fast user can accomplish tasks consistently

Satisfaction

How much does users like to use the product


• Examples: – Printed materials

– Software

– Hardware

– Mobile devices

– Fighter jet

– …

… sky is the limit

Usability coverage

not


What’s wrong here?


Have you ever …

Why usability is important?

Gotten lost in a website?

Left a site without finding information you

wanted?

Waited too long for a page to download?

Gone to a site you can’t view or read?

Visited a website with an outdated information?


Why usability is important?

• People cannot find the information they seek on Web sites about 60% of the time.

- Research by User Interface Engineering, Inc.


Benefits of usability

To users:

• Satisfied & not frustrated with the product

• Enjoy interacting with the product

• Achieve their goals effectively & efficiently

• Cultivate confidence & trust in the product


Benefits of usability

To organizations:

• Reduce development time & cost

• Reduce training effort & user errors

• Increase Return on Investment (ROI)



1. Introduction





“Don’t make me think!”

- Steve Krug


• Which is seems clickable?

Need extra thinking?


• 1, 3, 4, 6, 7, 11 are links

• 2, 5, 8, 9, 10 aren’t

Need extra thinking?


• How designers think users read web pages

How user used the web?


• How users really use the web

– Look for something interesting

– They don’t read, they scan

How user used the web?


• Users won’t read text thoroughly

• First two paragraphs must state the most important information

F-pattern dominates reading behavior


What organizations want…

• Promote latest offer

• Clear out inventory

• Hide information from competitors

• Branding

• Run Adsenses, get paid

User needs VS organization needs



What users really want…

• Get the answer to their questions• Eg: price, product info,

reviews

• Get done, and get out



Sample websites:


Visual hierarchy

Visual hierarchy – Controlling user focusDefinition“Arrangement of elements according to importance and emphasis. Typically, this involves emphasizing certain elements in order to influence the user to look at and interact with a certain item first, another item second, yet another item third, and so on.”Sources: Lisa Graham, The Principles of Interactive Design, 1999How to achieve?Use size, visual weight, color and position to generate contrast and direct the user’s attention.Establish a single large central area for users to complete main tasks


Visual hierarchy

Visual hierarchy – Controlling user focusDefinition:

“Arrangement of elements according to importance and emphasis. Typically, this involves emphasizing certain elements in order to influence the user to look at and interact with a certain item first, another item second, yet another item third, and so on.”

- Sources: Lisa Graham, The Principles of Interactive Design, 1999

How to achieve?

• Use size, visual weight, color and to generate contrast

and direct the user’s attention.

• Establish a single large central area for users to complete main tasks

position


Site Utilities(search / login)

SiteIdentifier

Navigationmenu

Page title

Links

Sub-section title

Image

Footer

Site Banner

Content

Content


Eye test:

Look for `Komuniti Interaktif Rakanbh` link


Banner blindness

• Elements often ignored by users:– Colorful or animated images, text or banners

– Looks like banner advertisement



1. Introduction





• Interviews / observations

• Focus groups

• Heuristic evaluation

• Round-robin reviews

• Paper prototype test

• Usability testing

• Questionnaires

• Group review / walkthrough

• …

Types of usability evaluations


Heuristic evaluation


“If the user can’t find it,

It isn’t there!”


What is Usability testing?


Steps for usability testing


How many users to test?

• Test with 8 users

= 5 defects found



Iteration #1


= 4 defects found



Iteration #2


= 4 defects found



Test with 8 users1 iteration

Test with 6 users2 iterations


Room setups

Observer room Testing room

Observers

User

Facilitator

Subject


• Issues / design that work

• User’s path

• Body language

• Quotes

• Assumption & Conclusion

• Suggestions

• Task execution time

What to capture?



1. Introduction





Usability practices in MIMOS

Design Reviews Heuristic Evaluation

MIMOS UI-Blueprint User testing – Coming soon


Q & A

usability introduction slide

Education