0
Usability for the Web
Making Your Sites More Awesomer

          by Jen Riehle




                                  1
What is usability?


Usability is the absence of
frustration.
The user can use the product to do what
they want, the way t...
What is usability?




                     2
Elements of Usability


               Usefulness

               Effectiveness

               Learnability (...and Memor...
What usability isn’t


            Accessibility
            Accessibility is having access to the
            things one ...
What usability isn’t
    webpagesthatsuck.com; 2009




 http://www.belladesoto.us/

 http://www.georgehutchins.com/

 htt...
Usability Testing:
                    Early Development

               Parallel Design with rapid
               prototy...
Usability Testing:
                     Mid-Development


               Focus Groups or subjects-in-tandem

             ...
Usability Testing:
                     Late Development


               Cognitive walkthrough

               Benchmarki...
More Testing Tips
                Test your users

                Test the right pages, not the easy
                page...
Benefits

Reduced long-term development costs

Reduced support costs

Increased user efficiency

Increased user satisfacti...
Let’s give it a shot...


Let’s try a five-second
usability test, shall we?
See what you can remember about this
website a...
12
Five Second Test

                What did you see?
                General impressions?


                http://fiveseco...
Why is pretty > usable?

If design were ruled by aesthetics
the world would be prettier but less
comfortable; if ruled by ...
Why is pretty > usable?


                “pretty” wins awards

                Designers like “pretty”

                C...
What do the studies say?


              Fitt’s Law: model of human movement-
              don’t make ‘em move too far to...
What do the studies say?


 3-Click Rule: new sites get three
 clicks to find content

 2-Second Rule: response time expec...
Knowledge



Knowledge in the world

Knowledge in the head




                         18
19

Knowledge in the head is also instinctual.
Knowledge in the head


Natural mapping

Visual connections

Constraints

Affordances




                        20
Natural Mapping




                                       21

Web examples:
- form text
- text with related images
Natural Mapping




                                       21

Web examples:
- form text
- text with related images
Visual Connections




                                                                                                   ...
Constraints



           Limitations or restrictions we must
           work with to complete our tasks




             ...
Constraints




                                                                                                    23

Ca...
Constraints

                Industry-imposed (design standards)

                Client-imposed (“I like rainbows”)

    ...
Affordances


            Possibilities which are perceivable by
            a user based on their goals, beliefs,
       ...
Affordances


            Possibilities which are perceivable by
            a user based on their goals, beliefs,
       ...
Affordances
               Search

               Footer

               Header links home

               Something under...
The Facts of Life
               We want a search tool

               We ignore banners and ads

               We don’t ...
Designing for Error

               Minimize the common causes of error

               Make it easy to discover errors ea...
Common Web Application
                     Mistakes

               Inconsistent icons, controls, naming
               c...
Common Info Architecture
                  Mistakes

              Search and site structure not
              integrated
...
Common Mobile Website
       Mistakes

Not having one

Not designing for the mobile platform

Not testing on multiple devi...
Common Form Mistakes

               Using the wrong input for the task

               Not enough room to type

         ...
Common Web Design
                               Mistakes

                 No search/ bad search

                 Not ch...
Usability Maxims




Know the user. You are not the user.




                                       34
Usability Maxims




Know the user. You are not the user.




                                       34
Usability Maxims



           Things that look the same should act
           the same.




                             ...
Usability Maxims



           Things that look the same should act
           the same.




                             ...
Usability Maxims



Make the information available in
simple, natural, logical ways.




                                 ...
Usability Maxims



Make the information available in
simple, natural, logical ways.




                                 ...
Usability Maxims



Everyone makes mistakes so every
mistake should be fixable. Quickly.




                             ...
Usability Maxims



Everyone makes mistakes so every
mistake should be fixable. Quickly.




                             ...
Usability Maxims



The user should always know what’s
happening.




                                     38
Usability Maxims



The user should always know what’s
happening.




                                     38
Usability Maxims



Keep it simple. Don’t overload the
users’ buffers.




                                     39
Usability Maxims



Keep it simple. Don’t overload the
users’ buffers.




                                     39
Usability Maxims



            Eliminate unnecessary decisions and
            illuminate the rest.




                 ...
Questions?
   Thanks!




             41
Upcoming SlideShare
Loading in...5
×

Web Usability: Making Your Sites More Awesomer

1,326

Published on

Presentation given to NC State University web designers. Usability overview.

This includes presenter notes.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,326
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Web Usability: Making Your Sites More Awesomer"

  1. 1. Usability for the Web Making Your Sites More Awesomer by Jen Riehle 1
  2. 2. What is usability? Usability is the absence of frustration. The user can use the product to do what they want, the way they want, without hinderance, hesitation or questions. 2
  3. 3. What is usability? 2
  4. 4. Elements of Usability Usefulness Effectiveness Learnability (...and Memorability) Satisfaction 3 “Intuitive” is a word used for usable site- synonymous with “learnable”
  5. 5. What usability isn’t Accessibility Accessibility is having access to the things one needs to complete tasks. Accessibility helps facilitate usability. 4 NOT talking about “accessibility” as in 508 compliance.
  6. 6. What usability isn’t webpagesthatsuck.com; 2009 http://www.belladesoto.us/ http://www.georgehutchins.com/ http://www.historianofthefuture.com/ 5
  7. 7. Usability Testing: Early Development Parallel Design with rapid prototyping Task Analysis Activity Analysis Tree-testing and card-sorting 6 First two done by designer; last two done with test participants
  8. 8. Usability Testing: Mid-Development Focus Groups or subjects-in-tandem Questionnaires/ Surveys Advanced Usability Testing 7 May record their faces, the screen, mouse movement, eye movement, etc. to collect data Monitor the user while they do tasks. Preferably done remotely, in the participants natural habitat.
  9. 9. Usability Testing: Late Development Cognitive walkthrough Benchmarking Questionnaires/ Surveys 8 Cognitive walkthrough - verbalization of interaction with the site- preferably done with users new to the site/ product. Benchmarking - measure: 1. time to do tasks 2. time to fix errors 3. time to learn 4. general site functionality; can be used to compare to other sites
  10. 10. More Testing Tips Test your users Test the right pages, not the easy pages Get the most accurate results possible Don’t take too long Don’t judge the user You don’t have to test 100’s of people! 9 Users. Not the client. Designers do not give the test. Based on location and collect as much data as possible If the product doesn’t work it’s your fault, not theirs. 5 test participants will find 80% of your problems; from there adding people might reinforce your data but probably won’t find a whole lot of new issues All this takes time and, if done properly it takes money
  11. 11. Benefits Reduced long-term development costs Reduced support costs Increased user efficiency Increased user satisfaction 10
  12. 12. Let’s give it a shot... Let’s try a five-second usability test, shall we? See what you can remember about this website after 5 seconds. 11
  13. 13. 12
  14. 14. Five Second Test What did you see? General impressions? http://fivesecondtest.com/ 13 Is it pretty?
  15. 15. Why is pretty > usable? If design were ruled by aesthetics the world would be prettier but less comfortable; if ruled by usability it would be simple but boring. Perception that prettier things are easier to use and better quality Simple design does not mean simple to use 14
  16. 16. Why is pretty > usable? “pretty” wins awards Designers like “pretty” Clients like “pretty” “pretty” makes us happy and we want to come back 15 Designers spend a lot of time looking at their website and they want it to be pretty. That time with the site can allow otherwise obvious usability issues to be easily over-looked Clients like pretty but they’re not always the target audience and often suffer from the same usability blindness the designers have Remember, one element of usability is satisfaction. A user won’t use your site if they don’t like it.
  17. 17. What do the studies say? Fitt’s Law: model of human movement- don’t make ‘em move too far to get to those links Inverted Pyramid: Put the conclusion at the beginning of the content- let people know what you’re writing about 16 We’re lazy!
  18. 18. What do the studies say? 3-Click Rule: new sites get three clicks to find content 2-Second Rule: response time expected of a click 7+/-2 Principle 17
  19. 19. Knowledge Knowledge in the world Knowledge in the head 18
  20. 20. 19 Knowledge in the head is also instinctual.
  21. 21. Knowledge in the head Natural mapping Visual connections Constraints Affordances 20
  22. 22. Natural Mapping 21 Web examples: - form text - text with related images
  23. 23. Natural Mapping 21 Web examples: - form text - text with related images
  24. 24. Visual Connections 22 Connections we make unconsciously based on the position, color, shape, design of an object or collection of objects
  25. 25. Constraints Limitations or restrictions we must work with to complete our tasks 23 Can be used intentionally, for example to help someone know how open a door properly (push/pull). Can also be used poorly- a handle on the right side of a coffee mug makes lefties mad
  26. 26. Constraints 23 Can be used intentionally, for example to help someone know how open a door properly (push/pull). Can also be used poorly- a handle on the right side of a coffee mug makes lefties mad
  27. 27. Constraints Industry-imposed (design standards) Client-imposed (“I like rainbows”) University-imposed (campus branding) And many others... 24 Site-specific constraints Ex.the type of site you’re on makes “Horticulture” mean different things Browser constraints; Skill constraints
  28. 28. Affordances Possibilities which are perceivable by a user based on their goals, beliefs, values and past experiences. 25 Possibilities which are readily perceivable by a user based on their goals, plans, values, beliefs and past experience
  29. 29. Affordances Possibilities which are perceivable by a user based on their goals, beliefs, values and past experiences. What do you expect out of your webpages? 25 Possibilities which are readily perceivable by a user based on their goals, plans, values, beliefs and past experience
  30. 30. Affordances Search Footer Header links home Something underlined is a link Login link in the upper right-hand corner 26 Our expectations of a website based on past experience We get frustrated when things aren’t there or don’t behave as expected.
  31. 31. The Facts of Life We want a search tool We ignore banners and ads We don’t read pages, we scan them We don’t read instructions, we muddle through We don’t choose best option, we choose the first one 27 We do focus on faces and eyes; flashing images and text actually defer us now
  32. 32. Designing for Error Minimize the common causes of error Make it easy to discover errors early Make it possible to undo errors - easily 404 page... or a 301 redirect 28 Cater to affordances! Open links in a new window is hard to undo
  33. 33. Common Web Application Mistakes Inconsistent icons, controls, naming conventions, etc. No perceived affordances No feedback No default values Unhelpful error messages 29 Features without explanation- cool tools like drag and drop options may not be obvious.
  34. 34. Common Info Architecture Mistakes Search and site structure not integrated Too many top-level links Missing category landing pages Made up Menu Options (mystery-meat) 30 Search results drop you somewhere undefined Pop-up menus may be missing a landing page
  35. 35. Common Mobile Website Mistakes Not having one Not designing for the mobile platform Not testing on multiple devices Missing the point of the audience Over-complicating things 31
  36. 36. Common Form Mistakes Using the wrong input for the task Not enough room to type Looooong forms Convoluted information handling Non-descriptive or poorly-placed labels 32 Search box should ideally be 27 characters wide - that’s wide. Make the required fields clear to the user.
  37. 37. Common Web Design Mistakes No search/ bad search Not changing the colors of visited links Non-scannable text Fixed font size Violating design affordances 33 Blue is still the best color for links. Affordances: a title on every page, consistent layout, useful headings
  38. 38. Usability Maxims Know the user. You are not the user. 34
  39. 39. Usability Maxims Know the user. You are not the user. 34
  40. 40. Usability Maxims Things that look the same should act the same. 35 Or say the same thing
  41. 41. Usability Maxims Things that look the same should act the same. 35 Or say the same thing
  42. 42. Usability Maxims Make the information available in simple, natural, logical ways. 36
  43. 43. Usability Maxims Make the information available in simple, natural, logical ways. 36
  44. 44. Usability Maxims Everyone makes mistakes so every mistake should be fixable. Quickly. 37
  45. 45. Usability Maxims Everyone makes mistakes so every mistake should be fixable. Quickly. 37
  46. 46. Usability Maxims The user should always know what’s happening. 38
  47. 47. Usability Maxims The user should always know what’s happening. 38
  48. 48. Usability Maxims Keep it simple. Don’t overload the users’ buffers. 39
  49. 49. Usability Maxims Keep it simple. Don’t overload the users’ buffers. 39
  50. 50. Usability Maxims Eliminate unnecessary decisions and illuminate the rest. 40 Aim for the shortest distance (pages; clicks) to get to the users goal.
  51. 51. Questions? Thanks! 41
  1. A particular slide catching your eye?

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

×