• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Usability: Making Your Sites More Awesomer
 

Web Usability: Making Your Sites More Awesomer

on

  • 1,780 views

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

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

This includes presenter notes.

Statistics

Views

Total Views
1,780
Views on SlideShare
1,775
Embed Views
5

Actions

Likes
1
Downloads
44
Comments
0

3 Embeds 5

http://www.slideshare.net 3
http://www.docshut.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Usability: Making Your Sites More Awesomer Web Usability: Making Your Sites More Awesomer Presentation Transcript

    • 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 they want, without hinderance, hesitation or questions. 2
    • What is usability? 2
    • Elements of Usability Usefulness Effectiveness Learnability (...and Memorability) Satisfaction 3 “Intuitive” is a word used for usable site- synonymous with “learnable”
    • 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.
    • What usability isn’t webpagesthatsuck.com; 2009 http://www.belladesoto.us/ http://www.georgehutchins.com/ http://www.historianofthefuture.com/ 5
    • 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
    • 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.
    • 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
    • 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
    • Benefits Reduced long-term development costs Reduced support costs Increased user efficiency Increased user satisfaction 10
    • 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
    • 12
    • Five Second Test What did you see? General impressions? http://fivesecondtest.com/ 13 Is it pretty?
    • 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
    • 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.
    • 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!
    • 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
    • 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 22 Connections we make unconsciously based on the position, color, shape, design of an object or collection of objects
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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.
    • 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
    • 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
    • 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.
    • 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
    • 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
    • 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.
    • 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
    • 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. 35 Or say the same thing
    • Usability Maxims Things that look the same should act the same. 35 Or say the same thing
    • Usability Maxims Make the information available in simple, natural, logical ways. 36
    • Usability Maxims Make the information available in simple, natural, logical ways. 36
    • Usability Maxims Everyone makes mistakes so every mistake should be fixable. Quickly. 37
    • Usability Maxims Everyone makes mistakes so every mistake should be fixable. Quickly. 37
    • 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. 40 Aim for the shortest distance (pages; clicks) to get to the users goal.
    • Questions? Thanks! 41