Incremental Approach for Application GUI Migration using ...
Application GUI Design
-
Upload
samsung-open-source-group -
Category
Software
-
view
796 -
download
0
Transcript of Application GUI Design
![Page 1: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/1.jpg)
Application GUI DesignNotes From a Tizen Toolkit Developer
Tom HacohenSamsung Electronics Open Source Group
@TomHacohen
![Page 2: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/2.jpg)
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
![Page 3: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/3.jpg)
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
![Page 4: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/4.jpg)
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
![Page 5: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/5.jpg)
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
![Page 6: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/6.jpg)
Who is it for?
I CLI power users? Designers?
I Target environment
I Common demographics
I Application specific classifications
I Userbase 6= you
![Page 7: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/7.jpg)
Who is it for?
I CLI power users? Designers?
I Target environment
I Common demographics
I Application specific classifications
I Userbase 6= you
![Page 8: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/8.jpg)
Who is it for?
I CLI power users? Designers?
I Target environment
I Common demographics
I Application specific classifications
I Userbase 6= you
![Page 9: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/9.jpg)
Who is it for?
I CLI power users? Designers?
I Target environment
I Common demographics
I Application specific classifications
I Userbase 6= you
![Page 10: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/10.jpg)
Who is it for?
I CLI power users? Designers?
I Target environment
I Common demographics
I Application specific classifications
I Userbase 6= you
![Page 11: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/11.jpg)
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
![Page 12: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/12.jpg)
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
![Page 13: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/13.jpg)
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
![Page 14: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/14.jpg)
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
![Page 15: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/15.jpg)
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”
![Page 16: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/16.jpg)
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”
![Page 17: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/17.jpg)
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”
![Page 18: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/18.jpg)
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”
![Page 19: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/19.jpg)
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”
![Page 20: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/20.jpg)
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
![Page 21: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/21.jpg)
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
![Page 22: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/22.jpg)
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
![Page 23: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/23.jpg)
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
![Page 24: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/24.jpg)
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
![Page 25: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/25.jpg)
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
![Page 26: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/26.jpg)
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
![Page 27: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/27.jpg)
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
![Page 28: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/28.jpg)
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
![Page 29: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/29.jpg)
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
![Page 30: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/30.jpg)
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
![Page 31: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/31.jpg)
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
![Page 32: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/32.jpg)
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
![Page 33: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/33.jpg)
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
![Page 34: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/34.jpg)
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
![Page 35: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/35.jpg)
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
![Page 36: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/36.jpg)
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
![Page 37: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/37.jpg)
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
![Page 38: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/38.jpg)
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
![Page 39: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/39.jpg)
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
![Page 40: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/40.jpg)
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
![Page 41: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/41.jpg)
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
![Page 42: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/42.jpg)
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
![Page 43: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/43.jpg)
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
![Page 44: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/44.jpg)
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
![Page 45: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/45.jpg)
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
![Page 46: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/46.jpg)
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
![Page 47: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/47.jpg)
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
![Page 48: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/48.jpg)
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
![Page 49: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/49.jpg)
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
![Page 50: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/50.jpg)
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)
![Page 51: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/51.jpg)
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)
![Page 52: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/52.jpg)
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)
![Page 53: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/53.jpg)
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
![Page 54: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/54.jpg)
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
![Page 55: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/55.jpg)
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
![Page 56: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/56.jpg)
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
![Page 57: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/57.jpg)
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
![Page 58: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/58.jpg)
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
![Page 59: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/59.jpg)
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
![Page 60: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/60.jpg)
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
![Page 61: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/61.jpg)
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
![Page 62: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/62.jpg)
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
![Page 63: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/63.jpg)
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
![Page 64: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/64.jpg)
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. . .
![Page 65: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/65.jpg)
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. . .
![Page 66: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/66.jpg)
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. . .
![Page 67: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/67.jpg)
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. . .
![Page 68: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/68.jpg)
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. . .
![Page 69: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/69.jpg)
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)
![Page 70: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/70.jpg)
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)
![Page 71: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/71.jpg)
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)
![Page 72: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/72.jpg)
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)
![Page 73: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/73.jpg)
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
![Page 74: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/74.jpg)
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
![Page 75: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/75.jpg)
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
![Page 76: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/76.jpg)
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
![Page 77: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/77.jpg)
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
![Page 78: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/78.jpg)
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
![Page 79: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/79.jpg)
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
![Page 80: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/80.jpg)
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
![Page 81: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/81.jpg)
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
![Page 82: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/82.jpg)
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
![Page 83: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/83.jpg)
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
![Page 84: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/84.jpg)
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
![Page 85: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/85.jpg)
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
![Page 86: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/86.jpg)
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
![Page 87: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/87.jpg)
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
![Page 88: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/88.jpg)
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
![Page 89: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/89.jpg)
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
![Page 90: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/90.jpg)
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
![Page 91: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/91.jpg)
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
![Page 92: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/92.jpg)
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
![Page 93: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/93.jpg)
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
![Page 94: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/94.jpg)
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
![Page 95: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/95.jpg)
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
![Page 96: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/96.jpg)
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
![Page 97: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/97.jpg)
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
![Page 98: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/98.jpg)
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
![Page 99: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/99.jpg)
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
![Page 100: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/100.jpg)
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
![Page 101: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/101.jpg)
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
![Page 102: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/102.jpg)
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
![Page 103: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/103.jpg)
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
![Page 104: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/104.jpg)
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
![Page 105: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/105.jpg)
Questions?
http://stosb.com
@TomHacohen
![Page 106: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/106.jpg)
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
![Page 107: Application GUI Design](https://reader031.fdocuments.us/reader031/viewer/2022022201/589bdb231a28aba5108b465b/html5/thumbnails/107.jpg)
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