Interface Design Basics (deutsch)
-
Upload
samo-korosec -
Category
Design
-
view
114 -
download
3
description
Transcript of Interface Design Basics (deutsch)
![Page 1: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/1.jpg)
Interface Design Basics
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
von und mit Samo Korošec, froodee.at
![Page 2: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/2.jpg)
Interface Design ist:
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
• Interaktionsdesign• Grafikdesign• Typografie• Informationsdesign
• Verhaltensforschung ☺• Viel Arbeit ☹
![Page 3: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/3.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
• 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 mitdenktSchließ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
InteraktionsdesignInteraktionsdesign
![Page 4: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/4.jpg)
Interaktionsdesign
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
• Mental Models, User Stories, Interface MethaporsWas erwartet der User? Welcher reale Vorgang entspricht der Applikation? Welche Metaphern kann ich verwendern?
• Prototyping, Usability Testing, User Focus GroupsNicht alle User sind gleich. Diskussion ist gut, sollte aber nicht die Vision verdrängen. Eat your own dog food ™
coole Wörter
![Page 5: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/5.jpg)
Interaktionsdesign
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
• Die IdeeWas 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?
• VerbesserungenWas kann ich weglassen, verstecken, kombinieren? Womit kann ich die Arbeit mit der App schneller machen?
mitdenken ist gut
![Page 6: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/6.jpg)
Interaktionsdesign
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
• 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!
es muß nicht immer eine Gruppe sein
![Page 7: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/7.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
• 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”.
GrafikdesignGrafikdesign
![Page 8: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/8.jpg)
Unser Gehirn:
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
• Mag Gerade Linien• Erkennt Muster & Wiederholungen• Liebt Gleichmäßige Verteilung bzw.
gleichmäßigen Weißraum
Grafikdesignregeln
→ alles Situationen, in denen es weniger denken muss!
...und das nutzen wir ganz gemein aus.
![Page 9: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/9.jpg)
Gerade Linien
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Schön Nicht schön
![Page 10: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/10.jpg)
Gerade Linien
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Schön Nicht schön
![Page 11: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/11.jpg)
Gerade Linien
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Schön Nicht schön
![Page 12: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/12.jpg)
Muster & Wiederholungen
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Nichts neues... Huii!
![Page 13: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/13.jpg)
Muster & Wiederholungen
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Nichts neues... Huii!
![Page 14: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/14.jpg)
Muster & Wiederholungen
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Nichts neues... Huii!
Zeile einsZeile zweiZeile dreiZeile vierZeile fünfZeile sechs
Zeile einsZeile zweiZeile dreiZeile vierZeile fünfZeile sechs
![Page 15: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/15.jpg)
Muster & Wiederholungen
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Nichts neues... Huii!
Zeile einsZeile zweiZeile dreiZeile vierZeile fünfZeile sechs
Zeile einsZeile zweiZeile dreiZeile vierZeile fünfZeile sechs
![Page 16: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/16.jpg)
Weißraum
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Schön Nicht schön
![Page 17: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/17.jpg)
Weißraum
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Schön Nicht schön
![Page 18: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/18.jpg)
Weißraum
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Leicht zählbar Schwer zählbar
![Page 19: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/19.jpg)
Weißraum ist relativ
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Schön Nicht schön
ButtonText ButtonText
![Page 20: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/20.jpg)
Kontrast
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Leicht erkennbar Schwer erkennbar
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.
![Page 21: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/21.jpg)
Kontrast
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Leicht erkennbar Schwer erkennbar
![Page 22: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/22.jpg)
Kontrast
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Grafikdesignregeln
Leicht erkennbar Schwer erkennbar
![Page 23: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/23.jpg)
Typografie
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
• Oft unterschätzt, aber wichtig• Im Grunde “nur” die praktische
Anwendung der vorherigen Regeln
• Apple versteht sie, Microsoft nichtWeil Microsoft es wie ein Programmierer/Techniker angeht, während es Apple wie ein Grafiker angeht
![Page 24: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/24.jpg)
Gerade Linien
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Typografie – Beispiele
Gut lesbar Schlecht lesbar
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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
anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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
![Page 25: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/25.jpg)
Muster & Wiederholungen
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Typografie – Beispiele
Gut lesbar Schlecht lesbar
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
![Page 26: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/26.jpg)
Weißraum
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Typografie – Beispiele
Gut lesbar Schlecht lesbar
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
![Page 27: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/27.jpg)
Weißraum
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Typografie – Beispiele
Gut lesbar Schlecht lesbar
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
![Page 28: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/28.jpg)
Kontrast
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Typografie – Beispiele
Gut lesbar/angenehm Schlecht lesbar/unangenehm
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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
![Page 29: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/29.jpg)
Kontrast
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Typografie – Beispiele
Gut lesbar/angenehm Schlecht lesbar/unangenehm
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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 anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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
![Page 30: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/30.jpg)
Kontrast
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Typografie – Beispiele
Besser lesbar/angenehmer Schlecht lesbar/unangenehm
ButtonTextButtonText
ButtonTextButtonText
ButtonTextButtonTextButtonText
![Page 31: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/31.jpg)
Informationsdesign
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
• 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
![Page 32: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/32.jpg)
Datengliederung
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Informationsdesign – Beispiele
Verteilung Relation
23 %
35 %
42 %
0
25
50
75
100
![Page 33: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/33.jpg)
Datenschwerpunkte
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Informationsdesign – Beispiele
Verteilung Relation
0
20
40
60
80
![Page 34: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/34.jpg)
Symbole
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Informationsdesign – Beispiele
Hinzufügen Schließen
![Page 35: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/35.jpg)
Symbole
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Informationsdesign – Beispiele
Yay! Fail!
![Page 36: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/36.jpg)
Uhm...
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Was hat das alles mit Interface Design zu tun?
![Page 37: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/37.jpg)
↗→↑↘→→
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Superkombo-Time!
![Page 38: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/38.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Weißraum
gerade Linien
![Page 39: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/39.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
mehr Weißraum ohne Separator-Linie,
Text leichter lesbar
leicht zu unterscheidende Zeilen durch Farbhinterlegung
![Page 40: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/40.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
mehr Weißraum durch blasse Linien
wichtige Tage; heute, Auswahl
ausgewählte Woche dunkler
![Page 41: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/41.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
weißer Rand erhöht Kontrast
für Schlagschatten
Indikator für GruppenOS X-weit gleich
User kennen es in ähnlichem Kontext
![Page 42: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/42.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
wichtig
“Tiefe” durch Verläufe → anklick(tast?)bar
unwichtig
![Page 43: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/43.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Zusatzinformation “leichter”, andersfärbig
Icons verschaffen Überblick
User merkt sich Form, Farben und Position
Gruppentrennung durch Weißraum
![Page 44: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/44.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Datumdurch Farbe wird eine “Spalte” erzeugt und der Text als definitiv nicht Teil vom Absender/Betreff gekennzeichnet
Absenderwichtig, groß, fett
Betreffweniger wichtig,
immer noch lesbar
Markierungmacht nicht sofort Sinn, nach 2-3
Mails versteht es aber jeder
E-Mail Textanfangfür hartgesottene; recht unwichtig bei der entscheidung ob man die E-Mail lesen soll oder nicht
![Page 45: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/45.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Es geht auch bei Apple nicht immer gut
ein Fehlersuche-Bild, © Apple
![Page 46: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/46.jpg)
und als Draufgabe
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Sexay Buttons(wie & wieso)
![Page 47: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/47.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button Schnitt
![Page 48: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/48.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button Schnitt
![Page 49: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/49.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button Schnitt
![Page 50: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/50.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button Schnitt
![Page 51: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/51.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button Schnitt
![Page 52: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/52.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button Schnitt
![Page 53: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/53.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button Schnitt
![Page 54: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/54.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button Schnitt
![Page 55: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/55.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Button Schnitt
![Page 56: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/56.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Text reingestanzt Text drüber
1px Versatz um Weißraum auszubalancieren(klappt nicht immer, aber einen Versuch wert)
![Page 57: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/57.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
• 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
• UnterrichtenMan 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
Verhaltensforschung ☺ Verhaltensforschung ☺
![Page 58: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/58.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
• Nachforschen• [Idee, Skizze, Code, Test] * 100• Ohne Vorarbeit später u.U.
größeres Umbauen der App• Version 2.0 macht sowieso alles neu
Viel Arbeit ☹
![Page 59: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/59.jpg)
Aber!
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
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!
![Page 60: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/60.jpg)
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
Ende
Kommentare, Kritik, Anregungen, Fragenauch an [email protected]
![Page 61: Interface Design Basics (deutsch)](https://reader034.fdocument.pub/reader034/viewer/2022051400/54c7f0244a79592a7e8b4569/html5/thumbnails/61.jpg)
Hilfreiche Software
oct 8th 2009 cocoaheads wien presentation • © Samo Korošec 2009
• Opacityhttp://likethought.com/opacity/
• DrawIthttp://bohemiancoding.com/drawit/
• OmniGrafflehttp://www.omnigroup.com/applications/omnigraffle/
+ Pen & Paper & Hirn