application gui design - tizen · have a rough sketch i make a general storyboard sketch i have all...
TRANSCRIPT
Application GUI DesignNotes From a Tizen Toolkit Developer
Tom HacohenSamsung Electronics Open Source Group
@TomHacohen
What does it do?
I Essential features
I Nice to have features
I Niche features (<1% of the users)
I Remove all the non-essential features
What does it do?
I Essential features
I Nice to have features
I Niche features (<1% of the users)
I Remove all the non-essential features
What does it do?
I Essential features
I Nice to have features
I Niche features (<1% of the users)
I Remove all the non-essential features
What does it do?
I Essential features
I Nice to have features
I Niche features (<1% of the users)
I Remove all the non-essential features
Who is it for?
I CLI power users? Designers?
I Target environment
I Common demographics
I Application specific classifications
I Userbase 6= you
Who is it for?
I CLI power users? Designers?
I Target environment
I Common demographics
I Application specific classifications
I Userbase 6= you
Who is it for?
I CLI power users? Designers?
I Target environment
I Common demographics
I Application specific classifications
I Userbase 6= you
Who is it for?
I CLI power users? Designers?
I Target environment
I Common demographics
I Application specific classifications
I Userbase 6= you
Who is it for?
I CLI power users? Designers?
I Target environment
I Common demographics
I Application specific classifications
I Userbase 6= you
KISS
I Adapt feature list according to your audience
I Keep focus on the more important features
I Avoid creating complex UIs
I Keep option lists (combo box) short, simple andin a sensible order
KISS
I Adapt feature list according to your audience
I Keep focus on the more important features
I Avoid creating complex UIs
I Keep option lists (combo box) short, simple andin a sensible order
KISS
I Adapt feature list according to your audience
I Keep focus on the more important features
I Avoid creating complex UIs
I Keep option lists (combo box) short, simple andin a sensible order
KISS
I Adapt feature list according to your audience
I Keep focus on the more important features
I Avoid creating complex UIs
I Keep option lists (combo box) short, simple andin a sensible order
Have a rough sketch
I Make a general storyboard sketch
I Have all the major interactions and features there
I Can be really rough – it’s more about the purpose of the “pages”
Have a rough sketch
I Make a general storyboard sketch
I Have all the major interactions and features there
I Can be really rough – it’s more about the purpose of the “pages”
Have a rough sketch
I Make a general storyboard sketch
I Have all the major interactions and features there
I Can be really rough – it’s more about the purpose of the “pages”
Have a rough sketch
I Make a general storyboard sketch
I Have all the major interactions and features there
I Can be really rough – it’s more about the purpose of the “pages”
Have a rough sketch
I Make a general storyboard sketch
I Have all the major interactions and features there
I Can be really rough – it’s more about the purpose of the “pages”
Stick to the basics
I Don’t bother with colour – harder and will be added later
I Do not customise available widgets/patterns unless there really is no other way
I Develop it around the content – content is king
Stick to the basics
I Don’t bother with colour – harder and will be added later
I Do not customise available widgets/patterns unless there really is no other way
I Develop it around the content – content is king
Stick to the basics
I Don’t bother with colour – harder and will be added later
I Do not customise available widgets/patterns unless there really is no other way
I Develop it around the content – content is king
I meant it! KISS. . .
I Be purposefully simple
I Skeuomorphs are almost always bad
I Be consistent (easier when simple)
I Make it simple for your users – don’t create newusage patterns, and adhere to common ones
I Common (all?) usage patterns should be easilyavailable
I Rest should be revealed as needed
I Make self-documenting applications
I meant it! KISS. . .
I Be purposefully simple
I Skeuomorphs are almost always bad
I Be consistent (easier when simple)
I Make it simple for your users – don’t create newusage patterns, and adhere to common ones
I Common (all?) usage patterns should be easilyavailable
I Rest should be revealed as needed
I Make self-documenting applications
I meant it! KISS. . .
I Be purposefully simple
I Skeuomorphs are almost always bad
I Be consistent (easier when simple)
I Make it simple for your users – don’t create newusage patterns, and adhere to common ones
I Common (all?) usage patterns should be easilyavailable
I Rest should be revealed as needed
I Make self-documenting applications
I meant it! KISS. . .
I Be purposefully simple
I Skeuomorphs are almost always bad
I Be consistent (easier when simple)
I Make it simple for your users – don’t create newusage patterns, and adhere to common ones
I Common (all?) usage patterns should be easilyavailable
I Rest should be revealed as needed
I Make self-documenting applications
I meant it! KISS. . .
I Be purposefully simple
I Skeuomorphs are almost always bad
I Be consistent (easier when simple)
I Make it simple for your users – don’t create newusage patterns, and adhere to common ones
I Common (all?) usage patterns should be easilyavailable
I Rest should be revealed as needed
I Make self-documenting applications
I meant it! KISS. . .
I Be purposefully simple
I Skeuomorphs are almost always bad
I Be consistent (easier when simple)
I Make it simple for your users – don’t create newusage patterns, and adhere to common ones
I Common (all?) usage patterns should be easilyavailableI Rest should be revealed as needed
I Make self-documenting applications
I meant it! KISS. . .
I Be purposefully simple
I Skeuomorphs are almost always bad
I Be consistent (easier when simple)
I Make it simple for your users – don’t create newusage patterns, and adhere to common ones
I Common (all?) usage patterns should be easilyavailableI Rest should be revealed as needed
I Make self-documenting applications
Spacing
I Choose a baseline unit size (e.g. 8px)
I Align everything to that baseline size
I Use a small set of spacing alternatives (e.g. 2, 3and 6 units)
I Make sure touch-targets are spaced enough
I Counter example
I Be generous, but don’t overdo it (don’t waste myscreen estate)
I Counter example
I Give back space when possible
Spacing
I Choose a baseline unit size (e.g. 8px)
I Align everything to that baseline size
I Use a small set of spacing alternatives (e.g. 2, 3and 6 units)
I Make sure touch-targets are spaced enough
I Counter example
I Be generous, but don’t overdo it (don’t waste myscreen estate)
I Counter example
I Give back space when possible
Spacing
I Choose a baseline unit size (e.g. 8px)
I Align everything to that baseline size
I Use a small set of spacing alternatives (e.g. 2, 3and 6 units)
I Make sure touch-targets are spaced enough
I Counter example
I Be generous, but don’t overdo it (don’t waste myscreen estate)
I Counter example
I Give back space when possible
Spacing
I Choose a baseline unit size (e.g. 8px)
I Align everything to that baseline size
I Use a small set of spacing alternatives (e.g. 2, 3and 6 units)
I Make sure touch-targets are spaced enough
I Counter example
I Be generous, but don’t overdo it (don’t waste myscreen estate)
I Counter example
I Give back space when possible
Spacing
I Choose a baseline unit size (e.g. 8px)
I Align everything to that baseline size
I Use a small set of spacing alternatives (e.g. 2, 3and 6 units)
I Make sure touch-targets are spaced enoughI Counter example
I Be generous, but don’t overdo it (don’t waste myscreen estate)
I Counter example
I Give back space when possible
Spacing
I Choose a baseline unit size (e.g. 8px)
I Align everything to that baseline size
I Use a small set of spacing alternatives (e.g. 2, 3and 6 units)
I Make sure touch-targets are spaced enoughI Counter example
I Be generous, but don’t overdo it (don’t waste myscreen estate)
I Counter example
I Give back space when possible
Spacing
I Choose a baseline unit size (e.g. 8px)
I Align everything to that baseline size
I Use a small set of spacing alternatives (e.g. 2, 3and 6 units)
I Make sure touch-targets are spaced enoughI Counter example
I Be generous, but don’t overdo it (don’t waste myscreen estate)I Counter example
I Give back space when possible
Spacing
I Choose a baseline unit size (e.g. 8px)
I Align everything to that baseline size
I Use a small set of spacing alternatives (e.g. 2, 3and 6 units)
I Make sure touch-targets are spaced enoughI Counter example
I Be generous, but don’t overdo it (don’t waste myscreen estate)I Counter example
I Give back space when possible
Organization
I Content should be at the front of the stage
I Important functionality in key positions
I Make the hierarchy of information clear
I Associate related elements
I Help directing the user’s focus
Organization
I Content should be at the front of the stage
I Important functionality in key positions
I Make the hierarchy of information clear
I Associate related elements
I Help directing the user’s focus
Organization
I Content should be at the front of the stage
I Important functionality in key positions
I Make the hierarchy of information clear
I Associate related elements
I Help directing the user’s focus
Organization
I Content should be at the front of the stage
I Important functionality in key positions
I Make the hierarchy of information clear
I Associate related elements
I Help directing the user’s focus
Organization
I Content should be at the front of the stage
I Important functionality in key positions
I Make the hierarchy of information clear
I Associate related elements
I Help directing the user’s focus
Icons and images
I Use known icons on buttons
I Don’t use a known icon for something other thanintended
I Use rich graphics when appropriate (cover-art,mood graphics, etc.)
I Don’t overshadow content
I Don’t use ugly graphics
I Have consistent sizing
Icons and images
I Use known icons on buttons
I Don’t use a known icon for something other thanintended
I Use rich graphics when appropriate (cover-art,mood graphics, etc.)
I Don’t overshadow content
I Don’t use ugly graphics
I Have consistent sizing
Icons and images
I Use known icons on buttons
I Don’t use a known icon for something other thanintended
I Use rich graphics when appropriate (cover-art,mood graphics, etc.)
I Don’t overshadow content
I Don’t use ugly graphics
I Have consistent sizing
Icons and images
I Use known icons on buttons
I Don’t use a known icon for something other thanintended
I Use rich graphics when appropriate (cover-art,mood graphics, etc.)
I Don’t overshadow content
I Don’t use ugly graphics
I Have consistent sizing
Icons and images
I Use known icons on buttons
I Don’t use a known icon for something other thanintended
I Use rich graphics when appropriate (cover-art,mood graphics, etc.)
I Don’t overshadow content
I Don’t use ugly graphics
I Have consistent sizing
Icons and images
I Use known icons on buttons
I Don’t use a known icon for something other thanintended
I Use rich graphics when appropriate (cover-art,mood graphics, etc.)
I Don’t overshadow content
I Don’t use ugly graphics
I Have consistent sizing
Typography
I Use a readable font size
I Space up your text
I Use text attributes (e.g. bold and size) to maketext more or less prominent
I Use a small set of fonts (probably one)
Text should be big and readable for everyone
Typography
I Use a readable font size
I Space up your text
I Use text attributes (e.g. bold and size) to maketext more or less prominent
I Use a small set of fonts (probably one)
Typography
I Use a readable font size
I Space up your text
I Use text attributes (e.g. bold and size) to maketext more or less prominent
I Use a small set of fonts (probably one)
Typography
I Use a readable font size
I Space up your text
I Use text attributes (e.g. bold and size) to maketext more or less prominent
I Use a small set of fonts (probably one)
Overlaying text on images
I Just put it on (bad)
I Black/colour/white-wash the whole image tomake text readable
I Add translucent background to the text
I Add a translucent gradient (i.e. partialblack/white-wash) so your text area is handled
I Use a big font with a shadow and on outline
Overlaying text on images
I Just put it on (bad)
I Black/colour/white-wash the whole image tomake text readable
I Add translucent background to the text
I Add a translucent gradient (i.e. partialblack/white-wash) so your text area is handled
I Use a big font with a shadow and on outline
Overlaying text on images
I Just put it on (bad)
I Black/colour/white-wash the whole image tomake text readable
I Add translucent background to the text
I Add a translucent gradient (i.e. partialblack/white-wash) so your text area is handled
I Use a big font with a shadow and on outline
Overlaying text on images
I Just put it on (bad)
I Black/colour/white-wash the whole image tomake text readable
I Add translucent background to the text
I Add a translucent gradient (i.e. partialblack/white-wash) so your text area is handled
I Use a big font with a shadow and on outline
Overlaying text on images
I Just put it on (bad)
I Black/colour/white-wash the whole image tomake text readable
I Add translucent background to the text
I Add a translucent gradient (i.e. partialblack/white-wash) so your text area is handled
I Use a big font with a shadow and on outline
Colour
I Option 1 (easier): keep the interface b&w anduse colour to direct focus
I Option 2: Choose a palette of 2 different huesand use different shades
I I almost always tint my greys (and not use black)
I Find a good palette online
I Use HSL/HSV rather RGB when choosing colours
I Be aware of cultural differences
Colour
I Option 1 (easier): keep the interface b&w anduse colour to direct focus
I Option 2: Choose a palette of 2 different huesand use different shades
I I almost always tint my greys (and not use black)
I Find a good palette online
I Use HSL/HSV rather RGB when choosing colours
I Be aware of cultural differences
Colour
I Option 1 (easier): keep the interface b&w anduse colour to direct focus
I Option 2: Choose a palette of 2 different huesand use different shades
I I almost always tint my greys (and not use black)
I Find a good palette online
I Use HSL/HSV rather RGB when choosing colours
I Be aware of cultural differences
Colour
I Option 1 (easier): keep the interface b&w anduse colour to direct focus
I Option 2: Choose a palette of 2 different huesand use different shades
I I almost always tint my greys (and not use black)
I Find a good palette online
I Use HSL/HSV rather RGB when choosing colours
I Be aware of cultural differences
Colour
I Option 1 (easier): keep the interface b&w anduse colour to direct focus
I Option 2: Choose a palette of 2 different huesand use different shades
I I almost always tint my greys (and not use black)
I Find a good palette online
I Use HSL/HSV rather RGB when choosing colours
I Be aware of cultural differences
Colour
I Option 1 (easier): keep the interface b&w anduse colour to direct focus
I Option 2: Choose a palette of 2 different huesand use different shades
I I almost always tint my greys (and not use black)
I Find a good palette online
I Use HSL/HSV rather RGB when choosing colours
I Be aware of cultural differences
Mimic what works
I Compare to other applications you/users like better using what we’ve covered
I Mimic what’s good there (e.g. do you need more spacing?)
I It’s usually easier to mimic than to design from scratch
I Don’t mimic the bad things (i.e. use them as excuse)
I Don’t copy, learn. . .
Mimic what works
I Compare to other applications you/users like better using what we’ve covered
I Mimic what’s good there (e.g. do you need more spacing?)
I It’s usually easier to mimic than to design from scratch
I Don’t mimic the bad things (i.e. use them as excuse)
I Don’t copy, learn. . .
Mimic what works
I Compare to other applications you/users like better using what we’ve covered
I Mimic what’s good there (e.g. do you need more spacing?)
I It’s usually easier to mimic than to design from scratch
I Don’t mimic the bad things (i.e. use them as excuse)
I Don’t copy, learn. . .
Mimic what works
I Compare to other applications you/users like better using what we’ve covered
I Mimic what’s good there (e.g. do you need more spacing?)
I It’s usually easier to mimic than to design from scratch
I Don’t mimic the bad things (i.e. use them as excuse)
I Don’t copy, learn. . .
Mimic what works
I Compare to other applications you/users like better using what we’ve covered
I Mimic what’s good there (e.g. do you need more spacing?)
I It’s usually easier to mimic than to design from scratch
I Don’t mimic the bad things (i.e. use them as excuse)
I Don’t copy, learn. . .
User experience tips
I Consistent behaviour (with the platform and within the application)
I Start instantly and lazy load in the background
I Everything should take a small amount of clicks
I Discoverable UI (easy to figure out how to do things)
User experience tips
I Consistent behaviour (with the platform and within the application)
I Start instantly and lazy load in the background
I Everything should take a small amount of clicks
I Discoverable UI (easy to figure out how to do things)
User experience tips
I Consistent behaviour (with the platform and within the application)
I Start instantly and lazy load in the background
I Everything should take a small amount of clicks
I Discoverable UI (easy to figure out how to do things)
User experience tips
I Consistent behaviour (with the platform and within the application)
I Start instantly and lazy load in the background
I Everything should take a small amount of clicks
I Discoverable UI (easy to figure out how to do things)
More user experience tips
I Make it hard to make mistakes
I Counter example
I Avoid interruptions
I Sort long lists in a predictable, sensible order
I If your users do something and expect somethingto happen, it probably should happen
More user experience tips
I Make it hard to make mistakesI Counter example
I Avoid interruptions
I Sort long lists in a predictable, sensible order
I If your users do something and expect somethingto happen, it probably should happen
More user experience tips
I Make it hard to make mistakesI Counter example
I Avoid interruptions
I Sort long lists in a predictable, sensible order
I If your users do something and expect somethingto happen, it probably should happen
More user experience tips
I Make it hard to make mistakesI Counter example
I Avoid interruptions
I Sort long lists in a predictable, sensible order
I If your users do something and expect somethingto happen, it probably should happen
More user experience tips
I Make it hard to make mistakesI Counter example
I Avoid interruptions
I Sort long lists in a predictable, sensible order
I If your users do something and expect somethingto happen, it probably should happen
Material design (Google)
I Highly talked about cross device design guidelines
I A fairly good Android adoption rate
I I personally don’t like animations that slow usersdown
I Concepts are good, it’s implementations that arenot always good
I It doesn’t feel like they care about low-end andpower consumption
Material design (Google)
I Highly talked about cross device design guidelines
I A fairly good Android adoption rate
I I personally don’t like animations that slow usersdown
I Concepts are good, it’s implementations that arenot always good
I It doesn’t feel like they care about low-end andpower consumption
Material design (Google)
I Highly talked about cross device design guidelines
I A fairly good Android adoption rate
I I personally don’t like animations that slow usersdown
I Concepts are good, it’s implementations that arenot always good
I It doesn’t feel like they care about low-end andpower consumption
Material design (Google)
I Highly talked about cross device design guidelines
I A fairly good Android adoption rate
I I personally don’t like animations that slow usersdown
I Concepts are good, it’s implementations that arenot always good
I It doesn’t feel like they care about low-end andpower consumption
Material design (Google)
I Highly talked about cross device design guidelines
I A fairly good Android adoption rate
I I personally don’t like animations that slow usersdown
I Concepts are good, it’s implementations that arenot always good
I It doesn’t feel like they care about low-end andpower consumption
iOS (Apple)
I Old style: horrible skeuomorphism
I New style: very simple and clean, sometimesconfusing
I Flat and easy to theme
I Usually not very discoverable
I Good general guidelines
iOS (Apple)
I Old style: horrible skeuomorphism
I New style: very simple and clean, sometimesconfusing
I Flat and easy to theme
I Usually not very discoverable
I Good general guidelines
iOS (Apple)
I Old style: horrible skeuomorphism
I New style: very simple and clean, sometimesconfusing
I Flat and easy to theme
I Usually not very discoverable
I Good general guidelines
iOS (Apple)
I Old style: horrible skeuomorphism
I New style: very simple and clean, sometimesconfusing
I Flat and easy to theme
I Usually not very discoverable
I Good general guidelines
iOS (Apple)
I Old style: horrible skeuomorphism
I New style: very simple and clean, sometimesconfusing
I Flat and easy to theme
I Usually not very discoverable
I Good general guidelines
Tizen
I Designed for low resolution devices
I Focus on content and user needs
I Frugal with screen estate
I Tries to make applications consistent (encouragesa fixed colour theme)
I Make interaction simple and easy
I Aims to support user customisation
I Flat and “fun” design
Tizen
I Designed for low resolution devices
I Focus on content and user needs
I Frugal with screen estate
I Tries to make applications consistent (encouragesa fixed colour theme)
I Make interaction simple and easy
I Aims to support user customisation
I Flat and “fun” design
Tizen
I Designed for low resolution devices
I Focus on content and user needs
I Frugal with screen estate
I Tries to make applications consistent (encouragesa fixed colour theme)
I Make interaction simple and easy
I Aims to support user customisation
I Flat and “fun” design
Tizen
I Designed for low resolution devices
I Focus on content and user needs
I Frugal with screen estate
I Tries to make applications consistent (encouragesa fixed colour theme)
I Make interaction simple and easy
I Aims to support user customisation
I Flat and “fun” design
Tizen
I Designed for low resolution devices
I Focus on content and user needs
I Frugal with screen estate
I Tries to make applications consistent (encouragesa fixed colour theme)
I Make interaction simple and easy
I Aims to support user customisation
I Flat and “fun” design
Tizen
I Designed for low resolution devices
I Focus on content and user needs
I Frugal with screen estate
I Tries to make applications consistent (encouragesa fixed colour theme)
I Make interaction simple and easy
I Aims to support user customisation
I Flat and “fun” design
Tizen
I Designed for low resolution devices
I Focus on content and user needs
I Frugal with screen estate
I Tries to make applications consistent (encouragesa fixed colour theme)
I Make interaction simple and easy
I Aims to support user customisation
I Flat and “fun” design
Know your toolkit
I Trying to pixel match a design across toolkits is a bad idea
I Know what takes a performance hit on your toolkit
I Check out the toolkit’s common patterns, those are usually best for performance andusers
Know your toolkit
I Trying to pixel match a design across toolkits is a bad idea
I Know what takes a performance hit on your toolkit
I Check out the toolkit’s common patterns, those are usually best for performance andusers
Know your toolkit
I Trying to pixel match a design across toolkits is a bad idea
I Know what takes a performance hit on your toolkit
I Check out the toolkit’s common patterns, those are usually best for performance andusers
Easy takeaways
I It’s like API design, it should be simple, self-documenting, consistent and have afamiliar feeling
I Start with black and white, don’t colour unless you need it
I Saturate your greys and almost never use black
I Add spacing and make your text bigger
I Use common patterns (and take inspiration from the best)
I Pay the design some thought (from the start)
I KISS
Easy takeaways
I It’s like API design, it should be simple, self-documenting, consistent and have afamiliar feeling
I Start with black and white, don’t colour unless you need it
I Saturate your greys and almost never use black
I Add spacing and make your text bigger
I Use common patterns (and take inspiration from the best)
I Pay the design some thought (from the start)
I KISS
Easy takeaways
I It’s like API design, it should be simple, self-documenting, consistent and have afamiliar feeling
I Start with black and white, don’t colour unless you need it
I Saturate your greys and almost never use black
I Add spacing and make your text bigger
I Use common patterns (and take inspiration from the best)
I Pay the design some thought (from the start)
I KISS
Easy takeaways
I It’s like API design, it should be simple, self-documenting, consistent and have afamiliar feeling
I Start with black and white, don’t colour unless you need it
I Saturate your greys and almost never use black
I Add spacing and make your text bigger
I Use common patterns (and take inspiration from the best)
I Pay the design some thought (from the start)
I KISS
Easy takeaways
I It’s like API design, it should be simple, self-documenting, consistent and have afamiliar feeling
I Start with black and white, don’t colour unless you need it
I Saturate your greys and almost never use black
I Add spacing and make your text bigger
I Use common patterns (and take inspiration from the best)
I Pay the design some thought (from the start)
I KISS
Easy takeaways
I It’s like API design, it should be simple, self-documenting, consistent and have afamiliar feeling
I Start with black and white, don’t colour unless you need it
I Saturate your greys and almost never use black
I Add spacing and make your text bigger
I Use common patterns (and take inspiration from the best)
I Pay the design some thought (from the start)
I KISS
Easy takeaways
I It’s like API design, it should be simple, self-documenting, consistent and have afamiliar feeling
I Start with black and white, don’t colour unless you need it
I Saturate your greys and almost never use black
I Add spacing and make your text bigger
I Use common patterns (and take inspiration from the best)
I Pay the design some thought (from the start)
I KISS
Questions?
http://stosb.com
@TomHacohen
I Page 11, flight-deck.jpg
I Page 15, twitter-sketch.jpg
I Page 23, purposefully-simple.png
I Page ??, skeuomorph.jpg
I Page ??, self-documenting.png
I Page ??, layout-baseline-align.png
I Page ??, layout-spacing-alternatives.png
I Page 58, direct-attention.png
I Page ??, imagery-mood.png
I Page ??, bad-blurry.png
I Page ??, multiple-fonts.png
I Page 53, text-overlay-bad.jpg
I Page ??, two-colours.png
I Page ??, palette.png
I Page ??, colour-culture.jpg
I Page ??, colour-culture.jpg
I Page 73, repo-delete-confirmation.png
I Page ??, interrupt-programmer.jpg
I Page 78, material.png
I Page 83, ios6v7.jpg
I Page 88, tizen.png
I Page ??, info-hierarchy.png