Interface Design
            von und mit Samo Korošec




  oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Interface Design ist:
   •   Interaktionsdesign
   •   Grafikdesign
       • Typografie
       •    Informationsdesign
   • ...
Interaktionsdesign
•   Viele coole Wörter, mit denen viele coole
    Consultants viel cooles Geld verdienen. Cool!
    Men...
Interaktionsdesign
                                    coole Wörter

•   Mental Models, User Stories, Interface
    Methap...
Interaktionsdesign
                              mitdenken ist gut

•   Die Idee
    Was ist das Hauptziel der App? Nie au...
Interaktionsdesign
            es muß nicht immer eine Gruppe sein

•   Bin ich (m)ein Kunde?
    Die App soll man selbst ...
Grafikdesign
•   Interface → Grafik & Layout
•   Buttons & Icons → Illustrationen
•   Regeln
    Man muß kein Grafiker sein u...
Unser Gehirn:
                            Grafikdesignregeln

      •    Mag Gerade Linien
      •    Erkennt Muster & Wied...
Gerade Linien
                  Grafikdesignregeln




Schön                                                              N...
Gerade Linien
                  Grafikdesignregeln




Schön                                                              N...
Gerade Linien
                  Grafikdesignregeln




Schön                                                              N...
Muster & Wiederholungen
                         Grafikdesignregeln




   Nichts neues...                                 ...
Muster & Wiederholungen
                         Grafikdesignregeln




   Nichts neues...                                 ...
Muster & Wiederholungen
                         Grafikdesignregeln


 Zeile eins                                          ...
Muster & Wiederholungen
                         Grafikdesignregeln


 Zeile eins                                          ...
Weißraum
                  Grafikdesignregeln




Schön                                                              Nicht ...
Weißraum
                  Grafikdesignregeln




Schön                                                              Nicht ...
Weißraum
                     Grafikdesignregeln




Leicht zählbar                                                    Schw...
Weißraum ist relativ
                     Grafikdesignregeln




ButtonText                                                ...
Kontrast
                                       Grafikdesignregeln


Lorem ipsum dolor sit amet,                           ...
Kontrast
                      Grafikdesignregeln




Leicht erkennbar                                               Schwer...
Kontrast
                      Grafikdesignregeln




Leicht erkennbar                                               Schwer...
Typografie
•   Oft unterschätzt, aber wichtig
•   Im Grunde “nur” die praktische
    Anwendung der vorherigen Regeln

•   A...
Gerade Linien
                                                Typografie – Beispiele

Lorem ipsum dolor sit amet, consectet...
Muster & Wiederholungen
                                                  Typografie – Beispiele

 Lorem ipsum dolor sit am...
Weißraum
                                                 Typografie – Beispiele

                                         ...
Weißraum
                                                 Typografie – Beispiele

Lorem ipsum dolor sit amet, consectetur a...
Kontrast
                                                Typografie – Beispiele

Lorem ipsum dolor sit amet, consectetur ad...
Kontrast
                                                Typografie – Beispiele

Lorem ipsum dolor sit amet, consectetur ad...
Kontrast
                     Typografie – Beispiele


    ButtonText                                                     B...
Informationsdesign
•   Gliedert Daten
•   Zeigt wichtige Datenpunkte auf
•   Verwendet oft bekannte Symbole
    z.B. aus d...
Datengliederung
       Informationsdesign – Beispiele

                                        100


                     ...
Datenschwerpunkte
       Informationsdesign – Beispiele

                                              80


              ...
Symbole
       Informationsdesign – Beispiele




Hinzufügen                                                           Sch...
Symbole
       Informationsdesign – Beispiele




Yay!                                                                    ...
Uhm...


  Was hat das alles mit
Interface Design zu tun?




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

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 lesb...
wichtige Tage;
           heute, Auswahl



ausgewählte Woche dunkler




         mehr Weißraum
       durch blasse Linie...
weißer Rand
            erhöht Kontrast
                 für Schlagschatten




   Indikator für Gruppen
        OS X-weit...
wichtig

                                                                                           unwichtig


“Tiefe” du...
Icons verschaffen
        Überblick                                                                           Zusatzinforma...
Datum
   Absender                                                                                           durch Farbe wi...
Es geht auch bei Apple
      nicht immer gut
  ein Fehlersuche-Bild, © Apple




              oct 8th 2009 cocoaheads wie...
und als Draufgabe


Sexay Buttons
           (wie & wieso)




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


         oct 8th 2009 cocoaheads wien...
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien...
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien...
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien...
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien...
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien...
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien...
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien...
Button                                                                     Schnitt


         oct 8th 2009 cocoaheads wien...
1px Versatz um Weißraum auszubalancieren
                (klappt nicht immer, aber einen Versuch wert)




Text reingestan...
Verhaltensforschung ☺
 •   Zutaten: 2-5 Äffch User
 •   App in die Hand drucken
 •   Verhalten beobachten
     Wenn 2 oder ...
Viel Arbeit ☹
•   Nachforschen
•   [Idee, Skizze, Code, Test] * 100
•   Ohne Vorarbeit später u.U.
    größeres Umbauen de...
Aber!


Design zahlt sich aus! $-)
     Jeder weiß, dass UI Design wichtig ist
    und schöne Apps sich besser verkaufen.
...
Ende

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




oct 8th 2009 cocoaheads wien presentation ...
Hilfreiche Software
•   Opacity
    http://likethought.com/opacity/


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


•...
Nächste SlideShare
Wird geladen in …5
×

Interface Design Basics (deutsch)

3.369 Aufrufe

Veröffentlicht am

My cocaheads.at talk about user interface design basics, that I held on october 8th 2009.

Veröffentlicht in: Design, Technologie, Business
0 Kommentare
7 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.369
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
5
Aktionen
Geteilt
0
Downloads
70
Kommentare
0
Gefällt mir
7
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Interface Design Basics (deutsch)

  1. 1. Interface Design von und mit Samo Korošec oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  2. 2. Interface Design ist: • Interaktionsdesign • Grafikdesign • Typografie • Informationsdesign • Verhaltensforschung ☺ • Viel Arbeit ☹ oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  3. 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. 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. 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. 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. 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. 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. 9. Gerade Linien Grafikdesignregeln Schön Nicht schön oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  10. 10. Gerade Linien Grafikdesignregeln Schön Nicht schön oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  11. 11. Gerade Linien Grafikdesignregeln Schön Nicht schön oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  12. 12. Muster & Wiederholungen Grafikdesignregeln Nichts neues... Huii! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  13. 13. Muster & Wiederholungen Grafikdesignregeln Nichts neues... Huii! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  14. 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. 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. 16. Weißraum Grafikdesignregeln Schön Nicht schön oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  17. 17. Weißraum Grafikdesignregeln Schön Nicht schön oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  18. 18. Weißraum Grafikdesignregeln Leicht zählbar Schwer zählbar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  19. 19. Weißraum ist relativ Grafikdesignregeln ButtonText ButtonText Schön Nicht schön oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  20. 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. 21. Kontrast Grafikdesignregeln Leicht erkennbar Schwer erkennbar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  22. 22. Kontrast Grafikdesignregeln Leicht erkennbar Schwer erkennbar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  23. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 33. Datenschwerpunkte Informationsdesign – Beispiele 80 60 40 20 0 Verteilung Relation oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  34. 34. Symbole Informationsdesign – Beispiele Hinzufügen Schließen oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  35. 35. Symbole Informationsdesign – Beispiele Yay! Fail! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  36. 36. Uhm... Was hat das alles mit Interface Design zu tun? oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  37. 37. ↗→↑↘→→ Superkombo-Time! oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  38. 38. gerade Linien Weißraum oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  39. 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. 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. 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. 42. wichtig unwichtig “Tiefe” durch Verläufe → anklick(tast?)bar oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  43. 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. 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. 45. Es geht auch bei Apple nicht immer gut ein Fehlersuche-Bild, © Apple oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  46. 46. und als Draufgabe Sexay Buttons (wie & wieso) oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  47. 47. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  48. 48. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  49. 49. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  50. 50. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  51. 51. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  52. 52. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  53. 53. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  54. 54. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  55. 55. Button Schnitt oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  56. 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. 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. 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. 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. 60. Ende Kommentare, Kritik, Anregungen, Fragen auch an samo@froodee.at oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
  61. 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

×