Design patterns for mobile apps
6 likes3,021 views
The document outlines best practices and design patterns for mobile app navigation, forms, search, and filtering tools, emphasizing the importance of user experience. It covers various navigation styles like cards, tabs, and carousels, as well as design considerations for elements like forms and feedback mechanisms. Additionally, common anti-patterns to avoid in app design are highlighted to enhance usability and efficiency.
Design patterns for mobile apps
- 1. Gran Sasso Science Institute Ivano Malavolta Design patterns for mobile apps
- 2. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
- 3. Navigation • How users move through the views – Springboard – Lists (Vertical, Infinite) – Cards – Tabs – Gallery (Grid) – Dashboard – Metaphor – Page Carousel – Image Carousel – Expanding Lists – Infinite 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 • Works well for long lists with subtext • All internal screens should have a way for returning back • It can be “infinite”, it can have thumbnails
- 6. Cards Definition container that logically encapsulates bits of information Good for presenting similar objects whose size or supported actions can vary considerably we can take advantage of animation and movement http://goo.gl/kB8GlW
- 8. Tabs • Clearly differentiate the selected tab from the others • Use easy to recognize icons or icons with labels
- 9. Gallery (Grid) • Works best for frequently updated content that people want to browse
- 10. Metaphor • Pages are modeled to reflect the application’s metaphor • Use the Metaphor pattern judiciously
- 11. Page carousel • Works best for navigating a small number of pages • Visual indicator to reflect the number of screens, and current screen • Flick to navigate the carousel
- 12. 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. Expanding Lists • Works best for progressively disclosing more details or options for an object
- 14. Infinite 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
- 15. Can you compare these navigation designs? Exercise
- 16. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
- 17. Forms • They are for data entry and configuration – Sign In – Registration – Check-in – Comments – Users Profile – Share – Empty Datasets – Multi-step – Settings
- 18. 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. Registration • Keep it short, preferably one screen • Register button well visible
- 20. Check-in • Keep it ultra-short • Design for speed, and efficiency • Eliminate unnecessary fields • Don’t show the map!
- 21. Comments • Invite user to leave comment • Always clarify what is being commented • Show other people’s comments over time
- 22. 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
- 23. Users Profile • Put the badges in evidence • Show their contribution to the social network • Provide action controls
- 24. Share • Always keep track of past logins • Always provide an “off social” way to share (e.g., by email) • Remark what is being shared
- 25. Empty datasets • Avoid white-screens, explain why the dataset is empty • Call for action, only one! • Avoid error messages
- 26. Multi Step • Show the user where they are and where they can go • Eliminate unnecessary fields • Minimize the number of pages and steps
- 27. Settings • Put them inside the app • Clear and grouped • Easy to be understood
- 28. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
- 29. Search, Sort & Filter • Search – Explicit Search – Dynamic Search – Search form – Search Results
- 30. Explicit Search • Offer a clear button in the field • Provide an option to cancel the search • Use feedback to show the search is being performed
- 31. Dynamic Search • Automatically filters a given list of items • Works well for constrained data sets, like an address book or personal media library
- 32. Search form • Minimize the number of input fields • Follow form design best practices (alignment, labels, size) • Use only when strictly needed
- 33. Search Results • Use live scroll instead of paging • Apply a reasonable default sort order • Call for action
- 34. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
- 35. Tools • Buttons & Controls – Toolbar – Contextual Tools – Inline Actions – Call to Action Buttons – Multi-state Button – Maps
- 36. 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
- 37. 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
- 38. 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
- 39. 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
- 40. Multi-state Button • Multi-State Buttons work well for a series of tightly correlated actions that will to be performed in succession
- 41. Maps • Provide visible markers (avoiding “terrain-mode”) • Use as much screen as possible • Can be small if the location is not the main item
- 42. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
- 43. Invitations • Helpful tips displayed the first time a user launches an app – Dialog – Tip – Tour – Video – Transparency – 1st Time Through – Persistent
- 44. Dialog • Keep dialog content short • make sure there is an alternate way to access instructions from within the application
- 45. Tip • Place tips in proximity to the feature they refer to • keep the content short • remove the tip once interaction begins
- 46. Tour • A tour should highlight key features of the application, preferably from a (user) goal perspective • Keep it short and visually engaging
- 47. Video • Demos should showcase key features or show how to use the application • Common video features (stop, pause, volume controls, etc,...) should be provided
- 48. Transparency • Transparencies are not meant to compensate for poor screen designs! • Remove the Transparency once interaction begins My favourite invitation!
- 49. 1st time through • Clearly differentiate the invitation from other content with images or other visual cues
- 50. Persistent • Keep it short • Clearly differentiate the invitation from other content with images or other visual cues
- 51. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
- 52. Feedback & Affordance • Feedback – Errors – Confirmation – System Status • Affordance – Tap – Flick – Drag
- 53. 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
- 54. Feedback: Confirmation • Provide confirmation when an action is taken • don’t break the user’s flow
- 55. Feedback: System Status • Provide feedback about the system’s status • Offer a cancel option for potentially lengthy operations
- 56. Affordance: Tap • Use common visual design techniques to indicate tappable controls • Apply 3D effects judiciously
- 57. Affordance: Flick • Use a page indicator • show the edge of the next item • Avoid heavy weight scroll bars
- 58. Affordance: Drag • Use a recognizable icon for the handle • Consider using an invitation to let users know this feature is available
- 59. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
- 60. Anti-Patterns • Common pitfalls to avoid – Novel Notions – Metaphor Mismatch – Idiot Boxes – Chart Junk – Oceans of Buttons
- 61. 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 refine it to make sure it is usable
- 64. Metaphor Mismatch • Consists in picking the wrong metaphor for the interface: – Control mismatch – Icon mismatch – Mental model mismatch – Gesture mismatch
- 65. Metaphor Mismatch Examples Control mismatch Icon mismatch Mental model mismatch
- 66. Gesture mismatch
- 67. Idiot Boxes Avoid disrupting the workflow only show a confirmation dialog when an irreparable action is being taken (like a permanent delete)
- 68. 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
- 69. References • Screenshots from: – www.mobiledesignpatterngallery.com – pttrns.com – inspired-ui.com – mobile-patterns.com get inspired!
- 70. References Google material design guidelines http://www.google.com/design/spec/material-design
- 71. Exercises • Sketch down the wireframe of two views of your app • List for each view the applied design patterns and the applied design decisions