“Going all the way to the edge is the only way to joltthe user into noticing what you’ve done. If they noticeyou, they’re ...
UsabilityUsability is about the      ease of use of human-made objects.This includes door knobs, spoons, washing machines,...
Web Usability•  Web usability is about making a website easy to use    §  reducing unpleasantry as much as possible    §...
The less a user hasto think aboutmaking a decision,the easier it is forthem to use awebsite.
Coming next in the slides…      Some guiding principles w.r.tWeb Usability as outlined by Krug in his book
First law of web usabilityDON’T MAKE ME THINK
The rule basically boils down tomaking things self-evident Examples: if its a button make it look like onedoesnt look like...
AffordancesTo help emphasize the “Dont Make Me Think” rule, try to always thinkabout affordances, which is a quality of an o...
No. 2HOW WE REALLYUSE THE WEB
We don’t read. We scan.  §    Our attention spans are not that great  §    Were always in a hurry  §    Were selective ...
We satisficeWhen given options we choose thefirst immediately reasonable optionwithout giving much thought. Wedont consider ...
We muddle through§    We dont figure out how things work§    We dont usually read all instructions§    We make assumptio...
Designing pages for scanning, not readingBILLBOARD DESIGN 101
Since we have established that people dont read but merelyscan pages, click around, and make assumptions, here are somegui...
No. 4ANIMAL, VEGETABLEOR MINERAL
It doesnt matter how many times I have to click, aslong as each click is a mindless, unambiguous choice.•  Number of click...
No. 5OMIT NEEDLESS WORDS
Omit needless words•  Get rid of half of the words on each page, then get   rid of half of whats left.•  Cut down Happy Ta...
No. 6DESIGNING NAVIGATION
Designing Navigation•    Navigation should be consistent•    Inform the user of where they are•    Inform the user of how ...
No. 7DESIGNING THE HOMEPAGE
Designing the homepage              Define the identity and purpose of              your website              •  have a log...
No. 8THE FARMER AND THE COWMANSHOULD BE FRIENDS
Common Web design team arguments...Were all web users, ergo personal preferences.•  We tend to think that all Web users ar...
No. 9USABILITY TESTING ON10 CENTS A DAY
Focus groups VS usability tests §  Testing with outsiders is important §  Focus groups are good for getting initial feed...
No. 10USABILITY AS COMMONCOURTESY
The reservoir of goodwillEvery person has a reservoir of goodwill towards a brand - Making sure thisreservoir is full is i...
Types of usability testing•  Heuristic Evaluation (inspection)•  Prototype Testing (testing)•  Card Sorting  (testing)•  U...
prototype-­‐interac,ve.com	  
Web Usability July 2011
Upcoming SlideShare
Loading in …5
×

Web Usability July 2011

1,816 views

Published on

Web usability is about making a website easy to use and this presentation is from our workshop on the topic based on Steve Krug's book don't make me think.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,816
On SlideShare
0
From Embeds
0
Number of Embeds
68
Actions
Shares
0
Downloads
43
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Web Usability July 2011

  1. 1. “Going all the way to the edge is the only way to joltthe user into noticing what you’ve done. If they noticeyou, they’re one step closer to talking about you.” — SETH GODIN
  2. 2. UsabilityUsability is about the ease of use of human-made objects.This includes door knobs, spoons, washing machines,and websites too.
  3. 3. Web Usability•  Web usability is about making a website easy to use §  reducing unpleasantry as much as possible §  It’s not about fancy designs and shiny buttons, but about practical & efficient design.•  A good web design should allow the users to get to what they want from the website as quickly and painlessly as possible.  Steve Krug, author of  "Dont Make Me Think", the most highly recommended book on Web usability, outlines his first law of Web usability: "Dont Make Me Think"
  4. 4. The less a user hasto think aboutmaking a decision,the easier it is forthem to use awebsite.
  5. 5. Coming next in the slides… Some guiding principles w.r.tWeb Usability as outlined by Krug in his book
  6. 6. First law of web usabilityDON’T MAKE ME THINK
  7. 7. The rule basically boils down tomaking things self-evident Examples: if its a button make it look like onedoesnt look like a button this maybe a button this looks like a button If its a title, make it short, eloquent and to-the-point. Instead of naming a link Gallery of Photographic Items, call it Photos. Requires less thinking from your user
  8. 8. AffordancesTo help emphasize the “Dont Make Me Think” rule, try to always thinkabout affordances, which is a quality of an object that gives the user a clueon how it functions or should be used.If something looks like… …a knob – you could probably turn it …a glass – you could probably break it …and if it looks like a search box – you can type something in it!
  9. 9. No. 2HOW WE REALLYUSE THE WEB
  10. 10. We don’t read. We scan. §  Our attention spans are not that great §  Were always in a hurry §  Were selective about what we want §  We know whats important to us
  11. 11. We satisficeWhen given options we choose thefirst immediately reasonable optionwithout giving much thought. Wedont consider all available options.
  12. 12. We muddle through§  We dont figure out how things work§  We dont usually read all instructions§  We make assumptions – click around, and fill out boxes without really considering implications or accuracy of our actions or how things really workExample:Yahoos search box – a survey revealed that people used to typeWeb addresses into Yahoos search box and it took them to theirdesired location. They never considered that it was wrong orchanged how they accessed website because it simply worked.To them, Yahoo was the Internet!
  13. 13. Designing pages for scanning, not readingBILLBOARD DESIGN 101
  14. 14. Since we have established that people dont read but merelyscan pages, click around, and make assumptions, here are someguidelines on designing for usability:Create a clear visual hierarchy §  Examples: Prominence. Grouping (visual-logical connection). §  Nesting.Take advantage of conventions §  Dont be too smartBreak pages up into clearly defined areasMake it obvious whats clickableMinimize noise (busy-ness and background noise)
  15. 15. No. 4ANIMAL, VEGETABLEOR MINERAL
  16. 16. It doesnt matter how many times I have to click, aslong as each click is a mindless, unambiguous choice.•  Number of clicks VS click difficulty•  Three easy clicks equal one difficult click•  Users should not have to read endless instructions in order to find what they are looking for:
  17. 17. No. 5OMIT NEEDLESS WORDS
  18. 18. Omit needless words•  Get rid of half of the words on each page, then get rid of half of whats left.•  Cut down Happy Talk & Instructions!•  Benefits: –  easier to get to important content –  saves time –  makes the website more organized –  makes the website more approachable
  19. 19. No. 6DESIGNING NAVIGATION
  20. 20. Designing Navigation•  Navigation should be consistent•  Inform the user of where they are•  Inform the user of how they got to where they are•  Define the bounds and whats available on the website in terms of content.
  21. 21. No. 7DESIGNING THE HOMEPAGE
  22. 22. Designing the homepage Define the identity and purpose of your website •  have a logo •  have a tag line What the website is about should be immediately obvious to the user. Important content should always be placed in the home page in a concise manner. The homepage should provide easy access to all other parts of the website.
  23. 23. No. 8THE FARMER AND THE COWMANSHOULD BE FRIENDS
  24. 24. Common Web design team arguments...Were all web users, ergo personal preferences.•  We tend to think that all Web users are like us.•  Every person on the team has a different opinion on what makes a good design good, according to their own professional inclinations.•  Hype culture VS craft culture –  Upper management, business development, etc. VS programmers and designers. The burden of executing promises provided by the hyper culture falls down to the craft culture.•  Myth of the average user –  Every person is unique in their behavior.•  Antidote to debates: testing. –  Asking whether most people like something is not the right approach to the solution. The question needs to be more contextual and relevant to the problem at hand and the intended target audience.
  25. 25. No. 9USABILITY TESTING ON10 CENTS A DAY
  26. 26. Focus groups VS usability tests §  Testing with outsiders is important §  Focus groups are good for getting initial feedback on abstract notions such as concept and feasibility of the website §   Little testing is better than no testing §  Testing early is better than testing late §  Testing early & often is more important than the type of users §  Testing is about getting informed insight §  Testing is iterativeHow to do testing the affordable way§  All that is needed is a PC, a person to conduct the test, a consenting test subject and some timeMeasuring results§  Implement feedback (taken in the form of notes and actual logged usage) from the users and then perform more tests
  27. 27. No. 10USABILITY AS COMMONCOURTESY
  28. 28. The reservoir of goodwillEvery person has a reservoir of goodwill towards a brand - Making sure thisreservoir is full is important.Decreasing goodwillHiding information, forcing users to your ways, asking for too muchinformation, fake niceties, making the user wait through splashes or intros,looking sloppy and unprofessional.Increasing goodwillMake the things people want to do on your site obvious, be honest andgenerous with information, make my life easier, put effort, have a FAQsection, make errors recoverable, inform and apologize to the user if youcant help them.
  29. 29. Types of usability testing•  Heuristic Evaluation (inspection)•  Prototype Testing (testing)•  Card Sorting  (testing)•  Usability Testing (testing)•  Logging Actual Use (inquiry)•  Focus Groups (inquiry) ...and many more!
  30. 30. prototype-­‐interac,ve.com  

×