Jonathan Stark: Principles of Mobile Interface Design

Jonathan Stark (@jonathanstark) was speaking about Mobile Interface Design, these are my notes from his talk.

Cross platform and mobile web are the best way to reach a broad audience. Most of this advice applies to this situation.

Mobile != Desktop

Mobile experiences were scaled down version of desktop experiences but this changed as there are a number of factors that make it a very different environment.

• Tiny screen
• Battery
• Spotty connection
• Small pipe
• Expensive data
• Limited storage
• Touch vs Mouse
• Distracted user

Mobile is now more powerful than desktop: it's more personal, it's always on, usually connected, directly accessible, GPS, accelerometer, camera, &c

Mobile Mindset

Get into a mobile mindset before you start.

• Be focused - edit features ruthlessly. Don't let feature creep turn your app into something it isn't.
• Be unique - play to your strength. There are a lot of apps in the app stores - why is yours the best one?
• Be charming - develop your personally. More important on mobile as devices are more personal. Friendly, reliable and always there makes apps reassuring
• Be considerate - it's not about you, it's about your users. Don't focus on what you want or is fun to develop and forget about what the users want. If you're not sure what your users want then ask them - social media is there, use it.

Mobile Context

• Bored - social, news, entertainment. People who have a surplus of time. Should expect users will be interrupted so save the state.
• Busy - email, calendar, banking. Ability to complete micro transactions reliably in a short space of time. Big targets, bold iconography.
• Lost - attractions, directions, recommendations. Connectivity and battery life are the main problems for this kind of app.

Global Guidelines

Stuff that always matters.

• Speed - it has to be fast or people will give up on it.
• Responsiveness - not the same as speed, give feedback as soon as an interaction is started, especially if it's going to take some time.
• Polish - it has to look good. Amplified by the personal connection to phones as small defects start to grate on our nerves.
• Thumbs are the default. People are mostly using their thumbs to interact. [I disagree, from what I've seen people use their fingers much more than the prevailing wisdom holds. Orde]
• Targets must be finger friendly. They have to be big enough and with enough separation to make the interface easy to use.
• Content is king, minimise the chrome. Remove buttons and labels that are no longer necessary.
• Controls should be beneath the content wherever possible as your hand will block the content if you go to use the controls at the top.
• Scrolling should be avoided when possible. Content off the screen may never get discovered. If you have to scroll then try and provide visual cues.

Navigation Models

Where the hell am I? Three models that often get used in the wrong place.

• None - single screen utility apps (e.g. calculator, remote control.)
• Tab bar - three to six major categories. Different areas, not in a hierarchy.
• Drill down - list + detail that exposes a hierarchy one level at a time.
• User input - try and avoid typing. Give pick lists and auto complete. If you have to use a keyboard then make sure you use the appropriate type of keyboard (e.g numeric). Make sure you get the autocorrect and autocaps right is possible.
• Orientation - make sure you don't fix the orientation.
• Gestures - multi touch, swipe, &c. They are invisible, discovery is an issue. Two hands are required for milti touch - can't readily pinch zoom one handed. They're nice to have but don't make them a requirement for operation.

Orientation

• Portrait rules, it's the default you should optimise for.
• Landscape should also be supported as disorientation occurs when orientation change happens outside their control.

Communication

Be polite

• Provide feedback for every interaction.
• Modal alerts are only for total disasters - use a separate screen instead.
• Modal confirmations are for user actions. Ability to undo is better than confirmation.
• Badges are good (except when they aren't). Make sure your notifications are correct, less information is better.

Launching

• Resume operation right where your user left off. Makes the app feel much faster
• Launch screen should be a "content-less" background. Nothing with which you can interact as it won't actually affect launch speed.

First Impressions

• Your icon is like a business card for your app - it has to exist outside your app on home screens, app stores, Google, etc.
• Fist launch is a special situation. Walk people through the interface, give them a guide to discoverability. Try and keep it to a bare minimum and always give an opt out for users who already know how to use the app.

Design Process

• Personas - flesh out a few user archetypes. Try and find some real people that match your personas.
• Storyboard endlessly on paper, it's more inclusive than in a particular program.
• Prototype on actual devices as soon as possible. Simulators don't give the same experience.
• User feedback is enormously helpful, get it as early as possible to prevent you going down dead ends.