Mobile Design Pattern Gallery: UI Patterns for Mobile Applications
Format: PDF / Kindle (mobi) / ePub
When you’re under pressure to produce a well designed, easy-to-navigate mobile app, there’s no time to reinvent the wheel. This concise book provides a handy reference to 70 mobile app design patterns, illustrated by more than 400 screenshots from current iOS, Android, BlackBerry, WebOS, Windows Mobile, and Symbian apps.
User experience professional Theresa Neil (Designing Web Interfaces) walks you through design patterns in 10 separate categories, including anti-patterns. Whether you’re designing a simple iPhone application or one that’s meant to work for every popular mobile OS on the market, these patterns provide solutions to common design challenges. This print edition is in full color.
Pattern categories include:
- Navigation: get patterns for primary and secondary navigation
- Forms: break the industry-wide habits of bad form design
- Tables and lists: display only the most important information
- Search, sort, and filter: make these functions easy to use
- Tools: create the illusion of direct interaction
- Charts: learn best practices for basic chart design
- Invitations: invite users to get started and discover features
- Help: integrate help pages into a smaller form factor
"It’s a super handy catalog that I can flip to for ideas."
—Bill Scott, Senior Director of Web Development at PayPal "Looks fantastic."
—Erin Malone, Partner at Tangible UX "Just a quick thanks to express my sheer gratitude for this pub, it has been a guide for me reworking a design for an app already in production!"
—Agatha June, UX designer
Patterns: Chart with Filters, Overview + Data, Scrolling with Preview, Data Point Details, Drill Down, Zoom In, Pivot Table, Sparklines Mobile chart design inherits many of the same guidelines and best practices as print and desktop chart design. A great introductory book for this topic is The Wall Street Journal Guide to Information Graphics: The Dos and Don’ts of Presenting Data, Facts, and Figures, by Dona M. Wong. I also recommend Stephen Few’s books on chart design. All of these patterns
and Windows, look familiar since they are modeled after standard website navigation patterns. Nokia and Windows both use scrolling top tabs that you can flick to reveal more menu options. 14 | Chapter 1: Navigation Figure 1-16. Harvest TimeTractor and Fring on Nokia, scrolling top tabs Primary Navigation Patterns | 15 Figure 1-17. Foursquare and HitPost, top tabs Clearly indicate the selected menu item by visually differentiating the selected tab from the others. Use easy to recognize
the user to the appropriate form. Springpad and Groupon also offer the option to sign on with Facebook or other services. 42 | Chapter 2: Forms Figure 2-4. kik and springpad Another pattern is to forgo the user name field and just require a password. The user can be authenticated when the application is installed, and then only prompted for a password to access sensitive data. This is a popular option among financial apps, like PNCs Virtual Wallet, but could be used across industries.
buttons have the same visual weight, so you have to look closely to choose the right one. Long Form | 63 Figure 2-24. Discover, good design, wrong order; Sam's Club, correct layout, bad design Don’t artificially break the form into steps just to prevent scrolling. Do ruthlessly edit the form for any unnecessary fields. Follow OS standards for button placement. 64 | Chapter 2: Forms CHAPTER 3 Tables & Lists Patterns: Basic Table, Headerless Tables, Grouped Rows, Fixed Column, Cascading
section, we’ll look at search patterns specific to mobile applications including patterns for: Figure 4-1. Search patterns 80 | Chapter 4: Search, Sort & Filter Explicit Search Explicit search relies on an explicit action to perform the search and view results. That action might be to tap a search button on the screen, like Walmart, or on the keyboard, like Target. The results are typically displayed in the area below the search bar. Consider pairing an explicit search pattern with the