Download - Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites und Applikationen
Mobile User ExperienceEntwicklung benutzerfreundlicher mobiler Websites und Applikationen
Christoph MühlbauerUser Experience Consultant
Hannover, 11.11.2010
Quelle: http://www.n24.de/media/_fotos/bildergalerien/002010/ipad_games/ipad1.jpg
Planungsprozess “mobile”
Tolle Idee undBasisanforderungen der Zielgruppe.
Die Umgebung in der die Anwendungum das „gewisse Extra“ bereichert wird.
Kontext
Wie kann damit Geldverdient werden undwelche Geräteklasse berücksichtige ich?
Eine „user experience“auf Grundlage vonNutzeranforderungengestalten und entwickeln.
Testen, testen, testenund optimieren!
StrategieEndgeräteauswa
hl
UX DesignPrototypingEntwicklun
g
Evaluation
Idee Anforderunge
n
Die Umgebung in der die Anwendungum das „gewisse Extra“ bereichert wird.
Idee Anforderunge
n
Tolle Idee undBasisanforderungen der Zielgruppe.
Wie kann damit Geldverdient werden undwelche Geräteklasse berücksichtige ich?
Eine „user experience“auf Grundlage vonNutzeranforderungengestalten und entwickeln.
Testen, testen, testenund optimieren!
StrategieEndgeräteauswa
hl
UX DesignPrototypingEntwicklun
g
Evaluation
Kontext
Planungsprozess “mobile”
Kontext-Framework
Quelle: http://www.google.de/imghp?hl=de&tab=wi
Typische Nutzungskontexte
”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”
Kontextunterscheidung
Context „c“Die Umgebung, das Medium oder ein Gegenstand.
Momentaner Standort (physical context)
Zugang zu Informationen (media context)
Befinden (modal context)
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
Context „C“Das Verständnis über den Sachverhalt.
Mentales ModellEin mentales Modell ist ein im Gedächtnis abgespeichertes Abbild eines komplexen Prozesses in einer reduzierten und abstrahierten Form.
Bedeutungszuweisung
Kontextunterscheidung
Problem: Nutzer besitzen noch kein “mentales Modell” des Systems
Context „C“
Wie kann damit Geldverdient werden undwelche Geräteklasse berücksichtige ich?
Die Umgebung in der die Anwendungum das „gewisse Extra“ bereichert wird.
KontextIdee Anforderunge
n
Tolle Idee undBasisanforderungen der Zielgruppe.
Eine „user experience“auf Grundlage vonNutzeranforderungengestalten und entwickeln.
Testen, testen, testenund optimieren!
UX DesignPrototypingEntwicklun
g
Evaluation
StrategieEndgeräteauswa
hl
Planungsprozess “mobile”
Eine „user experience“auf Grundlage vonNutzeranforderungengestalten und entwickeln.
Idee Anforderunge
n
Tolle Idee undBasisanforderungen der Zielgruppe.
Die Umgebung in der die Anwendungum das „gewisse Extra“ bereichert wird.
Wie kann damit Geldverdient werden undwelche Geräteklasse berücksichtige ich?
Testen, testen, testenund optimieren!
Kontext StrategieEndgeräteauswa
hlEvaluatio
n
UX DesignPrototypingEntwicklun
g
Planungsprozess “mobile”
“mobile Design” Elemente„mobile“ ist ein neues Medium und dementsprechend gelten (andere) Regeln als im traditionellen Web!
Quelle: aboutpixel.de/Kreuzung
“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
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
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
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/6a00d83451c7b569e201310f4c6f43970c-pi
Grundlegendes ProblemIch bekomme immer erst eine Rückmeldung wenn ich schon agiert habe!
stationärer Webauftritt native App
FrageKonventionelle Website konvertieren oder neu erschaffen?
Layout
Kontext
Quelle: http://www.zdnet.de/i/news/201003/android-schablone-v6.png
Quelle http://www.geeky-gadgets.com/wp-content/uploads/2010/07/Android-
User-Interface-Stencil-Kit_2.jpg
Quelle: Mobile Design and Development,
Brina Fling
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
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
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
Eine „user experience“auf Grundlage vonNutzeranforderungengestalten und entwickeln.
Idee Anforderunge
n
Tolle Idee undBasisanforderungen der Zielgruppe.
Die Umgebung in der die Anwendungum das „gewisse Extra“ bereichert wird.
Wie kann damit Geldverdient werden undwelche Geräteklasse berücksichtige ich?
Testen, testen, testenund optimieren!
Kontext StrategieEndgeräteauswa
hl
UX DesignPrototypingEntwicklun
g
Evaluation
Planungsprozess “mobile”
Danke für die Aufmerksamkeit
Christoph MühlbauerUser Experience Consultant
MAIL: [email protected]: www.pixelmuehle.euXING: www.xing.com/profile/Christoph_Muehlbauer2
Fragen?