Professional Documents
Culture Documents
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
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
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!
1-of-2 Choices
Remember: don’t change the label text on toggle buttons! It causes confusions
K-of-N Choices
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>
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
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.
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.
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.
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.
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.
Simulate your prototype, acting as the Computer, while your partner acts as user. Use these tasks:
Then switch roles, so that the other person acts as the Computer simulating their own prototype on you.