Application GUI DesignNotes From a Tizen Toolkit Developer

Tom HacohenSamsung Electronics Open Source Group

tom@osg.samsung.com

@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?

Tom Hacohentom@osg.samsung.com

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