Interface Design Basics Explained

Interface Design Basics

by Samo Korošec, froodee.at

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

Interface Design is:
• Interaction Design
• Graphic Design
• Typography
• Information Design
• Behaviour analysis ☺
• Lots of work ☹


Interaction Design
• 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 along
We’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
cool Words

• Mental Models, User Stories, Interface
Methapors
What does the user expect? Which real-life process is reﬂected with the
App? Which Metaphors can be applied?

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


Interaction Design
thinking along is good

• The Idea
What 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 inﬂuence the product?

• Improvements
Is there anything I can drop, hide, combine? Are there ways to make the
App’s workﬂow faster?


Interaction Design
a “Focus Group” is not always neccessary

• 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 ﬁeld (→ Metaphors)? Are they desperate?

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


Graphic Design
• 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”!


The Brain:
Graphic Design Rules

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

→with those, it can think less!

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


Straight Lines

Beautiful Ugly


Patterns & Repetitions

Nothing new... Oi!



Zeile eins Zeile eins
Zeile zwei Zeile zwei
Zeile drei Zeile drei
Zeile vier Zeile vier
Zeile fünf Zeile fünf
Zeile sechs Zeile sechs

Nothing new... Oi!


Whitespace

Beautiful Ugly


Whitespace

Easy counting Counting is hard


Whitespace is relative

ButtonText ButtonText

Beautiful Ugly


Contrast

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

Easily recognisable Recognition is hard


Contrast

Easily recognisable Recognition is hard


Typography
• Very important, yet often
underestimated
• Actually “just” the practical
application of the previous rules

• Apple gets it, Microsoft doesn’t
Simply 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

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

Easier reading Harder reading



reprehenderit in voluptate velit esse cillum dolore eu reprehenderit in voluptate velit esse cillum dolore
fugiat nulla pariatur. Excepteur sint occaecat cupidatat eu fugiat nulla pariatur. Excepteur sint occaecat
non proident, sunt in culpa qui officia deserunt mollit cupidatat non proident, sunt in culpa qui officia
anim id est laborum. deserunt mollit anim id est laborum.
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea
nostrud exercitation ullamco laboris nisi ut aliquip
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu 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 fugiat nulla pariatur. Excepteur sint occaecat cupidatat



Whitespace

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



Whitespace

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



Contrast

Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing elit,
elit, sed do eiusmod tempor incididunt ut labore et sed do eiusmod tempor incididunt ut labore et dolore
dolore magna aliqua. Ut enim ad minim veniam, quis magna aliqua. Ut enim ad minim veniam, quis nostrud
nostrud exercitation ullamco laboris nisi ut aliquip ex exercitation ullamco laboris nisi ut aliquip ex ea
ea commodo consequat. Duis aute irure dolor in commodo consequat. Duis aute irure dolor in
anim id est laborum. anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing elit,
elit, sed do eiusmod tempor incididunt ut labore et sed do eiusmod tempor incididunt ut labore et dolore
dolore magna aliqua. Ut enim ad minim veniam, quis magna aliqua. Ut enim ad minim veniam, quis nostrud
nostrud exercitation ullamco laboris nisi ut aliquip ex exercitation ullamco laboris nisi ut aliquip ex ea
ea commodo consequat. Duis aute irure dolor in commodo consequat. Duis aute irure dolor in

Easier reading/pleasant Harder reading/unpleasant


Contrast

fugiat nulla pariatur. Excepteur sint occaecat cupidatat fugiat nulla pariatur. Excepteur sint occaecat
anim id est laborum. deserunt mollit anim id est laborum.
fugiat nulla pariatur. Excepteur sint occaecat cupidatat fugiat nulla pariatur. Excepteur sint occaecat



Contrast






Information Design
• Adds Structure to Data
• Points out important Datapoints
• Often works with known Symbols
e.g. Traﬃc 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

100

75
23 %

42 %
50

35 % 25

0

Distribution Relation


Showing Datapoints

80

60

40

20

0

Distribution Relation


Symbols

Add Close


Symbols

Yay! Fail!


Uhm...

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


↗→↑↘→→

Supercombo-Time!


Straight Lines

Whitespace


Background Color makes
the distinction between
lines easier

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


Important: Today,
the currently selected Day

The current Month
is slightly darker

Faint separators
don’t break up the
Whitespace


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

Not that
important

“depth” via Gradients
→ klickable?


Icons help giving an
easier overview Additional Information
The Users remember lighter, diﬀerent color
form, color, position, groups

Grouping with
Whitespace


Date
Sender the coloring helps with a column-like
important, big, bold appearance, and helps distinguish
between date, sender, subject
Subject
less important,
still readable

Indicators E-Mail Text
not obvious at ﬁrst, make sense not really important, only a
after checking 2-3 Mails secondtary help in deciding whether
to read the E-Mail or not


and in addition to all that:

Sexay Buttons
(how & why)


Button Cut


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

Text cut out Text overlaid


Behaviour analysis ☺
• 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

• Teach
Don’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.


Lots of work ☹
• Research
• [Idea, Sketch, Code, Test] * 100
• Eventually a bigger reengineering
eﬀort if you cut on research time
• Everything is going to be redone in
Version 2.0 anyway


But!

Design pays oﬀ! $-)
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, Questions
to samo@froodee.at


Helpful Software
• Opacity
http://likethought.com/opacity/

• DrawIt
http://bohemiancoding.com/drawit/

• OmniGraﬄe
http://www.omnigroup.com/applications/omnigraﬄe/

+ Pen & Paper & Brain


Interface Design Basics Explained

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Recently uploaded

Recently uploaded (20)

Interface Design Basics Explained