• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Interface Design Basics (english)
 

Interface Design Basics (english)

on

  • 47,406 views

The Interface Design Basics presentation held at the Viennese Cocoaheads meeting October 8th, 2009 ...

The Interface Design Basics presentation held at the Viennese Cocoaheads meeting October 8th, 2009

If you need an Interface Design consultant, head over to http://apoch.io and drop me a line :)

Statistics

Views

Total Views
47,406
Views on SlideShare
37,909
Embed Views
9,497

Actions

Likes
262
Downloads
2,915
Comments
20

102 Embeds 9,497

http://webdesign.2803.com 3644
http://mir.aculo.us 1883
http://www.alexandronic.com 907
http://blog.dreamcss.com 577
http://graphism.fr 560
http://churchcrunch.com 320
http://www.webdesign2803.fr 295
http://betashop.com 195
http://perficientblogs 147
http://www.slideshare.net 118
http://www.gp2b.com 85
http://www.jolis-graphismes.fr 74
http://paoloquadrani.blogspot.it 56
http://paoloquadrani.blogspot.com 54
http://studysmart.martincollege.edu.au 52
http://full-of-inspiration.tumblr.com 40
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 24
http://churchm.ag 23
http://myaiclass.com 18
http://hub.saffroninteractive.com 18
http://ligaamalia.wordpress.com 17
http://webdude.kunsmann.eu 15
http://jkelleher.blogspot.com 15
http://studysmart.martin.edu.au 13
http://blog.amaclean.com 12
http://pinterest.com 12
http://jolies-creations.fr 10
http://www.ellenclaus.be 9
http://www.web-grafx.com 9
http://dinge.tumblr.com 9
http://www.evaristobabe.com 9
http://www.facebook.com 9
http://gooey.tumblr.com 8
http://paoloquadrani.blogspot.in 8
http://www.pcanete.com.ar 7
http://www.myaiclass.com 7
http://verboselogging.com 7
http://zootool.com 7
http://www.techgig.com 6
http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 6
https://www.facebook.com 5
http://209.85.229.132 4
http://inc.soup.io 4
http://ryanwoolsey.com 4
http://core.traackr.com 4
http://www.stephaniemaillet.fr 3
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 20 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…

110 of 20 previous next

Post Comment
Edit your comment

    Interface Design Basics (english) Interface Design Basics (english) Presentation Transcript

    • 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 reflected 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 influence the product? • Improvements Is there anything I can drop, hide, combine? Are there ways to make the App’s workflow 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 field (→ 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
    • Straight Lines Graphic Design Rules Beautiful Ugly 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 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
    • 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 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 officia deserunt mollit anim id est qui officia 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
    • 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. Traffic 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, different 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 first, 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
    • and in addition to all that: Sexay Buttons (how & why) oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
    • Button Cut oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
    • Button Cut oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
    • Button Cut oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
    • Button Cut oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
    • Button Cut oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
    • Button Cut oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
    • Button Cut oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
    • Button Cut oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
    • Button Cut oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
    • 1px offset helps balance the Whitespace (doesn’t always work, but worth a try with “off” 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 effort 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 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! 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/ • OmniGraffle http://www.omnigroup.com/applications/omnigraffle/ + Pen & Paper & Brain oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009