Interface Design Basics (english)

Interface Design Basics

oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

by Samo Korošec, froodee.at

Interface Design is:


• Interaction Design• Graphic Design• Typography• Information Design

• Behaviour analysis ☺• Lots of work ☹


• Lots of cool words used by lots of cool consultants to make lots of cool money. Cool!Mental Models, User Stories, Interface Metaphors, Prototyping, Usability Testing, etc.

• Not that hard, if you think alongWe’re all smart here — after all, it’s not a MSDN Meeting ;o)

• Works just as well without huge “Focus Groups”You can’t please everyone & Too many cooks spoil the broth

Interaction Design

Interaction Design


• Mental Models, User Stories, Interface MethaporsWhat does the user expect? Which real-life process is reflected with the App? Which Metaphors can be applied?

• Prototyping, Usability Testing, User Focus GroupsNot all users are/react the same. Discussion is good, but shouldn’t dislodge the Vision. Eat your own dog food ™

cool Words

Interaction Design


• The IdeaWhat is the App’s main goal? Never lose it out of sight!

• What can I work with?Do the users have any prior, applicable knowledge? Are there any restrictions that will influence the product?

• ImprovementsIs there anything I can drop, hide, combine? Are there ways to make the App’s workflow faster?

thinking along is good

Interaction Design


• Am I my own/a potential customer?Use your own App, and use it a lot. That way, you can recognise “bumps” and mistakes and the User Testing can happen later in the development cycle.

• Do I know the Target Audience?Is it a niche? Do they want an app? Can I draw on pre-existing knowledge from their field (→ Metaphors)? Are they desperate?

• Power Users ™ Sometimes their input is good, but they’re the minority. It’s dangerous to optimize for them!

a “Focus Group” is not always neccessary


• Interface → Graphics & Layout• Buttons & Icons → Illustrations• Rules

You don’t have to be a graphic designer to know, understand and follow the basic rules of visual design. Most of the time, Graphic Design is not a “matter of taste”!

Graphic Design

The Brain:


• Likes Straight Lines• Recognises Patterns & Repetitions• Loves even Distribution & even

Whitespace

Graphic Design Rules

→with those, it can think less!

...we’re evil and take advantage of that fact.

Straight Lines



Beautiful Ugly

Straight Lines



Beautiful Ugly

Straight Lines



Beautiful Ugly

Patterns & Repetitions



Nothing new... Oi!




Nothing new... Oi!




Zeile einsZeile zweiZeile dreiZeile vierZeile fünfZeile sechs


Nothing new... Oi!






Nothing new... Oi!

Whitespace



Beautiful Ugly

Whitespace



Beautiful Ugly

Whitespace



Easy counting Counting is hard

Whitespace is relative



ButtonText ButtonText

Beautiful Ugly

Contrast



Easily recognisable Recognition is hard

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Contrast




Contrast




Typography


• Very important, yet often underestimated

• Actually “just” the practical application of the previous rules

• Apple gets it, Microsoft doesn’tSimply because Microsoft approaches Typography like an Engineer concerned with the “how” would, whereas Apple approaches it like an Artist concerned with a “why” would

Straight Lines


Typography — Examples

Easier reading Harder reading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et

dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex

ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu

fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit

anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et

dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex

ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu

fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit





Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et

dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat


Whitespace




Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation


Whitespace




Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in


Contrast





Easier reading/pleasant Harder reading/unpleasant

Contrast




Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia


Contrast



ButtonTextButtonText

ButtonTextButtonText

ButtonTextButtonTextButtonText


Information Design


• Adds Structure to Data• Points out important Datapoints• Often works with known Symbols

e.g. Traffic Symbols or Symbols of Systems related to the App

• Is breaking the “beauty”-Rules→ but does so only when it’s “right”

Structuring Data


Information Design — Examples

Distribution Relation

23 %

35 %

42 %

0

25

50

75

100

Showing Datapoints



Distribution Relation

0

20

40

60

80

Symbols



Add Close

Symbols



Yay! Fail!

Uhm...


So what’s that got to do with Interface Design?!

↗→↑↘→→


Supercombo-Time!


Whitespace

Straight Lines


By not separating the lines with a 1 px dark line,

we gain Whitespace

Background Color makes the distinction between

lines easier


Faint separators don’t break up the

Whitespace

Important: Today, the currently selected Day

The current Month is slightly darker


The white border increases contrast

for the drop shadow

Group-indicator the same across all of OS X

User know it in similar context


Important

“depth” via Gradients → klickable?

Not that important


Additional Information lighter, different color

Icons help giving an easier overview

The Users remember form, color, position, groups

Grouping with Whitespace


Datethe coloring helps with a column-like appearance, and helps distinguish between date, sender, subject

Senderimportant, big, bold

Subjectless important,

still readable

Indicatorsnot obvious at first, make sense

after checking 2-3 Mails

E-Mail Textnot really important, only a secondtary help in deciding whether to read the E-Mail or not


Even Apple doesn’t always get it right

a search-for-mistakes-picture, © Apple

and in addition to all that:


Sexay Buttons(how & why)


Button Cut


Button Cut


Button Cut


Button Cut


Button Cut


Button Cut


Button Cut


Button Cut


Button Cut


Text cut out Text overlaid

1px offset helps balance the Whitespace(doesn’t always work, but worth a try with “off” buttons)


• Ingridients: 2-5 Chim Users• Hand them your App• Observe behaviour

Once 2 or more people have the same how-to-continue?-problem, you should reconsider your design

• TeachDon’t be afraid to demand of your Users to learn how to use your Application. Especially if a new approach (compared to your competition) can save them time.

Behaviour analysis ☺


• Research• [Idea, Sketch, Code, Test] * 100• Eventually a bigger reengineering

effort if you cut on research time• Everything is going to be redone in

Version 2.0 anyway

Lots of work ☹

But!


Design pays off! $-)Everyone knows that Design is “important” and that

well designed and beautiful Apps sell better.But (almost) noone is doing it.

Bad competition = win!


End

send Comments, Criticism, Suggestions, Questionsto [email protected]

Helpful Software


• Opacityhttp://likethought.com/opacity/

• DrawIthttp://bohemiancoding.com/drawit/

• OmniGrafflehttp://www.omnigroup.com/applications/omnigraffle/

+ Pen & Paper & Brain