Mobile Design Principles

Monday, July 18, 2011

Tonight at the iHub Nairobi's Mobile Monday I gave a talk on Mobile Design Principles, sharing some thoughts on designing for small screens.

As more developers migrate from web to designing mobile apps, it's important to remember these basic mobile design principles, which can be applied regardless of your target platform.

Simple - keeping it simple is key to good mobile design

• single task - each screen should focus on doing one task really well
• less is more - reducing features often provides a better overall user experience
• uncluttered - clean, large, well spaced, readable
• easy to use - should be intuitive the first time 

Familiar - application should instantly be familiar to your users

• native platform - familiar with the target device (shouldn't feel like a BlackBerry app squished onto an Android screen)
• other apps - similar user experience to other apps on their device
• design standards - reuse basic ui elements (if you are building your own custom date picker when a native one already exists, you need to ask yourself why)

Consistent - should be a consistent user experience throughout application

• element layout - similar location of controls, buttons or menu items like Done or Cancel
• color, fonts, whitespace - consistent color, fonts and whitespace also important

Fast - performance critical on devices with limited processing power

• quick launch - opening the app should be quick
• responsive - actions inside the app should feel snappy
• cancellable - long running tasks should allow user to cancel them or elegantly timeout

Feedback - providing meaningful user feedback a must

• loading indicator - tasks that take longer than a second should display a loading indicator
• show progress - long running tasks should ideally show the percentage of progress
• highlight selected - changing the background color of current item is subtle but useful feedback
• scroll to current - auto scrolling to the currently selected item can also enhance user experience

Efficient - strive to making input as easy as possible

• minimize input - the more ways you can reduce typing the better
• auto complete - provide suggestions as user types
• easily searchable - filtering long lists for easier selection
• remember last - intelligently remember last input for each field (example name vs city)
• pre-populate - populating fields with available information like date and location, while still giving user option to change if needed

Scale - resizing elements to utilize the screen space

• utilize full screen - docking controls to screen edges can help ensure controls stretch gracefully
• fit to orientation - re-arranging elements to utilize portrait or landscape
• easy to click - large easy to click controls makes it easier to select and input data
• reduce scrolling - scrollbars are often painful on mobile devices, so providing alternatives like pagination worth investigating
• expand for more - limit how much is displayed while giving the option to expand to view more

Offline - should function when internet is not available or connection limited

• work offline - if your app requires a constant internet connection, why didn't you just make a mobile web page?
• load in background - intelligently pulling of data in the background can provide seamless user experience allowing them to do other tasks in the meantime
• download now - ability to download data now can utilize wifi hotspots making the app useful in dead zones
• upload later - being able to add content in a disconnected state, and then upload when internet becomes available

Context - remembering where user left off

• remember state - the app should re-open at the previous state
• auto save on exit - automatically saving content
• user preferences - allowing user to customize the app and it remembering their settings

Design - balancing appearance and functionality

• look & feel vs functionality - can you make it look nice but also be useable?

Fun - finally, make it fun

• useful - does it solve a problem?
• addictive - do you use it yourself?

This talk focussed on designing effective user interfaces to utilize real estate on small screens. For more information about using the full potential of mobile devices, check my previous blog post on Harnessing The Power Of Mobile.