Your SlideShare is downloading. ×
Interface Design Basics (deutsch)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Interface Design Basics (deutsch)

2,123
views

Published on

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

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

Published in: Design, Technology, Business

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,123
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Interface Design von und mit Samo Korošec 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