SlideShare ist ein Scribd-Unternehmen logo
Mehr Nutzen, weniger Interface



Moritz Haarmann
Agenda



Der erste Eindruck

Ein bisschen Background

Use Case
Hallo ihr.
Moritz Haarmann

• Selbständiger Entwickler,und Berater
• Stuttgart-Based
• Ruby, iOS, Java
• Talking, Coding, Hund, Laufen.
• Medieninformatik, HdM Stuttgart
Apps
sind was Besonderes.
100% Fokus
Der Benutzer
              investiert!
                        Problem
  Suche nach App

   eventuell Kauf                   Suche nach Web-App

Installation/Download
                        Benutzung
Der erste Eindruck
      Die Bounce-Rate
Gut
The Good


• MCDO-App
Schlecht
Mehr Nutzen, Weniger Interface
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
    zu
bedienen
Konsistente
Benutzerführung
Das mentale Modell
Technik ist unfassbar
    kompliziert
        „Problem“
Mehr Nutzen, Weniger Interface
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
         unterschiedlich
Abhängig von dem Benutzer bzw. Mensch, der sie sich ausdenkt
Beispiel
Mehr Nutzen, Weniger Interface
Und jetzt?
Wie können wir dieses Wissen einsetzen?
User Centered Design



 Die nutzerorientierte Gestaltung zielt darauf ab, interaktive Produkte so zu
gestalten, dass sie über eine hohe Gebrauchstauglichkeit (Usability) verfügen.

                                                                – Wikipedia
Mehr Nutzen, Weniger Interface
UCD ist ein iterativer Ansatz
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
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.
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Aktionen haben sofortigen EFfekt.
          Da, wo sie passieren
SKILLS

           ERFAHRUNGEN

VORHANDENE Konzepte        NUTZEN!

           IDEEN

           VORSTELLUNGEN
Reprise
man kann es nicht oft genug sagen.
Die meisten Nutzer
 wollen eine App
     nutzen.
       100% Fokus
Du bist schuld
wenn 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 Layout
Im Kontrast zum herkömmlichen UINavigation-Pattern
Fastest Browsing
    Possible
   Und man weiss immer, wo man ist.
Inspiration
Mehr Nutzen, Weniger Interface
Du weisst am Anfang
 nicht, was am Ende
     rauskommt.
Die Idee im Kopf
Ebene 1
Ebene 2
Ebene 3
Ebene 1




Ebene 2
Ebene 3
Ebene 1




Ebene 2




Ebene 3
Ebene 1



Ebene 2




Ebene 3
Analogien?
  Mentales Modell!
Die Idee mit
 Mechanik
verknüpfen.
Teilausschnitte
   abbildbar
      Juhu!
Ebene 1




Ebene 2




Ebene 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

Weitere ähnliche Inhalte

Andere mochten auch

La Celula Ok
La Celula OkLa Celula Ok
La Celula Ok
Moreliano780
 
Im sem abschlusspraesentation
Im sem abschlusspraesentationIm sem abschlusspraesentation
Im sem abschlusspraesentation
ICV
 
No estas solo
No estas soloNo estas solo
No estas solo
soyborderline.com
 
Planificación educativa
Planificación educativaPlanificación educativa
Planificación educativa
MPPE
 
Roger penrose la mente nueva del emperador
Roger penrose   la mente nueva del emperadorRoger penrose   la mente nueva del emperador
Roger penrose la mente nueva del emperador
Glenda1961
 
Ing rene
Ing reneIng rene
Ing rene
MARTHA VELEZ
 
Trabajo practico de redes
Trabajo practico de redesTrabajo practico de redes
Trabajo practico de redes
majochiessa
 
El rottweiler
El rottweilerEl rottweiler
El rottweiler
MaySt
 
La muerte1
La muerte1La muerte1
La muerte1
bernal27
 
Crowdfunding Einführung
Crowdfunding EinführungCrowdfunding Einführung
Crowdfunding Einführung
Dennis Schenkel
 
Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?
Bogo Vatovec
 
Mezquita de Córdoba
Mezquita de CórdobaMezquita de Córdoba
Mezquita de Córdoba
dbrunosan
 
UBAS
UBASUBAS
UBAS
Marcela
 
Gibran yloshijos
Gibran yloshijosGibran yloshijos
Gibran yloshijos
bernal27
 
Intro
IntroIntro
Como transformar mi marca en icono
Como transformar mi marca en iconoComo transformar mi marca en icono
Como transformar mi marca en icono
sabbyval
 
TECNOLOGIA
TECNOLOGIATECNOLOGIA
Examen i unidad
Examen i unidadExamen i unidad
Examen i unidad
eminfo
 
Corduba (Córdoba)
Corduba (Córdoba)Corduba (Córdoba)

Andere mochten auch (20)

La Celula Ok
La Celula OkLa Celula Ok
La Celula Ok
 
Im sem abschlusspraesentation
Im sem abschlusspraesentationIm sem abschlusspraesentation
Im sem abschlusspraesentation
 
No estas solo
No estas soloNo estas solo
No estas solo
 
Planificación educativa
Planificación educativaPlanificación educativa
Planificación educativa
 
Roger penrose la mente nueva del emperador
Roger penrose   la mente nueva del emperadorRoger penrose   la mente nueva del emperador
Roger penrose la mente nueva del emperador
 
Ing rene
Ing reneIng rene
Ing rene
 
Trabajo practico de redes
Trabajo practico de redesTrabajo practico de redes
Trabajo practico de redes
 
El rottweiler
El rottweilerEl rottweiler
El rottweiler
 
La muerte1
La muerte1La muerte1
La muerte1
 
Crowdfunding Einführung
Crowdfunding EinführungCrowdfunding Einführung
Crowdfunding Einführung
 
Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?
 
Mezquita de Córdoba
Mezquita de CórdobaMezquita de Córdoba
Mezquita de Córdoba
 
UBAS
UBASUBAS
UBAS
 
Gibran yloshijos
Gibran yloshijosGibran yloshijos
Gibran yloshijos
 
Intro
IntroIntro
Intro
 
Como transformar mi marca en icono
Como transformar mi marca en iconoComo transformar mi marca en icono
Como transformar mi marca en icono
 
TECNOLOGIA
TECNOLOGIATECNOLOGIA
TECNOLOGIA
 
Examen i unidad
Examen i unidadExamen i unidad
Examen i unidad
 
My pdf
My pdfMy pdf
My pdf
 
Corduba (Córdoba)
Corduba (Córdoba)Corduba (Córdoba)
Corduba (Córdoba)
 

Ähnlich wie Mehr Nutzen, Weniger Interface

design
designdesign
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
 
Mobile Apps für Designer
Mobile Apps für DesignerMobile Apps für Designer
Mobile Apps für Designer
bowstreet
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Christoph Mühlbauer
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
Nina Rebele
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Webmontag MRN
 
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
Unic
 
Usability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
Usability / Designtrends in Kommunalen Internetportalen - Nicole ArmbrusterUsability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
Usability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
City & Bits GmbH
 
Low Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid BenutzerzentraleLow Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Patric Schmid
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
Alexander Beck
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
Peter Rozek
 
Über das U im UX
Über das U im UXÜber das U im UX
Über das U im UX
Reto Laemmler
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
SteffenHeim
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
digiparden GmbH
 
UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
UxHH Talk - Der Weg zu barrierefreien Apps durch UX DesignUxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
fwippich
 
USEEDS° :: Customer Journey Maps
USEEDS° :: Customer Journey MapsUSEEDS° :: Customer Journey Maps
USEEDS° :: Customer Journey Maps
USEEDS GmbH
 
Einführung in Paper Prototyping
Einführung in Paper PrototypingEinführung in Paper Prototyping
Einführung in Paper Prototyping
Tobias Adam
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
eResult_GmbH
 
Xp days2010 agile-usabiltytoolbox
Xp days2010 agile-usabiltytoolboxXp days2010 agile-usabiltytoolbox
Xp days2010 agile-usabiltytoolbox
xpdaysgermany
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
Alexander Beck
 

Ähnlich wie Mehr Nutzen, Weniger Interface (20)

design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Mobile Apps für Designer
Mobile Apps für DesignerMobile Apps für Designer
Mobile Apps für Designer
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
 
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
 
Usability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
Usability / Designtrends in Kommunalen Internetportalen - Nicole ArmbrusterUsability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
Usability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
 
Low Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid BenutzerzentraleLow Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Über das U im UX
Über das U im UXÜber das U im UX
Über das U im UX
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
UxHH Talk - Der Weg zu barrierefreien Apps durch UX DesignUxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
 
USEEDS° :: Customer Journey Maps
USEEDS° :: Customer Journey MapsUSEEDS° :: Customer Journey Maps
USEEDS° :: Customer Journey Maps
 
Einführung in Paper Prototyping
Einführung in Paper PrototypingEinführung in Paper Prototyping
Einführung in Paper Prototyping
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
 
Xp days2010 agile-usabiltytoolbox
Xp days2010 agile-usabiltytoolboxXp days2010 agile-usabiltytoolbox
Xp days2010 agile-usabiltytoolbox
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
 

Mehr Nutzen, Weniger Interface