UI Design

UI Design

Ivano MalavoltaIvano Malavolta

[email protected]

http://www.di.univaq.it/malavolta

Some apps are just so shiny you want to lick them

[cit.][cit.]

Roadmap

• Intro + Examples• Intro + Examples

• Human Interface Principles

• Platform Characteristics

• UX Guidelines

Introduction

Before focussing on UI….

in mobile you can always control

Content VisualContentnaming

VisualDesign

Content Naming

Before you start reasoning on the UI…

Define an APP DICTIONARYAPP DICTIONARYAPP DICTIONARYAPP DICTIONARY

Write down the terms and messages used in the app

Ex. – tweets in Twitter– Likes in Facebook

Visual Design

The direct representation of everything under your appyour app

The first impression first impression first impression first impression the user will have

It is not only about layout & colors…It is not only about layout & colors…

itititit isisisis aboutaboutaboutabout SENSORY SENSATIONSSENSORY SENSATIONSSENSORY SENSATIONSSENSORY SENSATIONS

Example 1

http://drbl.in/czjd

Anti-example 1

Roadmap




• UX Guidelines

Aesthetic Integrity

It’s a measure of how well the appearance of the app integratesintegratesintegratesintegrates with its functionthe app integratesintegratesintegratesintegrates with its function

• Productive app � order & clarity

• Game � gamish, frivoulous

• …• …

Consistency

Take advantage of the standards and paradigms standards and paradigms standards and paradigms standards and paradigms people are comfortable withpeople are comfortable with

Does it use system-provided controls, views, and icons correctlycorrectlycorrectlycorrectly?

Is the application consistent within itselfconsistent within itselfconsistent within itselfconsistent within itself?

Does text use uniform terminology and styleuniform terminology and styleuniform terminology and styleuniform terminology and style?

Can people predictpredictpredictpredict what will happen?

Direct Manipulation

Try to let your users directdirectdirectdirect manipulatemanipulatemanipulatemanipulate objectsin your appin your app

Users can experience direct manipulation when they:

• RotateRotateRotateRotate or otherwise movemovemovemove the device

to affect onscreen objects

• Use gesturesgesturesgesturesgestures to manipulate

onscreen objects

• Can see that their actions have

immediate, visible resultsvisible resultsvisible resultsvisible results

Feedback

AcknowledgeAcknowledgeAcknowledgeAcknowledge people’s actions and assures them that processing is occurringthat processing is occurring

Users expect

• immediate feedback

• status updates during • status updates during

lengthy operations

Metaphors

Use metaphors for objectsobjectsobjectsobjects in the in the in the in the realrealrealreal world world world world in your appyour app

Users will quickly grasp how to use the app

Ex.Ex.– folders– photo sliders– …

User Control

People, not apps, should initiate and control should initiate and control should initiate and control should initiate and control actionsactionsactionsactionsactionsactionsactionsactions

Apps can suggestsuggestsuggestsuggest actions, but users must do them

Apps can only inferinferinferinfer datadatadatadata from the context

Users expect to be able to stopstopstopstop an operation that’s underway

Example 2

http://www.perspecdev.com/Faster/

Anti-example 2

Roadmap




• UX Guidelines

Display is Paramount

The DISPLAYDISPLAYDISPLAYDISPLAY is (usually) the only means that users useto interact with your app!to interact with your app!

• The comfortable minimum size minimum size minimum size minimum size of tappable UI elements is 44 x 44 points

• The qualityqualityqualityquality of app artwork is fundamental

• The user’s focus is on the contentcontentcontentcontent• The user’s focus is on the contentcontentcontentcontent

Display Orientation

Users can rotaterotaterotaterotate the device at any time and for any reasonany reason

users tend to expect apps to launch in the device orientation they’re currently using

TIPTIPTIPTIP. You can use the splashscreen image to let the user rotate the device

Gestures

UsersUsersUsersUsers don’t click, don’t click, don’t click, don’t click, theytheytheythey useuseuseuse gesturesgesturesgesturesgestures– tap/double tap– tap/double tap– drag– zoom/pinch– swipe– flick

Users expect all these gestures to work the samework the samework the samework the same, regardless of the app they’re currently running

One App at a Time

(at the moment) One app One app One app One app is visible in the foreground at a timeat a time

When people switch from one app to another, the previous app goes in background and its user interface goes away

Some applications might need to continue running in the background

User Help

Keep onscreen user help as minimalminimalminimalminimal as possible

In general, users don’t need onscreen help content to tell them how to use the device or the apps

Remember of the ConsistencyConsistencyConsistencyConsistency human-interfaceprinciple

Example 3

http://kangarooband.it/

Anti-example 3

Roadmap




• UX Guidelines

Layout

It should be defined the first aspect to fix� you need pure feedback on it� you need pure feedback on it

� lo-fi wireframing

TabletsTabletsTabletsTablets

http://bit.ly/GTp82Q

TabletsTabletsTabletsTabletscontent scrolledhorizontally

Colors psychology

Users reactreactreactreact to different colors differently

Colors evoke emotionsemotionsemotionsemotions

BLUBLUBLUBLUproductiveness, interiors,

skies, peace, unity, harmony, tranquility, calmness, trust, tranquility, calmness, trust,

coolness, confidence, conservatism, water, ice, loyalty, dependability, cleanliness, technology…

http://mobiledesign.org/color

Color Palette

Predefined number of colors to use consistentlyconsistentlyconsistentlyconsistently in your appyour app

You can use toolstoolstoolstools likepalette choosers, or palette pickers from images

OR

You can define your palette manually through the color color color color wheelwheelwheelwheel

http://kuler.adobe.com

Color Wheel

ComplementaryComplementaryComplementaryComplementaryComplementaryComplementaryComplementaryComplementarywhen you want something to stand out

AnalogousAnalogousAnalogousAnalogouschoose one color to

dominate, a second to support, the third color is as an accent

http://bit.ly/GTv7on

Color Wheel

TriadTriadTriadTriadTriadTriadTriadTriadlet one color dominate and use the two others for accent

SquareSquareSquareSquareworks best if you let one color be dominant

http://bit.ly/GTv7on

Typography

It is about:

• selection of the correct font font font font • selection of the correct font font font font

• understanding sizessizessizessizes

• applying conventional design methodologies conventional design methodologies conventional design methodologies conventional design methodologies

(size, shape, contrast, color, position, space, etc.)

http://bit.ly/GTvuzj

Readability guidelines

1.1.1.1. Use a highUse a highUse a highUse a high----contrast typefacecontrast typefacecontrast typefacecontrast typeface– Devices are usually used outside– Devices are usually used outside

2.2.2.2. Use the right typeface (font)Use the right typeface (font)Use the right typeface (font)Use the right typeface (font)

http://bit.ly/GTwUtv


3. Provide decent leadingleadingleadingleading– Leading = the space between two lines– Leading = the space between two lines

4. Leave spacespacespacespace on the right and left of each line

5.5.5.5. don’t crowd don’t crowd don’t crowd don’t crowd the screen


6. Generously utilize headingsheadingsheadingsheadings6. Generously utilize headingsheadingsheadingsheadings– Divide the content into paragraphs

7. Use short paragraphsshort paragraphsshort paragraphsshort paragraphs– 2-3 sentences at most

Respect User-Entered data

Input is hard,

Users slip (and sleep!)Users slip (and sleep!)

Do whatever it takes to Do whatever it takes to Do whatever it takes to Do whatever it takes to

preserve user datapreserve user datapreserve user datapreserve user data

and plan for real-world behaviors

Realize That Mobiles Are Personal

one device for one personone device for one personone device for one personone device for one personone device for one personone device for one personone device for one personone device for one person

Don’t continuously ask for name, data, etc.

Only implement passwords and clear personal information when required

Ensure That Lives Take Precedence

Don’t interrupt people’s life!Don’t interrupt people’s life!Don’t interrupt people’s life!Don’t interrupt people’s life!Don’t interrupt people’s life!Don’t interrupt people’s life!Don’t interrupt people’s life!Don’t interrupt people’s life!

Differently from desktops

Mobiles are glanced at, used in gaps between conversation and driving and watching TVconversation and driving and watching TV

Use Your Sensors

Whenever possible, perform actions for the perform actions for the perform actions for the perform actions for the user based on sensors and user datauser based on sensors and user datauser based on sensors and user datauser based on sensors and user datauser based on sensors and user datauser based on sensors and user datauser based on sensors and user datauser based on sensors and user data

Ex.

Why should you have to silence your phone for a meeting, when the phone knows where you physically are and knows from your calendar that you have a meeting in that room right now?calendar that you have a meeting in that room right now?

Focus on the Primary Task

you need to determine what’s most important in each context or screen and…each context or screen and…

focus on focus on focus on focus on itititit exclusivelyexclusivelyexclusivelyexclusively!!!!

Your app definition statement will help you Your app definition statement will help you focus your app on its primary task

Elevate the Content that People Care About

GiveGiveGiveGive youryouryouryour usersusersusersusers whatwhatwhatwhat theytheytheythey needneedneedneed mostmostmostmost!!!!

For example, in a game, people care about the experience,they don’t expect to manage, consume, or create content

• Minimize the number of controls in the UI

• Customize controls so that they integrate with your app’s graphical style

• Fade controls away after people have stopped interacting with them for a little while

Think Top Down

Put the most frequently used information Put the most frequently used information Put the most frequently used information Put the most frequently used information Put the most frequently used information Put the most frequently used information Put the most frequently used information Put the most frequently used information near the topnear the topnear the topnear the top

Because users hold the device in the following ways:

• In the left hand In the left hand In the left hand In the left hand and gesturing with a

finger of the right handfinger of the right hand

• In one handIn one handIn one handIn one hand, and gesturing with the

thumb of the same hand

• Between their handsBetween their handsBetween their handsBetween their hands, and gesturing

with both thumbs

Logical Path

Make the path through the information you present logical and easy to predictlogical and easy to predictlogical and easy to predictlogical and easy to predictpresent logical and easy to predictlogical and easy to predictlogical and easy to predictlogical and easy to predict

– put markers to let them where they are

– put a back-button

Give users only one path to a screenonly one path to a screenonly one path to a screenonly one path to a screen

Easy Usage

Your app must be instantlyinstantlyinstantlyinstantly understandableunderstandableunderstandableunderstandable by users

� you cannot assume they want or they have time to learn� you cannot assume they want or they have time to learnhow to use your app

Make the main function of your app

immediately evidentevidentevidentevident

User-Centric Terminology

use terminology your users understandunderstandunderstandunderstanduse terminology your users understandunderstandunderstandunderstand

avoid technical jargon– This does not hold if your target user is a technical guy

Minimize the Effort Required for User Input

Inputting information takes time and attention, minimize itminimize itminimize itminimize itminimize itminimize itminimize itminimize it

TIPTIPTIPTIP. If your app asks users a lot of input data, you have torevise your design!

Balance any request for input by users with what Balance any request for input by users with what Balance any request for input by users with what Balance any request for input by users with what you offer them in returnyou offer them in returnyou offer them in returnyou offer them in returnyou offer them in returnyou offer them in returnyou offer them in returnyou offer them in return

Get information from the OSGet information from the OSGet information from the OSGet information from the OS, when appropriate– for example: contacts, address, events in the calendar…

Enable Collaboration

Push for collaboration and sharingsharingsharingsharing with others

When appropriate, make it easy for users to interact with others– allow them to share things like their location, opinions, and high scores

For tabletsFor tabletsFor tabletsFor tablets: think of ways to allow more than one person to use your app on the same device

Brand Appropriately

Incorporate a brand’s colors or images in a refined, Incorporate a brand’s colors or images in a refined, unobtrusiveunobtrusiveunobtrusiveunobtrusive way

Avoid taking space away from the content people care about– Alternative: subtly customize the background of a screen– Alternative: subtly customize the background of a screen

Make Search Quick

In apps with a lot of data, SEARCH can SEARCH can SEARCH can SEARCH can bebebebe a a a a primaryprimaryprimaryprimary functionfunctionfunctionfunctionprimaryprimaryprimaryprimary functionfunctionfunctionfunction

Build indexesindexesindexesindexes of your data so that you are always prepared for search

LiveLiveLiveLive----filterfilterfilterfilter local data so that you can display results more quicklymore quickly

Display a search bar search bar search bar search bar above a list or the index in a list

Display placeholder content placeholder content placeholder content placeholder content right away and partial results as they become available

Be Succinct

Think like a newspaper editor, and strive to convey information in a condensed, headline styleinformation in a condensed, headline styleinformation in a condensed, headline styleinformation in a condensed, headline styleinformation in a condensed, headline styleinformation in a condensed, headline styleinformation in a condensed, headline styleinformation in a condensed, headline style

When your UI text is short and directtext is short and directtext is short and directtext is short and direct, users can absorb it quickly and easily

Give controls short labelsshort labelsshort labelsshort labels, or use wellwellwellwell----understoodunderstoodunderstoodunderstoodGive controls short labelsshort labelsshort labelsshort labels, or use wellwellwellwell----understoodunderstoodunderstoodunderstoodsymbolssymbolssymbolssymbols

users should tell what they do at a glance

Use UI Elements Consistently

Follow the recommended usages recommended usages recommended usages recommended usages for standard user interface elementsinterface elements� you can build on users’ prior experience

Avoid radically changing Avoid radically changing Avoid radically changing Avoid radically changing the appearance of a control that performs a standard action

Never use the standard buttons and icons to mean something else

Make Targets Fingertip-Size

Display may change, but the average size of a fingertip does not!fingertip does not!

Give tappable elements in your application a target area of about 44 x 44 44 x 44 44 x 44 44 x 44 points

If you create smaller controls, the app becomes much less If you create smaller controls, the app becomes much less enjoyable

� or people may focus on the interface only, rather thanthe content

Ask People to Save Only When Necessary

People should have confidenceconfidenceconfidenceconfidence that their work is always preserved unless they explicitly cancel or always preserved unless they explicitly cancel or delete it

NeverNeverNeverNever askaskaskask forforforfor savingsavingsavingsaving datadatadatadata, it should be doneautomatically– You can ask to either edit or delete data– You can ask to either edit or delete data

Make Modal Tasks Occasional

Modality prevents users’ freedom by interrupting their workflow and forcing them to choose a their workflow and forcing them to choose a particular path

Keep modal tasks fairly short and narrowly short and narrowly short and narrowly short and narrowly focusedfocusedfocusedfocusedfocusedfocusedfocusedfocused

Always provide an obvious and safe way to exitexitexitexit a modal task

Start Instantly

Avoid displaying an About window About window About window About window or a splash screensplash screensplash screensplash screenAvoid displaying an About window About window About window About window or a splash screensplash screensplash screensplash screen

Avoid asking people to supply setup informationsetup informationsetup informationsetup information

Delay a loginloginloginlogin requirement for long as possible:– Focus your solution on the needs of 80 percent of your – Focus your solution on the needs of 80 percent of your users

– Get as much information as possible from other sources– If you must ask for setup information, put it in your app’s settings

Always Be Prepared to Stop

Save user data as often as reasonableSave user data as often as reasonable

Save the current state Save the current state Save the current state Save the current state when stopping

Example 4

http://instagr.am/

Anti-example 4

A Final BAD example

Layout & icons

http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html

A Final BAD example

Navigation buttons


A Final BAD example

Error Handling


A Final BAD example

Data Handling


And maybe a good one…

http://www.musicatch.info

…developed in one single night…

References

Chapter 8

http://bit.ly/H4GnKZhttp://bit.ly/H4Gqq5

BRAINSTORMING

UI Design

Education

Transcript of UI Design