Mobile Apps Design Principles

Mohamad Sanisani@msani.net

Main Principles

1. Enchant meJust like a well-made tool, your app should strive to combine beauty, simplicity and purpose to create a magical experience that is effortless and powerful

2. Simplify my life– Easy to understand– When people use your app for the first time, they should

intuitively grasp the most important features– Simple tasks never require complex procedure– Never overwhelmed by too many choices or irrelevant

flash

3. Make me amazing– Empower people to try new things and to use apps in

inventive new ways– Feel personal, giving people access to superb technology

with clarity and grace

ENCHANT ME

Beauty is more than skin deep. Mobile apps should be sleek and aesthetically pleasing on multiple levels. Transitions are fast and clear; layout and typography are crisp and meaningful. App icons are works of art in their own right. Just like a well-made tool, your app should strive to combine beauty, simplicity and purpose to create a magical experience that is effortless and powerful.

DelightDelight me in surprising ways

A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to experience.Subtle effects contribute to a feeling of effortlessness and a sense that a powerful force is at hand.

Real ObjectReal objects are more fun than buttons and menus

Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.

Personal

Let me make it mine

People love to add personal touches because it helps them feel at home and in control. Provide sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder primary tasks.

Learn Preference

Get to know me

Learn peoples' preferences over time. Rather than asking them to make the same choices over and over, place previous choices within easy reach.

SIMPLIFY MY LIFE

Mobile apps make life easier and are easy to understand. When people use your app for the first time, they should intuitively grasp the most important features. The design work doesn't stop at the first use, though. Mobile apps remove ongoing chores like file management and syncing. Simple tasks never require complex procedures, and complex tasks are tailored to the human hand and mind. People of all ages and cultures feel firmly in control, and are never overwhelmed by too many choices or irrelevant flash.

Short Text

Keep it brief

Use short phrases with simple words. People are likely to skip sentences if they're long.

PicturePictures are faster than words

Consider using pictures to explain ideas. They get people's attention and can be much more efficient than words.

Predict & ConfirmDecide for me but let me have the final say

Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo‘.

Display FewOnly show what I need when I need it

People get overwhelmed when they see too much at once. Break tasks and information into small, digestible chunks.Hide options that aren't essential at the moment, and teach people as they go.

NavigationI should always know where I am

Give people confidence that they know their way around.Make places in your app look distinct and use transitions to show relationships among screens.Provide feedback on tasks in progress.

Save Works

Never lose my stuff

Save what people took time to create and let them access it from anywhere.Remember settings, personal touches, and creations across phones, tablets, and computers. It makes upgrading the easiest thing in the world.

Look SameIf it looks the same, it should act the same

Help people discern functional differences by making them visually distinct rather than subtle. Avoid modes, which are places that look similar but act differently on the same input

Interrupt Only If ImportantOnly interrupt me if it's important

Like a good personal assistant, shield people from unimportant minutiae. People want to stay focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating

MAKE ME AMAZING

It's not enough to make an app that is easy to use. Good mobile apps empower people to try new things and to use apps in inventive new ways. Smartphones lets people combine applications into new workflows through multitasking, notifications, and sharing across apps. At the same time, your app should feel personal, giving people access to superb technology with clarity and grace.

TricksGive me tricks that work everywhere

People feel great when they figure things out for themselves. Make your app easier to learn by leveraging visual patterns and muscle memory from other mobile apps. For example, the swipe gesture may be a good navigational shortcut

Gentle Error

It's not my faultBe gentle in how you prompt people to make corrections. They want to feel smart when they use your app.If something goes wrong, give clear recovery instructions but spare them the technical details.If you can fix it behind the scenes, even better

SprinkleSprinkle encouragement

Break complex tasks into smaller steps that can be easily accomplished.Give feedback on actions, even if it's just a subtle glow.Drag & drop is a good practice

Heavy LiftingDo the heavy lifting for me

Make novices feel like experts by enabling them to do things they never thought they could.For example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in only a few steps

Make Important FastMake important things fast

Not all actions are equal. Decide what's most important in your app and make it easy to find and fast to use, like the shutter button in a camera, or the pause button in a music player.

SIZE & COLOR

48 px Rhythm

• 48 pixels for touchable UI components• Why 48 px?

– On average, 48 px translate to a physical size of about 9mm (with some variability). This is comfortably in the range of recommended target sizes (7-10 mm) for touch screen objects and users will be able to reliably and accurately target them with their fingers.

– If you design your elements to be at least 48 px high and wide you can guarantee that:

1. your targets will never be smaller than the minimum recommended target size of 7mm regardless of what screen they are displayed on.

2. you strike a good compromise between overall information density on the one hand, and targetability of UI elements on the other.

48 px Rhythm

Mind the gaps• Spacing between each UI element is 8dp.

48 px Rhythm Examples

Color

• Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast between visual components.

• Red and green may be indistinguishable to color-blind users.

Color for Contextual Icon

• Use non-neutral colors sparingly and with purpose.

• For example, Gmail uses yellow in the star icon to indicate a bookmarked message. If an icon is actionable, choose a color that contrasts well with the background.

APP STRUCTURE CHECKLIST

1. Find ways to display useful content on your start screen.

2. Use action bars to provide consistent navigation.3. Keep your hierarchies shallow by using horizontal

navigation and shortcuts.4. Use multi-select to allow the user to act on collections

of data.5. Allow for quick navigation between detail items with

swipe views.

App Structure 1

Find ways to display useful content on your start screen.

App Structure 2

Use action bars to provide consistent navigation

App Structure 3

Keep your hierarchies shallow by using horizontal navigation and shortcuts

App Structure 4

Use multi-select to allow the user to act on collections of data

App Structure 5

Allow for quick navigation between detail items with swipe views

WRITING STYLE

1. Brief2. Simple3. Friendly4. Most Important First5. Only The Necessary6. Avoid Repetition

Keep it brief

Be concise, simple and precise. Start with a 30 character limit (including spaces), and don't use more unless absolutely necessary.

Keep it simple

Pretend you're speaking to someone who's smart and competent, but doesn't know technical jargon and may not speak English very well. Use short words, active verbs, and common nouns.

Be friendly

• Use contractions.• Talk directly to the reader using second person

("you").• If your text doesn't read the way you'd say it in

casual conversation, it's probably not the way you should write it.

• Don't be abrupt, make the user feel safe, happy and energized.

Put the most important thing first

The first two words (around 11 characters, including spaces) should include at least a taste of the most important information in the string. If they don't, start over.

Only The Necessary

Describe only what's necessary and no more. Don't try to explain subtle differences. They will be lost on most users.

Avoid repetition

If a significant term gets repeated within a screen or block of text, find a way to use it just once

SOURCEhttp://developer.android.com/design