UI Design and Usability

SAE INSTITUTE, January 2013, Sidney De Koning
UI Design and Usability
Cross Media Communication & Production
donderdag 14 februari 13 Week

View Slide

Introduction
✤ Who are you?
✤ Who am i?

View Slide

Sidney de Koning
✤ Love coding and cooking
✤ Blogger: O’Reilly, FITC, Adobe, Funky Monkey, Culinerd
✤ Writer: Automating Actionscript Projects.
✤ Business owner - Mobile: Mannetje de Koning / Appcouture
✤ www.funky-monkey.nl
✤ www.culinerd.nl
✤ www.mannetjedekoning.nl

View Slide

Course Overview
✤ What is Usability and why is it important?
✤ What is UI Design and why is it important?
✤ How do your users see the web?
✤ Ask questions and rethink you own browsing.

View Slide

What is UI design?
“The design of computers, appliances, machines, mobile
communication devices, software applications, and websites
with the focus on the user's experience and interaction. The
goal of user interface design is to make the user's interaction
as simple and efﬁcient as possible, in terms of accomplishing
user goals—what is often called user-centered design.“

View Slide

What is UI design?
“Good user interface design facilitates ﬁnishing the task at hand
without drawing unnecessary attention to itself. Graphic design
may be utilized to support its usability.
The design process must balance technical functionality and
visual elements (e.g., mental model) to create a system that is
not only operational but also usable and adaptable to changing
user needs.”
Source: Wikipedia

View Slide

But what does it mean in plain
English?
User interface design is the practice of creating something that a
person interfaces or interacts with. Concrete objects or virtual ones.
The person creating that experience has already done the thinking
and makes sure that the interaction happens as simple and as efﬁcient
as possible.

View Slide

What is Usability?
“Usability is the ease of use and learnability of a human-
made object.
The object of use can be a software application, website,
book, tool, machine, process, or anything a human interacts
with.”
Source: Wikipedia

View Slide

What is Usability?
“It is widely used in consumer electronics, communication, and
knowledge transfer objects (such as a cookbook, a document or
online help) and mechanical objects such as a door handle or a
hammer.“
Source: Wikipedia

View Slide

When ever you use a product (or any other object you
interact with) or a website it should be easy to use and
have a small (or no) learning curve.
But what does it mean in plain
English?

View Slide

History of Usability
First design principles: Vitruvius, 1st
century BC.
1. Firmitas: The strength and durability of
the design;
2. Utilitas: A design’s usefulness and
suitability for the needs of its intended
users;
3. Venustas: The beauty of the design.

View Slide

History of Usability: Military
WWI & WWII: Canon design - Usability resulted in greater kills and
shorter training for personnel.
Question at the time: “What design do we need, to kill more enemies
through better matching soldier and weapon? And thus avoid getting killed
ourselves.”
• How quickly will a new crew member learn how to use the artillery cannon?
• How many rounds per minute (ordnance) is the cannon able to ﬁre with an
inexperienced versus an experienced crew?
• How does a design improvement decrease soldier fatigue (as a consequence of a
lighter cognitive load)?

View Slide

History of Usability: Recent
Companies assume people know computers and assume people
know how to use them. They are wrong.
Think Apple
Video: Google Chrome

View Slide

Thinking is bad.
Or at least when you are visiting a website.
Let UI designers do the thinking for you.

View Slide

Enjoy != Annoy
✤ A well designed website is enjoyable.
✤ A bad designed website is annoying.
✤ A good designed site is like good lighting in a store:
everything seems better

View Slide

Things that make me think.
✤ Puzzles
✤ Buttons
✤ Titles / Text
✤ Links
✤ Where am i?
✤ Where should i begin?
✤ Where did they put _____ ?
✤ What is the most important?
✤ Why did they call it that?

View Slide


View Slide

Things that don’t make me think.

View Slide


View Slide

3 second test.
✤ Focus

View Slide


View Slide

3 second test.
✤ What did you see?
✤ What did you remember?
✤ What stood out?

View Slide


View Slide

3 second test.
✤ What stood out?
✤ Good site: http://www.ﬁvesecondtest.com/

View Slide


View Slide

3 second test.
✤ What stood out?

View Slide

But why is it important?
✤ Sometimes the competition is just a click away
✤ People will blame themselves and not the site

View Slide

Actively thinking
✤ Google.com / Yahoo.com
✤ Amazon.com / Bol.com
✤ BBC.co.uk / Nu.nl

View Slide

Actively thinking

View Slide


View Slide

Mental Models
✤ We create mental models of everything around us.
✤ They are representation in your mind, of real or imaginary objects or
situations
✤ We do this to make sense of the world around us.

View Slide

Mental Models
✤ Mental model of Savana:

View Slide

Mental Models
✤ Everybody has different mental models
✤ Usability makes sure that the is no other interpretation, by making
use of speciﬁc guidelines.

View Slide

Mental Models
✤ What is the mental model of an elevator?

View Slide

Mental Models
✤ What is my mental model of an button?

View Slide

Mental Models
✤ What does usability have to do with mental models?
✤ Users use their own mental models to perceive and ﬁgure out
how a system works.
✤ This is not an active process.
✤ We have to streamline the way a user thinks by thinking for
them.

View Slide

Categories Hierarchy
Category: Chairs
Abstraction
How do humans think?

View Slide

Shapes Trends
Recognition
Patterns
How do humans think?

View Slide

Recollection

View Slide

Mental Models
✤ We create mental models of everything around us.
✤ They are representation in your mind, of real or imaginary objects or
situations
✤ We do this to make sense of the world around us.

View Slide

What do mental models have to
do with usability?
✤ Users use their own mental models to perceive how a system works.
If the don’t, they’ll ﬁgure something out
Expected
behavior
UI
System
Actual Behavior

View Slide

UI Design
✤ What are the most important Usability rules in User interface design?
1. Work ﬂow and prioritizing functions
Rank most commonly used or most important menu items from
top-down left-right. Visualize work ﬂow top-down left-right.

View Slide

Workflow
An example of an installation guide

View Slide

Prioritizing
An example of a Word processor

View Slide

Workflow & Prioritizing
An example of a web browser tool bar

View Slide

Nokia software installation guide......
?

View Slide

Windows 1.01 / 1981

View Slide

Gnome (Linux)
Mac 2008

View Slide

Inform the user of the state
of the system

View Slide

Inform the user of the state
of the system
Media players / Pause and play buttons

View Slide

UI Design
Work ﬂow and prioritizing functions
1.
Rank most commonly used or most important menu items from
top-down left-right. Visualize work ﬂow top-down left-right.
Match between system and the real world
2.
Language, terminology, part of speech, translation,
semantics

View Slide

UI Design
Gnome
Mac 2008

View Slide

Match between system and the
real world
Media
1. A plural of medium. See Usage Note at medium.
Medium
1. Something, such as an intermediate course of action, that occupies a position or represents a condition
midway between extremes.
...
4. pl. media Usage Problem.
a. A means of mass communication, such as newpapers, magazines, radio, or television.
b. media (used with a sing. or pl. verb) The group of journalists and others who constitute the
communications industry and profession.
5. pl. media Computer Science. An object or device, such as a disk, on which data is stored.
6. pl. mediums A person thought to have the power to communicate with the spirits of the dead or with agents
of another world or dimension. Also called psychic.
7. pl. media
a. A surrounding environment in which something functions and thrives.
b. The substance in which a specific organism lives and thrives.
c. A culture medium.
...
11. A size of paper, usually 18 × 23 inches or 17 1/2 × 22 inches.

View Slide

real world
Sheet
1. A broad rectangular piece of fabric serving as a basic article of bedding.
2. a. A broad, thin, usually rectangular mass or piece of
material, such as paper, metal, glass, or plywood.
b. A flat or very shallow, usually rectangular pan used for baking.
3. A broad, flat, continuous surface or expanse: a sheet of ice.
4. A moving expanse: a sheet of flames.
5. A newspaper, especially a tabloid.
6. Geology. A broad, relatively thin deposit or layer of igneous or
sedimentary rock.
7. A large block of stamps printed by a single impression of a plate before
the individual stamps have been separated.
8. Mathematics. A surface of revolution generated by revolving a
hyperbola about one of its two symmetric axes.

View Slide

real world
Page
1. a. A leaf or one side of a leaf, as of a book, letter,
newspaper, or manuscript: tore a page from the book.
b. The writing or printing on one side of a leaf.
c. The type set for printing one side of a leaf.
2. A noteworthy or memorable event: a new page in
history.
3. Computer Science. A quantity of memory storage equal
to between 512 and 4,096 bytes.
4. Computer Science. A webpage.
5. pages A source or record of knowledge: in the pages of
science.

View Slide

User’s Mental Models of web content..
.. how is the content accessed?
.. using Analogies?
.. using Metaphors?
.. using Stereotypes?
.. using Functions?
real world

View Slide

The content accessed through..
Grouping information visually / Semantically
Text Typeface / line space / length of sentences
Colors Wave length / Contrast
real world

View Slide

The content is displayed using conventions
(Conventions are called conventions because they work for
the large majority)
For example:
A shopping cart
Site navigation on the left
Tabs
Conventions

View Slide

High level navigation
amazon.com
nu.nl
Navigation examples

View Slide

Low level navigation
bellen.nl (good product navigation)
consumer.philips.com (Filtering and sorting are mixed up)
Navigation examples

View Slide

More Examples
red-dot.de
(Expandable menus issue)
www.mediamatic.net
(Good text layout)
designcouncil.org.uk
(Graphically busy page)
page-online.de
......Where am I?
More examples

View Slide

Tree-categorizing” of extensive product information.
3.
real world

View Slide

“Tree-categorizing” of extensive product information.
Tree - categorizing of extensive
product information.

View Slide

Grouping information and layout
4.
real world

View Slide

Grouping
Page-online.de
Designcouncil
Mediamatic
Red-dot.de

View Slide

Avoiding Mistakes:
˒ Question conventions
˒ Informal reviewing
˒ Early prototyping
˒ Evaluation
˒ Recognized method
˒ Own method
˒ More? Click me!
Avoiding mistakes

View Slide

Usability Testing (on a budget)
✤ Why test? The Rules.
✤ Different methods of testing.
✤ Test? How?
✤ Scenarios
✤ Personas
✤ Online
✤ Onsite
✤ Mobile testing?

View Slide

Usability Testing (on a budget)
✤ Myth #22: Usability testing is expensive.
✤ Testing can be done by students or interns
✤ No money? Offer free lunch or other fun incentives.

View Slide

Why test?
✤ Jacob Nielsens study (link) shows that with 5 users you reveal 85% of
your site’s problems. 15 users ﬁnd pretty much all problems.
(truth: zero users results in zero insight)

View Slide

Why test?
✤ Knowledge + learning + change = better site or app
✤ After design changes, test!
✤ After minor changes, test.
✤ During development, test.
✤ Before, during and after site is done - test.
✤ Test, test, test!

View Slide

Why test? The rules.
✤ The first rule of Usability Test Club is: You do talk about Usability Test Club.
✤ The second rule of Usability Test Club is: You do talk about Usability Test Club.
✤ Third rule of Usability Test Club: someone yells stop, goes limp, taps out, the test is over.
✤ Fourth rule: minimum of 5 people for a test.
✤ Fifth rule: one test at a time, fellas.
✤ Sixth rule: try to do a minimum of 5 tests per site or app
✤ Seventh rule: tests will go on as long as the task in the script tells you.
✤ And the eighth and final rule: if this is your first time at Usability Test Club, you have to test.

View Slide

Different methods of testing
✤ Heuristic testing
✤ One person, one observer.
✤ Working prototype of site/app.
✤ Cognitive testing
✤ More people, one hall monitor.
✤ Give user speciﬁc task.
✤ Theoretical or working prototype.

View Slide

Test? How?
✤ Make the user feel comfortable
✤ Be careful how you phrase your questions
✤ Do not lead the user
✤ Tell the user to “think out loud”
✤ Pay attention to facial gestures
✤ Identify frustration and emotion
✤ Keep track of hesitation and time delays
✤ Refrain from attempting to assist the user

View Slide

Test? How?
✤ To perform a proper test you need:
✤ Personas - Who is this person that is visiting our site?
✤ Scenarios - Describe the user's goals and the tasks
he/ she will want to accomplish.

View Slide

✤ The people and pictures can be fictional but the details
should be factual.
What do they do? And for how long?
How do they live? And where?
What do they eat? And why?
✤ Why personas?
Defining a specific user's goals and needs
Giving teams a focus with a common understanding
Personas

View Slide

✤ Bob is 52 years old and works as a mechanic with an organization
offering road service to customers when their car breaks down.
He has worked in the job for the past 12 years and knows it well.
Many of the younger mechanics ask Bob for advice when they
meet up in the depot as he always knows the answer to tricky
mechanical problems. Bob likes sharing his knowledge with the
younger guys, as it makes him feel a valued part of the team.
✤ Bob wonders if he will be able to cope with the new computer
system. He doesn’t mind asking his grandchildren for help when
he wants to send an email to his brother overseas, but asking the
guys at work for help is another story.
Personas - Example

View Slide

✤ Write an engaging scenario, with style
“When you got home from work you found the fire department at
your home and your house in ashes. You are in shock. You need to
contact your insurance company and what you should do now and
also find out if they can arrange for a place for you to stay while
you get this disaster sorted out.
is more engaging than:
“You are trying to figure out how to file a claim on your insurance
policy.”
Scenarios - Tips

View Slide

✤ Examples:
“I want users to be able to easily use the information on my site to plan a road trip
around the Southwest. My scenario: Parents of 2 pre-teens want to take a road trip
around Colorado and Utah. They want to start in Denver, stop at archaeology sites, go
on hikes, and ﬁnd nearby camping or hotels. They ﬁnd my site by doing a search on
Google for ‘visiting Anasazi ruins by car.’"
“I have an online jewelry store. We put our URL in our newspaper ads and most people
get to us by typing the address. A shopper should be able to compare rings in a particular
price range ($500 to $1000, for example), get answers to questions (can I pick the
gemstone, for example), pick one, and buy it online.”
Scenarios - Tips

View Slide

✤ Begin with the low hanging fruit - easy questions ﬁrst
- What is your general impression on this site?
- What is the site about?
- How long does it take before you understand what the
site is about?
Scenarios - Tips

View Slide

✤ Don’t ‘lead the witness’
Write the task as “ﬁnd the right electric drill that will meet your
needs”
rather than
“Click the link that says hardware. Then click on power tools.
Then pick an electric drill.”
Scenarios - Tips

View Slide

✤ Different tests:
✤ impression tests, 5 second test:
http://clueapp.com/ and http://ﬁvesecondtest.com/
✤ click tests and heatmaps/confettimaps / :
http://theclicktest.com/ and http://www.crazyegg.com/
✤ humans tests (on a budget):
https://www.mturk.com/
Test? How? - Online

View Slide

✤ Simple setup: Laptop / screen record setup
✤ Usability labs / camera - observer user situation.
✤ Screen record software:
✤ Silverback
✤ Camtasia / Morae
✤ iMovie
✤ Screen record App in Quicktime
✤ Cost: +/- 50 euro
Test? How? - Onsite

View Slide

✤ Test setup:
✤ Old mobile phone or camera with video possibility
✤ Wood ﬁxture / Ikea lamp / Tripod
✤ Tie wraps / sugru
✤ Reﬂection / Silverback
✤ Cost: -/+ 15 euro
Mobile testing

View Slide

Mobile testing

View Slide

UI Design and Usability

UI Design and Usability

Sidney de Koning

More Decks by Sidney de Koning

Other Decks in Design

Featured

Transcript