User Interface Design

What is an interface?

u theplace at which independent and often

unrelated systems meet and act on or
communicate with each other.
— Meriam-Webster
Why do we remember only the bad?

u A good interface should be transparent

u Bad interfaces cause user frustration
u “What was this product designer thinking?”

GOOD BAD
Three Mile Island
The Control Panel
Palm Beach Ballot
u Florida vote was ultimately settled in favor of George W. Bush, by a margin of only
537 votes out of almost 6 million cast
Phobos 1 Satellite

u from Science magazine

u In 1988, the Soviet Union’s Phobos 1 satellite was lost on its way to
Mars, when it went into a tumble from which it never recovered.

“not long after the launch, a ground controller omitted

a single letter in a series of digital commands sent to
the spacecraft. And by malignant bad luck, that
omission caused the code to be mistranslated in such a
way as to trigger the [ROM] test sequence [that was
intended to be used only during checkout of the
spacecraft on the ground]”
British Midland Flight 92

u British Midland Flight 92 was on a scheduled flight from London Heathrow to

Belfast, when a fan-blade fractured in the left engine, disrupting the air-
conditioning and filling the flight-deck with smoke. The pilots believed that
this indicated a fault in the right engine, since earlier models of the 737
ventilated the flight-deck from the right, and they were unaware that the 400
used a different system. So they mistakenly throttled back the good engine,
pumping more fuel into the malfunctioning one, which burst into flames. Of
the 126 people aboard, 47 died and 74 sustained serious injuries.
u The enquiry attributed the blade fracture to metal fatigue, caused by heavy
vibration in the newly upgraded engines, which had only been tested in the
laboratory and not under representative flight conditions.

u Source : Wikipedia
Brief History of Software UI

u 1968: Douglas Engelbart, Stanford Research

Institute, regarded as “father of the GUI”
u Text-based manipulation using a mouse
u 1970:XEROX establishes Palo Alto Research
Center (PARC) to develop first mainstream GUI
The First Graphical User Interfaces

Apple Computer’s Lisa GUI (1983)

XEROX’s GUI (1981)

Microsoft’s Window (1985)

Psychology of HCI

u GOAL: To determine how best to produce

predictive theories of user and system behaviors
u William Edmond Hick – British Psychologist
u Hick’s Law

u Paul Fitts – Ohio State University

u Fitts’ Law
Hick’s Law

u William Edmund Hick

u British Psychologist
u 1952

u Abilityof a human to quickly predict an outcome

based on the number of simultaneous stimuli
u Relationship between speed and accuracy
u Software Example
u More options are not always better
Fitts’ Law

u Paul Fitts
u Psychologist at Ohio State University

u 1954

u Mathamatical model used to predict how long it

takes a user to move from one point on a screen
to another
u Based on the distance between two points
Fitts’ Law (cont’d)

u Farther away an object is, the longer it takes to

acquire with a mouse
u Inorder to keep the average acquisition speed,
object needs to be larger
Five Key Ideas about UIs in HCI

Ø Visibility
Ø Feedback
Ø Goal
Ø Affordance
Ø Task

17
Visibility
u All necessary controls should be visible for the user – he/she is
supposed to be able to use them in correct way.

u Always keep users informed about what is going on, through

providing appropriate feedback within reasonable time.

u Visibility is the mapping between a control and its effect:

u Show controls (toolbars, menus).
u Indicate mappings (Toolbar icons and graphics, enable & disable).
u Provide feedback (Messages).

u The User Interface should help the user always understand

u The current state of the system. 18

u What operations can be done.

Feedback
u When anything changes it should be made visible.

u Feedback concerning the actions executed:

u When you are executing an action give a feedback to the user.
u Feedback concerning their results:
u Afteran action executed, display results and make user aware of
the results.

19
Goal

u A state the user wants to reach:

u To be talking with somebody on the phone.
u To have saved a file.
Affordance
u An affordance is a quality of an object, or an environment, which
allows an individual to perform an action
u The set of operations and procedures that can be done to an object (is the
fundamental properties of an object which express how it might be used).
u ‘Perceived affordance’ is what typical users think can be done to an
object
u Should a door be pulled or pushed?

u What does this icon mean?

21
Affordance

u Every action should be mapped to a graphical icon which can

easily be understood by users.

u After an action is accomplished, a sound should indicate whether

the action is successful.

u Communicate with the user when necessary.

22
Task

u An action the user wants to do:

u To call somebody

u To save the file

u Goals à tasks, tasks à goals.

23
Recommendations for Good UI for
websites
Adopted from www.goodui.org
1. Try A One Column Layout instead of
multicolumns.
2. Try Giving a Gift instead of closing a
sale right away
3. Try Merging Similar Functions instead
of fragmenting the UI.
4. Try Social Proof instead of talking
about yourself.
5. Try Repeating Your Primary Action
instead of showing it just once.
6. Try Distinct Clickable/Selected Styles
instead of blurring them
7. Try Recommending instead of
showing equal choices
8. Try Undos instead of prompting for
confirmation
9. Try Telling Who It's For instead of
targeting everyone.
10. Try Being Direct instead of
indecisive.
11. Try More Contrast instead of
similarity.
12. Try Personality instead of being
generic.
13. Try Fewer Form Fields instead of
asking for too many.
14. Try Exposing Options instead of
hiding them.
15. Try Showing State instead of being
state agnostic.
16. Try Direct Manipulation instead of
context-less menus.
17. Try Gradual Engagement instead of
a hasty sign up.
18. Try Designing For Zero Data instead
of just data heavy cases.
19. Try Opt-Out instead of opt-in.
(Controversial)
20. Try Smart Defaults instead of asking
to do extra work
21. Try Conventions instead of
reinventing the wheel.
22. Try Loss Aversion instead of
emphasizing gains.
23. Try Inline Validation instead of
delaying errors.
24. Try Urgency instead of timelessness.
25. Try Scarcity instead of abundance.
26. Try Faster Load Times instead of
making people wait.
27. Try Anchoring instead of starting
with the price.
28. Try Smaller Commitments instead of
one big one.
29. Try Icon Labels instead of opening
for interpretation.
30. Try Useful Calculations instead of
asking to do math.
31. Try Providing Feedback instead of
silence.
32. Try Responsive Layouts instead of
static ones.
Some Examples
Good and Bad Website Design

u A bad website
u http://cs.stanford.edu/people/eroberts/cs201/projects/2010-
11/PsychologyOfTrust/ui3.html#0
u Slightly better representation
u http://cs.stanford.edu/people/eroberts/cs201/projects/2010-
11/PsychologyOfTrust/ui3.html#1
u How not to design a website.
u www.art.yale.edu
u www.drivingskills.on.ca

u All these URLs were last accessed on Apr 25, 2016 10:15 am PST.
User Interface (UI) Design Patterns
Adopted from www.ui-patterns.com
UI Design Patterns

u Recurringsolutions that solve common design

problems.

u Standard reference points for the experienced user

interface designer.
UI Design Patterns

u Getting Input

u Navigation

u Dealing with Data

u Onboarding

u Social
UI Design Patterns – Getting Input

u Password Strength Meter

u Input Feedback

u Preview

u Steps Left
Getting Input - Password Strength Meter
u Problem Summary

u You want to make sure your users' passwords are sufficiently strong in order to
prevent malicious attacks.
u Example
Getting Input - Password Strength Meter

u Usage
u When you want your users to choose passwords for their user accounts that are
hard to break or guess by either human or computerized help.
u When you want to increase the complexity of your users’ passwords and raise the
barrier for attackers tampering with your system.
u When you want to be sure that your users know what a good password is and that
their chosen password follows such guidelines.
u Solution
u A password’s strength is measured according to predefined rules and is displayed
using a horizontal scale next to the input field. If the password is weak then only a
small portion of the horizontal bar is highlighted. The greater the strength of the
password the more the horizontal bar is highlighted.
u The password strength is also appropriately indicated by coloring the bar in a color
associative with good or bad: Green indicating a strong password and red indicating
a weak password.
Getting Input - Input Feedback
u Problem Summary

u The user has entered data into the system and expects to receive feedback on the
result of that submission.
u Example
Getting Input – Input Feedback

u Usage
u when you want to provide feedback to the user upon submitting content
to your site.
u when you want to notify your users about errors that happened during
form submission.
u when you want to let your users know that everything went as planned
upon content submission.
Getting Input - Preview
u Problem Summary

u The user wants to check how changes in form fields affect an end result as quickly
as possible.
u Example
Getting Input - Preview

u Usage
u When you want to provide the user with a real-time preview of what he or
she is creating.
u When it is hard for the user to comprehend how the final output will be
without having a preview to reference.
u Do not use when the input is straightforward and the resulting output
does not depend on a specific layout.
Getting Input - Steps Left
u Problem Summary

u The user is about to go through the process of filling in data over several steps and
is in need of guidance.
u Example
Getting Input - Steps Left

u Usage
u Use when a user goal can be split into a series of smaller steps that is
easier displayed on separate screens.
u Use when the steps of a process is so long that the user might get the
impression that it will go on forever without the guidance of steps.
u Do not use when there is only 1 or 2 steps in submitting data to the
website.
u Do not use when the process of filling out data is easily foreseeable
UI Design Patterns – Navigation

u Navigation Tabs

u Fat Footer

u Breadcrumbs

u Tag Cloud
Navigation - Navigation Tabs
u Problem Summary

u Content needs to be separated into sections and accessed using a flat navigation
structure that gives a clear indication of current location.
u Example
Navigation - Navigation Tabs

u Usage
u Use when there are between 2 – 9 sections of content that need a flat
navigation mode.
u Use when section names are relatively short

u Do not use when wanting to show content-specific data. For instance for
showing latest articles
u Do not use when the list of sections or categories call for a “more…” link.
Then consider another navigation pattern.
Navigation – Fat Footer
u Problem Summary

u Users need a mechanism that will enable them to quickly access specific sections
of a site or application bypassing the navigational structure.
u Example
Navigation – Fat Footer

u Usage
u Use to shortcut an otherwise hierarchical structure of a website.

u Use when there are specific pages or functions that are more frequently
used than others parts of the website. Use the shortcut box to show these
choices in order to shorten the path for the users.
u Can also be used as navigation when short on space, although it is not
advised.
Navigation – Breadcrumbs
u Problem Summary

u The user needs to know their location in the website's hierarchical structure in
order to possibly browse back to a higher level in the hierarchy.

u Example
Navigation – Breadcrumbs

u Usage
u Use when the structure of the website follows a strict hierarchical
structure of similar formatted content.
u Use when the structure of the site is partitioned in to sections which can
be divided into more subsections and so on.
u Use when the user is most likely to have landed on the page from an
external source (another site deep linking to the web page in question).
For instance from a blog or a search engine.
u Do not use on the topmost level of the hierarchy (typically the welcome
page)
u Do not use alone as the main navigation of the website.
Navigation – Tag Cloud
u Problem Summary

u The user wants to browse content by popularity in a visually appealing way.

u Example
Navigation – Tag Cloud

u Usage
u Use when users of your website can add content and tags themselves
(Although not necessary).
u Use when your website has more than 10-20 different tags, each with
different weight in post-count.
u Do not use to show the categories of a strict hierarchical structure.
UI Design Patterns – Dealing with Data

u Table : Alternating Row Color

u Table : Sort by Column

u Table : Table Filter

u Dash Board

u Search : Autocomplete

u Search : Filters
Dealing with Data– Table : Alternating
Row Color
u Problem Summary

u The user needs to visually separate similar looking rows in a table apart, in order
to match the values of each row.

u Example
Navigation – Alternating Row Color

u Usage
u Use when the content of each column is often of similar nature

u Use when there are multiple lines for each row

u Use when the height of each row varies

Dealing with Data– Table : Sort by
Column
u Problem Summary

u The user needs to be able to sort the data in a table according to the values of a
column.

u Example
Navigation – Sort by Column

u Usage
u Use when there are many rows in table (above 10), and it is difficult to
single out one row and its relation to other rows
u Use when the table uses pagination and data spans multiple pages.

u Do not use if the amount of rows are few and the table is easy to search or
scan.
Dealing with Data– Table : Table Filter

u Problem Summary

u The user needs to categorical filter the data displayed in tables by the columns.

u Example
Navigation – Table Filter

u Usage
u Use when you have a very large data set of results that is too large to show
in one page
u Use when one or more table columns can easily be summarized into
categories to filter by.
Dealing with Data– Dashboard

u Problem Summary

u The user wants to digest data from multiple sources at a glance

u Example
Navigation – Dashboard

u Usage
u Use when you want to provide a high-level overview of data that allows to
discover actionable trends
Dealing with Data– Search: AutoComplete

u Problem Summary

u The user needs recognition aided search when performing search tasks that are
difficult to remember or easily mistyped.

u Example
Navigation – Search : AutoComplete

u Usage
u Use to assist with ambiguity-issues, when an item can be entered in multiple
ways
u Use when the type of information entered can readily be matched with a
specific piece of information in the system. E.g. A user may not recall how to
spell “Amorphous” but is able to input the first 3 letters and find the word
from the autocomplete list.
u Use when input speed is an important goal

u Do not use if you want to provide the user an overview of all options
available.
Dealing with Data– Search Filter

u Problem Summary

u The users needs to conduct a search using contextual filters that narrow the search
results.

u Example
Navigation – Search Filter

u Usage
u Use when the search results for a query are very numerous and reviewing
them would be very time consuming.
u Use when search results can be categorized into filters: the search must be
contextual.
u Do not use when your search is not easily categorized into filters.