Designing for Mobile, Part 2: Interaction Design

My first mobile phone, a Nokia 5110 (purchased in 1998!), offered very few features: I could call, text or play Snake. What’s more, these interactions were completely controlled by the manufacturer. With the advent of smartphones, touch screens, and “app stores,” however, the opportunities for designers are now innumerable. It’s incumbent upon us to familiarize ourselves with the conventions of this still-relatively-new medium.

Welcome to Designing for Mobile, Part 2: Interaction Design. Here’s some background in case you’re just joining us mid-series: Designing for Mobile, Part 1: Information Architecture demonstrated the key challenges designers face when designing for mobile, primarily the mobile context: from viewing conditions, to behavior and emotion. Because these differences impact the user, I explained that it’s important for us to consider them throughout our design process – from research and strategy to creating the final product.

Part 1 concluded with an exploration of information architecture in the mobile context. This provides a good foundation for the rest of the design process. Before jumping into aesthetics, though, it’s important to understand how mobile and tablet interactions differ when compared to their desktop counterparts.

The design of interactions

Most modern, mobile devices employ touch screens; which provide their own set of opportunities and constraints. We use them not only to view content, but also to interact with that content. This forces designers to consider ergonomics, gestures, transitions, and finally, mobile-specific interaction patterns.

Ergonomics

Designing for mobile ergonomics requires that we pay attention to device dimensions as well as the pragmatic concerns of touch screens. The way a user holds a device and touches the screen, for example, influences how easy it is for that user to reach parts of the screen.

Hit areas, or “areas of the screen the user touches to activate something” require adequate space for the user to accurately (and confidently) press. The average fingertip is between one to two centimeters wide, which roughly correlates to somewhere between 44px and 57px on a standard screen and 88px to 114px on a high-density (“retina”) screen. Nokia, Apple and Microsoft each recommend slightly different sizes to account for the nature of touchscreens.

Yet there are no hard and fast rules with regards to hit areas. Instead of looking to the various standards for an answer, simply consider what the user needs to achieve on the screen, how important that task is, and how quickly they need to complete it – then design accordingly.

Gestures

Each part of a touchscreen dedicated to functionality precludes the display of content in that area, making gestures a crucial component of mobile interaction design. All of the major touch operating systems employ them, including: Google’s Android, Apple’s iOS, and Microsoft’s Windows 8.

The table below provides a brief summary:

Action	iOS	Android	Windows 8
Press	Selects primary action	Selects primary action	Selects primary action
Long press	In editable text display magnified view for cursor positioning	Enter data selection mode	Show tooltip without selecting the item.
Double press	Zoom in or zoom out	Zoom in or zoom out. Also used for text selection	No standard
Small swipe	Reveal a delete button by sliding horizontally on a table view	No standard	Select objects in a list or grid by sliding perpendicular to panning direction
Large swipe	Scroll across content	Scroll across content or navigate between views within the same hierarchy	Scroll across content Also used for moving, drawing or writing
Pinch / spread	Zoom in or zoom out	Zoom in or zoom out	Zoom in or zoom out

Additionally, standards and patterns have emerged for developing gestures on touch-based devices. Designers can – and often should – push the boundaries of gestures to suit their application.

Transitions

Transitions are interactions that smooth the boundaries between application states, helping to tell a story or (re)establish a gestural metaphor. More generally, transitions help facilitate recall and prevent users from getting lost.

Basic transitions include:

Gesture	Transition	Description	General usage
Press	Quick change	The view changes without any animation.	When changing between two different types of tool or content.
	Expand	An item on the screen expands pushing content along or down	When expanding a list of content within a screen.
	Flip	The view flips over as if turning around from back to forwards	When viewing a screen specifically related to the previous screen, e.g. additional settings or information.
	Open to full screen	An item on the screen opens/expands to fill the full screen.	When opening or viewing an item. This transition can also be inverted to close an item.
Swipe	Horizontal slide along	The view slides left or right, pushing the previous view out of the screen.	When moving forward to view new and related content, or back to a previous screen.
	Horizontal slide over	The view slides left or right, over the previous view	When viewing supporting or additional content.

These are just a few; there are a whole host of transitions from which we might choose. The best choice is one that adds coherence to the interaction we’re facilitating.

Common patterns

As alluded to in part 1, mobile devices give designers less space to add menus and navigational cues than they might be used to on a desktop computer. Combined with environmental factors – such as poor viewing conditions and/or distractions – it’s often difficult for us to provide users with a good grasp of our content’s structure.

There are, however, a few common interaction patterns up to the challenge. Some of the most valuable include those used to improve navigation, select content, sign in/out, and negotiate forms.

Main navigation

Main (or “primary”) navigation is a visual manifestation of our website (or application)’s information architecture. Here are a few options to consider:

Starbucks responsive site with expanding menu	Expanding Menu Many mobile and responsive sites use an expanding menu to access the main navigation. A menu icon (generally a series of lines) is contained in the header. Tapping the icon shows a list of main menu items. Good for: Responsive websites Watch out for: Too many menu options and sub menu options could push the content further down the screen making it frustrating and awkward to use.
Facebook app with side menu	Side menu Some apps and also sites use a sliding side menu. As seen in the Facebook app. As with the expanding menu you will often press an icon with a series of lines or slide the screen over, this then expands or slides open the menu, showing a list of menu options vertically down the side of the screen. This can have categories as well as being scrollable. Good for: Apps with a high number of menu options. This creates a separate area for the navigation instead of taking up a large amount of space where the user would interact with content or features. Watch out for: Ensure it doesn’t clash with any other navigation or interaction patterns, as the user may be easily lost. For example using an expanding or tabbed menu along with this pattern may cause the user confusion when trying to find a specific item or feature.
Amazon app with tabbed menu	Tabbed menu This pattern corresponds with the previous article in this series. A persistent toolbar, displayed in either the header or footer of an app, allows user to quickly switch between sections. Good for: Apps with fewer menu options. This is due to the amount of horizontal space available on mobile screen. This is generally used as app navigation for iOS, where 5 menu options are recommended. Watch out for: Bottom tabs may clash with Android and Windows 8 standard interactions.
LinkedIn app with dashboard menu	Hub and spoke menu This pattern corresponds with the previous article in this series. A centralized home screen allows the user to select a menu option. This will navigate the user to this section, which can have it’s own internal navigational pattern. The user may return to the home screen by activating a back link. Good for: Quickly exposing an app’s features. Watch out for: Silo-ing functionality. If a user wants to navigate between functionalities, returning to the home screen could be frustrating.

Selecting content

Pressing links to activate content facilitates flow, making it easy for the user to quickly select content with one hand. If done well, this transition also increases user engagement.

BBC news app with forward navigation	Press to move forward The user will flow forward through content, generally by selecting categories, sub categories then into content, and often moving forward to new related content. Good for: Keeping a user engaged in article driven content. Watch out for: The user may feel lost if they aren’t sure where they are within a navigational structure.
App store with coverflow carousel	Coverflow The user can scroll across previews of content then select an item to navigate into it. This horizontal scrolling pattern is inherent to the Windows 8 ‘metro’ style apps. Good for: More visual content that you want the user to explore and preview before selecting. Watch out for: Making the user do lengthy scrolling to access the content they want to access frequently.
iOS maps peel back for further options	Flip over / Peel back To make it clear that you are exploring content or settings relating to the item you are already viewing, often a peel pack or flip over interaction will allow you to nicely access further details. Good for: Relating two types of content, e.g. settings or further information. Watch out for: Over complicating your interactions and confusing the user as to where they are within the navigational structure.

Signing in

Entering a username, email and password is an essential process for some applications. As designers, we can ensure it’s as painless as possible.

Instagram	Auto sign in The user’s sign in details are stored within an app, and on initialization the user is logged in, and their data is shown. This is how many social network apps work, e.g. Facebook, Instagram and Twitter Good for: Apps that require log in to access personal information but don’t require a high level of security. Watch out for: Ensure that the correct level of security is being applied.
Gmail	Remembering details As with desktop sites retaining user details, such as the email or username within a form can help speed up the sign in process. Good for: Mobile and tablet sites that require sign in. Watch out for: Requiring sign in where it isn’t necessary.
Paypal	Pin codes Creating a quick way of logging in without requiring the user to enter the standard log in details can be really powerful. PayPal allows you to create a simple pin number, making signing in very quick and easy. Good for: Apps that have a requirement for security, but can associate with your specific device. Watch out for: Ensure that the correct level of security is being applied.

Using forms

Filling out forms can be frustrating on a mobile device, especially if that form appears on a website designed for a desktop, yet lacking a mobile version. Facilitate the process by attending to the usual mobile design considerations, and consider these solutions to make using forms on a mobile even easier.

Amazon app allows you to access personal details and order history	Save user details Using a login to save/recall user information saves time, reducing overhead and making using your website or application that much easier. Good for: Sites or apps where a user may have to add personal details, such as within a shopping process. Watch out for: Ensure an appropriate level of security is applied.
Just Eat app provides an email focused keyboard	Providing the right keyboard One way to smooth out the form filling process is to ensure that the relevant keyboard is displayed when a user activates a form field. For example, if the user must enter a phone number, display the numerical keyboard. This can be achieved through the code. Good for: All forms Watch out for: Nothing!
Topshop app purchase process	Progress bars Progress bars are a really excellent way of informing the user the length of a multi-step process on a desktop, but device dimensions make this a bit of a challenge on mobile and tablet devices. They can still be used however, but clever use of the available area will be required. Good for: Shopping process or long forms Watch out for: Don’t take up too much space, as this could be a barrier to quick content access.

Next steps

Standards and guidelines provide a place from which to innovate. When I played Snake on my Nokia 5110 I never imagined that I would someday have the opportunity to design and shape tools for mobile. Today’s solutions become tomorrow’s standards and guidelines.

Getting the interactions right on a mobile device is essential. But to create a truly wonderful experience the actual appearance of the website or application needs to inspires, charms and engages. In part 3, I’ll explore how the layout and visual design can support the information architecture and interactions to create a thoroughly engaging experience.

Continue to Part 3: Visual design

Return to Part 1: Information Architecture