Design patterns for mobile apps

4,189 views
3,828 views

Published on

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

This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.

http://www.ivanomalavolta.com

Published in: Technology
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,189
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
178
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

Design patterns for mobile apps

  1. 1. Gran Sasso Science Institute Ivano Malavolta Design patterns for mobile apps
  2. 2. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
  3. 3. Navigation •  How users move through the views –  Springboard –  Lists (Vertical, Infinite) –  Tabs –  Gallery (Grid) –  Dashboard –  Metaphor –  Page Carousel –  Image Carousel –  Expanding Lists –  Infinite Area
  4. 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. 5. Lists •  Work 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. 6. Tabs •  Clearly differentiate the selected tab from the others •  Use easy to recognize icons or icons with labels
  7. 7. Gallery (Grid) •  Works best for frequently updated content that people want to browse
  8. 8. Dashboard •  Dashboards provide a roll-up of key performance indicators •  Don’t overload the dashboard •  Usually Springboards are also called Dashboards
  9. 9. Metaphor •  Pages are modeled to reflect the application’s metaphor •  Use the Metaphor pattern judiciously
  10. 10. 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
  11. 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
  12. 12. Expanding Lists •  Works best for progressively disclosing more details or options for an object
  13. 13. 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
  14. 14. Can you compare these navigation designs? Exercise
  15. 15. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
  16. 16. Forms •  They are for data entry and configuration –  Sign In –  Registration –  Check-in –  Comments –  Users Profile –  Share –  Empty Datasets –  Multi-step –  Settings
  17. 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
  18. 18. Registration •  Keep it short, preferably one screen •  Register button well visible
  19. 19. Check-in •  Keep it ultra-short •  Design for speed, and efficiency •  Eliminate unnecessary fields •  Don’t show the map!
  20. 20. Comments •  Invite user to leave comment •  Always clarify what is being commented •  Show other people’s comments over time
  21. 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. 22. Users Profile •  Put the badges in evidence •  Show their contribution to the social network •  Provide action controls
  23. 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. 24. Empty datasets •  Avoid white-screens, explain why the dataset is empty •  call for action, only one! •  Avoid error messages
  25. 25. Multi Step •  Show the user where they are and where they can go •  Eliminate unnecessary fields •  minimize the number of pages and steps
  26. 26. Settings •  Put them inside the app •  Clear and grouped •  Easy to be understood
  27. 27. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
  28. 28. Search, Sort & Filter •  Search –  Explicit Search –  Auto-complete –  Dynamic Search –  Scoped Search –  Saved & Recent –  Search form –  Search Results
  29. 29. 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
  30. 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. 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. 32. Scoped Search •  Offer reasonable scoping options based on the data set •  3 to 6 scoping options are plenty
  33. 33. Search form •  Minimize the number of input fields •  Follow form design best practices (alignment, labels, size) •  Use only when strictly needed
  34. 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)
  35. 35. Search, Sort & Filter •  Sort –  Onscreen Sort –  Sort Order Selector
  36. 36. Onscreen Sort •  Clearly show which option is selected •  Do not use it if option labels don’t fit nicely in a toggle button bar
  37. 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. 38. Filter Forms •  Don’t over-design the filter, a simple onscreen filter or drawer will usually suffice
  39. 39. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
  40. 40. Tools •  Buttons & Controls –  Toolbar –  Option Menu –  Contextual Tools –  Inline Actions –  Call to Action Buttons –  Multi-state Button –  Bulk Actions –  Maps
  41. 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. 42. Option Menu •  Choose direct interactions when possible •  Possibly don’t hide navigation in the Option Menu
  43. 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. 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. 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
  46. 46. Multi-state Button •  Multi-State Buttons work well for a series of tightly correlated actions that will to be performed in succession
  47. 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. 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
  49. 49. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
  50. 50. Invitations •  Helpful tips displayed the first time a user launches an app –  Dialog –  Tip –  Tour –  Video –  Transparency –  1st Time Through –  Persistent –  Discoverable
  51. 51. Dialog •  Keep dialog content short •  make sure there is an alternate way to access instructions from within the application
  52. 52. Tip •  Place tips in proximity to the feature they refer to •  keep the content short •  remove the tip once interaction begins
  53. 53. Tour •  A tour should highlight key features of the application, preferably from a (user) goal perspective •  Keep it short and visually engaging
  54. 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. 55. Transparency •  Transparencies are not meant to compensate for poor screen designs! •  Remove the Transparency once interaction begins My favourite invitation!
  56. 56. 1st time through •  Clearly differentiate the invitation from other content with images or other visual cues
  57. 57. Persistent •  Keep it short •  Clearly differentiate the invitation from other content with images or other visual cues
  58. 58. Discoverable •  Use Discoverable invitations sparingly •  The most common instance of this pattern is for prompting a data refresh
  59. 59. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
  60. 60. Feedback & Affordance •  Feedback –  Errors –  Confirmation –  System Status •  Affordance –  Tap –  Flick –  Drag
  61. 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
  62. 62. Feedback: Confirmation •  Provide confirmation when an action is taken •  don’t break the user’s flow
  63. 63. Feedback: System Status •  Provide feedback about the system’s status •  Offer a cancel option for potentially lengthy operations
  64. 64. Affordance: Tap •  Use common visual design techniques to indicate tappable controls •  Apply 3D effects judiciously
  65. 65. Affordance: Flick •  Use a page indicator •  show the edge of the next item •  Avoid heavy weight scroll bars
  66. 66. Affordance: Drag •  Use a recognizable icon for the handle •  Consider using an invitation to let users know this feature is available
  67. 67. Roadmap Navigation Forms Search, sort & filter Tools Invitations Feedback & Affordance Anti-Patterns
  68. 68. Anti-Patterns •  Common pitfalls to avoid –  Novel Notions –  Metaphor Mismatch –  Idiot Boxes –  Chart Junk –  Oceans of Buttons
  69. 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 refine it to make sure it is usable
  70. 70. Novel Notions Examples
  71. 71. Novel Notions Examples
  72. 72. Metaphor Mismatch •  Consists in picking the wrong metaphor for the interface: –  Control mismatch –  Icon mismatch –  Mental model mismatch
  73. 73. Metaphor Mismatch Examples Control mismatch Icon mismatch Mental model mismatch
  74. 74. Idiot Boxes Avoid disrupting the workflow only show a confirmation dialog when an irreparable action is being taken (like a permanent delete)
  75. 75. Chart Junk Only use visual elements in charts and graphs that are necessary to communicate the information represented on the graph
  76. 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
  77. 77. References •  Screenshots from: –  www.mobiledesignpatterngallery.com –  pttrns.com –  inspired-ui.com –  mobile-patterns.com get inspired!
  78. 78. + 39 380 70 21 600 Contact Ivano Malavolta | Gran Sasso Science Institute iivanoo ivano.malavolta@univaq.it www.ivanomalavolta.com

×