Introduction

Why is Usability important?

 User attention is precious and hard to get and retain.
 Poor usability design means users will use someone else's product/website!

Usability has 5 dimensions:

 Learnability:
o How easily can a new user learn to use the interface?
 Efficiency:
o How quickly (efficiently) can users do what they want?
 Memorability:
o How easily can infrequent users remember how to use the interface?
 Errors:
o How does the interface handle errors?
 Satisfaction:
o Does the interface follow proper graphic design principles?
o Does it make the user want to use the interface?

Remember:
 Dimensions vary in importance
o New users care about learnability
o Experts want efficiency
 Usability != The whole system!
o A nuclear plant cares more about Security or Reliability
o Knockoffs (counterfeits) care more about Cost

We are discussing Learnability, Efficiency, and Satisfaction

This document serves as a reference.

The lecture provides detailed examples of the concepts.
Underlined words are key terms used when discussing interface design
Learnability
How easy is it for a new user to learn the interface?

How memory works

 Short term memory
o 7 ± 2 “chunks”
o Lasts for ~10 sec
 Long term memory
o Very large!
o Detailed rehearsal will move short term memory to long term memory
 Just repeating a lot doesn’t work well
 Connecting with what you already know works better
 Recognition
o Remembering after a hint
o Novices – Advanced users can do this.
 Recall
o Remembering without any help.
o Experts can recall

Models
 User model
o How the user thinks the system works
 System model
o How the system actually works
 Difficulties arise when user model does not match system model

Cues
 Hints that helps the user understand how system works

Affordance
 Actions that the element (object) can do
 Perceived affordance
o What the user perceives (thinks) the interface affords (can do) based on seeing it
o What is the perceived affordance of the EASY button?
 Actual affordance
o What the interface is implemented to do (afforded)
o What is the actual affordance of the EASY button?

Visibility
 Provide clues about the actual affordance
 Information scent
o Links that go somewhere else should provide hints about the destination
o For web links, should “smell” like what the resulting page will be
o A “print” link may have a small “printer” icon
 Consistency
o Similar action should look similar (and the opposite is true)
o Similar meanings should use the same words
o Don’t surprise your users, otherwise your user will spend time trying to understand why the interface is not
consistent
Feedback
 Provide visible feedback for user actions
Efficiency
How quickly can users complete their task?

Mouse efficiency
 Make common operations easier to access
o Use larger buttons/elements
o Put them near the mouse, if possible
 Place elements that are used together close to each other
 Group commands that are used together
o Select All button

Defaults
 Set reasonable defaults
 If it’s a search page, select the search box by default
 If it’s a calendar, show the current day by default

History
 Users will want to go back or undo – make that easy and fast
 Undo is hard
o Must store user’s recent actions
o How much do you undo?
Satisfaction
Does the user want to use the interface?

Simplify
 “Remove elements until there is nothing is left to take away”
 Reduction
o Remove inessential elements
 Regularity
o Use a regular pattern and avoid varying it (consistency!)
 Double duty
o Use one element for multiple roles
 KISS
o Keep it simple, stupid!

Visual Variables
 Value
o The brightness of the element color
 Color
 Texture
o The patterns on the element (dotted, checkered, etc…)
 Position
o Where on the page the element is placed
 Orientation
o Is the element rotated?
 Shape
 Size

Selective Variable
 Variable is selective if it is easy to focus on it in a noisy setting
 Selective
o Position, size, value, color, orientation
 Not selective
o Shape

Contrast
 Pick visual variables and make them different
 Use multiple variables to create higher contrast
 Squint test
o Close one eye and squint the other
o High contrast elements should still be visible
o Simulates what a user sees at a glance, if not paying attention
 Whitespace
o Use it to group elements together
o Use margins to draw eye to the design
o If ever in doubt, use more (instead of less) whitespace

Alignment
 Align labels on the left or right
 Try to align controls (text boxes, buttons etc) on the left and right
o At least on the left
 Align text vertically
Prototyping
Trying designs out -- cheaply
Why? Example
 Experiment with alternative designs
 Easy to change or throw away
 Must lower time and code cost

Paper prototypes
 Interactive paper mockup
o Sketch of the screen
o Paper pieces for elements that change
 User interacts with interface
o Point with finger = click the mouse
o Writing = typing
 Designer helps
o moves paper pieces
o “changes” the screen as user interacts

Why use paper prototypes?

 Fast
 Easy to change
o Don’t feel as invested
 Focuses on the big picture
o Not on the font or color or other details
 Everyone can contribute
o Managers, designers, programmers, users(!)

Tips for paper prototypes

 Draw large
 Write large
 Use single color
 Glue and transparencies are helpful
 Will help reveal flaws in design

Testing a prototype
 Present the user with interface
o Presents interface and tasks to user
o Encourage user to “think aloud” and ask questions
o Keep user on track
 Simulate the computer
 Take notes
o Questions and confusions are important!

Testing will teach you

 Mental model
o Do the users understand?
 Functionality
o Does it do what is needed?
o Missing features?
 Navigation
o Can users find their way around?
 Terminology
o Can users understand the labels?
Prototype Elements
1-of-N Choices

Radio Buttons Drop-down menu Single selection box Toggle buttons

1-of-2 Choices
Remember: don’t change the label text on toggle buttons! It causes confusions

Checkbox Toggle button

K-of-N Choices

Two list boxes Multiple selection boxes N check boxes

Some additional widgets

 Menubar
 Toolbar
 Button
 Hyperlink
 Textbox
Computer prototyping
With HTML+CSS

HTML
 Content and structure of the web site
 Content = text, links, tables, lists etc
 Does not worry about how the content looks
CSS
 Describes how the content looks
 What color is the text? How large? What font?

Sample HTML:
<html>
<head><title>This is the title</title></head>
<body>
<h1>This is a header</h1>
<table>
<tr>
<td>Row 1:</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>Row 2:</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<div>this is a div</div>
<p>This is a paragraph</p>
<form action="">
<input type="" />
<select name="" id="">
<option value="val1">display value 1</option>
<option value="val2">display value 2</option>
</select>
<button>A button</button>
</form>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</body>
</html>

Common HTML Tags

HTML, HEAD, TITLE, BODY

TABLE, TR, TD
UL, OL, LI
H1, H2, H3, P
DIV, SPAN
FORM, INPUT, BUTTON, SELECT, OPTION

<link rel="stylesheet" href="stylesheet.css" type="text/css" />

<script src="javascriptfile.js" />
CSS

foo { color: red; } Makes the text color red for all elements <foo>
.bar { border: 1px solid black;} Makes a 1 pixel black border around elements with class=“bar”
#baz { font-size: 12pt; } Sets the font size to 12pt for the element with id=”baz”

CSS Tricks

Center the DIV and set its width to 500px.

Margin-left:auto sets the left margin to auto, which expands the margin to fill up as much space as possible. Setting auto to both margins
centers the DIV.

DIV{margin-left: auto; margin-right: auto;}

Place the CHILD on the upper right corner of the PARENT.

position:relative makes the PARENT position . position:absolute means the designer will explicitly set the position within the PARENT element.
top:0px means 0 pixels from the top of the parent, and right:0px means 0 pixels from the right inside edge of the parent.

PARENT { position: relative; }

CHILD { position: absolute; top: 0px; right: 0px;}

CSS Reference http://www.w3schools.com/Css/css_reference.asp

Use http://www.colourlovers.com/palettes/add to select colors

LAB1: LEARNABILITY
The goal of this activity is to think about how to design interfaces for learnability.

Recall the thermostat example from lecture: some people believe that you can heat a room faster by setting the thermostat to a
higher temperature than you really want, as if the thermostat were a valve for the heating system that lets more heat into the
room the higher you set it. In fact, the thermostat is simply an on/off switch for the heat. It turns on as long as the room
temperature is below the thermostat setting, and turns off when the thermostat setting is reached.

Design a thermostat user interface that communicates its model to the user more effectively, so that users are less likely to
make this mistake. Sketch your idea on a whiteboard, but don't stop with your first design. Critique it, and generate more
designs. Don't worry too much about size, cost, difficulty of installation, or other tradeoffs. Be creative, and remember that
we're focusing on usability in this class.

A few things to think about:

 Would it be enough to just print an explanation on the thermostat? If so, what exactly would it say?
 A sink faucet is normally a valve, so turning it farther will make the sink fill up faster. Suppose you came across a sink
faucet which was just an on/off switch. As a user, how could you tell right away?
 Suppose you think you have a good design. How, specifically, would you test it?
LAB2: PAPER PROTOTYPING
The purpose of this activity is to learn more about creating a simple, hand-drawn prototype in less than 5 minutes, and
simulating it with another user.

1 Prototype Your Alarm Clock

Think about the alarm clock you use to wake up every day. It may be a digital clock radio, it may be an analog clock, it may even
be a cellphone or a desktop application. Make a paper prototype of your alarm clock. Include enough of the interface so that
your prototype can display and change the current time, display and change the alarm time, and turn the alarm on and off.

Each of you should draw your own alarm clock at the same time. Don't discuss it with your partner yet.

2 Run Your Prototype

Simulate your prototype, acting as the Computer, while your partner acts as user. Use these tasks:

 Is the alarm set to wake me up at 9 am?

 Suppose not. Set the alarm to wake me up at 9 am.
 Set the current time one hour backward for a daylight savings time switch.

Then switch roles, so that the other person acts as the Computer simulating their own prototype on you.