Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Websites und Applikationen.
1. Mobile User Experience
Entwicklung benutzerfreundlicher mobiler Websites und Applikationen
Christoph Mühlbauer
User Experience Consultant
Hannover, 11.11.2010
Quelle: http://www.n24.de/media/_fotos/bildergalerien/002010/ipad_games/ipad1.jpg
2. Planungsprozess “mobile”
Tolle Idee und
Basisanforderungen
der Zielgruppe.
Die Umgebung in
der die Anwendung
um das „gewisse
Extra“ bereichert
wird.
Kontext
Wie kann damit Geld
verdient werden und
welche Geräteklasse
berücksichtige ich?
Eine „user experience“
auf Grundlage von
Nutzeranforderungen
gestalten und entwickeln.
Testen, testen, testen
und optimieren!
Strategie
Endgeräteauswahl
UX Design
Prototyping
Entwicklung
Evaluation
Idee
Anforderungen
3. Die Umgebung in
der die Anwendung
um das „gewisse
Extra“ bereichert
wird.
Idee
Anforderungen
Tolle Idee und
Basisanforderungen
der Zielgruppe.
Wie kann damit Geld
verdient werden und
welche Geräteklasse
berücksichtige ich?
Eine „user experience“
auf Grundlage von
Nutzeranforderungen
gestalten und entwickeln.
Testen, testen, testen
und optimieren!
Strategie
Endgeräteauswahl
UX Design
Prototyping
Entwicklung
Evaluation
Kontext
Planungsprozess “mobile”
6. Rund 72 % der Informationsbedürfnisse entstehen
aus dem Nutzungskontext heraus.
Aber nur etwa ein Drittel des Informationsbedarfs
wird durch das mobile Web gedeckt.
- Studie „A Diary Study of Mobile Information Needs”
7. Kontextunterscheidung
Context „c“
Die Umgebung, das Medium oder ein Gegenstand.
Momentaner Standort (physical context)
Zugang zu Informationen (media context)
Befinden (modal context)
8. Context „c“
Der physikalische Kontext gibt vor, wie ich
Zugang zu Informationen bekomme und
daraus einen Mehrwert generieren kann.
Quelle: http://orweblog.oclc.org/layar.jpg
9. Context „C“
Das Verständnis über den Sachverhalt.
Mentales Modell
Ein mentales Modell ist ein im Gedächtnis abgespeichertes Abbild eines
komplexen Prozesses in einer reduzierten und abstrahierten Form.
Bedeutungszuweisung
Kontextunterscheidung
11. Wie kann damit Geld
verdient werden und
welche Geräteklasse
berücksichtige ich?
Die Umgebung in
der die Anwendung
um das „gewisse
Extra“ bereichert
wird.
Kontext
Idee
Anforderungen
Tolle Idee und
Basisanforderungen
der Zielgruppe.
Eine „user experience“
auf Grundlage von
Nutzeranforderungen
gestalten und entwickeln.
Testen, testen, testen
und optimieren!
UX Design
Prototyping
Entwicklung
Evaluation
Strategie
Endgeräteauswahl
Planungsprozess “mobile”
12. Eine „user experience“
auf Grundlage von
Nutzeranforderungen
gestalten und entwickeln.
Idee
Anforderungen
Tolle Idee und
Basisanforderungen
der Zielgruppe.
Die Umgebung in
der die Anwendung
um das „gewisse
Extra“ bereichert
wird.
Wie kann damit Geld
verdient werden und
welche Geräteklasse
berücksichtige ich?
Testen, testen, testen
und optimieren!
Kontext
Strategie
Endgeräteauswahl Evaluation
UX Design
Prototyping
Entwicklung
Planungsprozess “mobile”
13. “mobile Design” Elemente
„mobile“ ist ein neues Medium und dementsprechend
gelten (andere) Regeln als im traditionellen Web!
Quelle: aboutpixel.de/Kreuzung
14. “look and feel”
Was bedeutet das nun für den Designer?
Muss einen durchgängigen „look“ erzeugen
Einheitliche Buttons, ähnliche visuelle Anmutung
Jedes Fragezeichen beim Nutzer bedeutet eine höhere kognitive Belastung
Reaktion Testperson:
TP 1: „Hat nichts mit der vorherigen Suche zu tun.
Hier bin ich falsch. Ist doch eine komplett
neue Suche!“
Negativ-Beispiel: Suchauftrag Immobiliensuche
15. Einfachheit gewinnt
Nutzer sucht einzig nach Infos, die zum aktuellen Interesse passen
Alles was nicht das primäre Ziel des Nutzers unterstützt, fliegt raus
Keine Inhalte verstecken
16. Informationsarchitektur
Tips
So einfach wie möglich
Nur „user goals“
Drei bis vier Navigationsebenen sind ausreichend
Möglichkeiten limitieren um Fehler zu vermeiden
Site Maps, Clickstreams helfen bei der Entwicklung
Entwickler muss sich fragen
Macht es Sinn gleiche Struktur zu benutzen?
Welche Art Navigation wird verwendet?
Wie navigiert der User zu anderen Bereichen?
Quelle: http://lilianatroy.com/lilianatroy/wp-content/themes/lt/images/mobile_web2.png
17. Interaktion
„Ich drücke aber es tut sich nichts ?!“
Bsp.: Bilder sind hier ein großes Problem!
...wie verhalten sich diese bei einem Klick?
Vergrößern sich
Drehen sich um Informationen auf der Rückseite zu zeigen
Der User gelangt in eine Bildergalerie
Problem: fehlendes „Mentales Modell“
Fragen die ich mir als Entwickler stellen sollte
Wie schaffe ich es, das der Finger keine wichtigen Inhalte verdeckt?
Finger ist weniger akkurat als ein Mauszeiger! Problem?
Wie schaff ich es, nicht immer zwei Links gleichzeitig zu treffen?
Benötige ich für die Interaktion beide Hände? Wichtig für die Gestaltung.
Quelle: http://fscklog.typepad.com/.a/6a00d83451c7b569e201310f4c6f439
Grundlegendes Problem
Ich bekomme immer erst eine Rückmeldung
wenn ich schon agiert habe!
19. Wo auf der Seite muss die Navigation hin?
Navigation oben und unten?
Wie viele Elemente passen nebeneinander?
Wie übersichtlich wirkt die Seite?
Wichtig: sehr detailiert gestalten
Layout
20. Wichtig für Auswahl und Gestaltung der Typografie
unlesbar
muss gezoomt
werden
lesbar ohne zoomen
ist perfekt auf die Seitenbreite angepasst
verschiedene Schrifttypen /-farben
helfen zur Orientierung
Typografie
Sehr kontrastreiche Schriftart verwenden (Außenbereiche)
Die richtige Schriftart verwenden (Navigation vs. Fließtext)
Ausreichender Zeilenabstand
Verschiedene Schriftfarben können helfen, die Orientierung zu behalten
stationärer Webauftritt native App
21. Icons
Hilfreich, um Ideen und Aktionen auf begrenzter Fläche zu präsentieren
Bedeutung der Icons muss eindeutig erkennbar sein
Reaktion Testperson:
TP 1: „Hat die Wohnung einen Briefkasten?“
TP 2: „RSS verbinde ich immer mit Orange!“
Grafiken
Wie setzte ich Grafiken richtig ein?
Grafiken sind wichtig für das visuelle Erscheinen – nur Text zu „unsexy“
Grafiken müssen das „look & feel“ unterstützen
Für eine stimmige Nutzererfahrung muss sich der Designer an den Style-Guidelines der
Hersteller orientieren
22. Eine „user experience“
auf Grundlage von
Nutzeranforderungen
gestalten und entwickeln.
Idee
Anforderungen
Tolle Idee und
Basisanforderungen
der Zielgruppe.
Die Umgebung in
der die Anwendung
um das „gewisse
Extra“ bereichert
wird.
Wie kann damit Geld
verdient werden und
welche Geräteklasse
berücksichtige ich?
Testen, testen, testen
und optimieren!
Kontext
Strategie
Endgeräteauswahl
UX Design
Prototyping
Entwicklung
Evaluation
Planungsprozess “mobile”
23. Danke für die Aufmerksamkeit
Christoph Mühlbauer
User Experience Consultant
MAIL: cmuehlbauer@pixelmuehle.eu
WEB: www.pixelmuehle.eu
XING: www.xing.com/profile/Christoph_Muehlbauer2
Fragen?
Notas do Editor
Vorstellung
Kontext: Zusammenhang von Beziehungen, die zwischen miteinander verbundenen Teilen bestehen!
Menschen die in Netzwerken die Umgebung beeinflussen können
Gebäude die Informationen liefern
Dinge die Informationen verändern und beeinflussen können
Ich mitten drinnen
Überleitung:
- Im folgenden sieht man nun einige Nutzungssituationen
Es ist deshalb so wichtig Kontext im Bereich Mobile zu verstehen, da 72% der...
- Viele Informationen werden lieber telefonisch erfragt, oder es wird sich anderweitig beholfen.
- Der mobile Netzzugang wird derzeit nicht als alleinige Lösung, sondern nur als Option angesehen. Ob er zum Einsatz kommt entscheidet der Nutzer anhand einer schnellen gedanklichen Kosten-Nutzer Analyse.
Kontext kann in zwei Kategorien aufgeteilt werden:
Context c bezieht sich eher auf das Praktische und Sichtbare
Context C spielt sich eher auf der mentalen Ebene ab
Befinden: Befinden steuert unsere Aktionen, bewusst oder unbewusst. Größter Einfluss- bzw. Störfaktor
Beispiel für physikalischen Kontext
Bedeutungszuweisung:
Kamera wird verwendet um Fotos zu machen – anderer verwendet Kamera zum Scannen von Belegen
- Informationsarchitektur ist das Skelette der Anwendung und hält alles zusammen.
- Kontext berücksichtigen
Hier helfen Tools/Schablonen die es für nahezu jedes System gibt.