Web Usability: Making Your Sites More Awesomer

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 ﬁx 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 ﬁnd 80% of your problems; from there adding people might reinforce your data but probably won’t ﬁnd 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

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

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-speciﬁc 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; ﬂashing 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 undeﬁned 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 ﬁelds 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 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 Everyone makes mistakes so every mistake should be fixable. Quickly. 37

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 Eliminate unnecessary decisions and illuminate the rest. 40 Aim for the shortest distance (pages; clicks) to get to the users goal.

Questions? Thanks! 41

Web Usability: Making Your Sites More Awesomer

by Jen Riehle

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 3

Statistics

Web Usability: Making Your Sites More Awesomer Presentation Transcript