Interface Design Basics (english)

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 ☹ oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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

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

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

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

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

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

Straight Lines Graphic Design Rules Beautiful Ugly oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

Patterns & Repetitions Graphic Design Rules Nothing new... Oi! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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

Whitespace Graphic Design Rules Beautiful Ugly oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

Whitespace Graphic Design Rules Easy counting Counting is hard oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

Whitespace is relative Graphic Design Rules ButtonText ButtonText Beautiful Ugly oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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

Contrast Graphic Design Rules Easily recognisable Recognition is hard oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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

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 officia deserunt mollit non proident, sunt in culpa qui officia 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 officia deserunt mollit non proident, sunt in culpa qui officia deserunt mollit Easier reading Harder reading oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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 officia deserunt mollit cupidatat non proident, sunt in culpa qui officia 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 officia deserunt mollit fugiat nulla pariatur. Excepteur sint occaecat cupidatat Easier reading Harder reading oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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 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 Easier reading Harder reading oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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 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 Easier reading Harder reading oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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 officia deserunt mollit non proident, sunt in culpa qui officia 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 officia deserunt mollit non proident, sunt in culpa qui officia deserunt mollit Easier reading/pleasant Harder reading/unpleasant oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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 officia deserunt mollit cupidatat non proident, sunt in culpa qui officia 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 officia deserunt mollit cupidatat non proident, sunt in culpa qui officia Easier reading/pleasant Harder reading/unpleasant oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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

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

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

Showing Datapoints Information Design — Examples 80 60 40 20 0 Distribution Relation oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

Symbols Information Design — Examples Add Close oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

Symbols Information Design — Examples Yay! Fail! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

Uhm... So what’s that got to do with Interface Design?! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

↗→↑↘→→ Supercombo-Time! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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

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

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

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

Important Not that important “depth” via Gradients → klickable? oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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

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

Even Apple doesn’t always get it right a search-for-mistakes-picture, © Apple oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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

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

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

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

End send Comments, Criticism, Suggestions, Questions to samo@froodee.at oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009

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

http://webdesign.2803.com	3644
http://mir.aculo.us	1852
http://www.alexandronic.com	907
http://graphism.fr	545
http://blog.dreamcss.com	409
http://churchcrunch.com	320
http://www.webdesign2803.fr	272
http://perficientblogs	133
http://betashop.com	130
http://www.slideshare.net	118
http://www.gp2b.com	85
http://www.jolis-graphismes.fr	74
http://paoloquadrani.blogspot.com	49
http://full-of-inspiration.tumblr.com	40
http://paoloquadrani.blogspot.it	37
http://www.netvibes.com	36
http://blog.bbp-online.com	26
http://192.168.60.109:8080	25
http://feeds.feedburner.com	24
http://drawohara.com	23
http://churchm.ag	23
http://myaiclass.com	18
http://ligaamalia.wordpress.com	17
http://jkelleher.blogspot.com	15
http://webdude.kunsmann.eu	15
http://blog.amaclean.com	12
http://www.web-grafx.com	9
http://www.ellenclaus.be	9
http://www.evaristobabe.com	9
http://www.facebook.com	9
http://dinge.tumblr.com	9
http://www.myaiclass.com	7
http://zootool.com	7
http://www.pcanete.com.ar	7
http://gooey.tumblr.com	6
http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com	6
http://paoloquadrani.blogspot.in	6
http://hub.saffroninteractive.com	5
https://www.facebook.com	5
http://core.traackr.com	4
http://pinterest.com	4
http://www.techgig.com	4
http://209.85.229.132	4
http://inc.soup.io	4
http://ryanwoolsey.com	4
http://127.0.0.1	3
http://a0.twimg.com	3
http://translate.googleusercontent.com	3
http://www.stephaniemaillet.fr	3
http://jkelleher.blogspot.de	2
http://addirector.blogspot.com	2

Interface Design Basics (english)

by Samo Korošec on Oct 10, 2009

Accessibility

Categories

Upload Details

Usage Rights

96 Embeds 9,043

Statistics

Interface Design Basics (english) Presentation Transcript