Common Design Patterns for Mobile (part 1)


Published on

Mobile applications Development - Lecture 7 (part 1)

Common Design Patterns for Mobile

This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

Published in: Education, Technology

Common Design Patterns for Mobile (part 1)

  1. 1. Common Design Patterns for Mobile Ivano Malavolta
  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 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, content products, and photos• Provide visual affordance either with arrows, partial affordance, 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- large dimensional graphic• The viewport shows only a small subset of the whole data set
  14. 14. Roadmap• Navigation• Forms• Search, sort & filter• Tools• Invitations• Feedback & Affordance• Anti-Patterns
  15. 15. Forms• They are for data entry and configuration – Sign In – Registration – Check-in – Comments – Users Profile – Share – Empty Datasets – Multi-step – Settings
  16. 16. 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
  17. 17. Registration• Keep it short preferably one screen short,• Register button well visible
  18. 18. Check-in• Keep it ultra-short ultra-• Design for speed and efficiency speed,• Eliminate unnecessary fields• Don’t show the map! map!
  19. 19. Comments• Invite user to leave comment• Always clarify what is being commented• Show other people’s comments over time
  20. 20. Time line• 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 Mmm/DD• Older than 12 months, show only the year
  21. 21. Users Profile• Put the badges in evidence• Show their contribution to the social network• Provide action controls
  22. 22. Share• Always keep track of past logins• Always provide an “off social” way to share (e.g., by email)• Remark what is being shared
  23. 23. Empty datasets• Avoid white-screens, explain why the dataset is empty• call for action, only one!• Avoid error messages
  24. 24. Multi Step• Show the user where they are and where they can go• Eliminate unnecessary fields• minimize the number of pages and steps
  25. 25. Settings• Put them inside the app• Clear and grouped• Easy to be understood
  26. 26. Roadmap• Navigation• Forms• Search, sort & filter• Tools• Invitations• Feedback & Affordance• Anti-Patterns
  27. 27. Search, Sort & Filter• Search – Explicit Search – Auto-complete – Dynamic Search – Scoped Search – Saved & Recent – Search form – Search Results
  28. 28. 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
  29. 29. 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
  30. 30. Dynamic Search• Automatically filters a given list of items• Works well for constrained data sets like an address book sets, or personal media library
  31. 31. Scoped Search• Offer reasonable scoping options based on the data set• 3 to 6 scoping options are plenty
  32. 32. Search form• Minimize the number of input fields• Follow form design best practices (alignment, labels, size)• Use only when strictly needed
  33. 33. 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)
  34. 34. Search, Sort & Filter• Sort – Onscreen Sort – Sort Order Selector
  35. 35. Onscreen Sort• Clearly show which option is selected• Do not use it if labels option labels don’t fit nicely in a toggle button bar
  36. 36. 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
  37. 37. Filter Forms• Don’t over-design the filter, a simple onscreen filter or drawer will usually suffice
  38. 38. References• Screenshots from: – – – –