usability introduction slide
TRANSCRIPT
![Page 1: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/1.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
http://usabilitymalaysia.wordpress.comMohd Khairulnizam Md Dahari
USABILITY INTRODUCTIONUSABILITY INTRODUCTION
![Page 2: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/2.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
1. Introduction
2. Web usability fundamental guidelines
3. Evaluation & Testing
4. Usability Practices in MIMOS
Presentation Outline
![Page 3: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/3.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Usable or Not?
![Page 4: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/4.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Presentation Outline
1. Introduction
2. Web usability fundamental guidelines
3. Evaluation & Testing
4. Usability Practices in MIMOS
![Page 5: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/5.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
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
![Page 6: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/6.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
• Examples: – Printed materials
– Software
– Hardware
– Mobile devices
– Fighter jet
– …
… sky is the limit
Usability coverage
not
![Page 7: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/7.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
What’s wrong here?
![Page 8: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/8.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
What’s wrong here?
![Page 9: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/9.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
What’s wrong here?
![Page 10: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/10.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
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?
![Page 11: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/11.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
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.
![Page 12: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/12.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
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
![Page 13: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/13.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Benefits of usability
To organizations:
• Reduce development time & cost
• Reduce training effort & user errors
• Increase Return on Investment (ROI)
![Page 14: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/14.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Presentation Outline
1. Introduction
2. Web usability fundamental guidelines
3. Evaluation & Testing
4. Usability Practices in MIMOS
![Page 15: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/15.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
“Don’t make me think!”
- Steve Krug
![Page 16: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/16.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
• Which is seems clickable?
Need extra thinking?
![Page 17: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/17.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
• 1, 3, 4, 6, 7, 11 are links
• 2, 5, 8, 9, 10 aren’t
Need extra thinking?
![Page 18: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/18.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
• How designers think users read web pages
How user used the web?
![Page 19: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/19.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
• How users really use the web
– Look for something interesting
– They don’t read, they scan
How user used the web?
![Page 20: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/20.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
• Users won’t read text thoroughly
• First two paragraphs must state the most important information
F-pattern dominates reading behavior
![Page 21: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/21.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
What organizations want…
• Promote latest offer
• Clear out inventory
• Hide information from competitors
• Branding
• Run Adsenses, get paid
User needs VS organization needs
![Page 22: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/22.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
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
![Page 23: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/23.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
User needs VS organization needs
Sample websites:
![Page 24: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/24.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
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
![Page 25: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/25.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
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
![Page 26: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/26.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Site Utilities(search / login)
SiteIdentifier
Navigationmenu
Page title
Links
Sub-section title
Image
Footer
Site Banner
Content
Content
![Page 27: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/27.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Eye test:
Look for `Komuniti Interaktif Rakanbh` link
![Page 28: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/28.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Banner blindness
• Elements often ignored by users:– Colorful or animated images, text or banners
– Looks like banner advertisement
![Page 29: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/29.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Presentation Outline
1. Introduction
2. Web usability fundamental guidelines
3. Evaluation & Testing
4. Usability Practices in MIMOS
![Page 30: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/30.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
• Interviews / observations
• Focus groups
• Heuristic evaluation
• Round-robin reviews
• Paper prototype test
• Usability testing
• Questionnaires
• Group review / walkthrough
• …
Types of usability evaluations
![Page 31: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/31.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Heuristic evaluation
![Page 32: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/32.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
“If the user can’t find it,
It isn’t there!”
![Page 33: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/33.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
What is Usability testing?
![Page 34: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/34.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Steps for usability testing
![Page 35: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/35.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
How many users to test?
• Test with 8 users
= 5 defects found
![Page 36: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/36.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
How many users to test?
Iteration #1
• Test with 3 users
= 4 defects found
![Page 37: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/37.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
How many users to test?
Iteration #2
• Test with 3 users
= 4 defects found
![Page 38: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/38.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
How many users to test?
Test with 8 users1 iteration
Test with 6 users2 iterations
![Page 39: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/39.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Room setups
Observer room Testing room
Observers
User
Facilitator
Subject
![Page 40: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/40.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
• Issues / design that work
• User’s path
• Body language
• Quotes
• Assumption & Conclusion
• Suggestions
• Task execution time
What to capture?
![Page 41: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/41.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Presentation Outline
1. Introduction
2. Web usability fundamental guidelines
3. Evaluation & Testing
4. Usability Practices in MIMOS
![Page 42: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/42.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Usability practices in MIMOS
Design Reviews Heuristic Evaluation
MIMOS UI-Blueprint User testing – Coming soon
![Page 43: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/43.jpg)
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.
Q & A
![Page 44: Usability Introduction slide](https://reader034.vdocuments.us/reader034/viewer/2022052116/58ed6d041a28abb0498b4735/html5/thumbnails/44.jpg)
THANK YOU
Kay Rules © 2008 Blog Usability Malaysia. All Rights Reserved.www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.