0
<ul><li>http://usabilitymalaysia.wordpress.com </li></ul><ul><li>Mohd Khairulnizam Md Dahari </li></ul><ul><li>USABILITY I...
<ul><li>1. Introduction </li></ul><ul><li>2. Web usability fundamental guidelines </li></ul><ul><li>3. Evaluation & Testin...
Usable or Not? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
Presentation Outline <ul><li>1. Introduction </li></ul><ul><li>2. Web usability fundamental guidelines </li></ul><ul><li>3...
What is usability? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. Characteristics Effectiveness How much user can ...
<ul><li>Examples:  </li></ul><ul><ul><li>Printed materials </li></ul></ul><ul><ul><li>Software  </li></ul></ul><ul><ul><li...
What’s wrong here? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
What’s wrong here? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
What’s wrong here? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
<ul><li>Have you ever … </li></ul>Why usability is important? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. Gotte...
Why usability is important? <ul><li>People  cannot find  the information they seek on Web sites about  60%  of the time.  ...
Benefits of usability <ul><li>To users: </li></ul><ul><li>Satisfied  & not frustrated with the product </li></ul><ul><li>E...
Benefits of usability <ul><li>To organizations: </li></ul><ul><li>Reduce   development   time & cost </li></ul><ul><li>Red...
Presentation Outline <ul><li>1. Introduction </li></ul><ul><li>2. Web usability fundamental guidelines </li></ul><ul><li>3...
<ul><li>“ Don’t make me think!” </li></ul><ul><li>- Steve Krug </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Rese...
<ul><li>Which is seems clickable? </li></ul>Need extra thinking? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
<ul><li>1, 3, 4, 6, 7, 11 are links </li></ul><ul><li>2, 5, 8, 9, 10 aren’t  </li></ul>Need extra thinking? www.mimos.my ©...
<ul><li>How designers think users read web pages </li></ul>How user used the web? www.mimos.my © 2008 MIMOS Berhad. All Ri...
<ul><li>How users really use the web </li></ul><ul><ul><li>Look for something interesting </li></ul></ul><ul><ul><li>They ...
<ul><li>Users won’t read text thoroughly </li></ul><ul><li>First two paragraphs must state the most important information ...
<ul><li>What organizations want… </li></ul><ul><li>Promote latest offer </li></ul><ul><li>Clear out inventory </li></ul><u...
User needs VS organization needs www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. <ul><li>What users really want… </...
User needs VS organization needs <ul><li>Sample websites: </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
Visual hierarchy www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. Visual hierarchy – Controlling user focus Definiti...
Visual hierarchy <ul><li>Visual hierarchy – Controlling user focus </li></ul><ul><li>Definition: </li></ul><ul><li>“ Arran...
www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. Site Utilities (search / login) Site Identifier Navigation menu Pag...
Eye test:  Look for `Komuniti Interaktif Rakanbh` link www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
Banner blindness <ul><li>Elements often ignored by users: </li></ul><ul><ul><li>Colorful or animated images, text or banne...
Presentation Outline <ul><li>1. Introduction </li></ul><ul><li>2. Web usability fundamental guidelines </li></ul><ul><li>3...
<ul><li>Interviews / observations </li></ul><ul><li>Focus groups </li></ul><ul><li>Heuristic evaluation </li></ul><ul><li>...
Heuristic evaluation www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
<ul><li>“ If the user can’t find it,  </li></ul><ul><li>It isn’t there!” </li></ul>www.mimos.my © 2008 MIMOS Berhad. All R...
What is Usability testing? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
Steps for usability testing www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
How many users to test? <ul><li>Test with 8 users </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. =  5 de...
How many users to test? <ul><li>Iteration #1 </li></ul><ul><li>Test with 3 users </li></ul>www.mimos.my © 2008 MIMOS Berha...
How many users to test? <ul><li>Iteration #2 </li></ul><ul><li>Test with 3 users </li></ul>www.mimos.my © 2008 MIMOS Berha...
How many users to test? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. Test with 8 users 1 iteration Test with 6 u...
Room setups www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. Observer room Testing room Observers User Facilitator S...
<ul><li>Issues / design that work </li></ul><ul><li>User’s path </li></ul><ul><li>Body language </li></ul><ul><li>Quotes <...
Presentation Outline <ul><li>1. Introduction </li></ul><ul><li>2. Web usability fundamental guidelines </li></ul><ul><li>3...
Usability practices in MIMOS www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. Design Reviews Heuristic Evaluation MI...
<ul><li>Q & A </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
Upcoming SlideShare
Loading in...5
×

Usability Introduction slide

4,530

Published on

See my blog at:
http://usabilitymalaysia.wordpress.com

Published in: Education, Technology, Design
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,530
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Usability Introduction slide"

  1. 1. <ul><li>http://usabilitymalaysia.wordpress.com </li></ul><ul><li>Mohd Khairulnizam Md Dahari </li></ul><ul><li>USABILITY INTRODUCTION </li></ul>USABILITY INTRODUCTION
  2. 2. <ul><li>1. Introduction </li></ul><ul><li>2. Web usability fundamental guidelines </li></ul><ul><li>3. Evaluation & Testing </li></ul><ul><li>4. Usability Practices in MIMOS </li></ul>Presentation Outline www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  3. 3. Usable or Not? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  4. 4. Presentation Outline <ul><li>1. Introduction </li></ul><ul><li>2. Web usability fundamental guidelines </li></ul><ul><li>3. Evaluation & Testing </li></ul><ul><li>4. Usability Practices in MIMOS </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  5. 5. What is usability? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. 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
  6. 6. <ul><li>Examples: </li></ul><ul><ul><li>Printed materials </li></ul></ul><ul><ul><li>Software </li></ul></ul><ul><ul><li>Hardware </li></ul></ul><ul><ul><li>Mobile devices </li></ul></ul><ul><ul><li>Fighter jet </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>… sky is the limit </li></ul></ul>Usability coverage www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. not
  7. 7. What’s wrong here? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  8. 8. What’s wrong here? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  9. 9. What’s wrong here? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  10. 10. <ul><li>Have you ever … </li></ul>Why usability is important? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. 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?
  11. 11. Why usability is important? <ul><li>People cannot find the information they seek on Web sites about 60% of the time. </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. - Research by User Interface Engineering, Inc.
  12. 12. Benefits of usability <ul><li>To users: </li></ul><ul><li>Satisfied & not frustrated with the product </li></ul><ul><li>Enjoy interacting with the product </li></ul><ul><li>Achieve their goals effectively & efficiently </li></ul><ul><li>Cultivate confidence & trust in the product </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  13. 13. Benefits of usability <ul><li>To organizations: </li></ul><ul><li>Reduce development time & cost </li></ul><ul><li>Reduce training effort & user errors </li></ul><ul><li>Increase Return on Investment ( ROI ) </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  14. 14. Presentation Outline <ul><li>1. Introduction </li></ul><ul><li>2. Web usability fundamental guidelines </li></ul><ul><li>3. Evaluation & Testing </li></ul><ul><li>4. Usability Practices in MIMOS </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  15. 15. <ul><li>“ Don’t make me think!” </li></ul><ul><li>- Steve Krug </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  16. 16. <ul><li>Which is seems clickable? </li></ul>Need extra thinking? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  17. 17. <ul><li>1, 3, 4, 6, 7, 11 are links </li></ul><ul><li>2, 5, 8, 9, 10 aren’t </li></ul>Need extra thinking? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  18. 18. <ul><li>How designers think users read web pages </li></ul>How user used the web? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  19. 19. <ul><li>How users really use the web </li></ul><ul><ul><li>Look for something interesting </li></ul></ul><ul><ul><li>They don’t read, they scan </li></ul></ul>How user used the web? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  20. 20. <ul><li>Users won’t read text thoroughly </li></ul><ul><li>First two paragraphs must state the most important information </li></ul>F-pattern dominates reading behavior www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  21. 21. <ul><li>What organizations want… </li></ul><ul><li>Promote latest offer </li></ul><ul><li>Clear out inventory </li></ul><ul><li>Hide information from competitors </li></ul><ul><li>Branding </li></ul><ul><li>Run Adsenses, get paid </li></ul>User needs VS organization needs www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  22. 22. User needs VS organization needs www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. <ul><li>What users really want… </li></ul><ul><li>Get the answer to their questions </li></ul><ul><ul><li>Eg: price, product info, reviews </li></ul></ul><ul><li>Get done, and get out </li></ul>
  23. 23. User needs VS organization needs <ul><li>Sample websites: </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  24. 24. Visual hierarchy www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. Visual hierarchy – Controlling user focus Definition “ 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 position to generate contrast and direct the user’s attention. Establish a single large central area for users to complete main tasks
  25. 25. Visual hierarchy <ul><li>Visual hierarchy – Controlling user focus </li></ul><ul><li>Definition: </li></ul><ul><li>“ 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.” </li></ul><ul><li>- Sources: Lisa Graham, The Principles of Interactive Design, 1999 </li></ul><ul><li>How to achieve? </li></ul><ul><li>Use size , visual weight , color and to generate contrast and direct the user’s attention. </li></ul><ul><li>Establish a single large central area for users to complete main tasks </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. position
  26. 26. www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. Site Utilities (search / login) Site Identifier Navigation menu Page title Links Sub-section title Image Footer Site Banner Content Content
  27. 27. Eye test: Look for `Komuniti Interaktif Rakanbh` link www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  28. 28. Banner blindness <ul><li>Elements often ignored by users: </li></ul><ul><ul><li>Colorful or animated images, text or banners </li></ul></ul><ul><ul><li>Looks like banner advertisement </li></ul></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  29. 29. Presentation Outline <ul><li>1. Introduction </li></ul><ul><li>2. Web usability fundamental guidelines </li></ul><ul><li>3. Evaluation & Testing </li></ul><ul><li>4. Usability Practices in MIMOS </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  30. 30. <ul><li>Interviews / observations </li></ul><ul><li>Focus groups </li></ul><ul><li>Heuristic evaluation </li></ul><ul><li>Round-robin reviews </li></ul><ul><li>Paper prototype test </li></ul><ul><li>Usability testing </li></ul><ul><li>Questionnaires </li></ul><ul><li>Group review / walkthrough </li></ul><ul><li>… </li></ul>Types of usability evaluations www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  31. 31. Heuristic evaluation www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  32. 32. <ul><li>“ If the user can’t find it, </li></ul><ul><li>It isn’t there!” </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  33. 33. What is Usability testing? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  34. 34. Steps for usability testing www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  35. 35. How many users to test? <ul><li>Test with 8 users </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. = 5 defects found
  36. 36. How many users to test? <ul><li>Iteration #1 </li></ul><ul><li>Test with 3 users </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. = 4 defects found
  37. 37. How many users to test? <ul><li>Iteration #2 </li></ul><ul><li>Test with 3 users </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. = 4 defects found
  38. 38. How many users to test? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. Test with 8 users 1 iteration Test with 6 users 2 iterations
  39. 39. Room setups www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. Observer room Testing room Observers User Facilitator Subject
  40. 40. <ul><li>Issues / design that work </li></ul><ul><li>User’s path </li></ul><ul><li>Body language </li></ul><ul><li>Quotes </li></ul><ul><li>Assumption & Conclusion </li></ul><ul><li>Suggestions </li></ul><ul><li>Task execution time </li></ul>What to capture? www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  41. 41. Presentation Outline <ul><li>1. Introduction </li></ul><ul><li>2. Web usability fundamental guidelines </li></ul><ul><li>3. Evaluation & Testing </li></ul><ul><li>4. Usability Practices in MIMOS </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  42. 42. Usability practices in MIMOS www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved. Design Reviews Heuristic Evaluation MIMOS UI-Blueprint User testing – Coming soon
  43. 43. <ul><li>Q & A </li></ul>www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  44. 44. www.mimos.my © 2008 MIMOS Berhad. All Rights Reserved.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×