WEB AND

MOBILE UI
DESIGNING WEB
INTERFACES
WEB DESIGN PRINCIPLES
▪Interface is not simply buttons, menus, colors and fonts. It is a
set of tools that help users solve their problems.
▪ Know your users
▪ Use patterns that look familiar
▪ Be consistent
▪ Create visual hierarchy
▪ Provide feedback and protect user from accidental actions
▪ Don’t show all controls at once
▪ Give more control to experienced users
▪ Never show a blank page to your users
▪ Don’t overcomplicate
▪ Test
 KNOW YOUR USERS
▪The more details you know about
them, the better.
▪ Understanding who your users
are, why and how they act is vital
for creating working UI website
design.
▪ Make decisions based on who
your users are and implement
them in your desktop
 USE PATTERNS THAT
LOOK FAMILIAR
▪ It is easy to forget but most of
your users already spend a fair
amount of time in other
interfaces, from Facebook and
Gmail to Flickr.
▪ Check UIs of websites popular
among your users and figure out
what you can learn from them.
▪ By using already known patterns
you will help users easily
understand how a new service
works and simultaneously earn
their trust.
 BE CONSISTENT
▪ After doing something in a certain
way user expects similar actions
to be done identically.
▪ Just imagine if the interface for
opening a new file was different
for all Google Docs products! No
user would be happy about it.
▪ Different sections of the website
can have their own features and
even use another color scheme
but user still understands that it’s
the same website:
 CREATE VISUAL
HIERARCHY
▪ User has to understand what
parts of the page are the most
important.
▪ Size, color, location and negative
space around every element
should communicate its role
(primary or secondary) to the
user.
▪ Correctly build hierarchy allows to
present complex concepts in an
easy to understand way.
 PROVIDE FEEDBACK AND PROTECT
USER FROM ACCIDENTAL ACTIONS
▪ Tell user what’s going on.
▪ Has the letter been successfully
sent? Was the download
completed? Is this file type
supported or not? Make sure you
can’t delete everything with just
one button and no confirmation.
▪ Users want to know that they
aren’t left alone with their
problems.
▪ Make them feel comfortable.
 DON’T SHOW ALL
CONTROLS AT ONCE
▪ They can scare away less
experienced users.

▪ A great idea is to put all advanced

functions ordinary users won’t
need on Advanced tab or hide
them in a special menu.
 GIVE MORE CONTROL TO
EXPERIENCED USERS

▪ Those who are extremely

experienced with your product
would love to use shortcuts for
routine operations.
▪ Many popular services provide
this function to their users,
Google Docs and Github included.
 NEVER SHOW A BLANK
PAGE TO YOUR USERS

When users see the new tool for

the first time, show them how to
use it, what can be achieved with it
and demonstrate some example
projects. Be ready to inspire them
to work with your product.
DON’T OVERCOMPLICATE
▪ Before adding yet another UI element ask yourself, whether it simplifies the
life of the user or simply eats away the time.
▪ Here’s how American Airlines site looks after redesign (on the right):
 TEST
▪ The earlier you start and the more tests you perform, the better will be the
quality of the end product.

▪ Don’t rely on your own instincts only — test your interface on people who
haven’t participated in its development.
MOBILE USER
INTERFACE
MOBILE USER
CHARACTERISTICS
▪Interruptible and Easily Distracted
▪Available
▪Sociable
▪Contextual
▪Identifiable
A DEVICE TAXONOMY
The devices will fall into four classes:
▪General-purpose work: multi-purpose devices
▪General-purpose entertainment: multi-purpose devices with an
entertainment
▪General-purpose communications and control
• Targeted: devices intended for one or a very small number of tasks.
GENERAL-PURPOSE
DEVICES
▪Personal computer – laptops or tablet computers
▪Tablet form, with a keyboard available.
▪It might have multiple screens, detachable from the device.
▪It might readily connect with various environmental
displays, ranging from projections and wall displays to
private desk displays.
▪Speech recognition is useful for predictable text entry and
commands.
▪It will be best used in word processing situations and
limited command set situations
ENTERTAINMENT
▪One device might be media based, with video and music
prominently displayed.

▪Another device might be game-based, with music and video as

a secondary feature.

▪A third device might be based on the written word, allowing

the user to work pencil puzzles, read e-books, and browse the
Internet.
COMMUNICATIONS AND CONTROL: THE PCD

The mobile communications device has a

special role.
▪Personal. The device generally belongs to one person,
who will carry it
▪Communicative. The device sends and receives
messages.
▪Handheld. The device can readily be put in a pocket
▪Wakable The device can be awakened at a single touch
by either the user or the network.
COMMUNICATIONS AND CONTROL: THE PCD
TARGETED DEVICES: THE INFORMATION APPLIANCE

▪These devices include cameras, watches,

televisions, radios, music players, credit card
machines, automatic teller machines, and bar code
scanners.
▪Data transfer is required
▪Add-on features
▪Fewer size issues
▪Input mechanisms can be limited
ANATOMY OF THE PERSONAL
COMMUNICATION DEVICE (PCD)
▪The Carry Principle
A PCD is always with the user.
▪Input Mechanism
▪ focus (cursor) control,
▪commands, text or character entry,
▪ environmental data entry,
▪other-computer data entry or access.
FOCUS (CURSOR) CONTROL

▪Stylus
- It is similar to a mouse, but has no cursor and does not
have the ability to access multiple commands without complex
actions like press-and-hold or the very difficult double-tap.
▪Scroll-and-select
- A scroll-and-select mechanism has up and down and
usually left and right controls and a select button.
COMMANDS
▪Nokia-style Options/Back softkeys. Any contextual controls are
in a menu launched by the Options button. Back becomes Cancel in
certain contexts. These phones do not have separate back buttons.

▪Simple soft keys, with two or three virtual buttons and the
corresponding number of hardware buttons. The virtual buttons
have labels indicating what actions the hardware button will
initiate. Some phones have separate select buttons, others do not.

▪ Samsung-style OK/Menu soft keys. Samsung has used its OK

and Menu hardware buttons to access soft keys. The OK button is
also the device’s select button, so this is essentially a one-soft key
design.
TEXT AND CHARACTER
ENTRY
▪ standard 12-button keypad
▪ A one-handed text entry mechanism will not be a keyboard-based device
▪ Normally, triple tap is used to access letters on each key: a ‘r’ requires
three presses of the 7 button.
▪ Two-handed text input solutions fall into the categories of thumb
keyboards, handwriting recognition, and virtual keyboards
▪ Thumb keyboards are found on the BlackBerry and Palm Treo devices
▪ Virtual keyboards operated by stylus vary widely. Some are merely
QWERTY layouts
▪ Word prediction or character prediction can be used to assist the user
ENVIRONMENTAL DATA
▪ The camera is the most prevalent such input mechanism

Other Computers
▪ When the phone rings, the iPod would pause the music, switch to phone
headset mode, and allow the user to answer the call without changing
earpieces.
▪ when live television from the home is viewed on a mobile device
OUTPUT MECHANISMS
▪ OLEDs
▪ The OLED pixels emit light directly,
▪ visibility in sunlight,
▪ reduced power consumption,
▪ and no polarization issues.
▪ broader range of color choices
life
▪ Shorter

▪ Electronic paper displays

▪ set of balls as pixels
▪ require low power to change,
▪ no power to maintain the display
▪ good readability as newspaper
OTHER OUTPUT DEVICES
▪Speakers

▪Vibrators
TECHNOLOGIES
▪Browsers
▪Messaging
▪SMS
▪MMS
▪Voice SMS
▪ Application Platforms
▪ Java ME
▪ Media Players
▪ Video distribution
CONNECTION
CHARACTERISTICS
▪Power consumption concerns
▪Inconsistent coverage
▪ Speeds slower than prevalent land line speeds
▪Limited coverage area and hence potential roaming charges
▪Latency in connection
STANDBY SCREEN
▪Application platforms such as uiOne allow for
significant customization of the standby screen.

▪Can download themes

MOBILE UI DESIGN
PRINCIPLES
1. Mobile mindset
▪ Be focused:
▪ Be unique
▪ Be charming
▪ Be considerate

2. Mobile contexts
▪ Bored: Facebook, Twitter
▪ Busy: email, calendar, banking
▪ Lost: Maps
MOBILE UI DESIGN
PRINCIPLES
3. Global Guidelines
▪ Responsiveness
▪ Polish
▪ Thumbs
▪ Content
▪ Controls
▪ Scrolling:

4. Navigation Models
▪ Tab bar: Three to six distinct content areas (eg Twitter for
iPhone)
▪ Drill down: List and detail content hierarchy (eg Settings app on
iPhone)
MOBILE UI DESIGN
PRINCIPLES
5. User input
▪keyboard variations
▪Auto-correct and auto complete can be used
▪support landscape orientation
6. Gestures
▪ Invisible : scrollable
▪ Two hands : Zoom
7. Orientation
MOBILE UI DESIGN
PRINCIPLES
8. Communications
▪ Provide feedback
▪ Modal alerts
▪ Confirmations
9. Launching
10. First impressions - icons
MOBILE USER
INTERFACE
DESIGN PATTERNS
UI patterns
Mobile UI design has different challenges than for large
screen + mouse + keyboard:

Tiny screen No sidebars, long header menus, tree controls

Variable screen width Scrolling is easy ⇒ width matters the
most.
Controls automatically resized when turning the mobile
90◦
Touch screenMain interaction mode. Targets must be large
enough (≥ 0.7 or 1 cm) and/or well separated
Some challenges of mobile design:

It’s hard to type text Make typing unnecessary or very

limited. Auto complete fields and pre-fill with good default
values.
Challenging environments People use their phones in all
kinds of places ⇒ large ambient lighting and
noise differences. Tiny text difficult to read and
tap in motion.
Limited attention Users look at the interface while
doing other things : walking, eating, talking to
other people, driving. Design for distracted
users: easy, quick interaction, self-explanatory
UI.
UI PATTERNS
A user interface is well-designed when the
program behaves exactly how the user thinks it
will.”

“The applications that are easy to use are designed

to be familiar”

parts are recognizable enough so that people can

apply their previous knowledge to a novel interface.
UI PATTERNS

▪Q: How to show many elements at the same level of

importance and search them quickly ?
▪Segmented control: place 2-5 buttons or tabs horizontally
aligned, that act as filters.
UI PATTERNS
Q: How to show a vast amount of hierarchical data ?
Expandable list: Items are organized in a two-level list. A first
level item can be expanded to show its children. An indicator
shows the state, collapsed or expanded.
UI PATTERNS
▪Q: How to show a vast amount of hierarchical data ?
▪A:Sliding layer: after a certain trigger (button click, item
selection, etc), a sticky container will slide from any side of the
screen. Shall be dismissed or closed by swiping it away or
tapping.
UI PATTERNS
Q: How to show a vast amount of hierarchical data ?
A:Drill down: tapping on an item in the list opens its
children in next level
NAVIGATION PATTERNS
▪ Navigation : how to move across the application screens,
functionality, content . . .

▪ Poor navigation means “can’t go back”, “can’t find things”, “don’t

know how to do X ”, “don’t know where I am”

▪ Good navigation, like good design, is invisible. Applications with good

navigation just feel intuitive and make it easy to accomplish any task.

Navigation
▪ Primary: presentation of the main application options.
▪ Secondary: presentation of additional choices derived from
some/each primary navigation choice.
PRIMARY NAVIGATION
Landing page of menu options that act as a jumping off point into
the application. Use a grid layout for items of equal importance
PRIMARY NAVIGATION
menu
▪List of items representing the main choices. Enhanced lists are
simple list menus with additional features for searching,
browsing or filtering.
▪Work well for long titles or those that require sub text.
PRIMARY NAVIGATION
▪Partition application functionality or views in different screens
reachable with a single click. Horizontally scrolling tabs. Bottom tabs
are more thumb friendly.
PRIMARY NAVIGATION
▪Landing page modeled to reflect the applications metaphor. Used
primarily in games, but also in applications that help people
catalog and categorize items, like notes, books. . .
 PRIMARY NAVIGATION
Beware of using a wrong metaphor:
▪ left:educational application for exploring facts from
around the globe
▪ right:a globe for navigating news content? Stories are not
surfaced from specific geographic locations.The globe is
just a spinning sphere that is hard to read and harder to
browse.
SECONDARY NAVIGATION
▪Secondary Navigation
▪Navigation within a page or module. Any of the
primary Navigation patterns can be reused as
secondary navigation patterns.
 SECONDARY NAVIGATION
▪Used to quickly navigate an small set of pages using the
flick gesture. Add always a page indicator to displays how
many pages are in the carousel. The two examples use the
page carousel within a selected tab.
SECONDARY NAVIGATION
Allows a single screen drill down to reveal more
information. Tapping the > icon expands/collapses the
list to show the individual instances. No further
expandable.
INVITATIONS
▪Remember the first time you run Eclipse ? Tens of buttons,
several panels, multiple menu and submenu options, five tabs .
. . “I’ll never manage to use it!” But there was no choice.
INVITATIONS
▪ Helpful tips that are displayed the first time a user opens an
application or arrives at a new place. They suggest actions
and guide the user to the intended functionality.
▪ dialog
▪ tip
▪ tour
▪ transparency
▪ first time through
DIALOG
▪A plain dialog with text instructions. Most common type
of invitation probably because it is the easiest to
program. It is also most likely to be dismissed and
ignored. Keep instructions short
 TIP
▪Small globe with text. Can be implemented anywhere in the
screen, making it more contextually relevant than a dialog.
Keep the content short, and remove the tip once screen is
touched.
TOUR

▪Provides the ultimate invitation by offering a screen-by-screen,

feature-by-feature exploration. Offered on the home screen.
▪Highlights key features of the application. Keep it short and visually
engaging.
▪Problem with short term memory
TRANSPARENCY
▪See through layer with an usage diagram over the actual
screen. Not meant to compensate for poor screen designs.
Remove the transparency once the screen is touched.
 FIRST TIME THROUGH
▪Unlike the other invitations, don’t precede the screen they refer to
but are built into the screen design. They remain in the interface
until they are overwritten with content or the action is performed.
Clearly differentiate the invitation from other content : with icon,
color, text size different from regular content.
SORTING
▪Content like lists, search results etc. need to be sorted to be visually
searched in a fast way. Choose a reasonable default sort and offer
sorting according to other criteria.

▪ onscreen sort

▪ sort order selector

▪ sort form
SORTING CONTENT
Onscreen sort
▪A row with a few toggle buttons placed horizontally at the top or
bottom, each corresponding to a sorting criterion. Clearly show
which option is selected or “on”. Also, distinguish ascending
from descending.
SORT ORDER SELECTOR
▪When the number of sorting options is 5 or more, use some OS
selection control like the spinner or the contextual menu in
Android. The option titles can be longer ,more explicit, and
more options can be displayed.
Sort form
▪Some applications have fused the sort and filter
functionality into one screen form. This is the most effort
intensive sort pattern, requiring the user to 1) open the
form, 2) select two options, 3) tap a “done” button.
ANTI PATTERNS
▪Classes of commonly-reinvented bad solutions to design
problems. They are studied as a category so they can be avoided in
the future.

▪ Novel notion

▪ Metaphor mismatch

▪ Idiot box
▪ Oceans of buttons
NOVEL NOTION
▪ Novel designs intended to be creative and innovative. But they’re just hard to
understand and use. Can be found anywhere in an application, from primary
navigation down to an individual control, or gesture.
METAPHOR MISMATCH
▪Picking the wrong metaphor for the interface. Can occur at a low
level, when a control or icon is used inappropriately, or at a high
level, where the conceptual model for the application doesn’t
match the user’s mental model.
IDIOT BOX
▪Disrupting the user interaction when not really necessary. Avoid
disrupting the user’s workflow, only show a confirmation dialog when an
irreparable action is being taken (like a permanent delete).
OCEANS OF BUTTONS
▪Very long button bars or grid. All the buttons of the same size
and color so it is difficult to determine which one to click
without reading them all.
▪Use contextual tools when you find yourself repeating the
same buttons.