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

• 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!

Zeile einsZeile zweiZeile dreiZeile vierZeile fünfZeile sechs

Nothing new... Oi!

Zeile einsZeile zweiZeile dreiZeile vierZeile fünfZeile sechs

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.

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

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

Showing Datapoints

Distribution Relation

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

and in addition to all that:

Sexay Buttons(how & why)

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 ☹

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!

send Comments, Criticism, Suggestions, Questionsto samo@froodee.at

Helpful Software

• Opacityhttp://likethought.com/opacity/

• DrawIthttp://bohemiancoding.com/drawit/

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

+ Pen & Paper & Brain

interface design basics (english)

Design

business english basics seminar

legal english basics - kul

basics of english

english speaking basics

english course basics 2

mee104l lesson01 intro 3dcad basics&interface

ft1248 dynamic parallel/serial interface basics

hqe2r english basics

english basics 9

interface design basics (english)

interface design basics (deutsch)

basics of-english-grammar

11+ basics english

zen basics ibpz english

wte treament basics english

ontap management interface basics : ontap 9

as-interface - introduction and basics

basics of english grammar

complete english basics 4

message-passing interface basics