Mehr Nutzen, weniger InterfaceMoritz Haarmann
AgendaDer erste EindruckEin bisschen BackgroundUse Case
Hallo ihr.
Moritz Haarmann• Selbständiger Entwickler,und Berater• Stuttgart-Based• Ruby, iOS, Java• Talking, Coding, Hund, Laufen.• M...
Appssind was Besonderes.
100% Fokus
Der Benutzer              investiert!                        Problem  Suche nach App   eventuell Kauf                   Su...
Der erste Eindruck      Die Bounce-Rate
Gut
The Good• MCDO-App
Schlecht
Wieviele Leute nutzen deine App nur 1x?
Le Bounce Rate    Nur einmal     Mehrmals                 26 %     74 %                         Quelle: Localytics, 2010
Warum vielleicht?
Nutzer wollen das tun können, was sie tun       wollen.     Primäres Ziel der Entwicklung.
Fokus Die GUI
Graphical User     Interface(...) is a type of user interface that allows users to interact    with electronic devices usi...
Schön
Einfach    zubedienen
KonsistenteBenutzerführung
Das mentale Modell
Technik ist unfassbar    kompliziert        „Problem“
Für das Verständnis notwendige          Abstraktion      Die meistens katastrophal Falsch ist...
Das mentale Modell passt sich        ständig an.            „Lernen“
Mentale Modelle sind sehr         unterschiedlichAbhängig von dem Benutzer bzw. Mensch, der sie sich ausdenkt
Beispiel
Und jetzt?Wie können wir dieses Wissen einsetzen?
User Centered Design Die nutzerorientierte Gestaltung zielt darauf ab, interaktive Produkte so zugestalten, dass sie über ...
UCD ist ein iterativer Ansatz
UCD ist ein iterativer AnsatzAnalyse: NutzerprofileAnforderung: Was machtdie Soft warePrototyping: Scribbling             ...
Personas• Einzelne Fallbeispiele aus unserer  Zielgruppe• Beispiel „Moritz, 26, Selbstständiger  Entwickler, der gerne vie...
User Story• Typische Geschichte aus dem Leben einer  Persona
Use Case• Konkrete Nutzung der App um ein Problem  im Kontext einer User Story zu bewältigen
Denk über deine Nutzer nach.   Und erst später über den Rest.
Der Hauptteil der Arbeit passiert,bevor eine Zeile Code geschrieben ist.
http://www.uistencils.com/collections/frontpage/products/iphone-stencil-kit
Direct Manipulation Pattern       Guten Tag, Usability.
Aktionen haben sofortigen EFfekt.          Da, wo sie passieren
SKILLS           ERFAHRUNGENVORHANDENE Konzepte        NUTZEN!           IDEEN           VORSTELLUNGEN
Repriseman kann es nicht oft genug sagen.
Die meisten Nutzer wollen eine App     nutzen.       100% Fokus
Du bist schuldwenn es nicht  Der Nutzer ist nicht „zu doof“.
Case Study Eine neue UI in 5 Tagen.
video platzhalter
Vorbereitungen•Nokogiri (Ruby): Screen-Scraping  der Daten von ikea.com und  Überführung in Redis-DB ( 1  Tag )•Import der...
Ziele• Streng hierarchische Struktur einfach  zugänglich machen, ohne ständig den  Kontext zu wechseln ( Push, Back )• Übe...
Flüssiges LayoutIm Kontrast zum herkömmlichen UINavigation-Pattern
Fastest Browsing    Possible   Und man weiss immer, wo man ist.
Inspiration
Du weisst am Anfang nicht, was am Ende     rauskommt.
Die Idee im Kopf
Ebene 1Ebene 2Ebene 3
Ebene 1Ebene 2Ebene 3
Ebene 1Ebene 2Ebene 3
Ebene 1Ebene 2Ebene 3
Analogien?  Mentales Modell!
Die Idee mit Mechanikverknüpfen.
Teilausschnitte   abbildbar      Juhu!
Ebene 1Ebene 2Ebene 3
„Konstruktion“• Zwischen den Panels befinden sich  „Gummibänder“ oder „Magneten“• Die Grenzen des Viewports sind  abschüssi...
Implementation• UIGummiband und NSMagnet? ( iOS 4 )• UIView Subklasse, die eine ähnliche API wie  ein UINavigationControll...
Probleme• Grenzfälle sind schwer zu lösen• Wie bestimmt man, was sich „wie in Echt“  anfühlt, wenn es kein wirkliches Pend...
Learnings• CoreAnimation und die Internas von  UIView & Friends sind entscheidend für  gute Perfomance• Perfomance Tools: ...
Ergebnis• Drei Drop-In Klassen ohne externe  Abhängigkeiten, ca. 1400 LOC• Viel gelernt• Spaß!
Fragen?
Danke fürs zuhören.CC BY-ND 3.0
post@moritzhaarmann.de
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Nächste SlideShare
Wird geladen in …5
×

Mehr Nutzen, Weniger Interface

706 Aufrufe

Veröffentlicht am

German Talk held at the iOS DevCon '12 in Berlin.

Veröffentlicht in: Technologie
2 Kommentare
1 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
706
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
Aktionen
Geteilt
0
Downloads
0
Kommentare
2
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Mehr Nutzen, Weniger Interface

  1. 1. Mehr Nutzen, weniger InterfaceMoritz Haarmann
  2. 2. AgendaDer erste EindruckEin bisschen BackgroundUse Case
  3. 3. Hallo ihr.
  4. 4. Moritz Haarmann• Selbständiger Entwickler,und Berater• Stuttgart-Based• Ruby, iOS, Java• Talking, Coding, Hund, Laufen.• Medieninformatik, HdM Stuttgart
  5. 5. Appssind was Besonderes.
  6. 6. 100% Fokus
  7. 7. Der Benutzer investiert! Problem Suche nach App eventuell Kauf Suche nach Web-AppInstallation/Download Benutzung
  8. 8. Der erste Eindruck Die Bounce-Rate
  9. 9. Gut
  10. 10. The Good• MCDO-App
  11. 11. Schlecht
  12. 12. Wieviele Leute nutzen deine App nur 1x?
  13. 13. Le Bounce Rate Nur einmal Mehrmals 26 % 74 % Quelle: Localytics, 2010
  14. 14. Warum vielleicht?
  15. 15. Nutzer wollen das tun können, was sie tun wollen. Primäres Ziel der Entwicklung.
  16. 16. Fokus Die GUI
  17. 17. Graphical User Interface(...) is a type of user interface that allows users to interact with electronic devices using images rather than text – Wikipedia
  18. 18. Schön
  19. 19. Einfach zubedienen
  20. 20. KonsistenteBenutzerführung
  21. 21. Das mentale Modell
  22. 22. Technik ist unfassbar kompliziert „Problem“
  23. 23. Für das Verständnis notwendige Abstraktion Die meistens katastrophal Falsch ist...
  24. 24. Das mentale Modell passt sich ständig an. „Lernen“
  25. 25. Mentale Modelle sind sehr unterschiedlichAbhängig von dem Benutzer bzw. Mensch, der sie sich ausdenkt
  26. 26. Beispiel
  27. 27. Und jetzt?Wie können wir dieses Wissen einsetzen?
  28. 28. User Centered Design Die nutzerorientierte Gestaltung zielt darauf ab, interaktive Produkte so zugestalten, dass sie über eine hohe Gebrauchstauglichkeit (Usability) verfügen. – Wikipedia
  29. 29. UCD ist ein iterativer Ansatz
  30. 30. UCD ist ein iterativer AnsatzAnalyse: NutzerprofileAnforderung: Was machtdie Soft warePrototyping: Scribbling AnalyseEvaluation: Ergebnisseauswerten.. and back tothe start Anforderungen Prototyping Evaluation
  31. 31. Personas• Einzelne Fallbeispiele aus unserer Zielgruppe• Beispiel „Moritz, 26, Selbstständiger Entwickler, der gerne viel Läuft“• Personas helfen bei einem gemeinsamen Verständnis der Zielgruppe
  32. 32. User Story• Typische Geschichte aus dem Leben einer Persona
  33. 33. Use Case• Konkrete Nutzung der App um ein Problem im Kontext einer User Story zu bewältigen
  34. 34. Denk über deine Nutzer nach. Und erst später über den Rest.
  35. 35. Der Hauptteil der Arbeit passiert,bevor eine Zeile Code geschrieben ist.
  36. 36. http://www.uistencils.com/collections/frontpage/products/iphone-stencil-kit
  37. 37. Direct Manipulation Pattern Guten Tag, Usability.
  38. 38. Aktionen haben sofortigen EFfekt. Da, wo sie passieren
  39. 39. SKILLS ERFAHRUNGENVORHANDENE Konzepte NUTZEN! IDEEN VORSTELLUNGEN
  40. 40. Repriseman kann es nicht oft genug sagen.
  41. 41. Die meisten Nutzer wollen eine App nutzen. 100% Fokus
  42. 42. Du bist schuldwenn es nicht Der Nutzer ist nicht „zu doof“.
  43. 43. Case Study Eine neue UI in 5 Tagen.
  44. 44. video platzhalter
  45. 45. Vorbereitungen•Nokogiri (Ruby): Screen-Scraping der Daten von ikea.com und Überführung in Redis-DB ( 1 Tag )•Import der Daten in Core Data ( 1/2 Tag )•Feststellung, dass es eine andere GUI braucht: 10 Minuten
  46. 46. Ziele• Streng hierarchische Struktur einfach zugänglich machen, ohne ständig den Kontext zu wechseln ( Push, Back )• Übersichtliche Navigation, klarer Pfad• Sehr kurze Ladezeiten• Dynamisches, leichtes Bedienungsgefühl
  47. 47. Flüssiges LayoutIm Kontrast zum herkömmlichen UINavigation-Pattern
  48. 48. Fastest Browsing Possible Und man weiss immer, wo man ist.
  49. 49. Inspiration
  50. 50. Du weisst am Anfang nicht, was am Ende rauskommt.
  51. 51. Die Idee im Kopf
  52. 52. Ebene 1Ebene 2Ebene 3
  53. 53. Ebene 1Ebene 2Ebene 3
  54. 54. Ebene 1Ebene 2Ebene 3
  55. 55. Ebene 1Ebene 2Ebene 3
  56. 56. Analogien? Mentales Modell!
  57. 57. Die Idee mit Mechanikverknüpfen.
  58. 58. Teilausschnitte abbildbar Juhu!
  59. 59. Ebene 1Ebene 2Ebene 3
  60. 60. „Konstruktion“• Zwischen den Panels befinden sich „Gummibänder“ oder „Magneten“• Die Grenzen des Viewports sind abschüssig, d.h. die Panels „rollen“ raus• Panels können zusammengeschoben werden, bis eine gewisse ( konfigurierbare ) Grenze erreicht ist
  61. 61. Implementation• UIGummiband und NSMagnet? ( iOS 4 )• UIView Subklasse, die eine ähnliche API wie ein UINavigationController hat• Stack von „Rows“, die auf den Container „gepusht“ werden.• Die Rows sind wiederrum Views, die völlig gekapselt von jeder Magie sind.
  62. 62. Probleme• Grenzfälle sind schwer zu lösen• Wie bestimmt man, was sich „wie in Echt“ anfühlt, wenn es kein wirkliches Pendant gibt?• Trial and Error and Trial and Error.
  63. 63. Learnings• CoreAnimation und die Internas von UIView & Friends sind entscheidend für gute Perfomance• Perfomance Tools: unglaublich hilfreich• In manchen Fällen ist der Simulator langsamer als ein Device :-)
  64. 64. Ergebnis• Drei Drop-In Klassen ohne externe Abhängigkeiten, ca. 1400 LOC• Viel gelernt• Spaß!
  65. 65. Fragen?
  66. 66. Danke fürs zuhören.CC BY-ND 3.0
  67. 67. post@moritzhaarmann.de

×