Common Design Patterns for Mobile (part 2)

1,718 views
1,493 views

Published on

Mobile applications Development - Lecture 7 (part 2)

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).

http://www.di.univaq.it/malavolta

Published in: Education, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,718
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
117
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Common Design Patterns for Mobile (part 2)

  1. 1. Roadmap• Navigation• Forms• Search, sort & filter• Tools• Invitations• Feedback & Affordance• Anti-Patterns
  2. 2. Tools• Buttons & Controls – Toolbar – Option Menu – Contextual Tools – Inline Actions – Call to Action Buttons – Multi-state Button – Bulk Actions – Maps
  3. 3. Toolbar• Contain screen level actions, they are generally displayed at actions the bottom of the screen and• Choose icons that are easy to recognize or use labels plus icons recognize,
  4. 4. Option Menu• Choose direct interactions when possible• Possibly don’t hide navigation in the Option Menu (like Facebook)
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. Multi-state Button• Multi-State Buttons work well for a series of tightly correlated actions that will to be performed in succession
  9. 9. Bulk Actions• Bulk actions like delete and reorder are best handled in an edit mode• Provide an obvious option for exiting the mode
  10. 10. Maps• Provide visible markers (avoiding “terrain-mode”)• Use as much screen as possible• Can be small if the location is not the main item
  11. 11. Roadmap• Navigation• Forms• Search, sort & filter• Tools• Invitations• Feedback & Affordance• Anti-Patterns
  12. 12. Invitations• Helpful tips displayed the first time a user launches an app – Dialog – Tip – Tour – Video – Transparency – 1st Time Through – Persistent – Discoverable
  13. 13. Dialog• Keep dialog content short• make sure there is an alternate way to access instructions from within the application
  14. 14. Tip• Place tips in proximity to the feature they refer to• keep the content short• remove the tip once interaction begins
  15. 15. Tour• A tour should highlight key features of the application, preferably from a (user) goal perspective• Keep it short and visually engaging
  16. 16. Video• Demos should showcase key features or show how to use the application• Common video features (stop, pause, volume controls etc,...) stop, controls, should be provided
  17. 17. Transparency• Transparencies are not meant to compensate for poor designs! screen designs• Remove the Transparency once interaction begins My favourite invitation!
  18. 18. 1st time through• Clearly differentiate the invitation from other content with images or other visual cues
  19. 19. Persistent• Keep it short• Clearly differentiate the invitation from other content with images or other visual cues
  20. 20. Discoverable• Use Discoverable invitations sparingly• The most common instance of this pattern is for prompting a data refresh
  21. 21. Roadmap• Navigation• Forms• Search, sort & filter• Tools• Invitations• Feedback & Affordance• Anti-Patterns
  22. 22. Feedback & Affordance• Feedback – Errors – Confirmation – System Status• Affordance – Tap – Flick – Drag
  23. 23. 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
  24. 24. Feedback: Confirmation• Provide confirmation when an action is taken• don’t break the user’s flow
  25. 25. Feedback: System Status• Provide feedback about the system’s status• Offer a cancel option for potentially lengthy operations
  26. 26. Affordance: Tap• Use common visual design techniques to indicate tappable controls• Apply 3D effects judiciously
  27. 27. Affordance: Flick• Use a page indicator• show the edge of the next item• Avoid heavy weight scroll bars
  28. 28. Affordance: Drag• Use a recognizable icon for the handle• Consider using an invitation to let users know this feature is available
  29. 29. Roadmap• Navigation• Forms• Search, sort & filter• Tools• Invitations• Feedback & Affordance• Anti-Patterns
  30. 30. Anti-Patterns• Common pitfalls to avoid – Novel Notions – Metaphor Mismatch – Idiot Boxes – Chart Junk – Oceans of Buttons
  31. 31. Novel Notions• If you are looking for a way to innovate with your application, focus on your core features and offerings, 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
  32. 32. Novel Notions Examples
  33. 33. Metaphor Mismatch• Consists in picking the wrong metaphor for the interface: – Control mismatch – Icon mismatch – Mental model mismatch
  34. 34. Metaphor Mismatch Examples
  35. 35. Idiot Boxes• Avoid disrupting the workflow only show a workflow, confirmation dialog when an irreparable action is being taken (like a permanent delete)
  36. 36. Chart Junk• Only use visual elements in charts and graphs that are necessary to communicate the information represented on the graph
  37. 37. 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
  38. 38. References• Screenshots from: – www.mobiledesignpatterngallery.com – pttrns.com – inspired-ui.com – mobile-patterns.com

×