Archives For design patterns

Last week I had the opportunity to speak at the Mobile UX Summit along with Josh Clark, Brad Frost and some other inspirational guys. My talk was a case study of Silvercar, a start-up we led the UX design for last year. The talk explores how and why we took a Mobile First approach to the design part of the project. It also illustrates the process and deliverables for each stage in a cross-channel UX design project. 

I’m going to re-record and post the audio as well in the next week.

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.

Get it for $20 on the O’Reilly site, format ePub, mobi or PDF. Please rate it and leave a review, I appreciate all feedback.

The print book should be available next week. I’ll be signing copies at SXSW @ 1:30pm March 13, at the Expo Hall.

Here are some excellent resources if you are designing an Android smartphone application for Gingerbread or Ice Cream Sandwich.

Galleries

  • My Mobile Design Pattern Gallery has hundreds of screnshots from iOs, Android and other OSs. I also posted a presentation of The Best Android Apps
  • After spending months compiling screenshots for the book, I just found this rockin’ Tumblr site with hundreds of screenshots specific to Android, Android Niceties
  • 150 Top Andorid Apps, Editor’s Pick. Note, not all of these have a great UI, but it is definitely worth browsing
  • As stated, AndroidPttrns is a shameless copy of pttrns.com, the site that catalogs iOS screenshots. Android Pttrns don’t have a lot of material yet, but I’m sure it will grow over time.

Pattern Libraries

Stencils/Templates

  • Zurb’s excellent OmniGraffle Stencil
  • Android 4.0 PSD
  • High Density PSD from Teehan + Lax, June 2011
  • Stencil for Visio- Nope can’t find one. I’ll say it again, the Visio community needs to get it together and starting making high quality stencils and sharing them. If you know of a Visio stencil for a current version of the Android OS, please comment and share.
  • Keynotopia for prototyping. I have bought and used this bundle for iPad prototyping and it works well. I haven’t tried it for android apps yet.
  • Glypish Icons are really useful for low and high fidelity mockups
  • User Interface Design Guidelines

    Android Design

    Blogs/ Articles

    Books

    Presentations & Videos

    We recently had a new mobile project starting and all of our experienced mobile designers were booked. This gave me less than a week to ramp up a new designer. So I made a quick tutorial with lots and lots of screenshots, illustrating good design and not so good design. Gradually a set of patterns for mobile application design emerged.

    Even as I was cataloging these patterns, I knew that the real value wasn’t only the pattern identification, but in the hundreds of examples I’d captured. So instead of a tome of abstract patterns only an author can love, this book is a showcase, or gallery, of mobile application design. This book includes 400+ current screenshots from iOS, Android, BlackBerry, WebOS, Symbian and Windows mobile applications, organized by pattern type.

    Check out the:

    And follow me on Twitter, @mobilepatterns, for expert mobile design tips.

    Our Patterns in Print

    March 31, 2011 — 1 Comment

    After our book release in January 2009, we posted an article on 12 Standard Screen Patterns. It went viral with hundreds of thousands of readers. Two years later, it still gets 1,000+ readers each week.

    In 2010 we updated the screen patterns, including a few more and all new examples: RIA Screen Layouts. With more than 40k views on Slideshare, it seems to be pretty popular

    And now they are in print too! Three books this year included our screen patterns as the way to solve common UI problems:

    Check out this excellent article by Janko: Ultimate guide to table UI patterns. It is full of great examples and suggestions.

    After reading it, I just had to add three more scenarios:

    1. Inline Editing


    Quicken Online allows simple editing with a pull down for more advanced editing.



    Mint.com does the same.

    The Ajax framework Ext JS and Ext for GWT offers a pre-built Grid row editor component. Try out the demo. This would work well for tables that are primarily read-only but might need to be edited. This design is not for heavy data entry.


    For heavy data entry, use a design like Harvest. They offer a simple grid layout that keeps a live total and provides a Save button for saving all the entries once the person is done (it also auto saves periodically).


    Google Docs is an online spreadsheet application with inline editing. It also has a Save button for the whole spreadsheet, as opposed to per row updates.

    Inline Editing Best Practices

    • Implement tab navigation when you create a table with inline editing.
    • Consider how to handle errors, such as highlighting rows or cells with errors in a way that is easy for a person to correct the issues. Don’t break the person’s data entry flow by locking them in a cell with an error, simply highlight the cell with the problem and provide a way for them to return to it later to fix it.
    • Offer undo and redo functionality.


    Swivel is an app that acts a lot like Excel and provides cell specific error messages.

    2. Super Wide Tables

    I received an email last week asking me about super wide tables. The email said “I’ve come to the conclusion that breaking them up into smaller chunks is maybe the best way to go, rather than going with a horizontal scroll-bar that goes on for days.”

    Based on a lot of design work Bill Scott and I did for the airline industry, I would instead propose instead applying these principles:

    • Organize the most important columns to the left.
    • Experiment with frozen/fixed columns, so if the person does need to horizontally scroll, they can keep context.
    • Only show a set number of columns in the default view (so there is no horizontal scrolling in the default view) and offer a Customize option so the person can choose to hide or show more columns. ExtJs has this built into the column dropdown; I usually add a customize button to the table toolbar with Hide/Show column functionality.
    • Offer resizing of columns.
    • Offer rearranging of columns.
    • If you have a table with some columns editable and other read-only, group editable with editable, read-only with read only.
    • Don’t abbreviate column titles, reduce spacing or padding, or drop to a smaller font to fit your table on the screen. That won’t help anyone use your app.
    • Try out fat rows like this example from Survs. Instead of having a column for title, created by, created on, last updated on, all of that information is in the second column. Good visual design can help organize the information in a more meaningful way which makes your data easier to scan.
    • Use a summary row to chunk the data if appropriate. I know this won’t make your table any narrower, but it might make it more readable.
    • Consider putting a visual summary, or roll-up, above the table so the person can make sense of the data visually before diving into a huge table of numbers.

    • Discover Spend Analyzer offer a dual purpose summary and filter above the rows of transaions. Play with the demo to try it out.

      Swivel example

    3. In-column Filtering

    The example included in Janko’s article has dynamic filters above the table (dynamic meaning, when you make a selection, it dynamically updates the table content- without an extra submit action).

    In some web applications, like heavy productivity applications or enterprise apps, in-column filtering is a powerful option to offer. It is pretty easy to implement with Flex or Ajax. Just validate the need for this type of functionality with your customers; it could be overkill for people who just need simple filtering.

    Example from Zenoss Open Source Server and Network Monitoring

    Try this at Telerik RadControls. This example requires a click on the filter button in the column, and has the option for selecting a specific way to apply the filter.

    Play with SmartClientRIA, where the implementation ( they blank out the whole content area while filtering) makes it seem slow.

    And a Flex example, where clicking on the filter icon lets you search in that specific column, and then you can further refine by filtering other columns.

    Make sure you take a look at Janko’s original article: Ultimate guide to table UI patterns, and another informative post 15 Tips for Designing Terrific Tables.