Mobile User Experience
Entwicklung benutzerfreundlicher mobiler Websites und Applikationen
Christoph Mühlbauer
User Experi...
Planungsprozess “mobile”
Tolle Idee und
Basisanforderungen
der Zielgruppe.
Die Umgebung in
der die Anwendung
um das „gewis...
Die Umgebung in
der die Anwendung
um das „gewisse
Extra“ bereichert
wird.
Idee
Anforderungen
Tolle Idee und
Basisanforderu...
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 Informations...
Kontextunterscheidung
Context „c“
Die Umgebung, das Medium oder ein Gegenstand.
 Momentaner Standort (physical context)
...
Context „c“
Der physikalische Kontext gibt vor, wie ich
Zugang zu Informationen bekomme und
daraus einen Mehrwert generier...
Context „C“
Das Verständnis über den Sachverhalt.
 Mentales Modell
Ein mentales Modell ist ein im Gedächtnis abgespeicher...
Problem: Nutzer besitzen noch kein
“mentales Modell” des Systems
Context „C“
Wie kann damit Geld
verdient werden und
welche Geräteklasse
berücksichtige ich?
Die Umgebung in
der die Anwendung
um das „...
Eine „user experience“
auf Grundlage von
Nutzeranforderungen
gestalten und entwickeln.
Idee
Anforderungen
Tolle Idee und
B...
“mobile Design” Elemente
„mobile“ ist ein neues Medium und dementsprechend
gelten (andere) Regeln als im traditionellen We...
“look and feel”
Was bedeutet das nun für den Designer?
 Muss einen durchgängigen „look“ erzeugen
 Einheitliche Buttons, ...
Einfachheit gewinnt
 Nutzer sucht einzig nach Infos, die zum aktuellen Interesse passen
 Alles was nicht das primäre Zie...
Informationsarchitektur
Tips
 So einfach wie möglich
 Nur „user goals“
Drei bis vier Navigationsebenen sind ausreichend...
Interaktion
„Ich drücke aber es tut sich nichts ?!“
Bsp.: Bilder sind hier ein großes Problem!
...wie verhalten sich diese...
stationärer Webauftritt native App
Frage
Konventionelle Website konvertieren
oder neu erschaffen?
Layout
Kontext
 Wo auf der Seite muss die Navigation hin?
 Navigation oben und unten?
 Wie viele Elemente passen nebeneinander?
 Wie ...
Wichtig für Auswahl und Gestaltung der Typografie
unlesbar
muss gezoomt
werden
lesbar ohne zoomen
ist perfekt auf die Seit...
 Icons
 Hilfreich, um Ideen und Aktionen auf begrenzter Fläche zu präsentieren
 Bedeutung der Icons muss eindeutig erke...
Eine „user experience“
auf Grundlage von
Nutzeranforderungen
gestalten und entwickeln.
Idee
Anforderungen
Tolle Idee und
B...
Danke für die Aufmerksamkeit
Christoph Mühlbauer
User Experience Consultant
MAIL: cmuehlbauer@pixelmuehle.eu
WEB: www.pixe...
Upcoming SlideShare
Loading in...5
×

Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites und Applikationen

2,097

Published on

Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites und Applikationen
Mit dem iPhone hat Apple die mobile Internetnutzung massentauglich gemacht und dank Touch-Technologien wurden Inhalte greifbar. Um das mobile Internet zu etablieren, genügt es jedoch nicht, einfach den herkömmlichen, stationären Web-Auftritt auf ein Handy-Display zu projizieren. Der Bezug zur mobilen Nutzungssituation ist hierbei ein entscheidendes Kriterium. In diesem Vortrag erfahren Sie, wie Anwendungen für das mobile Internet optimiert werden müssen und wie der mobile Nutzer ins Zentrum aller Überlegungen gebracht wird.
Christoph Mühlbauer (Human-Computer-Interaction, Universität Siegen)

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,097
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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.
  • Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites und Applikationen

    1. 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. 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. 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 EvaluationKontext Planungsprozess “mobile”
    4. 4. Kontext-Framework
    5. 5. Quelle: http://www.google.de/imghp?hl=de&tab=wi Typische Nutzungskontexte
    6. 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. 7. Kontextunterscheidung Context „c“ Die Umgebung, das Medium oder ein Gegenstand.  Momentaner Standort (physical context)  Zugang zu Informationen (media context)  Befinden (modal context)
    8. 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. 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
    10. 10. Problem: Nutzer besitzen noch kein “mentales Modell” des Systems Context „C“
    11. 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. 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. 13. “mobile Design” Elemente „mobile“ ist ein neues Medium und dementsprechend gelten (andere) Regeln als im traditionellen Web! Quelle: aboutpixel.de/Kreuzung
    14. 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. 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. 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. 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!
    18. 18. stationärer Webauftritt native App Frage Konventionelle Website konvertieren oder neu erschaffen? Layout Kontext
    19. 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. 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. 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. 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. 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?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×