Download - UI Design
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
• Intro + Examples• Intro + Examples
• Human Interface Principles
• Platform Characteristics
• 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
• Intro + Examples• Intro + Examples
• Human Interface Principles
• Platform Characteristics
• 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
• Intro + Examples• Intro + Examples
• Human Interface Principles
• Platform Characteristics
• 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
Readability guidelines
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
Readability guidelines
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
http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
A Final BAD example
Error Handling
http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
A Final BAD example
Data Handling
http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
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