Mehr Nutzen, Weniger Interface
•
1 j'aime•667 vues
German Talk held at the iOS DevCon '12 in Berlin.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à Mehr Nutzen, Weniger Interface
Similaire à Mehr Nutzen, Weniger Interface (20)
Mehr Nutzen, Weniger Interface
- 1. Mehr Nutzen, weniger Interface Moritz Haarmann
- 2. Agenda Der erste Eindruck Ein bisschen Background Use Case
- 3. Hallo ihr.
- 4. Moritz Haarmann • Selbständiger Entwickler,und Berater • Stuttgart-Based • Ruby, iOS, Java • Talking, Coding, Hund, Laufen. • Medieninformatik, HdM Stuttgart
- 6. 100% Fokus
- 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. Gut
- 11. Schlecht
- 13. Wieviele Leute nutzen deine App nur 1x?
- 14. Le Bounce Rate Nur einmal Mehrmals 26 % 74 % Quelle: Localytics, 2010
- 16. Nutzer wollen das tun können, was sie tun wollen. Primäres Ziel der Entwicklung.
- 17. Fokus Die GUI
- 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. Schön
- 20. Einfach zu bedienen
- 23. Technik ist unfassbar kompliziert „Problem“
- 25. Für das Verständnis notwendige Abstraktion Die meistens katastrophal Falsch ist...
- 26. Das mentale Modell passt sich ständig an. „Lernen“
- 27. Mentale Modelle sind sehr unterschiedlich Abhängig von dem Benutzer bzw. Mensch, der sie sich ausdenkt
- 28. Beispiel
- 30. Und jetzt? Wie können wir 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 ein iterativer Ansatz
- 34. UCD ist ein iterativer 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 Fallbeispiele aus 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 • Typische Geschichte aus dem Leben einer Persona
- 37. Use Case • Konkrete Nutzung 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 der Arbeit passiert, bevor eine Zeile Code geschrieben ist.
- 41. Direct Manipulation Pattern Guten Tag, Usability.
- 45. Aktionen haben sofortigen EFfekt. Da, wo sie passieren
- 46. SKILLS ERFAHRUNGEN VORHANDENE Konzepte NUTZEN! IDEEN VORSTELLUNGEN
- 47. Reprise man kann es nicht oft genug sagen.
- 48. Die meisten Nutzer wollen eine App nutzen. 100% Fokus
- 49. Du bist schuld wenn es nicht Der Nutzer ist nicht „zu doof“.
- 50. Case Study Eine neue UI in 5 Tagen.
- 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 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
- 54. Flüssiges Layout Im Kontrast zum herkömmlichen UINavigation-Pattern
- 55. Fastest Browsing Possible Und man weiss immer, wo man ist.
- 56. Inspiration
- 58. Du weisst am Anfang nicht, was am Ende rauskommt.
- 59. Die Idee im Kopf
- 60. Ebene 1 Ebene 2 Ebene 3
- 61. Ebene 1 Ebene 2 Ebene 3
- 62. Ebene 1 Ebene 2 Ebene 3
- 63. Ebene 1 Ebene 2 Ebene 3
- 64. Analogien? Mentales Modell!
- 65. Die Idee mit Mechanik verknüpfen.
- 66. Teilausschnitte abbildbar Juhu!
- 67. Ebene 1 Ebene 2 Ebene 3
- 68. „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
- 69. 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.
- 70. 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.
- 71. 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 :-)
- 72. Ergebnis • Drei Drop-In Klassen ohne externe Abhängigkeiten, ca. 1400 LOC • Viel gelernt • Spaß!
- 73. Fragen?
- 74. Danke fürs zuhören. CC BY-ND 3.0