SlideShare a Scribd company logo
1 of 61
Download to read offline
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

More Related Content

Viewers also liked

User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principlesDavid Little
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The WorldBuiltByHQ
 
10 Great Quotes Explaining Simplicity In User Interface Design!
10 Great Quotes Explaining Simplicity In User Interface Design!10 Great Quotes Explaining Simplicity In User Interface Design!
10 Great Quotes Explaining Simplicity In User Interface Design!UtterWeb
 
Brain storming is a jurney to identify project management risk
Brain storming is a jurney to identify project management riskBrain storming is a jurney to identify project management risk
Brain storming is a jurney to identify project management riskHelmy Faisal
 
COMPARATIVE STUDY OF EXPERIMENTAL AND ANALYTICAL RESULTS OF GEO POLYMER CON...
  COMPARATIVE STUDY OF EXPERIMENTAL AND ANALYTICAL RESULTS OF GEO POLYMER CON...  COMPARATIVE STUDY OF EXPERIMENTAL AND ANALYTICAL RESULTS OF GEO POLYMER CON...
COMPARATIVE STUDY OF EXPERIMENTAL AND ANALYTICAL RESULTS OF GEO POLYMER CON...IAEME Publication
 
IXDC BEIJING 2015
IXDC BEIJING 2015IXDC BEIJING 2015
IXDC BEIJING 2015Henk Haaima
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignSwitch
 
Journey Through Visual Design Natalie Hansen
Journey Through Visual Design Natalie HansenJourney Through Visual Design Natalie Hansen
Journey Through Visual Design Natalie HansenNatalie Sumsion
 
4 C’s + School Librarians = Common Core for St. Louis Suburban School Librarians
4 C’s + School Librarians = Common Core for St. Louis Suburban School Librarians4 C’s + School Librarians = Common Core for St. Louis Suburban School Librarians
4 C’s + School Librarians = Common Core for St. Louis Suburban School LibrariansLinda Dougherty
 
Graphic Design Basics (DMA103)
Graphic Design Basics (DMA103)Graphic Design Basics (DMA103)
Graphic Design Basics (DMA103)Julia Hutchinson
 
Sean Adams typography101
Sean Adams typography101Sean Adams typography101
Sean Adams typography101Sean Adams
 
The Principles of Great Design
The Principles of Great DesignThe Principles of Great Design
The Principles of Great DesignLee Carnihan
 
Denae Fiez 2444537 EDGE903 Assignment 4
Denae Fiez 2444537 EDGE903 Assignment 4Denae Fiez 2444537 EDGE903 Assignment 4
Denae Fiez 2444537 EDGE903 Assignment 4guest4f63c5
 
EIGHT GOLDEN RULES OF INTERFACE DESIGN
EIGHT GOLDEN RULES OF INTERFACE DESIGNEIGHT GOLDEN RULES OF INTERFACE DESIGN
EIGHT GOLDEN RULES OF INTERFACE DESIGNCeciLia AndRe
 
Unit 43 - Multimedia Design PowerPoint.
Unit 43 - Multimedia Design PowerPoint. Unit 43 - Multimedia Design PowerPoint.
Unit 43 - Multimedia Design PowerPoint. CPalmer16
 
Principles Of Design
Principles Of DesignPrinciples Of Design
Principles Of DesignPeter Wood
 

Viewers also liked (20)

User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The World
 
10 Great Quotes Explaining Simplicity In User Interface Design!
10 Great Quotes Explaining Simplicity In User Interface Design!10 Great Quotes Explaining Simplicity In User Interface Design!
10 Great Quotes Explaining Simplicity In User Interface Design!
 
Brain storming is a jurney to identify project management risk
Brain storming is a jurney to identify project management riskBrain storming is a jurney to identify project management risk
Brain storming is a jurney to identify project management risk
 
COMPARATIVE STUDY OF EXPERIMENTAL AND ANALYTICAL RESULTS OF GEO POLYMER CON...
  COMPARATIVE STUDY OF EXPERIMENTAL AND ANALYTICAL RESULTS OF GEO POLYMER CON...  COMPARATIVE STUDY OF EXPERIMENTAL AND ANALYTICAL RESULTS OF GEO POLYMER CON...
COMPARATIVE STUDY OF EXPERIMENTAL AND ANALYTICAL RESULTS OF GEO POLYMER CON...
 
IXDC BEIJING 2015
IXDC BEIJING 2015IXDC BEIJING 2015
IXDC BEIJING 2015
 
Digital Literacy 101
Digital Literacy 101Digital Literacy 101
Digital Literacy 101
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
A C Aravinth - Portfolio
A C Aravinth - PortfolioA C Aravinth - Portfolio
A C Aravinth - Portfolio
 
Journey Through Visual Design Natalie Hansen
Journey Through Visual Design Natalie HansenJourney Through Visual Design Natalie Hansen
Journey Through Visual Design Natalie Hansen
 
7 Deadly Sins in Design
7 Deadly Sins in Design7 Deadly Sins in Design
7 Deadly Sins in Design
 
4 C’s + School Librarians = Common Core for St. Louis Suburban School Librarians
4 C’s + School Librarians = Common Core for St. Louis Suburban School Librarians4 C’s + School Librarians = Common Core for St. Louis Suburban School Librarians
4 C’s + School Librarians = Common Core for St. Louis Suburban School Librarians
 
Graphic Design Basics (DMA103)
Graphic Design Basics (DMA103)Graphic Design Basics (DMA103)
Graphic Design Basics (DMA103)
 
Sean Adams typography101
Sean Adams typography101Sean Adams typography101
Sean Adams typography101
 
The Principles of Great Design
The Principles of Great DesignThe Principles of Great Design
The Principles of Great Design
 
Denae Fiez 2444537 EDGE903 Assignment 4
Denae Fiez 2444537 EDGE903 Assignment 4Denae Fiez 2444537 EDGE903 Assignment 4
Denae Fiez 2444537 EDGE903 Assignment 4
 
EIGHT GOLDEN RULES OF INTERFACE DESIGN
EIGHT GOLDEN RULES OF INTERFACE DESIGNEIGHT GOLDEN RULES OF INTERFACE DESIGN
EIGHT GOLDEN RULES OF INTERFACE DESIGN
 
Unit 43 - Multimedia Design PowerPoint.
Unit 43 - Multimedia Design PowerPoint. Unit 43 - Multimedia Design PowerPoint.
Unit 43 - Multimedia Design PowerPoint.
 
Principles Of Design
Principles Of DesignPrinciples Of Design
Principles Of Design
 
The Top 50 Design Quotes of all Time
The Top 50 Design Quotes of all TimeThe Top 50 Design Quotes of all Time
The Top 50 Design Quotes of all Time
 

Recently uploaded

Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Yantram Animation Studio Corporation
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Thomas Schielke
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...Pranav Subramanian
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersCre8iveskill
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioAlinaLau2
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesThomas Schielke
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 

Recently uploaded (20)

Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's Matters
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering Portfolio
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives cities
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 

Interface Design Basics Explained

  • 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 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
  • 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 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
  • 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 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
  • 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 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
  • 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 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
  • 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 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
  • 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 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
  • 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 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
  • 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 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
  • 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 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
  • 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. 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
  • 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
  • 37. ↗→↑↘→→ Supercombo-Time! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 38. Straight Lines Whitespace 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, different 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 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
  • 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 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
  • 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 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
  • 59. 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
  • 60. End send Comments, Criticism, Suggestions, Questions to samo@froodee.at oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 61. 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