ui design for mobile apps

Gran Sasso Science Institute

Ivano Malavolta

UI design

Roadmap

Intro + Examples

Human Interface Principles

Platform Characteristics

UX Guidelines

Introduction

Before focussing on UI….

in mobile you can always control

Content naming

Visual design

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

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

Example 1

http://drbl.in/czjd

Anti-example 1

Roadmap

Intro + Examples



UX Guidelines

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

•  …

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?

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

Feedback

Acknowledge people’s actions and assures them that processing is occurring

Users expect

•  immediate feedback

•  status updates during

lengthy operations

Metaphors

You may use metaphors for objects in the real world in your app

Users will quickly grasp how to use the app

Ex.

–  folders

–  photo sliders

–  …

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

Example 2

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

Anti-example 2

Roadmap

Intro + Examples



UX Guidelines

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

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

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

User Help

Keep onscreen user help as minimal 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 Consistency human-interface principle

Example 3

http://j-a-m.co/balllin

Anti-example 3

Roadmap

Intro + Examples



UX Guidelines

Layout

It is the first aspect to fix à  you need pure feedback on it

à  lo-fi wireframing

http://bit.ly/GTp82Q

Tablets content scrolled horizontally

Colors psychology

Users react to different colors differently

Colors evoke emotions

BLU productiveness, interiors,

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

coolness, confidence, conservatism, water, ice,

loyalty, dependability, cleanliness, technology…

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

Color Wheel

Complementary when you want something to stand out

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

http://bit.ly/GTv7on

Color Wheel

Triad let one color dominate and use the two others for accent

Square works best if you let one color be dominant

http://bit.ly/GTv7on

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

Readability guidelines

1.  Use a high-contrast typeface –  Devices are usually used outdoor

2.  Use the right typeface (font)

http://bit.ly/GTwUtv


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


6.  Generously utilize headings –  Divide the content into paragraphs

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

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

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

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

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?

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

Give your users what they need most! 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

Elevate the Content that People Care About

Think Top Down

Put the most frequently used information near the top

Because users hold the device in the following ways:

•  In the left hand and gesturing with a

finger of the right hand

•  In one hand, and gesturing with the

thumb of the same hand

•  Between their hands, and gesturing

with both thumbs

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

Easy Usage

Your app must be instantly understandable by users

à you cannot assume they want or they have time to learn how to use your app

Make the main function of your app

immediately evident

User-Centric Terminology

use terminology your users understand

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

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

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

Brand Appropriately

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

Avoid taking space away from the content people care about

–  Alternative: subtly customize the background of a screen

Make Search Quick

In apps with a lot of data, SEARCH can be a primary function

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

Live-filter local data so that you can display results more quickly

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

Display 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 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

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

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

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

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

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

Always Be Prepared to Stop

Save user data as often as reasonable

Save the current state when stopping

Example 4

http://instagr.am/

Anti-example 4

A Final BAD example

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

Layout & icons

A Final BAD example

Navigation buttons


A Final BAD example

Error Handling


A Final BAD example

Data Handling


References

Chapter 8

http://bit.ly/H4GnKZ http://bit.ly/H4Gqq5

+ 39 380 70 21 600 Contact

Ivano Malavolta | Gran Sasso Science Institute

iivanoo

[email protected]

www.ivanomalavolta.com

ui design for mobile apps

Technology