Application GUI Design - Notes from a Toolkit Developer
1 like1,599 views
The document provides guidance on designing application GUIs, emphasizing simplicity (KISS principle), consistency with platform conventions, and usability best practices. Key recommendations include identifying essential features and target users, creating rough storyboard sketches, using spacing and layout to organize information clearly, mimicking successful apps, and ensuring intuitive, discoverable interactions that minimize mistakes and interruptions for users. Material Design and iOS guidelines are discussed as examples, noting pros and cons of each approach.
Application GUI Design - Notes from a Toolkit Developer
- 1. Application GUI Design – Notes From a Toolkit Developer Tom Hacohen Samsung Electronics Open Source Group tom.hacohen@samsung.com @TomHacohen FOSDEM 2015
- 2. Designing an Application | Identify the Application What does it do? Essential features
- 3. Designing an Application | Identify the Application What does it do? Essential features Nice to have features
- 4. Designing an Application | Identify the Application What does it do? Essential features Nice to have features Niche features (<1% of the users)
- 5. Designing an Application | Identify the Application What does it do? Essential features Nice to have features Niche features (<1% of the users) Remove all the non-essential features
- 6. Designing an Application | Identify the Application Who is it for? CLI power users? Designers?
- 7. Designing an Application | Identify the Application Who is it for? CLI power users? Designers? Target environment
- 8. Designing an Application | Identify the Application Who is it for? CLI power users? Designers? Target environment Common demographics
- 9. Designing an Application | Identify the Application Who is it for? CLI power users? Designers? Target environment Common demographics Application specific classifications
- 10. Designing an Application | Identify the Application Who is it for? CLI power users? Designers? Target environment Common demographics Application specific classifications Userbase = you
- 11. Designing an Application | Identify the Application KISS Adapt feature list according to your audience
- 12. Designing an Application | Identify the Application KISS Adapt feature list according to your audience Keep focus on the more important features
- 13. Designing an Application | Identify the Application KISS Adapt feature list according to your audience Keep focus on the more important features Avoid creating complex UIs
- 14. Designing an Application | Identify the Application 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 if there’s no choice, split to categories
- 15. Designing an Application | Beginning of the UI Have a rough sketch Make a general storyboard sketch
- 16. Designing an Application | Beginning of the UI Have a rough sketch Make a general storyboard sketch Have all the major interactions and features there
- 17. Designing an Application | Beginning of the UI 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. Designing an Application | Beginning of the UI 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. Designing an Application | Beginning of the UI 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. Designing an Application | Beginning of the UI Stick to the basics Don’t bother with colour – harder and will be added later
- 21. Designing an Application | Beginning of the UI 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. Designing an Application | Beginning of the UI 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. Designing an Application | Beginning of the UI I meant it! KISS. . . Be purposefully simple
- 24. Designing an Application | Beginning of the UI I meant it! KISS. . . Be purposefully simple Skeuomorphs are almost always bad
- 25. Designing an Application | Beginning of the UI I meant it! KISS. . . Be purposefully simple Skeuomorphs are almost always bad Be consistent (easier when simple)
- 26. Designing an Application | Beginning of the UI 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. Designing an Application | Beginning of the UI 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. Designing an Application | Beginning of the UI 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. Designing an Application | Beginning of the UI 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. Designing an Application | Layout Spacing Choose a baseline unit size (e.g. 8px)
- 31. Designing an Application | Layout Spacing Choose a baseline unit size (e.g. 8px) Align everything to that baseline size
- 32. Designing an Application | Layout 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. Designing an Application | Layout 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. Designing an Application | Layout 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 Be generous, but don’t overdo it (don’t waste my screen estate)
- 35. Designing an Application | Layout Organization Content should be at the front of the stage
- 36. Designing an Application | Layout Organization Content should be at the front of the stage Important functionality in key positions
- 37. Designing an Application | Layout Organization Content should be at the front of the stage Important functionality in key positions Make the hierarchy of information clear
- 38. Designing an Application | Layout Organization Content should be at the front of the stage Important functionality in key positions Make the hierarchy of information clear Associate related elements
- 39. Designing an Application | Layout 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
- 40. Designing an Application | Visuals Icons and images Use known icons on buttons
- 41. Designing an Application | Visuals Icons and images Use known icons on buttons Don’t use a known icon for something other than intended
- 42. Designing an Application | Visuals 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.)
- 43. Designing an Application | Visuals 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
- 44. Designing an Application | Visuals 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
- 45. Designing an Application | Visuals 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
- 46. Designing an Application | Visuals Typography Use a readable font size Text should be big and readable for everyone
- 47. Designing an Application | Visuals Typography Use a readable font size Space up your text
- 48. Designing an Application | Visuals 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
- 49. Designing an Application | Visuals 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)
- 50. Designing an Application | Visuals Overlaying text on images Just put it on (bad)
- 51. Designing an Application | Visuals Overlaying text on images Just put it on (bad) Black/colour/white-wash the whole image to make text readable
- 52. Designing an Application | Visuals 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
- 53. Designing an Application | Visuals 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
- 54. Designing an Application | Visuals 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
- 55. Designing an Application | Visuals Colour Option 1 (easier): keep the interface b&w and use colour to direct focus
- 56. Designing an Application | Visuals 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
- 57. Designing an Application | Visuals 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)
- 58. Designing an Application | Visuals 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
- 59. Designing an Application | Visuals 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 HSV rather RGB when choosing colours
- 60. Designing an Application | Visuals Mimic what works Compare to other applications you/users like better using what we’ve covered
- 61. Designing an Application | Visuals 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?)
- 62. Designing an Application | Visuals 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
- 63. Designing an Application | Visuals 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)
- 64. Designing an Application | Visuals 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. . .
- 65. Designing an Application | Usability User experience tips Consistent behaviour (with the platform and within the application)
- 66. Designing an Application | Usability User experience tips Consistent behaviour (with the platform and within the application) Start instantly and lazy load in the background
- 67. Designing an Application | Usability 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
- 68. Designing an Application | Usability 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)
- 69. Designing an Application | Usability More user experience tips Make it harder to make mistakes
- 70. Designing an Application | Usability More user experience tips Make it harder to make mistakes Avoid interruptions
- 71. Designing an Application | Usability More user experience tips Make it harder to make mistakes Avoid interruptions Sort long lists in a predictable, sensible order
- 72. Designing an Application | Usability More user experience tips Make it harder to make mistakes Avoid interruptions Sort long lists in a predictable, sensible order If your users do something and expect something to happen, it probably should happen
- 73. Current Design Landscape | Usability Open-source GUI toolkits Opted for a consistent theme-able system, not individually styled apps
- 74. Current Design Landscape | Usability Open-source GUI toolkits Opted for a consistent theme-able system, not individually styled apps Usually look very similar (for better or worse)
- 75. Current Design Landscape | Usability Open-source GUI toolkits Opted for a consistent theme-able system, not individually styled apps Usually look very similar (for better or worse) Mostly similar in their widget offering and can be styled to look similar
- 76. Current Design Landscape | Usability Material design (Google) Highly talked about cross device design guidelines
- 77. Current Design Landscape | Usability Material design (Google) Highly talked about cross device design guidelines A fairly good Android adoption rate
- 78. Current Design Landscape | Usability 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
- 79. Current Design Landscape | Usability 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
- 80. Current Design Landscape | Usability 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
- 81. Current Design Landscape | Usability iOS guidelines Old style: horrible skeuomorphism
- 82. Current Design Landscape | Usability iOS guidelines Old style: horrible skeuomorphism New style: very simple and clean, sometimes confusing
- 83. Current Design Landscape | Usability iOS guidelines Old style: horrible skeuomorphism New style: very simple and clean, sometimes confusing Flat and easy to theme
- 84. Current Design Landscape | Usability iOS guidelines Old style: horrible skeuomorphism New style: very simple and clean, sometimes confusing Flat and easy to theme Good general guidelines
- 85. Current Design Landscape | Usability iOS guidelines Old style: horrible skeuomorphism New style: very simple and clean, sometimes confusing Flat and easy to theme Good general guidelines Usually not very discoverable
- 86. Current Design Landscape | Usability EFL Proportional layout (hard to create non-scalable layouts)
- 87. Current Design Landscape | Usability EFL Proportional layout (hard to create non-scalable layouts) We make it harder to not use the system theme
- 88. Current Design Landscape | Usability EFL Proportional layout (hard to create non-scalable layouts) We make it harder to not use the system theme We are mostly flat, use 3d when helps usability (similar to Material)
- 89. Toolkit Specific | Usability Know your toolkit Trying to pixel match a design across toolkits is stupid
- 90. Toolkit Specific | Usability Know your toolkit Trying to pixel match a design across toolkits is stupid Know what takes a performance hit on your toolkit
- 91. Toolkit Specific | Usability Know your toolkit Trying to pixel match a design across toolkits is stupid Know what takes a performance hit on your toolkit Check out the toolkit’s common patterns, those are usually best for performance and users
- 92. Easy Tips (TL;DR) | Usability Easy takeaways It’s like API design, it should be simple, self-documenting, consistent and have a familiar feeling
- 93. Easy Tips (TL;DR) | Usability 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
- 94. Easy Tips (TL;DR) | Usability 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 don’t use black
- 95. Easy Tips (TL;DR) | Usability 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 don’t use black Add spacing and make your text bigger
- 96. Easy Tips (TL;DR) | Usability 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 don’t use black Add spacing and make your text bigger Use common patterns (and take inspiration from the best)
- 97. Easy Tips (TL;DR) | Usability 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 don’t 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)
- 98. Example of a Poor Design | Usability Less obvious example The hell that is going to the cinema in London. . .
- 100. Resources Attributions | Usability 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 55, direct-attention.png
- 101. Resources Attributions | Usability Page ??, imagery-mood.png Page ??, bad-blurry.png Page ??, multiple-fonts.png Page 50, text-overlay-bad.jpg Page ??, two-colours.png Page ??, palette.png Page 69, repo-delete-confirmation.png Page ??, interrupt-programmer.jpg Page 76, material.png