Mobile UX Patterns - Mobile User Experience: Patterns to Make Sense of it All (2014)

Mobile User Experience: Patterns to Make Sense of it All (2014)

Chapter 6. Mobile UX Patterns

Abstract

This chapter introduces a set of mobile patterns to assist in the creation of different mobile experiences. Each pattern uses a unique user flow, user interface elements, hardware, and gestures specific to mobile. Patterns range from using the location, using the camera, creating a launch screen, defining a detailed list and a login—all necessary patterns to creating an engaging and usable user experience. Readers will be able to use these patterns as a starting point to build and explore their own mobile user experience. As they develop this skill, they will be able to combine the individual patterns into more complex experiences.

Keywords

mobile; pattern; user experience; app; mobile web; geolocation; rotation; accelerometer; camera; design

Why Patterns?

image

Many years ago, I had an opportunity to sail with Ted, a friend and retired IBM software engineer. When I asked him what he wanted me to do on the boat, he replied, “I want you to sail the spinnaker.” To my knowledge, this one of the most complex and difficult pieces to master (in fact, I had no idea what I was doing when I started); when I asked him why he wanted me to sail the spinnaker, he replied with this: “You’re a UX designer. Trust me, you’ll figure it out. Just try to match the pattern on the sail as it moves in the wind.”

What Ted had been referring to was the movement of the top quarter of the sail, a piece no more than 12 inches in length and some 15 feet away. As the boat accelerated and decelerated, the shape of this small portion in the sail would change in the wind. By matching a certain pattern of movement to the sail, I could make the boat go faster or slow it down. The more time I spent sailing, the more I started to experiment with the patterns that the wind made in the shape of the sail. What happened to this piece of the sail in high wind versus low wind, when the boat was at a different angle and even in different wind speeds? Ted had been right: this was a perfect job for a UX designer.

When I first began thinking about how best to describe mobile user experience, I struggled with what to call the library of experiences that I had collected. Are they archetypes? Are they interaction models? Or, are they processes? I remembered my experience of learning to sail with the spinnaker. As I thought more about this, the metaphor of sail patterns made perfect sense; you have a visual pattern or behavior that you are trying to replicate predictably and a series of controls to make these patterns appear. As in sailing, to best know the optimal experience you need to start with a defined set of patterns that are already successful. Once you have a set of familiar patterns working repeatedly, you can begin to change, tweak, and optimize the experience of each; hence the name of this library I have collected: Mobile UX Patterns. As I learned through sailing, with UX design it is important to first decide your intent, use the right pattern, and once it is successful, then begin to change, tweak, and optimize to your exact experience.

The goal of this chapter is to present a series of visual patterns and their use cases. I will focus on end-to-end use cases, where we see user interaction, design elements, user experience flows, and information on user intent. I will be presenting them in forms of illustration, wireframes, and sketches. The intent is to show how these concepts work and how best to represent them as visual experience patterns. Some of my patterns will be driven by user interface, some driven by user action, and others driven by the hardware; regardless, these patterns allow mobile UX designers to create an experience for the users via different methods and techniques to meet the user’s goals. I have collected these patterns into a library; each UX pattern is different from the other, but they can also be combined to reinforce one another. As you continue through the chapter, you will see how some patterns may complement or affect each other. Feel free to mix and match patterns. As you do, remember the metaphor of the spinnaker sail: decide your intent, use the right pattern, and once it is successful, then begin to change, tweak, and optimize to your exact experience.

As you go through the patterns, I provide examples to some of the wireframes and visual elements included in each. I add annotations to patterns and elements that you can use in building your own experiences.

Pattern 1: The Launcher

This pattern—let’s call it the launcher or springboard—is based on a simple concept: give the user a screen where they can access various applications, functionality, and actions. Most users of Android and iPhone devices are accustomed to the interaction model of a home screen with apps that they can launch when touched. Our goal with this pattern is to mimic this learned behavior and apply it to our design so the user can navigate your mobile experience.

The Basic Layout

image

This pattern is made from two main components.

1. The header

2. The work area

The Header

The header is used to display two basic functions. The first is the branding area for your app or website and the second is the navigation area. Our goal with this area is to allow consistent navigation and branding across the experience. As with designing for the web, consistency allows your user to have a level of way-finding in an experience; the mobile is no different. As we dig deeper into our content pages, we can use this area to include navigation elements, for example, a back button in iOS or navigation tabs in Android, all of which are ways to navigate back to your main content areas.

The Work Area

The main goal of the work area is to allow you a flexible place to house the content of your experience. As the navigation and branding are combined in the header, the work area gives us a clean slate to focus on our content. For business apps we can use the work area to house templates for functionality (e.g., bank for checking my account), for media we can use the area to house templates for content, and for games we can use this as a springboard for different levels and mini games.

Visually, the work area requires us to provide flexibility to the design. Our experience needs to be fluid in not only the width, but also the height. The experience should be able to scale to multiple screens proportionally to handle the jump from 320 × 480 to 480 × 800 pixel screen sizes. It should also be able to change its height when the experience requires or the orientation changes. This may seem an unusual use case, but this is now very common, for example, when creating an experience to fit into an iPhone 4 versus an iPhone 5, where only the height of the screen has been enlarged. This is also the case with some Motorola Android devices that now have a uniquely larger screen height (854-pixel vs. the more common 800-pixel height). When using this pattern for the mobile web, using responsive web design can solve these use cases; flexible page widths can be used to scale across the multiple screen widths and heights.

Creating Connections

The true power of the interaction of this pattern is the creation of connections for the mobile user. Here are some examples of what I would call a true mobile “integration.”

Example 1: Use a launch icon to start the dialer.

Example 2: Use a launch icon to start the camera.

Example 3: Use a launch icon to open a web page from a mobile app (this would launch a window of the WebUI view).

Example 4: Use a launch icon to download an app from the mobile web.

Example 5: Use a launch icon to connect one app to another app. In iOS we can set logic in place to allow apps to talk to each other; this is referred to as “in-app communication.” If the app is present on the device, the app will open; if not, the app connects the user to the iTunes store. On return, the new app will connect from the launch icon.

Adding Extras

image

Extra Area.

As we lay out the launcher concept with more features we can focus on adding additional content to the display area. We can look at being able to engage our users with features and functionality to enhance their user experience and meet our business goals. The goal is to create a container that gives us a fixed size to add more depth to the work area. I call this container the extra area (see label #3).

Ads

One of the most common cases is being able to add advertising space to the work area. This is becoming one of the most typical methods to attract users to other apps and websites. In the app world this is called In-App Advertising; users can access other apps for rewards, or be able to advertise your own apps to your consumer base. The goal of using this fixed area is to define the placements of the ads without distracting from the design intent or interfering with the user’s goals. If we have created a flexible work area, we can tie the ad to the bottom of the screen and have it move and scale with different screen sizes; this makes our design fully responsive.

Search and Features

Our work area can also be used to allow (or encourage) the users to explore deeper into our experience. We can use our extra area on the home screen to promote content, add a search bar, and display deep links or content directly from the first screen. In this case, I would explore moving the extra area right below the header. This creates a hierarchy of areas for the users to explore as their eyes move down the screen. We can use this area to make the launcher feel more dynamic by periodically changing the content if we wish; making the launch feel fresh when a user revisits the app or the mobile website.

The Advance Launcher

One of the strongest parts of the launcher concept is the intent to keep the user engaged with different parts of your mobile experience. By adding features or ads in the extra area we can push content to our users. But, what if we want to really enhance their experience and tailor it to their visit? Our next step is to begin to see how dynamic we can make this pattern.

Sliding Panels

image

Adding additional panels to the screen can enhance the work area and launcher, simulating the home screens of most smartphones. For apps, we can use the gesture of sliding from left to right and back to access these panels/views with more icons. For the mobile web, we can scroll down the screen to expose a larger number of icons or add swipe gesture with the addition of an external JavaScript library. Taking this further, we can create pagination to simulate the app experience as well. This allows our users to be exposed to more content without leaving the first page of the experience.

Logging In and Out

image

Login Function in Work Area.

Our second advanced feature is to create log in and log out functionality. We can replace one of the icons with a login button. Once the user logs in, we can replace the extra area with unique content or personalization for our users. We can then replace the login button with a logout icon as well. Our goal is to make a seamless experience by having our user add their credentials with little effort. With both apps and mobile websites, we can locally store users’ credentials to the device allowing the users to return to the experience without having to log back in. The more we can personalize the launcher, the more frequently they will use our experience.

Personalizing and Customizing the Launcher

Continuing with our personalization trend, we can introduce the concept of having the user customize their experience. Imagine being able to have the user change the look and feel of the experience, or even the amount of icons. Here is list of elements that might be used to give them a more engaging launcher screen.

Example 1: Give the user the ability to change the color scheme of the experience.

Example 2: Give the user the ability to hide or show icons on the launcher.

Example 3: Give the user the ability to change the background by launching the camera or cameral roll.

Example 4: Give the user the ability to add or remove the panels.

Taking this further, we can experiment with using game mechanics to have users gain points or features by experimenting with customization of the launcher. By making it a game, we can have our user play, try, and customize the launcher. The more we can engage the user, the more we can get them hooked into using and returning back to our mobile experience!

Pattern 2: The Tray

This pattern sometimes referred to as the tray, drawer, or off canvas layout allows the designer to add more space to the experience without the user losing the screen or view that they’re on. The main feature is based around having the users use a gesture to either slide or touch to open this tray area.

The Basic Layout

image

This pattern is made from two main components.

1. The Active Button

2. The Tray Area

The Active Button

This element should always be a visible UI component. Either a button or tab, the intent is to make it clear to the user that this element is clickable and active.

image

Active Button Examples.

Here are some rules of thumb:

■ Make the shape unique compared to your other UI elements.

■ Make the design look active (a different color, shading, or texture).

■ Make the button look like it is part of the navigation.

■ Make sure it’s large enough for a finger.

■ Make the button look different when it is touched (a different color, shading, or texture).

The Tray Area

The tray is an extension of the experience; use this area to supplement and complement your experience. The design intent is to have the user quickly interact with the active button to enter this tray area. Once there, your goal is to offer them information and functionality to enhance the screen or view they are on (i.e., navigation, tools, or profile information). Make sure the tray area encompasses 60 to 70% of the screen width, leaving some of the foreground screen exposed. The idea is to provide a way-finding approach to making sure the users know what screen they were on and can easily return back to it.

image

Examples of Different Tray Options.

Good use cases for this pattern:

■ Access navigation

■ Offering your users tools

■ Displaying settings

■ Displaying user profile information

■ Filtering search results

The Advanced Tray

The tray can be used for showing more advanced features; for example, a tray that is a scrollable view. Some navigation or filters might not fit within the view. Allowing the user to scroll will give them access to a larger tray area.

A second feature is to include other UI elements inside the tray. For example, a log-out button, UI radio buttons or check boxes to turn a feature on or off, or a search field are some options that can be added to enhance the tray experience.

Another option involves launching the tray from a different position on the screen. This gives you the ability to use the tray for loading in content, icons, banner ads, or notifications instead of navigation. This also gives you a wider use of the screen area.

image

Example of a Tray Opening from the Bottom.

Good Gestures

image

Along with a clear and visible active button, the use of clear touch gestures to access the pattern should also be incorporated. Your active button should be accessible with the use of a swipe and touch. Use the left gesture to open and the right touch gesture to close the tray. If you follow these rules of thumb for the active button, your button should be large enough for a user to easily swipe the screen.

image

When using the scrollable feature in the advance tray, the users should be able to swipe up and down to scroll the screen along with using the left and right to open and close.

Avoiding Mistakes

A good pattern should provide you the flexibility and support for a positive mobile user experience, but sometimes there are clear use cases to avoid when implementing this pattern.

Be clean and lean

Avoid making the tray area too complicated. This is not another content area for you to add articles or legal text. Make sure the tray is easily readable and simple to engage. If you use navigation or UI elements make sure they are large enough for a user to touch.

Keep names short

Make sure the navigation and buttons you include are short and direct. If your text wraps to a second line, you might have a problem.

Don’t scroll too much

If you decide to scroll the tray, keep it to one or two screens, the smaller the better. The user should not feel like they need to deep-dive for content within the tray.

Don’t add other gestures

Keep your gestures to swipes to open and close and to scroll. Adding in a pinch or a shake won’t win you anything with your users, and will confuse them if the application is out of an anticipated context. This is a supplement to the screen, not its own environment, so don’t treat it like its own app inside the tray.

Don’t over do a good thing

Just because you can create a tray, don’t overdo this interaction; consistency is your friend. By adding more and more trays and active buttons you may confuse the user to the point of not knowing what content you want them to access and why. When in doubt, think back to point #1: Be clean and lean.

Pattern 3: The List

This pattern is one of the most commonly used in mobile UX. The design is based on providing basic navigation to second- and third-level pages, yet still providing a method to quickly return back to a main screen. This gives a clear indication to the user that they are travelling deeper into a list of pages and viewing page details.

Good use cases for this pattern:

■ Opening second- and third-level pages

■ Opening or expanding details for a content section

■ Enlarging images

■ Opening settings screens or options

The Basic Layout

image

This pattern is made from three main components.

1. The List Item

2. The Navigation Bar

3. The Navigation Buttons

The List Item

The list item should be a user interface button. It can be marked with an arrow, hyperlink, and it can also have an over state to show that the button can be touched to activate. In typical cases we would use these to show detailed descriptions, larger-sized images or second-level pages. As a designer, your goal is to keep these buttons looking clear to the user so that they can be accessible and still maintain a consistent design across the experience (i.e., every list button should have the same look and feel or use of opening a deeper page).

The Navigation Bar

The navigation bar design should be consistent across all the pages. This will provide the “way-finding” for the user as they explore the experience. This bar should always remain consistent when diving deeper into pages and can also provide the current page title as reference. Users will identify with this element to anchor where in the experience they have moved into and how they will return. The navigation bar will also house the navigation buttons to travel back to previous pages.

The Navigation Buttons

image

The navigation buttons are used to return the user one step backward in the experience. A typical case is to have a “Back” button in the top left hand of the navigation bar. As the user travels deeper and deeper into the pages the “Back” button should always return the user to the previous page.

The Advanced List

The list pattern can open up several possibilities in how we can visualize content and product pages. In most cases the simple use of the pattern will do; in more advanced cases, look at these two examples of how we can further enhance the pattern.

Making the Last Page Actionable

image

As I have stated before, good mobile user experience should always create an intentional flow. There should not be any dead ends to the users’ exploration. To ensure that the list pattern adheres to this goal, we need to make the last page actionable.

We can use two methods:

1. Provide an action button in the top navigation bar. In most cases for content rich pages we can use a share function to access social media or email. We can also allow users to save this page for their bookmarks or favorites.

2. Provide an action button below the page content. In the case of retail or e-commerce content we can add an “Add to Cart” or “Buy” button to the end of this page.

Using a Dynamic List

A step further to a static list of pages or links is using this pattern to manage a dynamic list. A perfect example of this is using the list pattern to display search results. In this case, a search bar can be used to allow the user to enter a set of keywords and as search results emerge they can be displayed below the search box. By creating these pages or lists as active links, the user can touch each result. As the user previews the results, the navigation bar can have a button that returns them back to the search list instead of a “Back” button. In this case, I would use a “Search Results” button to lead the user back to the list or results. This will allow the user easy access to preview and return back to the search results. The search result details can also be made actionable by giving the user the ability to save the result, share the result, or view more detail.

Avoiding Mistakes

Don’t over do a good thing

Try using this pattern to dig into two or three levels deep. If you find yourself digging too deep, you might have to rethink your use of this pattern or the number of levels of pages you have. At over three levels, you will find yourself confusing the position of what page the users are in. Remember that this pattern is about providing way-finding through your content.

Don’t skip a step

image

The key in using this pattern is to always keep consistency moving forward and backwards through pages. If you are on Page A and enter a Page B the “Back” button should always take you to Page A. If you are on Page B and enter Page C, the “Back” button should return you to Page B. A bad example is to be on Page C and have the navigation bar return you to Page A.

No dead ends

Just as I stated above, always make your last pages actionable. The worst thing you can do to your users is to make them dig through several pages and have them lose their place. They will leave frustrated and not take the time to return.

Pattern 4: The Rotate

This pattern is based on using the device’s built-in accelerometer to detect when the phone or tablet is being rotated from one orientation to another. This pattern is not just about resizing the screen’s width and height, but to provide a new experience based on how the user interfaces with the orientation.

image

When a user changes from one orientation to another, how they physically hold the device will change. For instance, when the user is positioning the device vertically they will typically hold it in one hand, thus giving them the use of that hand (or just their thumbs) to touch navigation. In the horizontal orientation position the user will place both hands to engage the device, thus making it easier to explore, presenting them with more complex functionality and features. It also allows them to have one hand holding the device while the other is used to touch or swipe.

The Basic Layout

image

This pattern is made from two main components.

1. The Rotation (Gesture)

2. The Horizontal or Vertical Screen

Your mobile experience can be defaulted to one orientation, or it can change once the user opens the app or page.

The Rotation

This gesture acts as the catalyst to access your experience. Whether this gesture rotates to the left or to the right, the goal is to use this action to rotate the orientation of the screen. There is no recommendation as to whether the action should rotate to the left or right first; the outcome should always open the same screen, unless the design intent requires this to be different.

The Horizontal or Vertical Screen

Now that the screen is rotated, the screen can now change to fit the new formation. When working with horizontal screens you can provide the users with navigation to the left or the right of the screen that might have not been available when the screen was vertical. As the left hand would be holding the device, the user’s right hand will be used to access the primary actions of the experience. This usage pattern is the norm for most right-handed users. (For left-handers, the pattern would switch to the opposite.)

When changing from a default horizontal view to a vertical one, the screen will be focused on a more compact view. I would suggest hiding navigation elements, allowing the screen to show a larger readable area.

The Advanced Rotate

The rotate pattern may seem simple, but it can open an endless range of possibilities to creating an engaging user experience. Imagine using the rotate function to create different views depending on the rotation angle of the device or using the rotation to open entirely new content. Let’s take a look at both of these possibilities further.

image

image

Designing for the Rotation and Tilt Gesture

The power of the accelerometer is that it gives us access to how the device is moving. Now let’s harness that power to use it to help create an engaging mobile experience. The accelerometer is a perfect match to use as a gesture to control games. Using this gesture, our users can drive a virtual car by tilting left and right or in a side scrolling game use the tilt gesture to change a virtual characters direction from left to right. These are all great uses of these native controls to have your device act as a game controller for your app.

image

But let’s take this a step further, imaging using the rotation and tilt to change navigation of our app or pages. Try using the tilt feature from left to right to access different navigation or functionality for the current screen. Why not make the user go back to on-screen navigation to change a view, open a new window, or access a different tool palette with each tilt or rotation.

A great use case would be a music player. As a complement to the on-screen controls you can have the user tilt to left to go back one song or tilt to the right to skip to the next song. The goal of this pattern is to use the hardware interaction to access and control the user interface. Designing your interactions should be tied to getting the best results for your users and providing an optimized user experience.

Changing the Content in Rotated Views

The next step would be use the full rotation of the device to change the on-screen content entirely. Instead of just changing the layout between horizontal or vertical, let’s use this to change the screen from one view to another. Here are two possible use cases:

image

1. The Business Case
The perfect case for this would be an app or mobile web page that requires you to have a user profile. Try using the rotation to access the user’s profile. In one case of this, I used the rotation to show a user’s membership card. This way, the users always had access to their mobile membership card at the flick of a wrist. Imagine using this to show your user’s rewards card, frequent flyer card, or even a credit card. No more extra cards in their wallets or purses, and no more lost cards!

2. The Game Case
Let’s say you are in the middle of an intense game play session. You are about to step onto a subway car or hail a cab or meet a friend. Why not rotate your phone to pause the game? Instead of trying to stop and find the pause button you can easily pause the session with a quick flip. With the use of entire rotation of the device you know that your users wouldn’t accidently do this during game play.

Going Even Further

image

To take this pattern even further, try having a different view appear as the users rotate their devices from top to left to right to bottom. Have fun with this pattern, but don’t be annoying to your users. The goal is to experiment, but try matching the right pattern to the right user. For example, a user trying to write an email might not appreciate having their screen change when they accidently rotate or tilt their device; the gamer, on the other hand, might think this user interaction to be fun and engaging.

Pattern 5: The Log In

The login is your first introduction to how users interact with your mobile experience; deciding how and where your users log in is critical to keeping their experience successful. This pattern is a based on a flow of pages followed by a set of UI elements contained within each screen.

The Basic Flow

image

This pattern is created using three screens.

1. The Log In

2. The Sign-up

3. The Forgot Password

The Log In

The login screen itself is one of the most critical to any user experience. It has to allow a wide degree of functionality, yet be visually graceful; a tough challenge when dealing with a small screen size. The end goal of this screen is to make the process of logging in so easy to the user that they will not treat the login process like a road block to the experience.

image

Let’s break down a mobile login screen:

1. You will need to keep the input fields very simple. Remove any labels for these fields. (i.e., username, email, password, etc.); you can add these labels inside the field to save space and streamline the look.

2. Make the login button as large as possible. Its width can extend to the edges of the screen size. This way, you can make sure that it is large enough for a thumb to touch it comfortably.

3. Make the login button color very clear, and give it contrast to the background colors. The end goal of the screen is to make the user log in, so this action needs to be as unambiguous as possible. Make sure the color and shape of the button is distinctive and vibrant enough to catch the user’s eye.

4. Design your screen to fit in the top half of the screen. As mobile devices display the keyboard on screen, you will need to account for the display area of the keyboard. As multiple devices and operating systems have different keyboards, you will need to account for enough space to handle these variations. At a minimum, the input fields should be displayed without having to make the user scroll up or down. Imagine making the users scroll up and down when you have just cut the screen area in half; they will get lost in a moment!

image

Login Screen with Different Keyboards.

5. Save passwords and user’s credentials to the phone’s internal memory. This can save time and frustration by allowing the user to return to our app or mobile website without having to go through the login screen. If we force them to go through the entire login process every time they return to our experience, they won’t come back.

The Sign-Up

The ability to sign up a new user over a mobile device is critical to acquiring users. Launching your app or website without it is the same as having a party guest show up to your house with no ability to knock or open the door. Stranger things have happened; see this screen shot of an iPhone app’s log in from a well-known coffee company. This was the first screen when a user opened the app; what is missing? What do I, as a user, do if I am opening this for the first time?

image

Your sign-up screen needs to be concise and easy to fill out. Using much of the same guidance of the login screen, the sign-up screen should allow users to create an account with as few fields as necessary. I would recommend using an email as the username to even reduce the fields that the user would need to fill out.

Once a user registers, your experience should send your new user an email confirmation. This gives you a chance to interact with your user as well as assure them that the process of registering was successful.

The Forgotten Password

image

Not the most visible screen, but assisting with forgotten passwords is essential to completing the login pattern. The majority of all the work on this screen should be handled server side. The user should enter an email/username and have a password confirmation/reset link sent to them. This link will need to point to a page for the user to reset their password; this page needs to be mobile optimized, of course.

The Advanced Login: Social Integration

image

The next step in the login pattern will involve integrating social media credentials to log in to your mobile user experience. Why, you might ask? The premise is simple, if a user already has a Twitter or Facebook account, why not use their existing login credentials that they commonly use to log in your own app or mobile website. All of the common social media platforms include an Application Programming Interface (API) integration to allow this API call to integrate their login credentials into any website or app. As a designer, this gives you a few advantages:

1. Not reinventing the wheel—By using a social media “connect” call; you can streamline the process of signing up. This allows you to complement your existing sign-up and login screen from your mobile experience. The Connect calls open a screen to the social media platform, allowing the user to add their credentials. Once completed, the login process is complete; quick and painless. In some cases, you can use the social API to remove your login and sign-up altogether in favor of the social media login. Be aware that this will limit you to users who only have social media accounts. As a result of using the social credentials, you can gain greater engagement and monetization from those users who log in using their Facebook credentials.1

2. Completing your user’s profile—One of the hardest aspects of creating mobile experiences is having users complete their profiles. Whether it’s getting them to give you more information about themselves or having them trudge through filling out this information on a small screen; both can be frustrating to your users and you. By using a social media API, their existing social media user profiles can be passed to your app. Imagine collecting their full name, birthday, profile picture, phone numbers, and access to their friends/connections; all accessible through this login. This gives you a quick method of collecting more information about your user and still streamlining the login and sign-up process. For your users, this method gives them the ability to share and comment through your mobile experience to their existing social network and friends, thus providing them an incentive to register.

3. Making things secure—By using a social media API you will have access to a higher level of security that you might or might not have had access too. Better yet, you do not have to build or host this secure connection for your users’ personal information or passwords. All of this can be handled by the API, a plus when you are trying to quickly build an app or mobile website.

Avoiding Mistakes

image

Example of a Poor Login Experience.

Beware of screen size

You will lose screen real estate as you open the keyboard. As a result your login experience will become smaller than you realize. Focus on pushing the input fields to the top of the screen. Functionality such as allowing users to travel from input field to input field using next and previous buttons may help users, but it will be at the cost of decreasing the active screen area. Make sure your titles, inputs, and sign-in button are always above the keyboard screen.

Beware of making screen elements too small

Yes, we want to make our screens as small as possible, but not at the cost of legibility. Titles and inputs fields should be clear and legible enough to read. These elements are just as important as your sign-up buttons as they will tell the user what they need to do on the page.

Pattern 6: The Camera

The camera has become one of the most important and popular components of a mobile device. Whether it’s taking a picture on the run, texting a picture to a friend, or taking a quick video; having a camera in your user’s phone or tablet gives an opportunity to build a mobile user experience around this feature. A perfect use case would be an app or mobile website based on video or photo social sharing, augmented reality, or mobile scrapbooking. This pattern is a new approach to using the camera as content creator. The navigation is based on using the camera as the main action in the experience.

The Basic Flow

image

This pattern is created using three screens.

1. The Camera Screen

2. The Confirm/Add a Filter (Optional)

3. The Action/Share Screen

The Camera Screen

As the focus of this action is based on using the camera, the first item to be highlighted is the camera button. Unlike the default camera view, the ability of connecting to the camera using the phone’s API allows us to create a custom visual interface to the screen. In our case, the action button is large and visible; to the user it is made clear that this is the next button that they need to click on. With access to the phone’s camera, you can also set this action to use the regular camera or video by default.

image

Taking the design of this screen even further, you can add navigation elements at the bottom of the screen to access other functions. For example, you can add a button to access the camera roll or a user’s profile. These functions should supplement the main task of using the camera function. Visually, these should be treated using secondary colors and be scaled smaller than the primary action button (i.e., the camera button).

image

The navigation bar at the bottom also serves another function of expanding and contracting depending on different screen sizes. Plan on locking this element to the bottom of the screen. This ensures that the main navigation bar can change with the fluid screen size. Why is it not locked to the top of the screen? Locking it to the bottom of the screen has less to do with visual design, than range of the finger when the phone sits in a hand.

The Confirm/Add a Filter (Optional)

The second screen in the page flow is based on creating a method to confirm or retake the photo, or add a filter to affect the look of the photo to help clean, stylize, or color the image. The use of a filter can help personalize images for the user and it gives the experience a bit more depth than just taking a picture; the goal of personalizing the camera is our end goal for this pattern.

The Action/Share Screen

The final screen in the flow is the action screen. This allows our user to focus on the desired action for the photo or video they have just taken. A typical case would be to share the image to social media platforms, email, send a text, or save the image to the user’s custom camera roll. The intent here is to give functionality to what the user intends to do with the image. If the goal of the app is to socially share, then make the button for this action the most visible. If the goal is to scrapbook or make a travel log, then the actions provided should give an ability to save or add more details, like location, tags, or a description.

Next Steps

image

The camera pattern is a perfect example of using it as a starting point for building a more elaborate mobile user experience. For example, by adding a bar code scanning software development kit (SDK) to the experience a user can use this functionality to read bar codes or QR codes. The action screen can now be used to display, share, and save results from that scan.

What’s a QR code?

image

A Quick Reference code or QR code for short refers to those pixelated black and white squares you may have seen recently. Think of them as an updated bar code for the twenty-first century. The power of the QR code is that they do not just store inventory information as a traditional bar code, but they have been expanded to store a variety of user-created data.

Here are some examples of QR codes you can create. Once read, they will display this information:

■ URL (http://)

■ Contact information (Vcard)

■ Phone Number

■ SMS Message

■ Text Message

You can find several QR code generators online to create one for yourself. Use QR codes to provide links to download apps, share contact information, or provide a URL on printed literature. By downloading an app or adding a QR code reader API to your own mobile experience, you can read these QR codes. Your QR code will open the URL found in the code, display the text message on your phone, and download the contact to your address book. Used well, this can provide interaction with your users or potential users while they are on the go. Best of all, these QR codes work and can be read across all mobile platforms; sadly the reader does not work on the mobile web, only in apps.

Pattern 7: The Map and Location

The common use case for a map application on a mobile device is to search for an address, location, or place. This pattern takes this interaction and creates more navigation elements to expand on the functionality of this user flow. This pattern can work for giving a user a method to search, preview, and access further details on these physical locations. Unlike using a maps application on your mobile device, using your own map interface can personalize the experience to your users and make each search result actionable. You can use this pattern to search and explore your own custom locations on Google/Bing maps or have the mobile experience load in your own custom map (i.e., a map of an attraction/event or floor plan of a building).

The Basic Flow

image

This pattern is created using three screens.

1. The Location Search (Optional)

2. The Map Page

3. The Location Detail Page

The Location Search

The basic location search screen acts as a front door to the user to present them with what they will be viewing and searching for. This gives you a method of communicating to the user this search action; for example, search for a hotel, a restaurant, a store, a museum, etc. This also gives them the clear option of using their location to define a search. Using their location will trigger most mobile devices’ location services option. Below is a description on how location services are handled on the two common mobile platforms.

Android

Most Android devices use location services turned “on” by default. They use your location to periodically check the weather, time, and other services in the operating system. For Android apps the location is set by the developer when publishing the app and does not trigger any required action by the user. For the mobile browser the user sees a seamless integration to searching by their location.

iOS

image

On iOS, the request to check location will trigger the location services to provide the user with a notification. If they answer “yes” the location option is saved for your app whenever they access the app. If they answer “no,” the location service is turned off for your app moving forward. Turning this option back “on” requires your user to manually turn on the location services from their settings screen. Once turned “off” you no longer have the ability to request this option; leaving your search by current location dead.

To best mitigate a user turning this off, we use a “use my location button” on the search screen to have them trigger this option. By having them trigger the option themselves they will be more likely to turn it on, especially if they are the ones doing the request.

The Map Page

The map page acts as a visual search results page for locations. Locations can be displayed with basic pins to mark their place on the map. Basic familiar gestures like the pinch to zoom helps users navigate around this screen. The functionality to choose “current location” should also be added to ensure that the user can use this tool to pinpoint places near their location.

image

To enhance this experience optional UI elements can be added:

1. Search Bar
A search bar can be added to collapse the search page onto one screen. This is helpful if the map page is part of a larger mobile experience. The search bar can also help to record previous searches by the user. The search bar will open the on-screen keyboard.

2. Location Preview
To make the act of previewing results even easier, a pin can be used to give a preview display to the user. I recommend adding more information like a location name, street address, and an image preview.

The Location Detail Page

The final page of this flow is the location detail page. The intent is to provide the user with more actionable details than a traditional map application. By adding UI elements to provide enough content and functionality, we can ensure that the user has enough substance to return to our experience over and over again. If you are going to use the map pattern as navigation for your experience, this screen will be essential to engaging your users.

image

Here is a breakdown of UI elements on this page:

1. Map Preview
The preview will help to ground the user on the option that they have selected. This ensures that they have a visual cue back to the map page. I would keep this preview to a minimum of 20 to 30% of the page depending on the content you are showing.

2. Place/Location Description
Make sure you have enough space to add context around the location, task, or place that you are asking the user to view. If you need more space you can integrate a list pattern to this page.

3. Primary Action Button
In keeping with the mobile mantra of making mobile pages “actionable,” you need to give the user enough direction to act on the results they have been given. If you asking them to search for restaurants close to them, then have them order a meal or reserve a table. If you are asking for a task, like checking in to their location, then provide a large “Check In” button here. Regardless, even a “Save to Favorites” button gives the user enough functionality to have them save their search results. Our goal is to not make them feel that they have gone through this process for nothing; include an action at the end!

4. Secondary Action Buttons
Giving users more helpful tools or functions is never a bad idea. By adding these to the top navigation, it keeps the page clear for the primary action at the bottom of the screen. I would focus on giving the users access to tools or functionalities that enhance their experience.

For example, some functions can be:

■ Sharing the location/place by email or social media

■ Using the camera function to add pictures to this detail page

■ Saving the page to the user’s favorites

■ Adding a rating to the page

What’s Next?

image

As you think about incorporating patterns into the design of your mobile experience, remember that your users are key. Ask yourself these questions. What is the primary action you want your users to accomplish on a mobile device? What do you think your users can accomplish on mobile vs. desktop? What do you want their primary mobile experience to be on a smartphone or tablet? By keeping these answers in mind you can focus your usage of the patterns to build the theme and direction for your mobile user experience. Use these patterns as a set of building blocks for you to build this experience. Remember that they can be tweaked, changed, and even combined. Take the map pattern and the list pattern and now you have an ability to expand the map details page. Take the launcher and the rotate and now you have the ability to show a user’s profile without having to add an additional application to the launcher screen. Take the login pattern and the camera pattern and you have a camera application where users can log in using their social media credentials and share with their friends instantly.

Some tips as you use the patterns to design your experience:

■ Be direct! Don’t have your users travel through multiple screens to get to the primary action.

■ Design with intent. Make buttons look like buttons, make navigation look like navigation. Being subtle with your user experience design does not work for mobile users.

■ Design with your users in mind. Focus on actions and interactions to fulfill the user’s goals. Focus on the functionality they want and not something you think they need.

■ Design with the device in mind. If you are designing around a specific device or operating system, make sure you keep all of those unique device characteristics in mind when you choose a pattern.

■ Keep consistent navigation. Don’t change navigation elements from one screen to another.

■ Don’t mix interaction models. If you use a gesture to open a menu, don’t reuse that same gesture for something else on a different screen.

■ Don’t pack it in. Keep your mobile user experience lean and clean. Try to keep your mobile experience to a few direct actions.

■ If it doesn’t fit … If you can’t get everything into your smartphone app, try giving the user more of the functionality you want in a tablet experience instead.

Don’t be afraid to test some of these patterns in front of potential users as wireframes. Getting feedback on your design is critical to changing, editing, and optimizing the patterns. As we move forward, we will begin to discuss how best to display these mobile experiences onto different media to gather feedback. That being said, on to mobile prototyping!


1Zoran Martinovic, “The Value of a Facebook-connected Mobile User,” Facebook Developer Blog, January 24, 2013, https://developers.facebook.com/blog/post/2013/01/24/the-value-of-a-facebook-connected-mobile-user/.