Application GUI Design
4 likes1,268 views
The document provides guidelines for designing application GUIs, focusing on simplicity (KISS principle). It recommends identifying essential features and users, doing rough sketches, using standard widgets, spacing out elements consistently, putting content at the front, and mimicking designs of applications that are liked. Color should be used sparingly to direct focus and a simple 2-hue palette is suggested. Typography, icons, images and overlaying text on images are also addressed.
Application GUI Design
- 1. Application GUI Design Notes From a Tizen Toolkit Developer Tom Hacohen Samsung Electronics Open Source Group tom@osg.samsung.com @TomHacohen
- 2. What does it do? Essential features
- 3. What does it do? Essential features Nice to have features
- 4. What does it do? Essential features Nice to have features Niche features (<1% of the users)
- 5. What does it do? Essential features Nice to have features Niche features (<1% of the users) Remove all the non-essential features
- 6. Who is it for? CLI power users? Designers?
- 7. Who is it for? CLI power users? Designers? Target environment
- 8. Who is it for? CLI power users? Designers? Target environment Common demographics
- 9. Who is it for? CLI power users? Designers? Target environment Common demographics Application specific classifications
- 10. Who is it for? CLI power users? Designers? Target environment Common demographics Application specific classifications Userbase = you
- 11. KISS Adapt feature list according to your audience
- 12. KISS Adapt feature list according to your audience Keep focus on the more important features
- 13. KISS Adapt feature list according to your audience Keep focus on the more important features Avoid creating complex UIs
- 14. KISS Adapt feature list according to your audience Keep focus on the more important features Avoid creating complex UIs Keep option lists (combo box) short, simple and in a sensible order
- 15. Have a rough sketch Make a general storyboard sketch
- 16. Have a rough sketch Make a general storyboard sketch Have all the major interactions and features there
- 17. Have a rough sketch Make a general storyboard sketch Have all the major interactions and features there Can be really rough – it’s more about the purpose of the “pages”
- 18. Have a rough sketch Make a general storyboard sketch Have all the major interactions and features there Can be really rough – it’s more about the purpose of the “pages”
- 19. Have a rough sketch Make a general storyboard sketch Have all the major interactions and features there Can be really rough – it’s more about the purpose of the “pages”
- 20. Stick to the basics Don’t bother with colour – harder and will be added later
- 21. Stick to the basics Don’t bother with colour – harder and will be added later Do not customise available widgets/patterns unless there really is no other way
- 22. Stick to the basics Don’t bother with colour – harder and will be added later Do not customise available widgets/patterns unless there really is no other way Develop it around the content – content is king
- 23. I meant it! KISS. . . Be purposefully simple
- 24. I meant it! KISS. . . Be purposefully simple Skeuomorphs are almost always bad
- 25. I meant it! KISS. . . Be purposefully simple Skeuomorphs are almost always bad Be consistent (easier when simple)
- 26. I meant it! KISS. . . Be purposefully simple Skeuomorphs are almost always bad Be consistent (easier when simple) Make it simple for your users – don’t create new usage patterns, and adhere to common ones
- 27. I meant it! KISS. . . Be purposefully simple Skeuomorphs are almost always bad Be consistent (easier when simple) Make it simple for your users – don’t create new usage patterns, and adhere to common ones Common (all?) usage patterns should be easily available
- 28. I meant it! KISS. . . Be purposefully simple Skeuomorphs are almost always bad Be consistent (easier when simple) Make it simple for your users – don’t create new usage patterns, and adhere to common ones Common (all?) usage patterns should be easily available Rest should be revealed as needed
- 29. I meant it! KISS. . . Be purposefully simple Skeuomorphs are almost always bad Be consistent (easier when simple) Make it simple for your users – don’t create new usage patterns, and adhere to common ones Common (all?) usage patterns should be easily available Rest should be revealed as needed Make self-documenting applications
- 30. Spacing Choose a baseline unit size (e.g. 8px)
- 31. Spacing Choose a baseline unit size (e.g. 8px) Align everything to that baseline size
- 32. Spacing Choose a baseline unit size (e.g. 8px) Align everything to that baseline size Use a small set of spacing alternatives (e.g. 2, 3 and 6 units)
- 33. Spacing Choose a baseline unit size (e.g. 8px) Align everything to that baseline size Use a small set of spacing alternatives (e.g. 2, 3 and 6 units) Make sure touch-targets are spaced enough
- 34. Spacing Choose a baseline unit size (e.g. 8px) Align everything to that baseline size Use a small set of spacing alternatives (e.g. 2, 3 and 6 units) Make sure touch-targets are spaced enough Counter example
- 35. Spacing Choose a baseline unit size (e.g. 8px) Align everything to that baseline size Use a small set of spacing alternatives (e.g. 2, 3 and 6 units) Make sure touch-targets are spaced enough Counter example Be generous, but don’t overdo it (don’t waste my screen estate)
- 36. Spacing Choose a baseline unit size (e.g. 8px) Align everything to that baseline size Use a small set of spacing alternatives (e.g. 2, 3 and 6 units) Make sure touch-targets are spaced enough Counter example Be generous, but don’t overdo it (don’t waste my screen estate) Counter example
- 37. Spacing Choose a baseline unit size (e.g. 8px) Align everything to that baseline size Use a small set of spacing alternatives (e.g. 2, 3 and 6 units) Make sure touch-targets are spaced enough Counter example Be generous, but don’t overdo it (don’t waste my screen estate) Counter example Give back space when possible
- 38. Organization Content should be at the front of the stage
- 39. Organization Content should be at the front of the stage Important functionality in key positions
- 40. Organization Content should be at the front of the stage Important functionality in key positions Make the hierarchy of information clear
- 41. Organization Content should be at the front of the stage Important functionality in key positions Make the hierarchy of information clear Associate related elements
- 42. Organization Content should be at the front of the stage Important functionality in key positions Make the hierarchy of information clear Associate related elements Help directing the user’s focus
- 43. Icons and images Use known icons on buttons
- 44. Icons and images Use known icons on buttons Don’t use a known icon for something other than intended
- 45. Icons and images Use known icons on buttons Don’t use a known icon for something other than intended Use rich graphics when appropriate (cover-art, mood graphics, etc.)
- 46. Icons and images Use known icons on buttons Don’t use a known icon for something other than intended Use rich graphics when appropriate (cover-art, mood graphics, etc.) Don’t overshadow content
- 47. Icons and images Use known icons on buttons Don’t use a known icon for something other than intended Use rich graphics when appropriate (cover-art, mood graphics, etc.) Don’t overshadow content Don’t use ugly graphics
- 48. Icons and images Use known icons on buttons Don’t use a known icon for something other than intended Use rich graphics when appropriate (cover-art, mood graphics, etc.) Don’t overshadow content Don’t use ugly graphics Have consistent sizing
- 49. Typography Use a readable font size Text should be big and readable for everyone
- 50. Typography Use a readable font size Space up your text
- 51. Typography Use a readable font size Space up your text Use text attributes (e.g. bold and size) to make text more or less prominent
- 52. Typography Use a readable font size Space up your text Use text attributes (e.g. bold and size) to make text more or less prominent Use a small set of fonts (probably one)
- 53. Overlaying text on images Just put it on (bad)
- 54. Overlaying text on images Just put it on (bad) Black/colour/white-wash the whole image to make text readable
- 55. Overlaying text on images Just put it on (bad) Black/colour/white-wash the whole image to make text readable Add translucent background to the text
- 56. Overlaying text on images Just put it on (bad) Black/colour/white-wash the whole image to make text readable Add translucent background to the text Add a translucent gradient (i.e. partial black/white-wash) so your text area is handled
- 57. Overlaying text on images Just put it on (bad) Black/colour/white-wash the whole image to make text readable Add translucent background to the text Add a translucent gradient (i.e. partial black/white-wash) so your text area is handled Use a big font with a shadow and on outline
- 58. Colour Option 1 (easier): keep the interface b&w and use colour to direct focus
- 59. Colour Option 1 (easier): keep the interface b&w and use colour to direct focus Option 2: Choose a palette of 2 different hues and use different shades
- 60. Colour Option 1 (easier): keep the interface b&w and use colour to direct focus Option 2: Choose a palette of 2 different hues and use different shades I almost always tint my greys (and not use black)
- 61. Colour Option 1 (easier): keep the interface b&w and use colour to direct focus Option 2: Choose a palette of 2 different hues and use different shades I almost always tint my greys (and not use black) Find a good palette online
- 62. Colour Option 1 (easier): keep the interface b&w and use colour to direct focus Option 2: Choose a palette of 2 different hues and use different shades I almost always tint my greys (and not use black) Find a good palette online Use HSL/HSV rather RGB when choosing colours
- 63. Colour Option 1 (easier): keep the interface b&w and use colour to direct focus Option 2: Choose a palette of 2 different hues and use different shades I almost always tint my greys (and not use black) Find a good palette online Use HSL/HSV rather RGB when choosing colours Be aware of cultural differences
- 64. Mimic what works Compare to other applications you/users like better using what we’ve covered
- 65. Mimic what works Compare to other applications you/users like better using what we’ve covered Mimic what’s good there (e.g. do you need more spacing?)
- 66. Mimic what works Compare to other applications you/users like better using what we’ve covered Mimic what’s good there (e.g. do you need more spacing?) It’s usually easier to mimic than to design from scratch
- 67. Mimic what works Compare to other applications you/users like better using what we’ve covered Mimic what’s good there (e.g. do you need more spacing?) It’s usually easier to mimic than to design from scratch Don’t mimic the bad things (i.e. use them as excuse)
- 68. Mimic what works Compare to other applications you/users like better using what we’ve covered Mimic what’s good there (e.g. do you need more spacing?) It’s usually easier to mimic than to design from scratch Don’t mimic the bad things (i.e. use them as excuse) Don’t copy, learn. . .
- 69. User experience tips Consistent behaviour (with the platform and within the application)
- 70. User experience tips Consistent behaviour (with the platform and within the application) Start instantly and lazy load in the background
- 71. User experience tips Consistent behaviour (with the platform and within the application) Start instantly and lazy load in the background Everything should take a small amount of clicks
- 72. User experience tips Consistent behaviour (with the platform and within the application) Start instantly and lazy load in the background Everything should take a small amount of clicks Discoverable UI (easy to figure out how to do things)
- 73. More user experience tips Make it hard to make mistakes
- 74. More user experience tips Make it hard to make mistakes Counter example
- 75. More user experience tips Make it hard to make mistakes Counter example Avoid interruptions
- 76. More user experience tips Make it hard to make mistakes Counter example Avoid interruptions Sort long lists in a predictable, sensible order
- 77. More user experience tips Make it hard to make mistakes Counter example Avoid interruptions Sort long lists in a predictable, sensible order If your users do something and expect something to happen, it probably should happen
- 78. Material design (Google) Highly talked about cross device design guidelines
- 79. Material design (Google) Highly talked about cross device design guidelines A fairly good Android adoption rate
- 80. Material design (Google) Highly talked about cross device design guidelines A fairly good Android adoption rate I personally don’t like animations that slow users down
- 81. Material design (Google) Highly talked about cross device design guidelines A fairly good Android adoption rate I personally don’t like animations that slow users down Concepts are good, it’s implementations that are not always good
- 82. Material design (Google) Highly talked about cross device design guidelines A fairly good Android adoption rate I personally don’t like animations that slow users down Concepts are good, it’s implementations that are not always good It doesn’t feel like they care about low-end and power consumption
- 83. iOS (Apple) Old style: horrible skeuomorphism
- 84. iOS (Apple) Old style: horrible skeuomorphism New style: very simple and clean, sometimes confusing
- 85. iOS (Apple) Old style: horrible skeuomorphism New style: very simple and clean, sometimes confusing Flat and easy to theme
- 86. iOS (Apple) Old style: horrible skeuomorphism New style: very simple and clean, sometimes confusing Flat and easy to theme Usually not very discoverable
- 87. iOS (Apple) Old style: horrible skeuomorphism New style: very simple and clean, sometimes confusing Flat and easy to theme Usually not very discoverable Good general guidelines
- 88. Tizen Designed for low resolution devices
- 89. Tizen Designed for low resolution devices Focus on content and user needs
- 90. Tizen Designed for low resolution devices Focus on content and user needs Frugal with screen estate
- 91. Tizen Designed for low resolution devices Focus on content and user needs Frugal with screen estate Tries to make applications consistent (encourages a fixed colour theme)
- 92. Tizen Designed for low resolution devices Focus on content and user needs Frugal with screen estate Tries to make applications consistent (encourages a fixed colour theme) Make interaction simple and easy
- 93. Tizen Designed for low resolution devices Focus on content and user needs Frugal with screen estate Tries to make applications consistent (encourages a fixed colour theme) Make interaction simple and easy Aims to support user customisation
- 94. Tizen Designed for low resolution devices Focus on content and user needs Frugal with screen estate Tries to make applications consistent (encourages a fixed colour theme) Make interaction simple and easy Aims to support user customisation Flat and “fun” design
- 95. Know your toolkit Trying to pixel match a design across toolkits is a bad idea
- 96. Know your toolkit Trying to pixel match a design across toolkits is a bad idea Know what takes a performance hit on your toolkit
- 97. Know your toolkit Trying to pixel match a design across toolkits is a bad idea Know what takes a performance hit on your toolkit Check out the toolkit’s common patterns, those are usually best for performance and users
- 98. Easy takeaways It’s like API design, it should be simple, self-documenting, consistent and have a familiar feeling
- 99. Easy takeaways It’s like API design, it should be simple, self-documenting, consistent and have a familiar feeling Start with black and white, don’t colour unless you need it
- 100. Easy takeaways It’s like API design, it should be simple, self-documenting, consistent and have a familiar feeling Start with black and white, don’t colour unless you need it Saturate your greys and almost never use black
- 101. Easy takeaways It’s like API design, it should be simple, self-documenting, consistent and have a familiar feeling Start with black and white, don’t colour unless you need it Saturate your greys and almost never use black Add spacing and make your text bigger
- 102. Easy takeaways It’s like API design, it should be simple, self-documenting, consistent and have a familiar feeling Start with black and white, don’t colour unless you need it Saturate your greys and almost never use black Add spacing and make your text bigger Use common patterns (and take inspiration from the best)
- 103. Easy takeaways It’s like API design, it should be simple, self-documenting, consistent and have a familiar feeling Start with black and white, don’t colour unless you need it Saturate your greys and almost never use black Add spacing and make your text bigger Use common patterns (and take inspiration from the best) Pay the design some thought (from the start)
- 104. Easy takeaways It’s like API design, it should be simple, self-documenting, consistent and have a familiar feeling Start with black and white, don’t colour unless you need it Saturate your greys and almost never use black Add spacing and make your text bigger Use common patterns (and take inspiration from the best) Pay the design some thought (from the start) KISS
- 106. Page 11, flight-deck.jpg Page 15, twitter-sketch.jpg Page 23, purposefully-simple.png Page ??, skeuomorph.jpg Page ??, self-documenting.png Page ??, layout-baseline-align.png Page ??, layout-spacing-alternatives.png Page 58, direct-attention.png
- 107. Page ??, imagery-mood.png Page ??, bad-blurry.png Page ??, multiple-fonts.png Page 53, text-overlay-bad.jpg Page ??, two-colours.png Page ??, palette.png Page ??, colour-culture.jpg Page ??, colour-culture.jpg Page 73, repo-delete-confirmation.png Page ??, interrupt-programmer.jpg Page 78, material.png Page 83, ios6v7.jpg Page 88, tizen.png Page ??, info-hierarchy.png