• Save
Mehr Nutzen, Weniger Interface
Upcoming SlideShare
Loading in...5
×
 

Mehr Nutzen, Weniger Interface

on

  • 637 views

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

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

Statistics

Views

Total Views
637
Views on SlideShare
637
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
2

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mehr Nutzen, Weniger Interface Mehr Nutzen, Weniger Interface Presentation Transcript

  • 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.• Medieninformatik, HdM Stuttgart
  • Appssind was Besonderes.
  • 100% Fokus
  • Der Benutzer investiert! Problem Suche nach App eventuell Kauf Suche nach Web-AppInstallation/Download Benutzung
  • 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 using images rather than text – Wikipedia
  • 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 eine hohe Gebrauchstauglichkeit (Usability) verfügen. – Wikipedia
  • UCD ist ein iterativer Ansatz
  • UCD ist ein iterativer AnsatzAnalyse: NutzerprofileAnforderung: Was machtdie Soft warePrototyping: Scribbling AnalyseEvaluation: Ergebnisseauswerten.. and back tothe start Anforderungen Prototyping Evaluation
  • 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
  • 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 Daten in Core Data ( 1/2 Tag )•Feststellung, dass es eine andere GUI braucht: 10 Minuten
  • 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
  • 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üssig, d.h. die Panels „rollen“ raus• Panels können zusammengeschoben werden, bis eine gewisse ( konfigurierbare ) Grenze erreicht ist
  • 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.
  • 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.
  • 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 :-)
  • 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