SlideShare ist ein Scribd-Unternehmen logo
Interface Design Basics

    von und mit Samo Korošec, froodee.at




        oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Interface Design ist:
   •   Interaktionsdesign
   •   Grafikdesign
       • Typografie
       •    Informationsdesign
   •   Verhaltensforschung ☺
   •   Viel Arbeit ☹


       oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Interaktionsdesign
•   Viele coole Wörter, mit denen viele coole
    Consultants viel cooles Geld verdienen. Cool!
    Mental Models, User Stories, Interface Metaphors, Prototyping, Usability Testing, etc.


•   Nicht wirklich sooo schwer, wenn man mitdenkt
    Schließlich sind wir alle hier klug; ist ja kein MSDN Meeting ;)


•   Funktioniert auch/besser ohne große
    “Testgruppen”
    Man kann es nicht jedem recht machen & Zu viele Köche verderben den Brei




                                 oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Interaktionsdesign
                                    coole Wörter

•   Mental Models, User Stories, Interface
    Methapors
    Was erwartet der User? Welcher reale Vorgang entspricht der Applikation?
    Welche Metaphern kann ich verwendern?


•   Prototyping, Usability Testing, User
    Focus Groups
    Nicht alle User sind gleich. Diskussion ist gut, sollte aber nicht die Vision
    verdrängen. Eat your own dog food ™




                    oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Interaktionsdesign
                              mitdenken ist gut

•   Die Idee
    Was ist das Hauptziel der App? Nie aus den Augen verlieren!


•   Womit muß ich Arbeiten?
    Welches Vorwissen haben die User? Mit welchen Einschränkungen soll ich
    rechnen?


•   Verbesserungen
    Was kann ich weglassen, verstecken, kombinieren? Womit kann ich die
    Arbeit mit der App schneller machen?




                   oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Interaktionsdesign
            es muß nicht immer eine Gruppe sein

•   Bin ich (m)ein Kunde?
    Die App soll man selbst und viel verwenden, man findet so mehr Fehler.
    User Testing kann erst später im Prozess kommen.


•   Kenne ich die Zielgruppe?
    Ist es eine Nische? Wollen die überhaupt eine App? Haben die Vorgänge, die
    sie aus anderen Bereichen kennen (→ Metaphern!)? Sind sie verzweifelt?


•   Power User ™
    Manchmal gutes Input, sind aber die Minderheit — Gefahr, wenn man
    Features und Abläufe auf sie hin optimiert!




                   oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesign
•   Interface → Grafik & Layout
•   Buttons & Icons → Illustrationen
•   Regeln
    Man muß kein Grafiker sein um die Basis-Regeln zu kennen und zu befolgen.
    Und es ist meistens keine “Geschmackssache”.




                  oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Unser Gehirn:
                            Grafikdesignregeln

      •    Mag Gerade Linien
      •    Erkennt Muster & Wiederholungen
      •    Liebt Gleichmäßige Verteilung bzw.
           gleichmäßigen Weißraum

→ alles Situationen, in denen es weniger denken muss!


          ...und das nutzen wir ganz gemein aus.

                  oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Gerade Linien
                  Grafikdesignregeln




Schön                                                              Nicht schön


        oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Gerade Linien
                  Grafikdesignregeln




Schön                                                              Nicht schön


        oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Gerade Linien
                  Grafikdesignregeln




Schön                                                              Nicht schön


        oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Muster & Wiederholungen
                         Grafikdesignregeln




   Nichts neues...                                                               Huii!


               oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Muster & Wiederholungen
                         Grafikdesignregeln




   Nichts neues...                                                               Huii!


               oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Muster & Wiederholungen
                         Grafikdesignregeln


 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

   Nichts neues...                                                               Huii!


               oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Muster & Wiederholungen
                         Grafikdesignregeln


 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

   Nichts neues...                                                               Huii!


               oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Weißraum
                  Grafikdesignregeln




Schön                                                              Nicht schön


        oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Weißraum
                  Grafikdesignregeln




Schön                                                              Nicht schön


        oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Weißraum
                     Grafikdesignregeln




Leicht zählbar                                                    Schwer zählbar


           oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Weißraum ist relativ
                     Grafikdesignregeln




ButtonText                                                   ButtonText


   Schön                                                              Nicht schön


           oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Kontrast
                                       Grafikdesignregeln


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.




    Leicht erkennbar                                                            Schwer erkennbar


                             oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Kontrast
                      Grafikdesignregeln




Leicht erkennbar                                               Schwer erkennbar


            oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Kontrast
                      Grafikdesignregeln




Leicht erkennbar                                               Schwer erkennbar


            oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Typografie
•   Oft unterschätzt, aber wichtig
•   Im Grunde “nur” die praktische
    Anwendung der vorherigen Regeln

•   Apple versteht sie, Microsoft nicht
    Weil Microsoft es wie ein Programmierer/Techniker angeht, während es
    Apple wie ein Grafiker angeht




                  oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Gerade Linien
                                                Typografie – Beispiele

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




              Gut lesbar                                                                       Schlecht lesbar


                                        oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Muster & Wiederholungen
                                                  Typografie – Beispiele

 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




               Gut lesbar                                                                        Schlecht lesbar


                                          oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Weißraum
                                                 Typografie – Beispiele

                                                                                      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




              Gut lesbar                                                                         Schlecht lesbar


                                         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Weißraum
                                                 Typografie – Beispiele

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




              Gut lesbar                                                                        Schlecht lesbar


                                         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Kontrast
                                                Typografie – Beispiele

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




Gut lesbar/angenehm                                                           Schlecht lesbar/unangenehm


                                        oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Kontrast
                                                Typografie – Beispiele

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




Gut lesbar/angenehm                                                           Schlecht lesbar/unangenehm


                                        oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Kontrast
                     Typografie – Beispiele


    ButtonText                                                     ButtonText

    ButtonText                                                     ButtonText

    ButtonText                                                     ButtonText

Besser lesbar/angenehmer                             Schlecht lesbar/unangenehm


               oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Informationsdesign
•   Gliedert Daten
•   Zeigt wichtige Datenpunkte auf
•   Verwendet oft bekannte Symbole
    z.B. aus dem Verkehrswesen oder verwandten Systemen


•   Bricht die “schönheits”-Regeln
    → aber nur an den “richtigen” Stellen



                 oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Datengliederung
       Informationsdesign – Beispiele

                                        100


                                          75
23 %

          42 %
                                          50



35 %                                      25


                                           0


Verteilung                                                                 Relation


         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Datenschwerpunkte
       Informationsdesign – Beispiele

                                              80


                                              60


                                              40


                                              20


                                                0


Verteilung                                                                 Relation


         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Symbole
       Informationsdesign – Beispiele




Hinzufügen                                                           Schließen


        oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Symbole
       Informationsdesign – Beispiele




Yay!                                                                      Fail!


        oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Uhm...


  Was hat das alles mit
Interface Design zu tun?




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

Superkombo-Time!


   oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
gerade Linien




Weißraum




           oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
leicht zu
unterscheidende Zeilen
durch Farbhinterlegung



 mehr Weißraum ohne
      Separator-Linie,
  Text leichter lesbar




                  oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
wichtige Tage;
           heute, Auswahl



ausgewählte Woche dunkler




         mehr Weißraum
       durch blasse Linien




                     oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
weißer Rand
            erhöht Kontrast
                 für Schlagschatten




   Indikator für Gruppen
        OS X-weit gleich
User kennen es in ähnlichem Kontext




                   oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
wichtig

                                                                                           unwichtig


“Tiefe” durch Verläufe
   → anklick(tast?)bar




                         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Icons verschaffen
        Überblick                                                                           Zusatzinformation
  User merkt sich Form,                                                                     “leichter”, andersfärbig
    Farben und Position




Gruppentrennung
 durch Weißraum




                          oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Datum
   Absender                                                                                           durch Farbe wird eine “Spalte”
                                                                                                      erzeugt und der Text als definitiv
wichtig, groß, fett
                                                                                                      nicht Teil vom Absender/Betreff
                      Betreff                                                                          gekennzeichnet
                 weniger wichtig,
               immer noch lesbar



                 Markierung                                                                           E-Mail Textanfang
macht nicht sofort Sinn, nach 2-3                                                                     für hartgesottene; recht unwichtig
    Mails versteht es aber jeder                                                                      bei der entscheidung ob man die E-
                                                                                                      Mail lesen soll oder nicht




                                    oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Es geht auch bei Apple
      nicht immer gut
  ein Fehlersuche-Bild, © Apple




              oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
und als Draufgabe


Sexay Buttons
           (wie & wieso)




 oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
1px Versatz um Weißraum auszubalancieren
                (klappt nicht immer, aber einen Versuch wert)




Text reingestanzt                                                      Text drüber


            oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Verhaltensforschung ☺
 •   Zutaten: 2-5 Äffch User
 •   App in die Hand drucken
 •   Verhalten beobachten
     Wenn 2 oder mehr das gleiche (nicht-weiter-wissen) Problem haben, sollte
     man die Lösung neu durchdenken


 •   Unterrichten
     Man kann durchaus von seinen Usern verlangen, dass sie sich kurz mit der
     App auseinander setzen, falls sie dadurch (überhaupt im Vergleich zur
     Konkurrenz) effektiver arbeiten können




                    oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Viel Arbeit ☹
•   Nachforschen
•   [Idee, Skizze, Code, Test] * 100
•   Ohne Vorarbeit später u.U.
    größeres Umbauen der App
•   Version 2.0 macht sowieso alles neu




           oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Aber!


Design zahlt sich aus! $-)
     Jeder weiß, dass UI Design wichtig ist
    und schöne Apps sich besser verkaufen.
           Nur machen tut’s keiner.

         Schlechte Konkurrenz = win!



         oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Ende

 Kommentare, Kritik, Anregungen, Fragen
      auch an samo@froodee.at




oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Hilfreiche Software
•   Opacity
    http://likethought.com/opacity/


•   DrawIt
    http://bohemiancoding.com/drawit/


•   OmniGraffle
    http://www.omnigroup.com/applications/omnigraffle/



     + Pen & Paper & Hirn




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

Weitere ähnliche Inhalte

Andere mochten auch

Stentofon Baudisch Company Presentation - IT meets BBQ 2014
Stentofon Baudisch Company Presentation - IT meets BBQ 2014Stentofon Baudisch Company Presentation - IT meets BBQ 2014
Stentofon Baudisch Company Presentation - IT meets BBQ 2014
pascom
 
Fedora presentation 2007 (German) - Reworked
Fedora presentation 2007 (German) - ReworkedFedora presentation 2007 (German) - Reworked
Fedora presentation 2007 (German) - Reworked
Oliver Falk
 
CRM2011
CRM2011CRM2011
CRM2011
gussysue
 
Whales Presentation
Whales PresentationWhales Presentation
Whales Presentation
MP Higley
 
Cegos Presentation Deutsch 2009 03 Linked In
Cegos Presentation Deutsch  2009 03 Linked InCegos Presentation Deutsch  2009 03 Linked In
Cegos Presentation Deutsch 2009 03 Linked In
DieterFleiter
 
Trivadis Company Presentation - german
Trivadis Company Presentation - germanTrivadis Company Presentation - german
Trivadis Company Presentation - germanTrivadis
 
Wissensmanagement in Unternehmen
Wissensmanagement in UnternehmenWissensmanagement in Unternehmen
Wissensmanagement in Unternehmen
Michael Wyrsch
 
Struktur und Modell medienbezogener Störungen durch Social Media-Partizipatio...
Struktur und Modell medienbezogener Störungen durch Social Media-Partizipatio...Struktur und Modell medienbezogener Störungen durch Social Media-Partizipatio...
Struktur und Modell medienbezogener Störungen durch Social Media-Partizipatio...
Anja Lorenz
 
Information Security Management (ISMS) with QSEC
Information Security Management (ISMS) with QSECInformation Security Management (ISMS) with QSEC
Information Security Management (ISMS) with QSECWMC GmbH
 
"Lifestyle Blogs - Virtuelle Belanglosigkeiten oder ein Medium mit Potenzial?...
"Lifestyle Blogs - Virtuelle Belanglosigkeiten oder ein Medium mit Potenzial?..."Lifestyle Blogs - Virtuelle Belanglosigkeiten oder ein Medium mit Potenzial?...
"Lifestyle Blogs - Virtuelle Belanglosigkeiten oder ein Medium mit Potenzial?...sisterMAG
 
Digital Switzerland 2015
Digital Switzerland 2015Digital Switzerland 2015
Digital Switzerland 2015
Sven Ruoss
 
Semantic Web als Infrastruktur fuer die Wissensgesellschaft
Semantic Web als Infrastruktur fuer die WissensgesellschaftSemantic Web als Infrastruktur fuer die Wissensgesellschaft
Semantic Web als Infrastruktur fuer die Wissensgesellschaft
Andreas Blumauer
 
Modern Visual Design
Modern Visual DesignModern Visual Design
Modern Visual Design
Barry Nadler
 
Social Media-Innovationen in Redaktionen
Social Media-Innovationen in RedaktionenSocial Media-Innovationen in Redaktionen
Social Media-Innovationen in Redaktionen
Jörg Hoewner
 
New Business Opportunities In Retail
New Business Opportunities In RetailNew Business Opportunities In Retail
New Business Opportunities In Retail
Helge Tennø
 

Andere mochten auch (15)

Stentofon Baudisch Company Presentation - IT meets BBQ 2014
Stentofon Baudisch Company Presentation - IT meets BBQ 2014Stentofon Baudisch Company Presentation - IT meets BBQ 2014
Stentofon Baudisch Company Presentation - IT meets BBQ 2014
 
Fedora presentation 2007 (German) - Reworked
Fedora presentation 2007 (German) - ReworkedFedora presentation 2007 (German) - Reworked
Fedora presentation 2007 (German) - Reworked
 
CRM2011
CRM2011CRM2011
CRM2011
 
Whales Presentation
Whales PresentationWhales Presentation
Whales Presentation
 
Cegos Presentation Deutsch 2009 03 Linked In
Cegos Presentation Deutsch  2009 03 Linked InCegos Presentation Deutsch  2009 03 Linked In
Cegos Presentation Deutsch 2009 03 Linked In
 
Trivadis Company Presentation - german
Trivadis Company Presentation - germanTrivadis Company Presentation - german
Trivadis Company Presentation - german
 
Wissensmanagement in Unternehmen
Wissensmanagement in UnternehmenWissensmanagement in Unternehmen
Wissensmanagement in Unternehmen
 
Struktur und Modell medienbezogener Störungen durch Social Media-Partizipatio...
Struktur und Modell medienbezogener Störungen durch Social Media-Partizipatio...Struktur und Modell medienbezogener Störungen durch Social Media-Partizipatio...
Struktur und Modell medienbezogener Störungen durch Social Media-Partizipatio...
 
Information Security Management (ISMS) with QSEC
Information Security Management (ISMS) with QSECInformation Security Management (ISMS) with QSEC
Information Security Management (ISMS) with QSEC
 
"Lifestyle Blogs - Virtuelle Belanglosigkeiten oder ein Medium mit Potenzial?...
"Lifestyle Blogs - Virtuelle Belanglosigkeiten oder ein Medium mit Potenzial?..."Lifestyle Blogs - Virtuelle Belanglosigkeiten oder ein Medium mit Potenzial?...
"Lifestyle Blogs - Virtuelle Belanglosigkeiten oder ein Medium mit Potenzial?...
 
Digital Switzerland 2015
Digital Switzerland 2015Digital Switzerland 2015
Digital Switzerland 2015
 
Semantic Web als Infrastruktur fuer die Wissensgesellschaft
Semantic Web als Infrastruktur fuer die WissensgesellschaftSemantic Web als Infrastruktur fuer die Wissensgesellschaft
Semantic Web als Infrastruktur fuer die Wissensgesellschaft
 
Modern Visual Design
Modern Visual DesignModern Visual Design
Modern Visual Design
 
Social Media-Innovationen in Redaktionen
Social Media-Innovationen in RedaktionenSocial Media-Innovationen in Redaktionen
Social Media-Innovationen in Redaktionen
 
New Business Opportunities In Retail
New Business Opportunities In RetailNew Business Opportunities In Retail
New Business Opportunities In Retail
 

Interface Design Basics (deutsch)

  • 1. Interface Design Basics von und mit Samo Korošec, froodee.at oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 2. Interface Design ist: • Interaktionsdesign • Grafikdesign • Typografie • Informationsdesign • Verhaltensforschung ☺ • Viel Arbeit ☹ oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 3. Interaktionsdesign • Viele coole Wörter, mit denen viele coole Consultants viel cooles Geld verdienen. Cool! Mental Models, User Stories, Interface Metaphors, Prototyping, Usability Testing, etc. • Nicht wirklich sooo schwer, wenn man mitdenkt Schließlich sind wir alle hier klug; ist ja kein MSDN Meeting ;) • Funktioniert auch/besser ohne große “Testgruppen” Man kann es nicht jedem recht machen & Zu viele Köche verderben den Brei oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 4. Interaktionsdesign coole Wörter • Mental Models, User Stories, Interface Methapors Was erwartet der User? Welcher reale Vorgang entspricht der Applikation? Welche Metaphern kann ich verwendern? • Prototyping, Usability Testing, User Focus Groups Nicht alle User sind gleich. Diskussion ist gut, sollte aber nicht die Vision verdrängen. Eat your own dog food ™ oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 5. Interaktionsdesign mitdenken ist gut • Die Idee Was ist das Hauptziel der App? Nie aus den Augen verlieren! • Womit muß ich Arbeiten? Welches Vorwissen haben die User? Mit welchen Einschränkungen soll ich rechnen? • Verbesserungen Was kann ich weglassen, verstecken, kombinieren? Womit kann ich die Arbeit mit der App schneller machen? oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 6. Interaktionsdesign es muß nicht immer eine Gruppe sein • Bin ich (m)ein Kunde? Die App soll man selbst und viel verwenden, man findet so mehr Fehler. User Testing kann erst später im Prozess kommen. • Kenne ich die Zielgruppe? Ist es eine Nische? Wollen die überhaupt eine App? Haben die Vorgänge, die sie aus anderen Bereichen kennen (→ Metaphern!)? Sind sie verzweifelt? • Power User ™ Manchmal gutes Input, sind aber die Minderheit — Gefahr, wenn man Features und Abläufe auf sie hin optimiert! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 7. Grafikdesign • Interface → Grafik & Layout • Buttons & Icons → Illustrationen • Regeln Man muß kein Grafiker sein um die Basis-Regeln zu kennen und zu befolgen. Und es ist meistens keine “Geschmackssache”. oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 8. Unser Gehirn: Grafikdesignregeln • Mag Gerade Linien • Erkennt Muster & Wiederholungen • Liebt Gleichmäßige Verteilung bzw. gleichmäßigen Weißraum → alles Situationen, in denen es weniger denken muss! ...und das nutzen wir ganz gemein aus. oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 9. Gerade Linien Grafikdesignregeln Schön Nicht schön oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 10. Gerade Linien Grafikdesignregeln Schön Nicht schön oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 11. Gerade Linien Grafikdesignregeln Schön Nicht schön oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 12. Muster & Wiederholungen Grafikdesignregeln Nichts neues... Huii! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 13. Muster & Wiederholungen Grafikdesignregeln Nichts neues... Huii! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 14. Muster & Wiederholungen Grafikdesignregeln 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 Nichts neues... Huii! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 15. Muster & Wiederholungen Grafikdesignregeln 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 Nichts neues... Huii! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 16. Weißraum Grafikdesignregeln Schön Nicht schön oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 17. Weißraum Grafikdesignregeln Schön Nicht schön oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 18. Weißraum Grafikdesignregeln Leicht zählbar Schwer zählbar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 19. Weißraum ist relativ Grafikdesignregeln ButtonText ButtonText Schön Nicht schön oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 20. Kontrast Grafikdesignregeln 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. Leicht erkennbar Schwer erkennbar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 21. Kontrast Grafikdesignregeln Leicht erkennbar Schwer erkennbar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 22. Kontrast Grafikdesignregeln Leicht erkennbar Schwer erkennbar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 23. Typografie • Oft unterschätzt, aber wichtig • Im Grunde “nur” die praktische Anwendung der vorherigen Regeln • Apple versteht sie, Microsoft nicht Weil Microsoft es wie ein Programmierer/Techniker angeht, während es Apple wie ein Grafiker angeht oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 24. Gerade Linien Typografie – Beispiele 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 Gut lesbar Schlecht lesbar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 25. Muster & Wiederholungen Typografie – Beispiele 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 Gut lesbar Schlecht lesbar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 26. Weißraum Typografie – Beispiele 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 Gut lesbar Schlecht lesbar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 27. Weißraum Typografie – Beispiele 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 Gut lesbar Schlecht lesbar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 28. Kontrast Typografie – Beispiele 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 Gut lesbar/angenehm Schlecht lesbar/unangenehm oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 29. Kontrast Typografie – Beispiele 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 Gut lesbar/angenehm Schlecht lesbar/unangenehm oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 30. Kontrast Typografie – Beispiele ButtonText ButtonText ButtonText ButtonText ButtonText ButtonText Besser lesbar/angenehmer Schlecht lesbar/unangenehm oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 31. Informationsdesign • Gliedert Daten • Zeigt wichtige Datenpunkte auf • Verwendet oft bekannte Symbole z.B. aus dem Verkehrswesen oder verwandten Systemen • Bricht die “schönheits”-Regeln → aber nur an den “richtigen” Stellen oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 32. Datengliederung Informationsdesign – Beispiele 100 75 23 % 42 % 50 35 % 25 0 Verteilung Relation oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 33. Datenschwerpunkte Informationsdesign – Beispiele 80 60 40 20 0 Verteilung Relation oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 34. Symbole Informationsdesign – Beispiele Hinzufügen Schließen oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 35. Symbole Informationsdesign – Beispiele Yay! Fail! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 36. Uhm... Was hat das alles mit Interface Design zu tun? oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 37. ↗→↑↘→→ Superkombo-Time! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 38. gerade Linien Weißraum oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 39. leicht zu unterscheidende Zeilen durch Farbhinterlegung mehr Weißraum ohne Separator-Linie, Text leichter lesbar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 40. wichtige Tage; heute, Auswahl ausgewählte Woche dunkler mehr Weißraum durch blasse Linien oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 41. weißer Rand erhöht Kontrast für Schlagschatten Indikator für Gruppen OS X-weit gleich User kennen es in ähnlichem Kontext oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 42. wichtig unwichtig “Tiefe” durch Verläufe → anklick(tast?)bar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 43. Icons verschaffen Überblick Zusatzinformation User merkt sich Form, “leichter”, andersfärbig Farben und Position Gruppentrennung durch Weißraum oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 44. Datum Absender durch Farbe wird eine “Spalte” erzeugt und der Text als definitiv wichtig, groß, fett nicht Teil vom Absender/Betreff Betreff gekennzeichnet weniger wichtig, immer noch lesbar Markierung E-Mail Textanfang macht nicht sofort Sinn, nach 2-3 für hartgesottene; recht unwichtig Mails versteht es aber jeder bei der entscheidung ob man die E- Mail lesen soll oder nicht oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 45. Es geht auch bei Apple nicht immer gut ein Fehlersuche-Bild, © Apple oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 46. und als Draufgabe Sexay Buttons (wie & wieso) oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 47. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 48. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 49. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 50. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 51. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 52. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 53. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 54. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 55. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 56. 1px Versatz um Weißraum auszubalancieren (klappt nicht immer, aber einen Versuch wert) Text reingestanzt Text drüber oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 57. Verhaltensforschung ☺ • Zutaten: 2-5 Äffch User • App in die Hand drucken • Verhalten beobachten Wenn 2 oder mehr das gleiche (nicht-weiter-wissen) Problem haben, sollte man die Lösung neu durchdenken • Unterrichten Man kann durchaus von seinen Usern verlangen, dass sie sich kurz mit der App auseinander setzen, falls sie dadurch (überhaupt im Vergleich zur Konkurrenz) effektiver arbeiten können oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 58. Viel Arbeit ☹ • Nachforschen • [Idee, Skizze, Code, Test] * 100 • Ohne Vorarbeit später u.U. größeres Umbauen der App • Version 2.0 macht sowieso alles neu oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 59. Aber! Design zahlt sich aus! $-) Jeder weiß, dass UI Design wichtig ist und schöne Apps sich besser verkaufen. Nur machen tut’s keiner. Schlechte Konkurrenz = win! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 60. Ende Kommentare, Kritik, Anregungen, Fragen auch an samo@froodee.at oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  • 61. Hilfreiche Software • Opacity http://likethought.com/opacity/ • DrawIt http://bohemiancoding.com/drawit/ • OmniGraffle http://www.omnigroup.com/applications/omnigraffle/ + Pen & Paper & Hirn oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009