UI Design         Ivano Malavolta    ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
Some apps are just soshiny you want to lick them                         [cit.]
Roadmap•   Intro + Examples•   Human Interface Principles•   Platform Characteristics•   UX Guidelines
IntroductionBefore focussing on UI….in mobile you can always control    Content                    Visual    naming       ...
Content NamingBefore you start reasoning on the UI…Define an APP DICTIONARYWrite down the terms and messages used in the a...
Visual DesignThe direct representation of everything under  your appThe first impression the user will have     It is not ...
Example 1http://drbl.in/czjd
Anti-example 1
Roadmap•   Intro + Examples•   Human Interface Principles•   Platform Characteristics•   UX Guidelines
Aesthetic IntegrityIt’s a measure of how well the appearance of  the app integrates with its function• Productive app    o...
ConsistencyTake advantage of the standards and paradigms  people are comfortable withDoes it use system-provided controls,...
Direct ManipulationTry to let your users direct manipulate objects  in your appUsers can experience direct manipulation wh...
FeedbackAcknowledge people’s actions and assures them  that processing is occurringUsers expect• immediate feedback• statu...
MetaphorsUse metaphors for objects in the real world in  your appUsers will quickly grasp how to use the appEx.      – fol...
User ControlPeople, not apps, should initiate and control  actionsApps can suggest actions, but users must do themApps can...
Example 2http://www.perspecdev.com/Faster/
Anti-example 2
Roadmap•   Intro + Examples•   Human Interface Principles•   Platform Characteristics•   UX Guidelines
Display is ParamountThe DISPLAY is (usually) the only means that users use  to interact with your app!• The comfortable mi...
Display OrientationUsers can rotate the device at any time and for  any reasonusers tend to expect apps to launch in the  ...
GesturesUsers don’t click, they use gestures   –   tap/double tap   –   drag   –   zoom/pinch   –   swipe   –   flickUsers...
One App at a Time(at the moment) One app is visible in the foreground  at a timeWhen people switch from one app to another...
User HelpKeep onscreen user help as minimal as possibleIn general, users don’t need onscreen help  content to tell them ho...
Example 3http://kangarooband.it/
Anti-example 3
Roadmap•   Intro + Examples•   Human Interface Principles•   Platform Characteristics•   UX Guidelines
Layout  It should be defined the first aspect to fix           you need pure feedback on it           lo-fi wireframing   ...
Colors psychology  Users react to different colors differently  Colors evoke emotions                       BLU           ...
Color Palette   Predefined number of colors to use consistently in     your app   You can use tools like   palette chooser...
Color Wheel                             Complementary                                    when you want                    ...
Color Wheel                             Triad                                      let one color dominate                 ...
Typography   It is about:   • selection of the correct font   • understanding sizes   • applying conventional design metho...
Readability guidelines   1. Use a high-contrast typeface            high-       –    Devices are usually used outside   2....
Readability guidelines3. Provide decent leading  –   Leading = the space between two lines4. Leave space on the right and ...
Readability guidelines6. Generously utilize headings  –   Divide the content into paragraphs7. Use short paragraphs  –   2...
Respect User-Entered dataInput is hard,Users slip (and sleep!)Do whatever it takes topreserve user dataand plan for real-w...
Realize That Mobiles Are Personal          one device for one personDon’t continuously ask for name, data, etc.Only implem...
Ensure That Lives Take Precedence           Don’t interrupt people’s life!Differently from desktops  Mobiles are glanced a...
Use Your SensorsWhenever possible, perform actions for the user based on sensors and user dataEx.Why should you have to si...
Focus on the Primary Taskyou need to determine what’s most important in  each context or screen and…                      ...
Elevate the Content that People Care                About     Give your users what they need most!                        ...
Think Top Down    Put the most frequently used information                   near the topBecause users hold the device in ...
Logical PathMake the path through the information you present logical and easy to predict  – put markers to let them where...
Easy UsageYour app must be instantly understandable by users    you cannot assume they want or they have time to learn  ho...
User-Centric Terminologyuse terminology your users understandavoid technical jargon  – This does not hold if your target u...
Minimize the Effort Required for User                    InputInputting information takes time and attention,  minimize it...
Enable CollaborationPush for collaboration and sharing with othersWhen appropriate, make it easy for users to interact wit...
Brand AppropriatelyIncorporate a brand’s colors or images in a refined,  unobtrusive wayAvoid taking space away from the c...
Make Search QuickIn apps with a lot of data, SEARCH can be a  primary functionBuild indexes of your data so that you are a...
Be SuccinctThink like a newspaper editor, and strive to convey  information in a condensed, headline style When your UI te...
Use UI Elements ConsistentlyFollow the recommended usages for standard user  interface elements    you can build on users’...
Make Targets Fingertip-SizeDisplay may change, but the average size of a  fingertip does not!Give tappable elements in you...
Ask People to Save Only When                NecessaryPeople should have confidence that their work is  always preserved un...
Make Modal Tasks OccasionalModality prevents users’ freedom by interrupting their workflow and forcing them to choose a pa...
Start InstantlyAvoid displaying an About window or a splash screenAvoid asking people to supply setup informationDelay a l...
Always Be Prepared to StopSave user data as often as reasonableSave the current state when stopping
Example 4http://instagr.am/
Anti-example 4
A Final BAD example                                            Layout & iconshttp://www.androiduipatterns.com/2011/11/caut...
A Final BAD example                                            Navigation buttonshttp://www.androiduipatterns.com/2011/11/...
A Final BAD example                               Error Handlinghttp://www.androiduipatterns.com/2011/11/cautionary-exampl...
A Final BAD example                                            Data Handlinghttp://www.androiduipatterns.com/2011/11/cauti...
And maybe a good one…                 …developed in one single night…http://www.musicatch.info
ReferencesChapter 8        http://bit.ly/H4GnKZ        http://bit.ly/H4Gqq5
BRAINSTORMING
Upcoming SlideShare
Loading in...5
×

UI Design

1,107

Published on

Mobile Applications Development - Lecture 5

UI Design

Layout

Look & Feel

Colors

Typography

Graphics

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

Transcript of "UI Design"

  1. 1. UI Design Ivano Malavolta ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
  2. 2. Some apps are just soshiny you want to lick them [cit.]
  3. 3. Roadmap• Intro + Examples• Human Interface Principles• Platform Characteristics• UX Guidelines
  4. 4. IntroductionBefore focussing on UI….in mobile you can always control Content Visual naming Design
  5. 5. Content NamingBefore you start reasoning on the UI…Define an APP DICTIONARYWrite down the terms and messages used in the appEx. – tweets in Twitter – Likes in Facebook
  6. 6. Visual DesignThe direct representation of everything under your appThe first impression the user will have It is not only about layout & colors… it is about SENSORY SENSATIONS
  7. 7. Example 1http://drbl.in/czjd
  8. 8. Anti-example 1
  9. 9. Roadmap• Intro + Examples• Human Interface Principles• Platform Characteristics• UX Guidelines
  10. 10. Aesthetic IntegrityIt’s a measure of how well the appearance of the app integrates with its function• Productive app order & clarity• Game gamish, frivoulous• …
  11. 11. ConsistencyTake advantage of the standards and paradigms people are comfortable withDoes it use system-provided controls, views, and icons correctly correctly?Is the application consistent within itself itself?Does text use uniform terminology and style style?Can people predict what will happen?
  12. 12. Direct ManipulationTry to let your users direct manipulate objects in your appUsers 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
  13. 13. FeedbackAcknowledge people’s actions and assures them that processing is occurringUsers expect• immediate feedback• status updates during lengthy operations
  14. 14. MetaphorsUse metaphors for objects in the real world in your appUsers will quickly grasp how to use the appEx. – folders – photo sliders –…
  15. 15. User ControlPeople, not apps, should initiate and control actionsApps can suggest actions, but users must do themApps can only infer data from the contextUsers expect to be able to stop an operation that’s underway
  16. 16. Example 2http://www.perspecdev.com/Faster/
  17. 17. Anti-example 2
  18. 18. Roadmap• Intro + Examples• Human Interface Principles• Platform Characteristics• UX Guidelines
  19. 19. Display is ParamountThe 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
  20. 20. Display OrientationUsers can rotate the device at any time and for any reasonusers tend to expect apps to launch in the device orientation they’re currently usingTIP.TIP You can use the splashscreen image to let the user rotate the device
  21. 21. GesturesUsers don’t click, they use gestures – tap/double tap – drag – zoom/pinch – swipe – flickUsers expect all these gestures to work the same, same regardless of the app they’re currently running
  22. 22. One App at a Time(at the moment) One app is visible in the foreground at a timeWhen people switch from one app to another, the previous app goes in background and its user interface goes awaySome applications might need to continue running in the background
  23. 23. User HelpKeep onscreen user help as minimal as possibleIn general, users don’t need onscreen help content to tell them how to use the device or the appsRemember of the Consistency human-interface principle
  24. 24. Example 3http://kangarooband.it/
  25. 25. Anti-example 3
  26. 26. Roadmap• Intro + Examples• Human Interface Principles• Platform Characteristics• UX Guidelines
  27. 27. Layout It should be defined the first aspect to fix you need pure feedback on it lo-fi wireframing Tablets content scrolled horizontallyhttp://bit.ly/GTp82Q
  28. 28. 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…http://mobiledesign.org/color
  29. 29. 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 wheelhttp://kuler.adobe.com
  30. 30. 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 accenthttp://bit.ly/GTv7on
  31. 31. Color Wheel Triad let one color dominate and use the two others for accent Square works best if you let one color be dominanthttp://bit.ly/GTv7on
  32. 32. 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
  33. 33. Readability guidelines 1. Use a high-contrast typeface high- – Devices are usually used outside 2. Use the right typeface (font)http://bit.ly/GTwUtv
  34. 34. Readability guidelines3. Provide decent leading – Leading = the space between two lines4. Leave space on the right and left of each line5. don’t crowd the screen
  35. 35. Readability guidelines6. Generously utilize headings – Divide the content into paragraphs7. Use short paragraphs – 2-3 sentences at most
  36. 36. Respect User-Entered dataInput is hard,Users slip (and sleep!)Do whatever it takes topreserve user dataand plan for real-world behaviors
  37. 37. Realize That Mobiles Are Personal one device for one personDon’t continuously ask for name, data, etc.Only implement passwords and clear personal information when required
  38. 38. 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
  39. 39. Use Your SensorsWhenever possible, perform actions for the user based on sensors and user dataEx.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?
  40. 40. Focus on the Primary Taskyou need to determine what’s most important in each context or screen and… exclusively! focus on it exclusively!Your app definition statement will help you focus your app on its primary task
  41. 41. Elevate the Content that People Care About Give your users what they need most! 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
  42. 42. Think Top Down Put the most frequently used information near the topBecause 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 hand, thumb of the same hand• Between their hands and gesturing hands, with both thumbs
  43. 43. Logical PathMake the path through the information you present logical and easy to predict – put markers to let them where they are – put a back-buttonGive users only one path to a screen
  44. 44. Easy UsageYour app must be instantly understandable by users you cannot assume they want or they have time to learn how to use your appMake the main function of your appimmediately evident
  45. 45. User-Centric Terminologyuse terminology your users understandavoid technical jargon – This does not hold if your target user is a technical guy
  46. 46. Minimize the Effort Required for User InputInputting information takes time and attention, minimize itTIP.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 returnGet information from the OS when appropriate OS, – for example: contacts, address, events in the calendar…
  47. 47. Enable CollaborationPush for collaboration and sharing with othersWhen appropriate, make it easy for users to interact with others – allow them to share things like their location, opinions, and high scoresFor tablets think of ways to allow more than one tablets: person to use your app on the same device
  48. 48. Brand AppropriatelyIncorporate a brand’s colors or images in a refined, unobtrusive wayAvoid taking space away from the content people care about – Alternative: subtly customize the background of a screen
  49. 49. Make Search QuickIn apps with a lot of data, SEARCH can be a primary functionBuild indexes of your data so that you are always prepared for searchLive-Live-filter local data so that you can display results more quicklyDisplay a search bar above a list or the index in a listDisplay placeholder content right away and partial results as they become available
  50. 50. Be SuccinctThink like a newspaper editor, and strive to convey information in a condensed, headline style When your UI text is short and direct users can direct, absorb it quickly and easilyGive controls short labels, or use well-understood labels well- symbols users should tell what they do at a glance
  51. 51. Use UI Elements ConsistentlyFollow the recommended usages for standard user interface elements you can build on users’ prior experienceAvoid radically changing the appearance of a control that performs a standard actionNever use the standard buttons and icons to mean something else
  52. 52. Make Targets Fingertip-SizeDisplay 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 pointsIf you create smaller controls, the app becomes much less enjoyable or people may focus on the interface only, rather than the content
  53. 53. Ask People to Save Only When NecessaryPeople should have confidence that their work is always preserved unless they explicitly cancel or delete itNever ask for saving data it should be done data, automatically – You can ask to either edit or delete data
  54. 54. Make Modal Tasks OccasionalModality prevents users’ freedom by interrupting their workflow and forcing them to choose a particular pathKeep modal tasks fairly short and narrowly focusedAlways provide an obvious and safe way to exit a modal task
  55. 55. Start InstantlyAvoid displaying an About window or a splash screenAvoid asking people to supply setup informationDelay 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
  56. 56. Always Be Prepared to StopSave user data as often as reasonableSave the current state when stopping
  57. 57. Example 4http://instagr.am/
  58. 58. Anti-example 4
  59. 59. A Final BAD example Layout & iconshttp://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
  60. 60. A Final BAD example Navigation buttonshttp://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
  61. 61. A Final BAD example Error Handlinghttp://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
  62. 62. A Final BAD example Data Handlinghttp://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
  63. 63. And maybe a good one… …developed in one single night…http://www.musicatch.info
  64. 64. ReferencesChapter 8 http://bit.ly/H4GnKZ http://bit.ly/H4Gqq5
  65. 65. BRAINSTORMING
  1. A particular slide catching your eye?

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

×