This document outlines various mobile app design patterns for navigation, forms, search/filtering, tools, onboarding, feedback/affordance, and anti-patterns. It describes navigation patterns like springboards, lists, tabs, galleries; form patterns like sign in, registration, comments; search patterns like auto-complete and dynamic search; tool patterns like toolbars and contextual actions; onboarding patterns like tips and tours; and anti-patterns to avoid like novel notions and oceans of buttons. The document provides guidance on when and how to implement these common mobile design patterns.
3. Navigation
â˘âŻ How users move through the views
â⯠Springboard
â⯠Lists (Vertical, InďŹnite)
â⯠Tabs
â⯠Gallery (Grid)
â⯠Dashboard
â⯠Metaphor
â⯠Page Carousel
â⯠Image Carousel
â⯠Expanding Lists
â⯠InďŹnite Area
4. Springboard
â˘âŻ Use a grid layout for items of equal importance, or an
irregular layout to emphasize some items more than others
â˘âŻ Consider personalization and customization options
5. Lists
â˘âŻ Work well for long lists with subtext
â˘âŻ All internal screens should have a way for returning back
â˘âŻ It can be âinďŹniteâ, it can have thumbnails
8. Dashboard
â˘âŻ Dashboards provide a roll-up of key performance indicators
â˘âŻ Donât overload the dashboard
â˘âŻ Usually Springboards are also called Dashboards
9. Metaphor
â˘âŻ Pages are modeled to reďŹect the applicationâs metaphor
â˘âŻ Use the Metaphor pattern judiciously
10. Page carousel
â˘âŻ Works best for navigating a small number of pages
â˘âŻ Visual indicator to reďŹect the number of screens, and
current screen
â˘âŻ Flick to navigate the carousel
11. Image Carousel
â˘âŻ Works best for displaying fresh visual content, like articles,
products, and photos
â˘âŻ Provide visual affordance, either with arrows, partial images,
or page indicators that more content can be accessed
13. InďŹnite Area
â˘âŻ The entire data set can be considered to be a large, two-
dimensional graphic
â˘âŻ The viewport shows only a small
subset of the whole data set
16. Forms
â˘âŻ They are for data entry and conďŹguration
â⯠Sign In
â⯠Registration
â⯠Check-in
â⯠Comments
â⯠Users ProďŹle
â⯠Share
â⯠Empty Datasets
â⯠Multi-step
â⯠Settings
17. Sign In
â˘âŻ Donât innovate on the sign in screen
â˘âŻ Provide a way to retrieve a forgotten password
â˘âŻ Provide a way to login via social networks
19. Check-in
â˘âŻ Keep it ultra-short
â˘âŻ Design for speed, and efďŹciency
â˘âŻ Eliminate unnecessary ďŹelds
â˘âŻ Donât show the map!
20. Comments
â˘âŻ Invite user to leave comment
â˘âŻ Always clarify what is being commented
â˘âŻ Show other peopleâs comments over time
21. Timeline
â˘âŻ Within the current hour, show as minutes ago
â˘âŻ Within the current day, show the time as number of hours ago
â˘âŻ Within the last two days, shown the day of the week, and the
time range, morning, afternoon, evening, night
â˘âŻ Within the past week, show the day of the week
â˘âŻ Within 12 months, show as mm/DD
â˘âŻ Older than 12 months, show only the year
22. Users ProďŹle
â˘âŻ Put the badges in evidence
â˘âŻ Show their contribution to the social network
â˘âŻ Provide action controls
23. Share
â˘âŻ Always keep track of past logins
â˘âŻ Always provide an âoff socialâ way to share (e.g., by email)
â˘âŻ Remark what is being shared
24. Empty datasets
â˘âŻ Avoid white-screens, explain why the dataset is empty
â˘âŻ call for action, only one!
â˘âŻ Avoid error messages
25. Multi Step
â˘âŻ Show the user where they are and where they can go
â˘âŻ Eliminate unnecessary ďŹelds
â˘âŻ minimize the number of pages and steps
29. Explicit Search
â˘âŻ Offer a clear button in the ďŹeld
â˘âŻ Provide an option to cancel the search
â˘âŻ Use feedback to show the search is being performed
30. Search Auto-complete
â˘âŻ Show feedback if there could be a delay in displaying the results
â˘âŻ Consider emphasizing the matching search text in the search
results
31. Dynamic Search
â˘âŻ Automatically ďŹlters a given list of items
â˘âŻ Works well for constrained data sets, like an address book or
personal media library
32. Scoped Search
â˘âŻ Offer reasonable scoping options based on the data set
â˘âŻ 3 to 6 scoping options are plenty
33. Search form
â˘âŻ Minimize the number of input ďŹelds
â˘âŻ Follow form design best practices (alignment, labels, size)
â˘âŻ Use only when strictly needed
34. Search Results
â˘âŻ Use live scroll instead of paging
â˘âŻ Apply a reasonable default sort order
â˘âŻ Call for action
this is also an Anti-pattern
(see Oceans of Buttons)
36. Onscreen Sort
â˘âŻ Clearly show which option is selected
â˘âŻ Do not use it if option labels donât ďŹt nicely in a toggle button
bar
37. Sort Order Selector
â˘âŻ Follow OS design conventions for choosing the selector
control, or choose an OS neutral interface control
â˘âŻ Clearly show which sort option is applied
38. Filter Forms
â˘âŻ Donât over-design the ďŹlter, a simple onscreen ďŹlter or
drawer will usually sufďŹce
41. Toolbar
â˘âŻ Contain screen level actions, they are generally displayed at the
bottom of the screen
â˘âŻ Choose icons that are easy to recognize, or use labels plus icons
42. Option Menu
â˘âŻ Choose direct interactions when possible
â˘âŻ Possibly donât hide navigation in the Option Menu
43. Contextual Tools
â˘âŻ If buttons are necessary, they should be displayed in
proximity to the actionable object
â˘âŻ Choose a familiar icon or use a text label
44. Inline Actions
â˘âŻ They should be in proximity to the actionable object
â˘âŻ Choose a familiar icon or use a text label
â˘âŻ Max 1 to 2 Inline Actions per object
45. Call to Action Buttons
â˘âŻ Donât hide the main call to action in a menu or disguise it as
an unrecognizable icon in a toolbar
â˘âŻ Good contrast and clear label
47. Bulk Actions
â˘âŻ Bulk actions like delete and reorder are best handled in an
edit mode
â˘âŻ Provide an obvious option for exiting the mode
48. Maps
â˘âŻ Provide visible markers (avoiding âterrain-modeâ)
â˘âŻ Use as much screen as possible
â˘âŻ Can be small if the location is not the main item
50. Invitations
â˘âŻ Helpful tips displayed the ďŹrst time a user launches an app
â⯠Dialog
â⯠Tip
â⯠Tour
â⯠Video
â⯠Transparency
â⯠1st Time Through
â⯠Persistent
â⯠Discoverable
51. Dialog
â˘âŻ Keep dialog content short
â˘âŻ make sure there is an alternate way to access instructions
from within the application
52. Tip
â˘âŻ Place tips in proximity to the feature they refer to
â˘âŻ keep the content short
â˘âŻ remove the tip once interaction begins
53. Tour
â˘âŻ A tour should highlight key features of the application,
preferably from a (user) goal perspective
â˘âŻ Keep it short and visually engaging
54. Video
â˘âŻ Demos should showcase key features or show how to use
the application
â˘âŻ Common video features (stop, pause, volume controls, etc,...)
should be provided
55. Transparency
â˘âŻ Transparencies are not meant to compensate for poor
screen designs!
â˘âŻ Remove the Transparency once interaction begins
My
favourite
invitation!
56. 1st time through
â˘âŻ Clearly differentiate the invitation from other content with
images or other visual cues
57. Persistent
â˘âŻ Keep it short
â˘âŻ Clearly differentiate the invitation from other content with
images or other visual cues
60. Feedback & Affordance
â˘âŻ Feedback
â⯠Errors
â⯠ConďŹrmation
â⯠System Status
â˘âŻ Affordance
â⯠Tap
â⯠Flick
â⯠Drag
61. Feedback: Errors
â˘âŻ Use plain language that offers a solution for resolving the issue
â˘âŻ make the error visible
â˘âŻ use in-screen messaging instead of modal dialogs
68. Anti-Patterns
â˘âŻ Common pitfalls to avoid
â⯠Novel Notions
â⯠Metaphor Mismatch
â⯠Idiot Boxes
â⯠Chart Junk
â⯠Oceans of Buttons
69. Novel Notions
â˘âŻ If you are looking for a way to innovate with your application,
focus on your core features and offerings, but rely on best
practices for the interface design
â˘âŻ If you design a custom control, rigorously test it and reďŹne it to
make sure it is usable
72. Metaphor Mismatch
â˘âŻ Consists in picking the wrong metaphor for the interface:
â⯠Control mismatch
â⯠Icon mismatch
â⯠Mental model mismatch
74. Idiot Boxes
Avoid disrupting the workďŹow
only show a conďŹrmation dialog when an irreparable
action is being taken (like a permanent delete)
75. Chart Junk
Only use visual elements in charts and graphs that are necessary
to communicate the information represented on the graph
76. Oceans of Buttons
â˘âŻ Use standard patterns for displaying page level actions
â˘âŻ Provide contextual tools for item level actions instead of repeating
the same button
â˘âŻ Keep page level actions visually separate from navigational
elements