Common Design Patterns Common Design Patterns for Mobile Ivano Malavolta Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta 

Roadmap • Navigation • Navigation • Forms • Search, sort & filter • Tools • Invitations • Invitations • Feedback & Affordance • Anti-Patterns 

Navigation • How users move through the views – Springboard – Springboard – Lists (Vertical, Infinite) – Tabs – Gallery (Grid) – Dashboard – Metaphor – Page Carousel – Page Carousel – Image Carousel – Expanding Lists – Infinite Area 

Springboard • Use a grid layout grid layout grid layout grid layout for items of equal importance, or an irregular layout to emphasize some items more than others irregular layout to emphasize some items more than others • Consider personalization and customization options 

Lists • Work well for long with subtext • All internal screens should have a way for returning back • It can be “infinite”, it can have thumbnails 

Tabs • Clearly differentiate differentiate differentiate differentiate the selected tab from the others • Use easy to recognize icons icons icons icons or icons with labels • Use easy to recognize icons icons icons icons or icons with labels 

Gallery (Grid) • Works best for frequently updated content frequently updated content frequently updated content frequently updated content that people want to browse browse browse browse want to browse browse browse browse 

Dashboard • Dashboards provide a roll-up of key performance indicators key performance indicators key performance indicators key performance indicators • Don’t overload Don’t overload Don’t overload Don’t overload the dashboard • Don’t overload Don’t overload Don’t overload Don’t overload the dashboard • Usually Springboards are also called Dashboards 

Metaphor • Pages are modeled to reflect the application’s metaphor metaphor metaphor metaphor • Use the Metaphor pattern judiciously 

Page carousel • Works best for navigating a small number of pages • Visual indicator Visual indicator Visual indicator Visual indicator to reflect the number of screens, and current screen current screen • Flick Flick Flick Flick to navigate the carousel 

Image Carousel • Works best for displaying fresh visual content fresh visual content fresh visual content fresh visual content, like articles, products, and photos • Provide visual affordance Provide visual affordance Provide visual affordance Provide visual affordance, either with arrows, partial • Provide visual affordance Provide visual affordance Provide visual affordance Provide visual affordance, either with arrows, partial images, or page indicators that more content can be accessed 

Expanding Lists • Works best for progressively disclosing more details progressively disclosing more details progressively disclosing more details progressively disclosing more details or options for an object options for an object 

Infinite Area • The entire data set can be considered to be a large large large large, two- dimensional graphic dimensional graphic • The viewport shows only a small subset of the whole data set 

Roadmap • Navigation • Navigation • Forms • Search, sort & filter • Tools • Invitations • Invitations • Feedback & Affordance • Anti-Patterns 

Forms • They are for data entry and configuration – Sign In – Sign In – Registration – Check-in – Comments – Users Profile – Share – Share – Empty Datasets – Multi-step – Settings 

Sign In • Don’t innovate Don’t innovate Don’t innovate Don’t innovate on the sign in screen • Provide a way to retrieve a forgotten password retrieve a forgotten password retrieve a forgotten password retrieve a forgotten password • Provide a way to login via social login via social login via social login via social networks networks networks networks • Provide a way to login via social login via social login via social login via social networks networks networks networks 

Registration • Keep it short short short short, preferably one screen one screen one screen one screen • Register button well visible Register button well visible Register button well visible Register button well visible 

Check-in • Keep it ultra ultra ultra ultra- - - -short short short short • Design for speed speed speed speed, and efficiency efficiency efficiency efficiency • Design for speed speed speed speed, and efficiency efficiency efficiency efficiency • Eliminate Eliminate Eliminate Eliminate unnecessary unnecessary unnecessary unnecessary fields fields fields fields • Don’t show the Don’t show the Don’t show the Don’t show the map map map map! ! ! ! 

Comments • Invite user to leave comment • Always clarify what is being commented • Show other people’s comments over time • Show other people’s comments over time 

Time line • Within the current hour, show as minutes ago • Within the current day, show the time as number of • 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 Mmm/DD • Older than 12 months, show only the year 

Users Profile • Put the badges in evidence • Show their contribution to the social network • Show their contribution to the social network • Provide action controls 

Share • Always keep track of past logins • Always provide an “off social” way to share (e.g., by email) • Always provide an “off social” way to share (e.g., by email) • Remark what is being shared 

Empty datasets • Avoid white-screens, explain why the dataset is empty • call for action, only one! • Avoid error messages • Avoid error messages 

Multi Step • Show the user where they are and where they can go • Eliminate unnecessary fields • minimize the number of pages and steps 

Settings • Put them inside the app • Clear and grouped • Easy to be understood 

Roadmap • Navigation • Navigation • Forms • Search, sort & filter • Tools • Invitations • Invitations • Feedback & Affordance • Anti-Patterns 

Search, Sort & Filter • Search – Explicit Search – Explicit Search – Auto-complete – Dynamic Search – Scoped Search – Saved & Recent – Saved & Recent – Search form – Search Results 

Explicit Search • Offer a clear button clear button clear button clear button in the field • Provide an option to cancel option to cancel option to cancel option to cancel the search • Provide an option to cancel option to cancel option to cancel option to cancel the search • Use feedback feedback feedback feedback to show the search is being performed 

Search Auto-complete • Show feedback Show feedback Show feedback Show feedback if there could be a delay in displaying the results • Consider emphasizing the matching search text emphasizing the matching search text emphasizing the matching search text emphasizing the matching search text in the search • Consider emphasizing the matching search text emphasizing the matching search text emphasizing the matching search text emphasizing the matching search text in the search results 

Dynamic Search • Automatically Automatically Automatically Automatically filters filters filters filters a given list of items • Works well for constrained data sets constrained data sets constrained data sets constrained data sets, like an address book • Works well for constrained data sets constrained data sets constrained data sets constrained data sets, like an address book or personal media library 

Scoped Search • Offer reasonable scoping options scoping options scoping options scoping options based on the data set • 3 to 6 3 to 6 3 to 6 3 to 6 scoping options are plenty 

Search form • Minimize the number of input fields Minimize the number of input fields Minimize the number of input fields Minimize the number of input fields • Follow form design best practices form design best practices form design best practices form design best practices (alignment, labels, size) • Use only when strictly needed 

Search Results • Use live scroll live scroll live scroll live scroll instead of paging • Apply a reasonable default sort order default sort order default sort order default sort order • Call Call Call Call for for for for action action action action • Call Call Call Call for for for for action action action action this is also an Anti-pattern (see Oceans of Buttons) 

Search, Sort & Filter • Sort – Onscreen Sort – Onscreen Sort – Sort Order Selector 

Onscreen Sort • Clearly show which option is selected Clearly show which option is selected Clearly show which option is selected Clearly show which option is selected • Do not use it if labels option labels don’t fit nicely in a fit nicely in a fit nicely in a fit nicely in a • Do not use it if labels option labels don’t fit nicely in a fit nicely in a fit nicely in a fit nicely in a toggle button bar toggle button bar toggle button bar toggle button bar 

Sort Order Selector • Follow OS design conventions Follow OS design conventions Follow OS design conventions Follow OS design conventions for choosing the selector control, or choose an OS neutral interface control • Clearly show which sort option is applied Clearly show which sort option is applied Clearly show which sort option is applied Clearly show which sort option is applied • Clearly show which sort option is applied Clearly show which sort option is applied Clearly show which sort option is applied Clearly show which sort option is applied 

Filter Forms • Don’t over-design the filter, a simple onscreen filter or drawer will usually suffice drawer will usually suffice 

Roadmap • Navigation • Navigation • Forms • Search, sort & filter • Tools • Invitations • Invitations • Feedback & Affordance • Anti-Patterns 

Tools • Buttons & Controls – Toolbar – Toolbar – Option Menu – Contextual Tools – Inline Actions – Call to Action Buttons – Call to Action Buttons – Multi-state Button – Bulk Actions – Maps 

Toolbar • Contain screen level actions screen level actions screen level actions screen level actions, they are generally displayed at the bottom of the screen and the bottom of the screen and • Choose icons that are easy to recognize easy to recognize easy to recognize easy to recognize, or use labels plus icons 

Option Menu • Choose direct interactions direct interactions direct interactions direct interactions when possible • Possibly don’t hide navigation don’t hide navigation don’t hide navigation don’t hide navigation in the Option Menu (like • Possibly don’t hide navigation don’t hide navigation don’t hide navigation don’t hide navigation in the Option Menu (like Facebook) 

Contextual Tools • If buttons are necessary, they should be displayed in displayed in displayed in displayed in proximity to the actionable object proximity to the actionable object proximity to the actionable object proximity to the actionable object • Choose a familiar icon familiar icon familiar icon familiar icon or use a text label • Choose a familiar icon familiar icon familiar icon familiar icon or use a text label 

Inline Actions • They should be in proximity to the actionable object proximity to the actionable object proximity to the actionable object proximity to the actionable object • Choose a familiar icon familiar icon familiar icon familiar icon or use a text label • Choose a familiar icon familiar icon familiar icon familiar icon or use a text label • Max 1 to 2 Inline Actions per object Max 1 to 2 Inline Actions per object Max 1 to 2 Inline Actions per object Max 1 to 2 Inline Actions per object 

Call to Action Buttons • Don’t hide the main call to action Don’t hide the main call to action Don’t hide the main call to action Don’t hide the main call to action in a menu or disguise it as an unrecognizable icon in a toolbar • Good contrast Good contrast Good contrast Good contrast and clear label clear label clear label clear label 

Multi-state Button • Multi-State Buttons work well for a series of tightly a series of tightly a series of tightly a series of tightly correlated actions correlated actions correlated actions correlated actions that will to be performed in succession correlated actions correlated actions correlated actions correlated actions that will to be performed in succession 

Bulk Actions • Bulk actions like delete and reorder are best handled in an in an in an in an edit mode edit mode edit mode edit mode • Provide an obvious option for exiting the mode obvious option for exiting the mode obvious option for exiting the mode obvious option for exiting the mode • Provide an obvious option for exiting the mode obvious option for exiting the mode obvious option for exiting the mode obvious option for exiting the mode 

Maps • Provide visible visible visible visible markers markers markers markers (avoiding “terrain-mode”) • Use Use Use Use as as as as much much much much screen screen screen screen as as as as possible possible possible possible • Use Use Use Use as as as as much much much much screen screen screen screen as as as as possible possible possible possible • Can Can Can Can be be be be small small small small if the location is not the main item 

Roadmap • Navigation • Navigation • Forms • Search, sort & filter • Tools • Invitations • Invitations • Feedback & Affordance • Anti-Patterns 

Invitations • Helpful tips displayed the first time a user launches an app launches an app – Dialog – Tip – Tour – Video – Transparency – Transparency – 1st Time Through – Persistent – Discoverable 

Dialog • Keep dialog content short content short content short content short • make sure there is an alternate way make sure there is an alternate way make sure there is an alternate way make sure there is an alternate way to access instructions • make sure there is an alternate way make sure there is an alternate way make sure there is an alternate way make sure there is an alternate way to access instructions from within the application 

Tip • Place tips in proximity to the feature they refer to Place tips in proximity to the feature they refer to Place tips in proximity to the feature they refer to Place tips in proximity to the feature they refer to • keep the content short content short content short content short • keep the content short content short content short content short • remove the tip remove the tip remove the tip remove the tip once interaction begins 

Tour • A tour should highlight key features highlight key features highlight key features highlight key features of the application, preferably from a (user) goal perspective • Keep it short short short short and visually engaging visually engaging visually engaging visually engaging 

Video • Demos should showcase key features showcase key features showcase key features showcase key features or show how to use the application application • Common video features (stop, pause, volume controls stop, pause, volume controls stop, pause, volume controls stop, pause, volume controls, etc,...) should be provided 

Transparency • Transparencies are not meant to compensate for poor not meant to compensate for poor not meant to compensate for poor not meant to compensate for poor screen designs screen designs screen designs screen designs! • Remove the Transparency once interaction begins Remove the Transparency once interaction begins Remove the Transparency once interaction begins Remove the Transparency once interaction begins • Remove the Transparency once interaction begins Remove the Transparency once interaction begins Remove the Transparency once interaction begins Remove the Transparency once interaction begins My favourite invitation! 

1st time through • Clearly differentiate the invitation Clearly differentiate the invitation Clearly differentiate the invitation Clearly differentiate the invitation from other content with images or other visual cues with images or other visual cues 

Persistent • Keep it short Keep it short Keep it short Keep it short • Clearly differentiate the invitation Clearly differentiate the invitation Clearly differentiate the invitation Clearly differentiate the invitation from other content with images or other visual cues with images or other visual cues 

Discoverable • Use Discoverable invitations sparingly sparingly sparingly sparingly • The most common instance of this pattern is for prompting a for prompting a for prompting a for prompting a • The most common instance of this pattern is for prompting a for prompting a for prompting a for prompting a data refresh data refresh data refresh data refresh 

Roadmap • Navigation • Navigation • Forms • Search, sort & filter • Tools • Invitations • Invitations • Feedback & Affordance • Anti-Patterns 

Feedback & Affordance • Feedback – Errors – Errors – Confirmation – System Status • Affordance – Tap – Flick – Drag 

Feedback: Errors • Use plain language that offers a solution offers a solution offers a solution offers a solution for resolving the issue • make the error visible visible visible visible • make the error visible visible visible visible • use in-screen messaging instead of modal dialogs 

Feedback: Confirmation • Provide confirmation when an action is taken when an action is taken when an action is taken when an action is taken • don’t break the user’s flow don’t break the user’s flow don’t break the user’s flow don’t break the user’s flow • don’t break the user’s flow don’t break the user’s flow don’t break the user’s flow don’t break the user’s flow 

Feedback: System Status • Provide feedback Provide feedback Provide feedback Provide feedback about the system’s status • Offer a cancel option Offer a cancel option Offer a cancel option Offer a cancel option for potentially lengthy operations • Offer a cancel option Offer a cancel option Offer a cancel option Offer a cancel option for potentially lengthy operations 

Affordance: Tap • Use common visual design techniques Use common visual design techniques Use common visual design techniques Use common visual design techniques to indicate tappable controls controls • Apply 3D effects judiciously 

Affordance: Flick • Use a page indicator page indicator page indicator page indicator • show the edge of the next item edge of the next item edge of the next item edge of the next item • show the edge of the next item edge of the next item edge of the next item edge of the next item • Avoid heavy weight scroll bars Avoid heavy weight scroll bars Avoid heavy weight scroll bars Avoid heavy weight scroll bars 

Affordance: Drag • Use a recognizable icon recognizable icon recognizable icon recognizable icon for the handle • Consider using an invitation invitation invitation invitation to let users know this feature is • Consider using an invitation invitation invitation invitation to let users know this feature is available 

Roadmap • Navigation • Navigation • Forms • Search, sort & filter • Tools • Invitations • Invitations • Feedback & Affordance • Anti-Patterns 

Anti-Patterns • Common pitfalls to avoid – Novel Notions – Novel Notions – Metaphor Mismatch – Idiot Boxes – Chart Junk – Oceans of Buttons – Oceans of Buttons 

Novel Notions • If you are looking for a way to innovate with your application, focus on your core features and focus on your core features and focus on your core features and focus on your core features and application, focus on your core features and focus on your core features and focus on your core features and focus on your core features and offerings offerings offerings offerings, but rely on best practices for the rely on best practices for the rely on best practices for the rely on best practices for the interface design interface design interface design interface design • If you design a custom control, rigorously test it If you design a custom control, rigorously test it If you design a custom control, rigorously test it If you design a custom control, rigorously test it and refine it to make sure it is usable and refine it to make sure it is usable 

Novel Notions Examples 

Metaphor Mismatch • Consists in picking the wrong metaphor for the interface: interface: – Control mismatch – Icon mismatch – Mental model mismatch 

Metaphor Mismatch Examples 

Idiot Boxes • Avoid disrupting the workflow Avoid disrupting the workflow Avoid disrupting the workflow Avoid disrupting the workflow, only show a confirmation dialog when an irreparable action is confirmation dialog when an irreparable action is being taken (like a permanent delete) 

Chart Junk • Only use visual elements in charts and graphs that are necessary to communicate the information represented on the graph represented on the graph 

Oceans of Buttons • Use standard patterns Use standard patterns Use standard patterns Use standard patterns for displaying page level actions • Provide contextual tools contextual tools contextual tools contextual tools for item level actions instead of repeating the same button repeating the same button • Keep page level actions visually separate from navigational Keep page level actions visually separate from navigational Keep page level actions visually separate from navigational Keep page level actions visually separate from navigational elements elements elements elements 

References • Screenshots from: – www.mobiledesignpatterngallery.com – pttrns.com – pttrns.com – inspired-ui.com – mobile-patterns.com