Getting Started with Mobile UX Design
I've created a presentation that is not focused on apps or the web specifically, but is targeted at touch-enabled smartphones instead. This post is a synopsis of the presentation.
Some of what follows may seem obvious, but you would be surprised at how many sites and apps in the market seem to disregard these basic factors:
Today's smartphones offer a sophisticated set of inputs that provide UX designers a plethora of options. Touchscreen inputs include:
Design often begins with layout. Defining the fundamental organizing structures for a mobile project is crucial for creating a consistent and usable experience. One of the major differences to keep in mind when developing layout for mobile is that users need to not only view the screen but also interact with it. In mobile as in desktop, western audiences move top left for bottom right. With the majority of users being right handed (70% to 90% worldwide according to a variety of surveys) the mid- to lower-right area of the screen become more ideal for touch and less ideal for information consumption.
When it comes to multiple page (or state) projects, the most common pattern at this point is to consume top to bottom, and paginate left to right. This might be realized as a swipe from page to page, next and previous buttons, or a back button in the upper left.
Due to the often-vertical format of mobile devices, the majority of layout elements are realized as horizontal strips. These strips can serve as navigation hubs, content containers, section breaks, or buttons.
Turning our attention to functional anatomy of a mobile web page or app, some common trends become evident:
Here again we see a set of patterns emerging that take advantage of the input method. Common interface elements include:
As in the world of desktop, users commonly need to navigate from one area of the experience to another, and back. Due to the limited screen real estate, a variety of solutions rise to the forefront. Common approaches include:
Compact localized menus that are presented when needed are a great technique to help users accomplish simple tasks without monopolizing screen real estate. While most mobile operating systems include several built-in contextual tools we are starting to see an increase of their use in apps and mobile sites.
Lastly, here’s a collection of points to keep in mind as you make your way through your mobile project:
The Basics
Some of what follows may seem obvious, but you would be surprised at how many sites and apps in the market seem to disregard these basic factors:
- Screen size and proportions: moving from desktop to mobile means a lot less screen real estate and much more variety in screen proportions
- Direct interaction with display: unlike the desktop environment, users interact directly with the screen rather then using a separate mouse and keyboard for input, which sets up an immediate conflict of screen use
- Variable orientation: small handheld devices allow for quick orientation switching
- Single-screen environment: even with smartphones that allow users to run multiple apps or maintain several browsers windows simultaneously, the small screen size results in an established convention to interact with one state at a time, which suggests that we need to focus the experiences we create on contained tasks
- Limited discovery: there are no roll-overs or tool-tips, so make sure actions are obvious and enable users to recover from mistakes easily
- Established device standards: as the market matures, consistent UI patterns are forming (back button in the upper left), if you choose to brake the standards make sure you are doing so for the right reasons
- Limited resources: while smartphones are advancing by leaps and bounds, they are still limited by connection quality, battery life, processing power, and onboard memory
Inputs & Outputs
Today's smartphones offer a sophisticated set of inputs that provide UX designers a plethora of options. Touchscreen inputs include:
- Single tap: used in place of a standard mouse click
- Drag: scrolling or panning
- Flick: scroll of pan quickly
- Swipe: make selection, evoke a contextual menu, or as part of a two step process like delete
- Pinch (open & close): zooming in/out
- Press and hold: make a selection or evoke a contextual menu
- Physical buttons: home, menu, back, volume up/down, etc.
- Physical keyboards: short cuts, text input
- Accelerometers: track motion and orientation
- GPS: location, location, location
- Ambient light: suggest environment or time of day
- Microphone: voice commands, ambient audio, music
- Camera: photos and visual codes
- Visual: superb high resolution screen
- Audible: often on speakers or headphones
- Physical: many phone posses the ability to vibrate for alerts or haptic feedback
Layout
Design often begins with layout. Defining the fundamental organizing structures for a mobile project is crucial for creating a consistent and usable experience. One of the major differences to keep in mind when developing layout for mobile is that users need to not only view the screen but also interact with it. In mobile as in desktop, western audiences move top left for bottom right. With the majority of users being right handed (70% to 90% worldwide according to a variety of surveys) the mid- to lower-right area of the screen become more ideal for touch and less ideal for information consumption.
When it comes to multiple page (or state) projects, the most common pattern at this point is to consume top to bottom, and paginate left to right. This might be realized as a swipe from page to page, next and previous buttons, or a back button in the upper left.
Due to the often-vertical format of mobile devices, the majority of layout elements are realized as horizontal strips. These strips can serve as navigation hubs, content containers, section breaks, or buttons.
Turning our attention to functional anatomy of a mobile web page or app, some common trends become evident:
- Status bar: iOS, Android and BlackBerry devices have an almost omnipresent strip at the top of the screen that keeps users posted on critical info like time, connection quality, and battery life. These bars can be skinned or hidden to varying degrees
- Navigation bar: usually at the top of the screen the navigation bar's function is to let user move between sections, pages, or states
- Tab bar: a secondary navigation tool located at the bottom of the screen
Touch Controls
Here again we see a set of patterns emerging that take advantage of the input method. Common interface elements include:
- Single tap buttons
- Toggles: switches (on/off), check boxes
- Sliders: horizontal (volume or brightness), vertical, dials and knobs
- Tabs
- Draggable items: moving or sorting
- System supported: input fields, drop-downs
Navigation Menus
As in the world of desktop, users commonly need to navigate from one area of the experience to another, and back. Due to the limited screen real estate, a variety of solutions rise to the forefront. Common approaches include:
- Home screen as a menu: users land on a screen that offers a set of option and return to it to navigate to other areas
- Tabs: selected content focused into a limited number of tabs
- Fly-outs: tapping a button or link offers a familiar overlaid menu
- Takeover: tapping a button or link reveals a large menu that either lays on top, covering the content, or pushes it down and off the screen
- Previous and next buttons: some designers are opting for a more linear forward-and-back style of navigation
Contextual Menus
Compact localized menus that are presented when needed are a great technique to help users accomplish simple tasks without monopolizing screen real estate. While most mobile operating systems include several built-in contextual tools we are starting to see an increase of their use in apps and mobile sites.
The Best of the Rest
Lastly, here’s a collection of points to keep in mind as you make your way through your mobile project:
- Keep it simple and focused (above all). As you’re developing your app or site, define the users’ tasks and support them with clean and tightly edited experiences.
- Be consistent both with established standards and those standards that existing within your own project.
- Keep the user's context in mind. Where are they? What is appropriate for that environment?
- Provide visual feedback, always. Slow connection speeds, tiny processors, tiny hit areas, disabled speakers… there are lots of reasons why the user may be left wondering if their button press worked. Always confirm their action with some immediate visual feedback.
- Try to limit scrolling to one direction.
- Prioritize content. Put the most important stuff first.
- Leverage styling over images to build up your aesthetic.
- Review and test your project on the actual target device.
- Identify clearly where links point and what buttons do. It can be extra frustrating to recover in the mobile environment.
- Include a button to clear contents of input fields if the user wants to start over.
- Define your input field types to help the OS provide the right keyboard configuration or input mechanism.
- Provide a link to your full site — always.
- Avoid pop-ups, redirects and auto refresh.
