Hochgeladen vonMoritz Haarmann
Mehr Nutzen, Weniger Interface
Moritz Haarmann, ein selbständiger Entwickler, diskutiert die Bedeutung der benutzerzentrierten Gestaltung (UCD) bei der App-Entwicklung und hebt hervor, dass die Benutzeroberfläche einen entscheidenden Einfluss auf die Nutzung hat. Er beschreibt, dass die Hauptarbeit vor dem Schreiben von Code stattfindet, indem Nutzerprofile, Personas und Use Cases analysiert werden. Haarmann teilt auch Einsichten und Herausforderungen aus seiner eigenen Erfahrung bei der Neugestaltung einer Benutzeroberfläche in nur fünf Tagen.
Mehr Nutzen, Weniger Interface
- 1. Mehr Nutzen, wenigerInterface Moritz Haarmann
- 2. Agenda Der erste Eindruck Einbisschen Background Use Case
- 3.
- 4. Moritz Haarmann • SelbständigerEntwickler,und Berater • Stuttgart-Based • Ruby, iOS, Java • Talking, Coding, Hund, Laufen. • Medieninformatik, HdM Stuttgart
- 5.
- 6.
- 7. Der Benutzer investiert! Problem Suche nach App eventuell Kauf Suche nach Web-App Installation/Download Benutzung
- 8. Der erste Eindruck Die Bounce-Rate
- 9.
- 10.
- 11.
- 13. Wieviele Leute nutzen deine App nur 1x?
- 14. Le Bounce Rate Nur einmal Mehrmals 26 % 74 % Quelle: Localytics, 2010
- 15.
- 16. Nutzer wollen dastun können, was sie tun wollen. Primäres Ziel der Entwicklung.
- 17.
- 18. Graphical User Interface (...) is a type of user interface that allows users to interact with electronic devices using images rather than text – Wikipedia
- 19.
- 20. Einfach zu bedienen
- 21.
- 22.
- 23. Technik ist unfassbar kompliziert „Problem“
- 25. Für das Verständnisnotwendige Abstraktion Die meistens katastrophal Falsch ist...
- 26. Das mentale Modellpasst sich ständig an. „Lernen“
- 27. Mentale Modelle sindsehr unterschiedlich Abhängig von dem Benutzer bzw. Mensch, der sie sich ausdenkt
- 28.
- 30. Und jetzt? Wie könnenwir dieses Wissen einsetzen?
- 31. User Centered Design Die nutzerorientierte Gestaltung zielt darauf ab, interaktive Produkte so zu gestalten, dass sie über eine hohe Gebrauchstauglichkeit (Usability) verfügen. – Wikipedia
- 33. UCD ist einiterativer Ansatz
- 34. UCD ist einiterativer Ansatz Analyse: Nutzerprofile Anforderung: Was macht die Soft ware Prototyping: Scribbling Analyse Evaluation: Ergebnisse auswerten.. and back to the start Anforderungen Prototyping Evaluation
- 35. Personas • Einzelne Fallbeispieleaus unserer Zielgruppe • Beispiel „Moritz, 26, Selbstständiger Entwickler, der gerne viel Läuft“ • Personas helfen bei einem gemeinsamen Verständnis der Zielgruppe
- 36. User Story • TypischeGeschichte aus dem Leben einer Persona
- 37. Use Case • KonkreteNutzung der App um ein Problem im Kontext einer User Story zu bewältigen
- 38. Denk über deine Nutzer nach. Und erst später über den Rest.
- 39. Der Hauptteil derArbeit passiert, bevor eine Zeile Code geschrieben ist.
- 40.
- 41. Direct Manipulation Pattern Guten Tag, Usability.
- 45. Aktionen haben sofortigenEFfekt. Da, wo sie passieren
- 46. SKILLS ERFAHRUNGEN VORHANDENE Konzepte NUTZEN! IDEEN VORSTELLUNGEN
- 47. Reprise man kann esnicht oft genug sagen.
- 48. Die meisten Nutzer wollen eine App nutzen. 100% Fokus
- 49. Du bist schuld wennes nicht Der Nutzer ist nicht „zu doof“.
- 50. Case Study Eineneue UI in 5 Tagen.
- 51.
- 52. 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
- 53. Ziele • Streng hierarchischeStruktur einfach zugänglich machen, ohne ständig den Kontext zu wechseln ( Push, Back ) • Übersichtliche Navigation, klarer Pfad • Sehr kurze Ladezeiten • Dynamisches, leichtes Bedienungsgefühl
- 54. Flüssiges Layout Im Kontrastzum herkömmlichen UINavigation-Pattern
- 55. Fastest Browsing Possible Und man weiss immer, wo man ist.
- 56.
- 58. Du weisst amAnfang nicht, was am Ende rauskommt.
- 59. Die Idee imKopf
- 60.
- 61.
- 62.
- 63.
- 64. Analogien? MentalesModell!
- 65. Die Idee mit Mechanik verknüpfen.
- 66. Teilausschnitte abbildbar Juhu!
- 67.
- 68. „Konstruktion“ • Zwischen denPanels 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
- 69. Implementation • UIGummiband undNSMagnet? ( 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.
- 70. Probleme • Grenzfälle sindschwer 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.
- 71. Learnings • CoreAnimation unddie 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 :-)
- 72. Ergebnis • Drei Drop-InKlassen ohne externe Abhängigkeiten, ca. 1400 LOC • Viel gelernt • Spaß!
- 73.
- 74. Danke fürs zuhören. CCBY-ND 3.0
- 75.