Archives For Mobile Design Patterns

I get this question all the time from clients and fellow designers. The answer is yes and no and sometimes.

What should match

The Core UX: The overarching user experience, meaning the flow of the application, should be the same in across all OSs for a specific form factor. The personas, scenarios, design principles and conceptual model should all be established and validated before screen level design begins.

Aesthetic: The overall aesthetic should be similar for both; it should support your brand strategy.

What will probably match

Information Architecture: The IA for both OSs will likely be the same, although the navigation controls may be different. I have seen apps deviate when one OS offers features (not UI controls, but actual functionality like in-app launching of another app) the other does not.

Content: The base copy will probably be the same. You may have more or less transactional copy for one OS vs the other depending on the specific UI, but the majority of the copy will be identical.

What won’t match

User Interface: Each OS has their own set of controls that should be leveraged.

Interaction Design: The OSs also have their own gestures and interaction design conventions that should be learned and respected (if not always adhered to).

Please note, the answers above may not apply to games since games typically use a OS neutral custom UI.

allthecooks

Let’s take a look at an interesting example I found yesterday of a company who nailed their Android App design, but blew their iOS7 redesign, allthecooks. I don’t want to sound too harsh, they were likely under some tight timelines. But tight timelines are even more of a reason to stick with the established UX and IA in the Android app.

The Android App

This is a slick app for social recipe sharing. Of more than 300 Android apps I looked at, they definitely rise to the top 10% for usability and UX design.

Navigation
We recently had problems at RetailMeNot when testing a the navigation drawer design that complied with the Android design guidelines:

Upon first launch of your app, introduce the user to the navigation drawer by automatically opening it. This ensures that users know about the navigation drawer and prompts them to learn about the structure of your app by exploring its content. Continue showing the drawer upon subsequent launches until the user actively expands the navigation drawer manually. Once you know that the user understands how to open the drawer, launch the app with the navigation drawer closed.

We followed the Android design guidelines exactly, but this did NOT test well with RetailMeNot Android users. They were confused, “Why can’t I just see the home page?”.

Allthecooks menu invitation strikes just the right balance between obtrusive and instructive:

Search & Results

Next comes probably the most important element of a recipe app- the search. It is well designed using:

  • Auto suggest
  • The Android spinner control for changing sort order
  • A clear option for adding dietary preferences to refine the search
  • Tags (albeit at the bottom) to make it easy to hone in on specific types of recipes. Even though the tags are all the bottom, if you select a certain tag it is redisplayed at the top so you can see what tags are currently applied to the results.

allthecooks_autosuggest

allthecooks_results

allthecooks_results_sort

allthecooks_filter

allthecooks_results_scroll_down

allthecooks_filtered_and_tags

Couple of minor quirks:

  • The gear/settings in the top right of the results page is a duplicate of the filter functionality. Wrong icon, and why do you need the same features twice? Just ditch it.
  • The checkboxes under the search box don’t really make sense. I would have never given these a second though except for the implementation in iOS7 filter made me wonder: Who thinks like this?

    “I want to search for ‘pear’ but not in the title, only in the description, but not in the ingredients.” Seems like an edge case which means those checkboxes could be de-prioritized in favor of the more common ways people think of finding recipes: by entree, dessert, salads, etc… (ie. raise the prominence of the tags that are pushed down to the bottom of the results list)

quirks

Details Page

Once the results are reviewed, the social cook can navigate to a recipe details page. It is well laid out, easy to scan, with the common actions clearly visible.

Note: allthecooks are not following the Android design guidelines of putting all the actions in the action bar and using the overflow action menu, but have instead decided to put the actions in proximity to the content where they make the most sense. Bet this tested better in the real world.

allthecooks_recipe_top

allthecooks_recipe_middle

allthecooks_recipe_bottom

This page could have used the Android scrolling tabs control to show the Overview, Reviews, Photos, and Q&A, but a long page is even easier to scroll through and see all the important information at a glance.

The iOS7 App

Here is my audio and video walk through of the iPhone app:

Even ignoring the bugs, you can see the iOS7 experience is sub-par compared to Android. Let’s break this down:

Navigation

There is no menu invitation, but presumably the icon is familiar to most mobile users by now. Looking closer at the expanded menu- I noticed there are some differences in the IA.

allthecooks_menu_open_full

allthecooks_menu_iOS

Now, since I don’t work at allthecooks, I don’t know if they are in the middle of a strategy overhaul and the iOS7 app reflects this. But the IA could use another review- this menu is too long and poorly organized. Here are some tips to try testing:

  1. Remove duplicates. There is no need for the Search in the menu and a persistent search in the title bar. Roll Browse (by category) into the persistent Search feature, like Sam’s and Etsy.
  2. sam's club-browse

    etsy-search

  3. Group things that go together- together. For example: My Favorites and Shopping List are utilities for the user, might want to put them near My Profile and My Recipes and My Messages. In fact, bundle these last three together under My Profile. A single profile page that includes Recipes, Messages should work. The profile can also include who I follow and who follows me (like Twitter), and quick access to my shopping list and favorites.
  4. News Feeds, and What’s New and Forums are all ways to learn more and get involved, so consolidate them. Consider adding in some social elements like a leaderboard/top contributor page.

Search & Results
First and foremost the search should work. Once that bar is cleared, let’s look at the search results view. As I noted in the iOS7 video, there seems to be a completely different search experience design for iOS than for Android.

search_bug

search_results

search_filter

search_filter_bottom

search_results_users

profile_page_from_pears_users

Here are some tips to for improving the search experience:

  1. Show the number of results
  2. Show an on-page sort
  3. Use a standard filter icon to launch a filter form
  4. Show the filters that are applied
  5. Remove the toggle for Recipes/Users- instead consider elevating the social element by defaulting the sort to “most popular” or by showing results from people I have followed first in the list (include their photo maybe?), then the rest of the results.
  6. De-prioritize the filter checkboxes for title, description, ingredients, or consider implementing a scoped search control for both Android and iOS, if the demand for this feature is really strong.

Here are some good examples of results pages with sort and filter features:

Expedia offers onscreen sort and filter options.

Expedia_select_location

Expedia_filter

Expedia_sort

Target on Android uses and on screen sort and a filter drawer and shows that a filter has been applied.

target_search_results

target_filter_drawer

target_results_filtered

Saks uses a full screen form for both sorting and filtering and shows the applied filters.

saks_results

saks_sort

saks_refine

saks_sub_category

saks_results_filtered

Details Page
The details page on iOS7 may look nice at first glance, but it is not as easy to use as the Android app.

detail_page
Challenging elements:

  • The buttons (to the right of the title Ingredients) don’t look like buttons and are really small. The last button in the row is particularly hard to decipher, and doesn’t provide any accordance wen it is tapped. But once I scrolled down I noticed it changed the unit of measure from standard to metric.
  • The IA of the content isn’t as well structured as on Android. For example, there is an option to take a picture when done cooking, but not leave a review. Android offers both in the right spot, plus the option to Flag Recipe in case there are errors.
  • Each tab: Cover, Reviews, Photos, and QA repeats the ingredients and directions- more unnecessary duplication.

Other Examples

What are some examples of native apps that have done a good job of creating a consistent UX across the multiple OSs with the same form factor? Some of the best I’ve seen are the Android and iPhone apps from AirBNB, Expedia, New Egg, Zillow, Dropbox, Flipboard, and Evernote.

In the name of research, I spent 6+ weeks away from my Android and used a Windows 8 phone. Last time I tried this in 2011, it was a huge failure. The hardware was faulty, the app selection tiny, and I couldn’t take any screenshots.

Things have improved, and this stint with the Windows 8 Phone wasn’t too bad. But the apps in general are about 2 years behind in design maturity compared to android and iOs apps.

That said, I did find some exceptional apps that I wanted to share with fellow mobile designers & developers:

CocktailFlow

CocktailFlow_menu

CocktailFlow_search

CocktailFlow_search_results

CocktailFlow_recipe

CocktailFlow_community

CocktailFlow_similar

CocktailFlow_MyBar

CocktailFlow_cabinate_mixers

Why is this a great Windows Phone App?

CocktailFlow follows the spirit of the UX guidelines for Windows while incorporating some unique design elements like the visual representation of My Liquor Cabinet.

Available here

Brit + Co

BritBRITCO_browse_tiles

BRITCO_

BRITCO_article

BRITCO_drilldown

BRITCO_health

BRITCO_hot

BRITCO_share

Why is this a great Windows Phone App?

Like many content sites, Brit + Co has a deep hierarchy, which can be a challenge to create a clear navigation strategy for. But they have perfectly implemented the structure and navigation recommend for Windows Phone Apps. Get familiar up on the design guidelines here.

Available here

Maluuba

Maluuba_restaurants

Maluuba_explore

Maluuba_myday

Maluuba_restaurant

Maluuba_set_alarm

Maluuta_reminders

maluuba_calendar

Maluuba_search

Why is this a great Windows Phone App?

Maluuba is an example of a productivity tool (versus a content application like Brit +Co) that has done a fantastic job implementing the structure and navigation recommend for Windows Phone Apps.

Available here

NewEgg

NewEgg_home

NewEgg_item_added_to_cart

NewEgg_Guided_Search

NewEgg_price_filter

NewEgg_advanced_search

NewEgg_comparison

NewEgg_results_filtered

NewEgg_sort

Why is this a great Windows Phone App?

This is hands down the best Windows retail application. Everything from the shopping cart to the guided search and advanced search are well designed both from a IA and IX perspective. They also offer a nice “compare” feature. Amazon and other retailers who are struggling with the new Windows guidelines should consider redesigning their application with NewEgg as a model.

Available here

SkyScanner

skyscanner_mobile_web

skyscanner_select_destination

skyscanner_search

skyscanner_departure_times

skyscanner_filters_more

skyscanner_results

skyscanner_overview

skyscanner_filters

skyscanner_select_flights

Skyscanner_booking

Why is this a great Windows Phone App?

Typically Kayak, Expedia and more recently Hipmunk have had the best mobile apps, but I was surprised to find this little gem for my Windows Phone. Love the simple booking process and the nice visualization of the pricing for selecting the legs of the flight. The only place it falls down is at the end, it redirects to the SkyScanner mobile site to book, but it doesn’t remember any of data that was just entered in the native app.

Available here

Hipstamatic Oggl

hipstamtic_filters

Hipsomatic_image

Hipsomatic_library

hipstamatic_profile

Why is this a great Windows Phone App?

I included Hipstamatic because it is a choice example of an app that deviated from the Windows Design Guide to structure their custom controls. The current guidelines do not accomodate nested or contextual tools, but Hipstamatic created an elegant, intuitive touch solution.

Available here

TOSHL

Toshl_welcome

Toshl_signup

Toshl_login

Toshl_contextual_help

Toshl_setup

Toshl_add_expense

Toshl_expense_detail

Toshl_setup_reminder

Why is this a great Windows Phone App?

Great onboarding experience for a productivity tool centered on a topic most people would rather not be dealing with (bookkeeping, bill pay, finances, ick…).

Available here

ESPN Hub

ESPNHUB

ESPNHUB_scores

ESPNHUB_gamecast

ESPNHUB_the_latest

ESPNHUB_menu

ESPNHUB_top_videos

Why is this a great Windows Phone App?

I included Espn Hub because of the way they intermingled the suggested Windows navigation structure with a custom menu control that slides out on the left. It is similar to the off canvas control seen in other OSs in apps including Path and Facebook.

Available here

HungryNow

Hungry_NowHungryNow_about

HungryNow_map_view

HungryNow_starbucks

HungryNow_starbucks_details

HungryNow_settings

Why is this a great Windows Phone App?

Hungry Now is one of the very few apps that was originally designed for the iPhone that ports quite well to Windows (and could work fine on Android and BlackBerry too). Granted it is a single screen interface so they aren’t struggling with the hierarchal challenges most other apps face, but they have designed a simple touch interface that is OS neutral.

Available here

And of course, the usual suspects: Facebook Beta, LinkedIn, Evernote, Pandora, UrbanSpoon, Amazon Fresh… Check out the presentation on Slideshare and see the rest. Even if you’re not working on a Windows app now, you might be inspired.

If I’ve missed any great ones, please share it with me and you’ll be added to a drawing for a free copy of the Mobile Design Pattern Gallery 2nd Edition.