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


Idee Anforderunge

n






hl


g

Evaluation

Kontext


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“



KontextIdee Anforderunge

n





g

Evaluation


hl



Idee Anforderunge

n





Kontext StrategieEndgeräteauswa

hlEvaluatio

n


g


“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


Idee Anforderunge

n





Kontext StrategieEndgeräteauswa

hl


g

Evaluation


Danke für die Aufmerksamkeit

Christoph MühlbauerUser Experience Consultant

MAIL: [email protected]: www.pixelmuehle.euXING: www.xing.com/profile/Christoph_Muehlbauer2

Fragen?

mobile user experience: entwicklung von benutzerfreundlichen mobilen websites und applikationen

Technology