UI design for mobile apps


Published on

Intro + Examples
Human Interface Principles
Platform Characteristics
UX Guidelines

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


Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

UI design for mobile apps

  1. 1. Gran Sasso Science Institute Ivano Malavolta UI design
  2. 2. Roadmap Intro + Examples Human Interface Principles Platform Characteristics UX Guidelines
  3. 3. Introduction Before focussing on UI…. in mobile you can always control Content naming Visual design
  4. 4. Content Naming Before you start reasoning on the UI… Define an APP DICTIONARY Write down the terms and messages used in the app ex. –  “tweets” in Twitter –  “likes” in Facebook
  5. 5. Visual Design The direct representation of everything under your app The first impression the user will have It is not only about layout & colors… it is about SENSORY SENSATIONS
  6. 6. Example 1 http://drbl.in/czjd
  7. 7. Anti-example 1
  8. 8. Roadmap Intro + Examples Human Interface Principles Platform Characteristics UX Guidelines
  9. 9. Aesthetic Integrity It’s a measure of how well the appearance of the app integrates with its function •  Productive app à order & clarity •  Game à gamish, frivoulous •  …
  10. 10. Consistency Take advantage of the standards and paradigms people are comfortable with Does it use system-provided controls, views, and icons correctly? Is the application consistent within itself? Does text use uniform terminology and style? Can people predict what will happen?
  11. 11. Direct Manipulation Try to let your users direct manipulate objects in your app Users can experience direct manipulation when they: •  Rotate or otherwise move the device to affect onscreen objects •  Use gestures to manipulate onscreen objects •  Can see that their actions have immediate, visible results
  12. 12. Feedback Acknowledge people’s actions and assures them that processing is occurring Users expect •  immediate feedback •  status updates during lengthy operations
  13. 13. Metaphors You may use metaphors for objects in the real world in your app Users will quickly grasp how to use the app Ex. –  folders –  photo sliders –  …
  14. 14. User Control People, not apps, should initiate and control actions Apps can suggest actions, but users must do them Apps can only infer data from the context Users expect to be able to stop an operation that’s underway
  15. 15. Example 2 http://www.perspecdev.com/Faster/
  16. 16. Anti-example 2
  17. 17. Roadmap Intro + Examples Human Interface Principles Platform Characteristics UX Guidelines
  18. 18. Display is Paramount  The DISPLAY is (usually) the only means that users use to interact with your app! •  The comfortable minimum size of tappable UI elements is 44 x 44 points •  The quality of app artwork is fundamental •  The user’s focus is on the content
  19. 19. Display Orientation Users can rotate the device at any time and for any reason Users tend to expect apps to launch in the device orientation they’re currently using TIP. You can use the splashscreen image to let the user rotate the device
  20. 20. Gestures Users don’t click, they use gestures –  tap/double tap –  drag –  zoom/pinch –  swipe –  flick Users expect all these gestures to work the same, regardless of the app they’re currently running
  21. 21. User Help Keep onscreen user help as minimal as possible In general, users don’t need onscreen help content to tell them how to use the device or the apps Remember of the Consistency human-interface principle
  22. 22. Example 3 http://j-a-m.co/balllin
  23. 23. Anti-example 3
  24. 24. Roadmap Intro + Examples Human Interface Principles Platform Characteristics UX Guidelines
  25. 25. Layout It is the first aspect to fix à you need pure feedback on it à lo-fi wireframing http://bit.ly/GTp82Q Tablets content scrolled horizontally
  26. 26. Colors psychology Users react to different colors differently Colors evoke emotions BLU productiveness, interiors, skies, peace, unity, harmony, tranquility, calmness, trust, coolness, confidence, conservatism, water, ice, loyalty, dependability, cleanliness, technology…
  27. 27. Color Palette Predefined number of colors to use consistently in your app You can use tools like palette choosers, or palette pickers from images OR You can define your palette manually through the color wheel http://kuler.adobe.com
  28. 28. Color Wheel Complementary when you want something to stand out  Analogous choose one color to dominate, a second to support, the third color is as an accent http://bit.ly/GTv7on
  29. 29. Color Wheel Triad let one color dominate and use the two others for accent   Square works best if you let one color be dominant http://bit.ly/GTv7on
  30. 30. Typography It is about: •  selection of the correct font •  understanding sizes •  applying conventional design methodologies (size, shape, contrast, color, position, space, etc.) http://bit.ly/GTvuzj
  31. 31. Readability guidelines 1.  Use a high-contrast typeface –  Devices are usually used outdoor 2.  Use the right typeface (font) http://bit.ly/GTwUtv
  32. 32. Readability guidelines 3.  Provide decent leading –  Leading = the space between two lines 4.  Leave space on the right and left of each line 5.  don’t crowd the screen
  33. 33. Readability guidelines 6.  Generously utilize headings –  Divide the content into paragraphs 7.  Use short paragraphs –  2-3 sentences at most
  34. 34. Respect User-Entered data Input is hard, users slip (and sleep!) Do whatever it takes to preserve user data and plan for real-world behaviors
  35. 35. Realize That Mobiles Are Personal one device for one person Don’t continuously ask for name, data, etc. Only implement passwords and clear personal information when required
  36. 36. Ensure That Lives Take Precedence Don’t interrupt people’s life! Differently from desktops mobiles are glanced at, used in gaps between conversation and driving and watching TV
  37. 37. Use Your Sensors Whenever possible, perform actions for the user based on sensors and user data Ex. Why should you have to silence your phone for a meeting, when the phone knows where you physically are and knows from your calendar that you have a meeting in that room right now?
  38. 38. Focus on the Primary Task you need to determine what’s most important in each context or screen and… focus on it exclusively! Your app definition statement will help you focus on its primary task
  39. 39. Give your users what they need most! For example, in a game, people care about the experience, they don’t expect to manage, consume, or create content •  Minimize the number of controls in the UI •  Customize controls so that they integrate with your app’s graphical style •  Fade controls away after people have stopped interacting with them for a little while Elevate the Content that People Care About
  40. 40. Think Top Down Put the most frequently used information near the top Because users hold the device in the following ways: •  In the left hand and gesturing with a finger of the right hand •  In one hand, and gesturing with the thumb of the same hand •  Between their hands, and gesturing with both thumbs
  41. 41. Logical Path Make the path through the information you present logical and easy to predict –  put markers to let them where they are –  put a back-button Give users only one path to a screen
  42. 42. Easy Usage Your app must be instantly understandable by users à you cannot assume they want or they have time to learn how to use your app Make the main function of your app immediately evident
  43. 43. User-Centric Terminology use terminology your users understand avoid technical jargon –  This does not hold if your target user is a technical guy
  44. 44. Inputting information takes time and attention, minimize it TIP. If your app asks users a lot of input data, you have to revise your design! Balance any request for input by users with what you offer them in return Get information from the OS, when appropriate –  for example: contacts, address, events in the calendar… Minimize the Effort Required for User Input
  45. 45. Enable Collaboration Push for collaboration and sharing with others When appropriate, make it easy for users to interact with others –  allow them to share things like their location, opinions, and high scores For tablets: think of ways to allow more than one person to use your app on the same device
  46. 46. Brand Appropriately Incorporate a brand’s colors or images in a refined, unobtrusive way Avoid taking space away from the content people care about –  Alternative: subtly customize the background of a screen
  47. 47. Make Search Quick In apps with a lot of data, SEARCH can be a primary function Build indexes of your data so that you are always prepared for search Live-filter local data so that you can display results more quickly Display a search bar above a list or the index in a list Display placeholder content right away and partial results as they become available
  48. 48. Be Succinct Think like a newspaper editor, and strive to convey information in a condensed, headline style  When your UI text is short and direct, users can absorb it quickly and easily Give controls short labels, or use well-understood symbols users should tell what they do at a glance
  49. 49. Use UI Elements Consistently Follow the recommended usages for standard user interface elements à you can build on users’ prior experience Avoid radically changing the appearance of a control that performs a standard action Never use the standard buttons and icons to mean something else
  50. 50. Make Targets Fingertip-Size Display may change, but the average size of a fingertip does not! Give tappable elements in your application a target area of about 44 x 44 points If you create smaller controls, the app becomes much less enjoyable à or people may focus on the interface only, rather that content
  51. 51. People should have confidence that their work is always preserved unless they explicitly cancel or delete it Never ask for saving data, it should be done automatically –  You can ask to either edit or delete data Ask People to Save Only When Necessary
  52. 52. Make Modal Tasks Occasional Modality prevents users’ freedom by interrupting their workflow and forcing them to choose a particular path Keep modal tasks fairly short and narrowly focused Always provide an obvious and safe way to exit a modal task
  53. 53. Start Instantly Avoid displaying an About window or a splash screen Avoid asking people to supply setup information Delay a login requirement for long as possible: –  Focus your solution on the needs of 80 percent of your users –  Get as much information as possible from other sources –  If you must ask for setup information, put it in your app’s settings
  54. 54. Always Be Prepared to Stop Save user data as often as reasonable Save the current state when stopping
  55. 55. Example 4 http://instagr.am/
  56. 56. Anti-example 4
  57. 57. A Final BAD example http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html Layout & icons
  58. 58. A Final BAD example Navigation buttons http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
  59. 59. A Final BAD example Error Handling http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
  60. 60. A Final BAD example Data Handling http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
  61. 61. References Chapter 8 http://bit.ly/H4GnKZ http://bit.ly/H4Gqq5
  62. 62. + 39 380 70 21 600 Contact Ivano Malavolta | Gran Sasso Science Institute iivanoo ivano.malavolta@univaq.it www.ivanomalavolta.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.