1

Usability Design

2

Designing for Usability

• What are the things users will want to do with your site– This is not what you want users to do with your site

– This is not necessarily what looks cool

• How do you make the most common things users want to do easier?– And how do you still support more advanced users?

3

Usability

• Remember:• Speed• Efficiency• Learnability• Memorability• User Preference

4

Example

• Task: Find the calorie content of a small serving of Mushroom Stroganoff at Noodles & Co.

• http://noodles.com/• May look cool, but becomes really annoying when you are trying to find information

• Poor in terms of 5 usability measures

5

Example

• Google• http://google.com

6

7

8

9

Example

• Yahoo• http://yahoo.com

10

11

General guidelines

• Make the most important task the most obvious thing on the page

• Make other features easy to find for users who want them and easy to ignore for those who don’t

• Limit distractions that could confuse users

• Make navigation extremely clear• Rely on memes for where to place links (e.g. Advertising, Privacy Policy on the bottom)

12

General Guidelines

• Long text is bad• Cryptic text is bad (e.g. Error 325.15)

• Do not interrupt the user’s flow (e.g. Vista)

• Provide clear and meaningful choices with obvious outcomes (e.g. buttons that say “Save” and “Don’t Save” rather than “Ok” and “Cancel”)

13

Inane Dialog Boxes

What happens when you cancel a cancelled operation?

Uhhh… I give up on this one

14

Inane Dialog Boxes

Do I have any choice in this?

Umm, thanks for the warning, but what should I do?

15

Inane Dialog Boxes

Some of these interfaces were posted on Interface Hall of Shame

16

Inane Dialog Boxes

17

Inane Dialog BoxesMidwest Microwave's online catalog

Some of these interfaces were posted on Interface Hall of Shame

18

Inane Dialog Boxes

19

Inane Dialog Boxes

ClearCase, source-code control Rational Software