Download - UI design for mobile apps
![Page 1: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/1.jpg)
Gran Sasso Science Institute
Ivano Malavolta
UI design
![Page 2: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/2.jpg)
Roadmap
Intro + Examples
Human Interface Principles
Platform Characteristics
UX Guidelines
![Page 3: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/3.jpg)
Introduction
Before focussing on UI….
in mobile you can always control
Content naming
Visual design
![Page 4: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/4.jpg)
Content Naming
Before you start reasoning on the UI…
Define an APP DICTIONARY
Write down the terms and messages used in the app
ex. – “tweets” in Twitter
– “likes” in Facebook
![Page 5: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/5.jpg)
Visual Design
The direct representation of everything under your app
The first impression the user will have
It is not only about layout & colors…
it is about SENSORY SENSATIONS
![Page 6: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/6.jpg)
Example 1
http://drbl.in/czjd
![Page 7: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/7.jpg)
Anti-example 1
![Page 8: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/8.jpg)
Roadmap
Intro + Examples
Human Interface Principles
Platform Characteristics
UX Guidelines
![Page 9: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/9.jpg)
Aesthetic Integrity
It’s a measure of how well the appearance of the app integrates with its function
• Productive app à order & clarity
• Game à gamish, frivoulous
• …
![Page 10: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/10.jpg)
Consistency
Take advantage of the standards and paradigms people are comfortable with
Does it use system-provided controls, views, and icons correctly?
Is the application consistent within itself?
Does text use uniform terminology and style?
Can people predict what will happen?
![Page 11: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/11.jpg)
Direct Manipulation
Try to let your users direct manipulate objects in your app
Users can experience direct manipulation when they:
• Rotate or otherwise move the device
to affect onscreen objects
• Use gestures to manipulate
onscreen objects
• Can see that their actions have
immediate, visible results
![Page 12: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/12.jpg)
Feedback
Acknowledge people’s actions and assures them that processing is occurring
Users expect
• immediate feedback
• status updates during
lengthy operations
![Page 13: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/13.jpg)
User Control
People, not apps, should initiate and control actions
Apps can suggest actions, but users must do them
Apps can only infer data from the context
Users expect to be able to stop an operation that’s underway
![Page 14: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/14.jpg)
Example 2
http://www.perspecdev.com/Faster/
![Page 15: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/15.jpg)
Anti-example 2
![Page 16: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/16.jpg)
Roadmap
Intro + Examples
Human Interface Principles
Platform Characteristics
UX Guidelines
![Page 17: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/17.jpg)
Display is Paramount
The DISPLAY is (usually) the only means that users use to interact with your app!
• The comfortable minimum size of tappable UI elements is 44 x 44 points
• The quality of app artwork is fundamental
• The user’s focus is on the content
![Page 18: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/18.jpg)
Display Orientation
Users can rotate the device at any time and for any reason
Users tend to expect apps to launch in the device orientation they’re currently using
TIP. You can use the splashscreen image to let the user rotate the device
![Page 19: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/19.jpg)
Gestures
Users don’t click, they use gestures– tap/double tap– drag– zoom/pinch– swipe– flick
Users expect all these gestures to work the same, regardless of the app they’re currently running
![Page 20: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/20.jpg)
Example 3
http://j-a-m.co/balllin
![Page 21: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/21.jpg)
Anti-example 3
![Page 22: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/22.jpg)
Roadmap
Intro + Examples
Human Interface Principles
Platform Characteristics
UX Guidelines
![Page 23: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/23.jpg)
Layout
It is the first aspect to fixà you need pure feedback on it
à lo-fi wireframing
http://bit.ly/GTp82Q
Tabletscontent scrolled horizontally
![Page 24: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/24.jpg)
Colors psychology
Users react to different colors differently
Colors evoke emotions
BLUproductiveness, interiors,
skies, peace, unity, harmony, tranquility, calmness, trust,
coolness, confidence, conservatism, water, ice,
loyalty, dependability, cleanliness, technology…
![Page 25: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/25.jpg)
Color Palette
Predefined number of colors to use consistently in your app
You can use tools like
palette choosers, or
palette pickers from images
OR
You can define your palette manually through the color wheel
http://kuler.adobe.com
![Page 26: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/26.jpg)
Typography
It is about:
• selection of the correct font
• understanding sizes
• applying conventional design methodologies
(size, shape, contrast, color, position, space, etc.)
http://bit.ly/GTvuzj
![Page 27: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/27.jpg)
Readability guidelines
1. Use a high-contrast typeface– Devices are usually used outdoor
2. Use the right typeface (font)
http://bit.ly/GTwUtv
![Page 28: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/28.jpg)
Readability guidelines
3. Provide decent leading– Leading = the space between two lines
4. Leave space on the right and left of each line
5. don’t crowd the screen
![Page 29: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/29.jpg)
Readability guidelines
6. Generously utilize headings– Divide the content into paragraphs
7. Use short paragraphs– 2-3 sentences at most
![Page 30: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/30.jpg)
Respect User-Entered data
Input is hard,
users slip (and sleep!)
Do whatever it takes to
preserve user data
and plan for real-world behaviors
![Page 31: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/31.jpg)
Realize That Mobiles Are Personal
one device for one person
Don’t continuously ask for name, data, etc.
Only implement passwords and clear personal information when required
![Page 32: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/32.jpg)
Ensure That Lives Take Precedence
Don’t interrupt people’s life!
Differently from desktops
mobiles are glanced at, used in gaps between conversation and driving and watching TV
![Page 33: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/33.jpg)
Use Your Sensors
Whenever possible, perform actions for the user 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?
![Page 34: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/34.jpg)
Focus on the Primary Task
you need to determine what’s most important in each context or screen and…
focus on it exclusively!
Your app definition statement will help you focus on its primary task
![Page 35: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/35.jpg)
Logical Path
Make the path through the information you present logical and easy to predict
– put markers to let them where they are
– put a back-button
Give users only one path to a screen
![Page 36: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/36.jpg)
Inputting information takes time and attention, minimize it
TIP. If your app asks users a lot of input data, you have to revise your design!
Balance any request for input by users with what you offer them in return
Get information from the OS, when appropriate
– for example: contacts, address, events in the calendar…
Minimize the Effort Required for User Input
![Page 37: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/37.jpg)
Enable Collaboration
Push for collaboration and sharing 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 tablets: think of ways to allow more than one person to use your app on the same device
![Page 38: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/38.jpg)
Be Succinct
Think like a newspaper editor, and strive to convey information in a condensed, headline style
When your UI text is short and direct, users can absorb it quickly and easily
Give controls short labels, or use well-understood symbols
users should tell what they do at a glance
![Page 39: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/39.jpg)
Use UI Elements Consistently
Follow the recommended usages for standard user interface elementsà you can build on users’ prior experience
Avoid radically changing the appearance of a control that performs a standard action
Never use the standard buttons and icons to mean something else
![Page 40: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/40.jpg)
Make Targets Fingertip-Size
Display may change, but the average size of a fingertip does not!
Give tappable elements in your application a target area of about 44 x 44 points
If you create smaller controls, the app becomes much less enjoyable
à or people may focus on the interface only, rather that content
![Page 41: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/41.jpg)
People should have confidence that their work is always preserved unless they explicitly cancel or delete it
Never ask for saving data, it should be done automatically– You can ask to either edit or delete data
Ask People to Save Only When Necessary
![Page 42: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/42.jpg)
Make Modal Tasks Occasional
Modality prevents users’ freedom by interrupting their workflow and forcing them to choose a particular path
Keep modal tasks fairly short and narrowly focused
Always provide an obvious and safe way to exit a modal task
![Page 43: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/43.jpg)
Start instantly
Avoid displaying an About window or a splash screen
Avoid asking people to supply setup information
Delay a login requirement for long as possible:
– 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
![Page 44: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/44.jpg)
Always Be Prepared to Stop
Save user data as often as reasonable
Save the current state when stopping
![Page 45: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/45.jpg)
Example 4
http://instagr.am/
![Page 46: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/46.jpg)
Anti-example 4
![Page 47: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/47.jpg)
A Final BAD example
http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
Layout & icons
![Page 48: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/48.jpg)
A Final BAD example
Navigation buttons
http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
![Page 49: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/49.jpg)
A Final BAD example
Error Handling
http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
![Page 50: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/50.jpg)
A Final BAD example
Data Handling
http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
![Page 51: UI design for mobile apps](https://reader034.vdocuments.us/reader034/viewer/2022042701/55a71f431a28ab504a8b4779/html5/thumbnails/51.jpg)
References
Chapter 8
http://bit.ly/H4GnKZhttp://bit.ly/H4Gqq5