Interface Design Basics (english)1. Interface Design Basics
by Samo KoroŔec, froodee.at
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
2. Interface Design is:
ā¢ Interaction Design
ā¢ Graphic Design
ā¢ Typography
ā¢ Information Design
ā¢ Behaviour analysis āŗ
ā¢ Lots of work ā¹
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
3. 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
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
4. 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 ā¢
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
5. 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?
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
6. 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!
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
7. 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ā!
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
8. 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.
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
9. Straight Lines
Graphic Design Rules
Beautiful Ugly
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
10. Straight Lines
Graphic Design Rules
Beautiful Ugly
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
11. Straight Lines
Graphic Design Rules
Beautiful Ugly
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
12. Patterns & Repetitions
Graphic Design Rules
Nothing new... Oi!
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
13. Patterns & Repetitions
Graphic Design Rules
Nothing new... Oi!
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
14. Patterns & Repetitions
Graphic Design Rules
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!
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
15. Patterns & Repetitions
Graphic Design Rules
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!
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
16. Whitespace
Graphic Design Rules
Beautiful Ugly
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
17. Whitespace
Graphic Design Rules
Beautiful Ugly
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
18. Whitespace
Graphic Design Rules
Easy counting Counting is hard
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
19. Whitespace is relative
Graphic Design Rules
ButtonText ButtonText
Beautiful Ugly
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
20. Contrast
Graphic Design Rules
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
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
21. Contrast
Graphic Design Rules
Easily recognisable Recognition is hard
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
22. Contrast
Graphic Design Rules
Easily recognisable Recognition is hard
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
23. 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
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
24. 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.
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
Easier reading Harder reading
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
25. Patterns & Repetitions
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
fugiat nulla pariatur. Excepteur sint occaecat cupidatat eu fugiat nulla pariatur. Excepteur sint occaecat
non proident, sunt in culpa qui oļ¬cia deserunt mollit cupidatat non proident, sunt in culpa qui oļ¬cia
anim id est laborum. deserunt mollit anim id est laborum.
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 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 oļ¬cia deserunt mollit fugiat nulla pariatur. Excepteur sint occaecat cupidatat
Easier reading Harder reading
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
26. Whitespace
Typography ā Examples
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 oļ¬cia deserunt
fugiat nulla pariatur. Excepteur sint occaecat cupidatat mollit anim id est laborum.
non proident, sunt in culpa qui oļ¬cia 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 oļ¬cia 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 oļ¬cia deserunt mollit do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
Easier reading Harder reading
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
27. Whitespace
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
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
reprehenderit in voluptate velit esse cillum dolore eu non proident, sunt in culpa qui oļ¬cia 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 oļ¬cia 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 oļ¬cia 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 oļ¬cia deserunt mollit ea commodo consequat. Duis aute irure dolor in
Easier reading Harder reading
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
28. Contrast
Typography ā Examples
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
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.
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
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
Easier reading/pleasant Harder reading/unpleasant
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
29. Contrast
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
non proident, sunt in culpa qui oļ¬cia deserunt mollit cupidatat non proident, sunt in culpa qui oļ¬cia
anim id est laborum. deserunt mollit anim id est laborum.
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
non proident, sunt in culpa qui oļ¬cia deserunt mollit cupidatat non proident, sunt in culpa qui oļ¬cia
Easier reading/pleasant Harder reading/unpleasant
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
30. Contrast
Typography ā Examples
ButtonText ButtonText
ButtonText ButtonText
ButtonText ButtonText
Easier reading/pleasant Harder reading/unpleasant
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
31. 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ā
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
32. Structuring Data
Information Design ā Examples
100
75
23Ā %
42Ā %
50
35Ā % 25
0
Distribution Relation
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
33. Showing Datapoints
Information Design ā Examples
80
60
40
20
0
Distribution Relation
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
34. Symbols
Information Design ā Examples
Add Close
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
35. Symbols
Information Design ā Examples
Yay! Fail!
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
36. Uhm...
So whatās that got to do
with Interface Design?!
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
39. Background Color makes
the distinction between
lines easier
By not separating the
lines with a 1 px dark line,
we gain Whitespace
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
40. Important: Today,
the currently selected Day
The current Month
is slightly darker
Faint separators
donāt break up the
Whitespace
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
41. The white border
increases contrast
for the drop shadow
Group-indicator the same
across all of OS X
User know it in similar context
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
42. Important
Not that
important
ādepthā via Gradients
ā klickable?
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
43. Icons help giving an
easier overview Additional Information
The Users remember lighter, diļ¬erent color
form, color, position, groups
Grouping with
Whitespace
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
44. 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
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
45. Even Apple doesnāt
always get it right
a search-for-mistakes-picture,
Ā© Apple
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
46. and in addition to all that:
Sexay Buttons
(how & why)
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
47. Button Cut
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
48. Button Cut
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
49. Button Cut
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
50. Button Cut
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
51. Button Cut
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
52. Button Cut
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
53. Button Cut
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
54. Button Cut
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
55. Button Cut
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
56. 1px oļ¬set helps balance the Whitespace
(doesnāt always work, but worth a try with āoļ¬ā buttons)
Text cut out Text overlaid
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
57. 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.
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
58. 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
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
59. 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!
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009
61. Helpful Software
ā¢ Opacity
http://likethought.com/opacity/
ā¢ DrawIt
http://bohemiancoding.com/drawit/
ā¢ OmniGraļ¬e
http://www.omnigroup.com/applications/omnigraļ¬e/
+ Pen & Paper & Brain
oct 8th 2009 cocoaheads wien presentation ā¢ Ā© Samo KoroÅ”ec 2009