SlideShare ist ein Scribd-Unternehmen logo
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
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
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”
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 Modell
Ein 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 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”
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”
“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/6a00d83451c7b569e201310f4c6f439
Grundlegendes Problem
Ich bekomme immer erst eine Rückmeldung
wenn ich schon agiert habe!
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 ü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 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”
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?

Weitere ähnliche Inhalte

Was ist angesagt?

Mach Deinen Nutzer happy! Usability und UX
Mach Deinen Nutzer happy! Usability und UXMach Deinen Nutzer happy! Usability und UX
Mach Deinen Nutzer happy! Usability und UX
Astrid Beck
 
USEEDS° :: Customer Journey Maps
USEEDS° :: Customer Journey MapsUSEEDS° :: Customer Journey Maps
USEEDS° :: Customer Journey Maps
USEEDS GmbH
 
User Journey Mapping | barcamp Nürnberg 2016
User Journey Mapping | barcamp Nürnberg 2016 User Journey Mapping | barcamp Nürnberg 2016
User Journey Mapping | barcamp Nürnberg 2016
Robin Schreiner
 
Web Design Frankfurt
Web Design FrankfurtWeb Design Frankfurt
Web Design Frankfurt
jupiter development
 
Ethnographische Studien und Kontextinterviews bei eResult
Ethnographische Studien und Kontextinterviews bei eResultEthnographische Studien und Kontextinterviews bei eResult
Ethnographische Studien und Kontextinterviews bei eResult
eResult_GmbH
 
Mensch & Computer 2010 - Tutorial Agile UX
Mensch & Computer 2010 - Tutorial Agile UXMensch & Computer 2010 - Tutorial Agile UX
Mensch & Computer 2010 - Tutorial Agile UX
Hartmut Obendorf
 
UX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, PrototypingUX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, Prototyping
Maria Mory
 
AXE - Anticipated Experience Evaluation (deutsch)
AXE - Anticipated Experience Evaluation (deutsch)AXE - Anticipated Experience Evaluation (deutsch)
AXE - Anticipated Experience Evaluation (deutsch)
Barbara Wacht
 
Personas slideshow-eresult-08-2018-final
Personas slideshow-eresult-08-2018-finalPersonas slideshow-eresult-08-2018-final
Personas slideshow-eresult-08-2018-final
eResult_GmbH
 
KPIs vs. UX - Ist User Experience messbar?
KPIs vs. UX - Ist User Experience messbar?KPIs vs. UX - Ist User Experience messbar?
KPIs vs. UX - Ist User Experience messbar?
die firma . experience design GmbH
 
Product tank karlsruhe 2021 modern ux short
Product tank karlsruhe 2021 modern ux shortProduct tank karlsruhe 2021 modern ux short
Product tank karlsruhe 2021 modern ux short
Inken Petersen
 
Eresult user-feedback-days-2017
Eresult user-feedback-days-2017Eresult user-feedback-days-2017
Eresult user-feedback-days-2017
eResult_GmbH
 
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices Peter Rozek
 
Ihr Produkt als Dienstleister – Mit der Jobs To Be Done (JTBD) Methode Kunden...
Ihr Produkt als Dienstleister – Mit der Jobs To Be Done (JTBD) Methode Kunden...Ihr Produkt als Dienstleister – Mit der Jobs To Be Done (JTBD) Methode Kunden...
Ihr Produkt als Dienstleister – Mit der Jobs To Be Done (JTBD) Methode Kunden...
die firma . experience design GmbH
 

Was ist angesagt? (14)

Mach Deinen Nutzer happy! Usability und UX
Mach Deinen Nutzer happy! Usability und UXMach Deinen Nutzer happy! Usability und UX
Mach Deinen Nutzer happy! Usability und UX
 
USEEDS° :: Customer Journey Maps
USEEDS° :: Customer Journey MapsUSEEDS° :: Customer Journey Maps
USEEDS° :: Customer Journey Maps
 
User Journey Mapping | barcamp Nürnberg 2016
User Journey Mapping | barcamp Nürnberg 2016 User Journey Mapping | barcamp Nürnberg 2016
User Journey Mapping | barcamp Nürnberg 2016
 
Web Design Frankfurt
Web Design FrankfurtWeb Design Frankfurt
Web Design Frankfurt
 
Ethnographische Studien und Kontextinterviews bei eResult
Ethnographische Studien und Kontextinterviews bei eResultEthnographische Studien und Kontextinterviews bei eResult
Ethnographische Studien und Kontextinterviews bei eResult
 
Mensch & Computer 2010 - Tutorial Agile UX
Mensch & Computer 2010 - Tutorial Agile UXMensch & Computer 2010 - Tutorial Agile UX
Mensch & Computer 2010 - Tutorial Agile UX
 
UX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, PrototypingUX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, Prototyping
 
AXE - Anticipated Experience Evaluation (deutsch)
AXE - Anticipated Experience Evaluation (deutsch)AXE - Anticipated Experience Evaluation (deutsch)
AXE - Anticipated Experience Evaluation (deutsch)
 
Personas slideshow-eresult-08-2018-final
Personas slideshow-eresult-08-2018-finalPersonas slideshow-eresult-08-2018-final
Personas slideshow-eresult-08-2018-final
 
KPIs vs. UX - Ist User Experience messbar?
KPIs vs. UX - Ist User Experience messbar?KPIs vs. UX - Ist User Experience messbar?
KPIs vs. UX - Ist User Experience messbar?
 
Product tank karlsruhe 2021 modern ux short
Product tank karlsruhe 2021 modern ux shortProduct tank karlsruhe 2021 modern ux short
Product tank karlsruhe 2021 modern ux short
 
Eresult user-feedback-days-2017
Eresult user-feedback-days-2017Eresult user-feedback-days-2017
Eresult user-feedback-days-2017
 
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
 
Ihr Produkt als Dienstleister – Mit der Jobs To Be Done (JTBD) Methode Kunden...
Ihr Produkt als Dienstleister – Mit der Jobs To Be Done (JTBD) Methode Kunden...Ihr Produkt als Dienstleister – Mit der Jobs To Be Done (JTBD) Methode Kunden...
Ihr Produkt als Dienstleister – Mit der Jobs To Be Done (JTBD) Methode Kunden...
 

Andere mochten auch

Modelos+pedagógicos [autoguardado]
Modelos+pedagógicos [autoguardado]Modelos+pedagógicos [autoguardado]
Modelos+pedagógicos [autoguardado]
Rafa Tó
 
La definición y clases de soportes, definición y aspectos legales de los li...
La definición y clases de soportes, definición y aspectos legales de los li...La definición y clases de soportes, definición y aspectos legales de los li...
La definición y clases de soportes, definición y aspectos legales de los li...
INOCENCIO MELÉNDEZ JULIO
 
Capa de enlace y capa de la red
Capa de enlace y capa de la redCapa de enlace y capa de la red
Capa de enlace y capa de la red
deivid20267714
 
Tics en educacion_infantil
Tics en educacion_infantilTics en educacion_infantil
Tics en educacion_infantil
Germán Lopez-Rey Fortuna
 
Inocencio melendez julio. cuenta, balnce general y estado de resultados
Inocencio melendez julio. cuenta, balnce general y estado de resultadosInocencio melendez julio. cuenta, balnce general y estado de resultados
Inocencio melendez julio. cuenta, balnce general y estado de resultados
INOCENCIO MELÉNDEZ JULIO
 
Fundación María Ecuménica, actividades del año 2014
Fundación María Ecuménica, actividades del año 2014Fundación María Ecuménica, actividades del año 2014
Fundación María Ecuménica, actividades del año 2014
Enrique Rojas
 
Inocencio meléndez julio. cuenta, balance general y estado de resultados. in...
Inocencio meléndez julio. cuenta, balance general y estado de resultados. in...Inocencio meléndez julio. cuenta, balance general y estado de resultados. in...
Inocencio meléndez julio. cuenta, balance general y estado de resultados. in...
INOCENCIO MELÉNDEZ JULIO
 
Inocencio meléndez julio. contratación y gestión. la comprensión y desarr...
Inocencio meléndez julio. contratación y gestión. la comprensión y desarr...Inocencio meléndez julio. contratación y gestión. la comprensión y desarr...
Inocencio meléndez julio. contratación y gestión. la comprensión y desarr...
INOCENCIO MELÉNDEZ JULIO
 
Komplementärwährungen zur kooperativen Regionalentwicklung
Komplementärwährungen zur kooperativen RegionalentwicklungKomplementärwährungen zur kooperativen Regionalentwicklung
Komplementärwährungen zur kooperativen RegionalentwicklungSocialbar Stuttgart
 
Emilio
EmilioEmilio
TIPOS DE DROGAS
TIPOS DE DROGASTIPOS DE DROGAS
TIPOS DE DROGAS
Walter Calderon
 
Workshop
WorkshopWorkshop
Los animales
Los animalesLos animales
Los animales
GRIMA45
 
Grant Thornton | Doing business in Poland 2015 (DE)
Grant Thornton | Doing business in Poland 2015 (DE)Grant Thornton | Doing business in Poland 2015 (DE)
Grant Thornton | Doing business in Poland 2015 (DE)
Grant Thornton
 
Scratch - nociones
Scratch - nocionesScratch - nociones
Scratch - nociones
Fredi Villalba
 
Literatura medieval
Literatura medievalLiteratura medieval
Literatura medieval
Cosmehorno
 
BTEXX Fachartikel: UCD – Formel für bessere Intranets?
BTEXX Fachartikel: UCD – Formel für bessere Intranets?BTEXX Fachartikel: UCD – Formel für bessere Intranets?
BTEXX Fachartikel: UCD – Formel für bessere Intranets?
BTEXX GmbH
 
gold im Juli - DAS STAR-MAGAZIN
gold im Juli - DAS STAR-MAGAZINgold im Juli - DAS STAR-MAGAZIN
gold im Juli - DAS STAR-MAGAZIN
Netto_Blogger
 
Hormiga feliz (trabajo)
Hormiga feliz (trabajo)Hormiga feliz (trabajo)
Hormiga feliz (trabajo)
Victor206
 

Andere mochten auch (20)

Modelos+pedagógicos [autoguardado]
Modelos+pedagógicos [autoguardado]Modelos+pedagógicos [autoguardado]
Modelos+pedagógicos [autoguardado]
 
La definición y clases de soportes, definición y aspectos legales de los li...
La definición y clases de soportes, definición y aspectos legales de los li...La definición y clases de soportes, definición y aspectos legales de los li...
La definición y clases de soportes, definición y aspectos legales de los li...
 
Capa de enlace y capa de la red
Capa de enlace y capa de la redCapa de enlace y capa de la red
Capa de enlace y capa de la red
 
Tics en educacion_infantil
Tics en educacion_infantilTics en educacion_infantil
Tics en educacion_infantil
 
Inocencio melendez julio. cuenta, balnce general y estado de resultados
Inocencio melendez julio. cuenta, balnce general y estado de resultadosInocencio melendez julio. cuenta, balnce general y estado de resultados
Inocencio melendez julio. cuenta, balnce general y estado de resultados
 
Fundación María Ecuménica, actividades del año 2014
Fundación María Ecuménica, actividades del año 2014Fundación María Ecuménica, actividades del año 2014
Fundación María Ecuménica, actividades del año 2014
 
Inocencio meléndez julio. cuenta, balance general y estado de resultados. in...
Inocencio meléndez julio. cuenta, balance general y estado de resultados. in...Inocencio meléndez julio. cuenta, balance general y estado de resultados. in...
Inocencio meléndez julio. cuenta, balance general y estado de resultados. in...
 
Inocencio meléndez julio. contratación y gestión. la comprensión y desarr...
Inocencio meléndez julio. contratación y gestión. la comprensión y desarr...Inocencio meléndez julio. contratación y gestión. la comprensión y desarr...
Inocencio meléndez julio. contratación y gestión. la comprensión y desarr...
 
Komplementärwährungen zur kooperativen Regionalentwicklung
Komplementärwährungen zur kooperativen RegionalentwicklungKomplementärwährungen zur kooperativen Regionalentwicklung
Komplementärwährungen zur kooperativen Regionalentwicklung
 
September
SeptemberSeptember
September
 
Emilio
EmilioEmilio
Emilio
 
TIPOS DE DROGAS
TIPOS DE DROGASTIPOS DE DROGAS
TIPOS DE DROGAS
 
Workshop
WorkshopWorkshop
Workshop
 
Los animales
Los animalesLos animales
Los animales
 
Grant Thornton | Doing business in Poland 2015 (DE)
Grant Thornton | Doing business in Poland 2015 (DE)Grant Thornton | Doing business in Poland 2015 (DE)
Grant Thornton | Doing business in Poland 2015 (DE)
 
Scratch - nociones
Scratch - nocionesScratch - nociones
Scratch - nociones
 
Literatura medieval
Literatura medievalLiteratura medieval
Literatura medieval
 
BTEXX Fachartikel: UCD – Formel für bessere Intranets?
BTEXX Fachartikel: UCD – Formel für bessere Intranets?BTEXX Fachartikel: UCD – Formel für bessere Intranets?
BTEXX Fachartikel: UCD – Formel für bessere Intranets?
 
gold im Juli - DAS STAR-MAGAZIN
gold im Juli - DAS STAR-MAGAZINgold im Juli - DAS STAR-MAGAZIN
gold im Juli - DAS STAR-MAGAZIN
 
Hormiga feliz (trabajo)
Hormiga feliz (trabajo)Hormiga feliz (trabajo)
Hormiga feliz (trabajo)
 

Ähnlich wie Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites und Applikationen

IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
Alexander Beck
 
Einführung in User Experience Design
Einführung in User Experience DesignEinführung in User Experience Design
Einführung in User Experience Designchmoser79
 
Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog...
 Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog... Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog...
Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog...
Martin Blenkle
 
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Robert Weller
 
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo GmbH
 
Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)
Stefan Freimark
 
User xperience entsteht nicht durch Zufall
User xperience entsteht nicht durch ZufallUser xperience entsteht nicht durch Zufall
User xperience entsteht nicht durch ZufallDaniel Muther
 
etailment WIEN 2015 - Mirjam Techt (willhaben.at) "Mobile Commerce"
etailment WIEN 2015 - Mirjam Techt (willhaben.at) "Mobile Commerce"etailment WIEN 2015 - Mirjam Techt (willhaben.at) "Mobile Commerce"
etailment WIEN 2015 - Mirjam Techt (willhaben.at) "Mobile Commerce"
Werbeplanung.at Summit
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
Alexander Beck
 
Usability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessUsability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im Entwicklungsprozess
Immacon
 
developer-experience.pdf
developer-experience.pdfdeveloper-experience.pdf
developer-experience.pdf
Konrad Ferdinand Heimel
 
"Ich sehe was, was du nicht siehst" - Wie Live User Tracking das wahre Nutze...
"Ich sehe was, was du nicht siehst" -  Wie Live User Tracking das wahre Nutze..."Ich sehe was, was du nicht siehst" -  Wie Live User Tracking das wahre Nutze...
"Ich sehe was, was du nicht siehst" - Wie Live User Tracking das wahre Nutze...
m-pathy GmbH
 
Guided Navigation (Faceted Search)
Guided Navigation (Faceted Search)Guided Navigation (Faceted Search)
Guided Navigation (Faceted Search)
Walter Schärer
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines Concepters
uxHH
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
Nina Rebele
 
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
 
SEO + UX = Search Experience Optimization (SXO) - webinale 2016
SEO + UX = Search Experience Optimization (SXO) - webinale 2016SEO + UX = Search Experience Optimization (SXO) - webinale 2016
SEO + UX = Search Experience Optimization (SXO) - webinale 2016
André Scharf
 
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger InterfaceMehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Moritz Haarmann
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk innovationsagentur
 
design
designdesign

Ähnlich wie Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites und Applikationen (20)

IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
Einführung in User Experience Design
Einführung in User Experience DesignEinführung in User Experience Design
Einführung in User Experience Design
 
Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog...
 Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog... Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog...
Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog...
 
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
 
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
 
Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)
 
User xperience entsteht nicht durch Zufall
User xperience entsteht nicht durch ZufallUser xperience entsteht nicht durch Zufall
User xperience entsteht nicht durch Zufall
 
etailment WIEN 2015 - Mirjam Techt (willhaben.at) "Mobile Commerce"
etailment WIEN 2015 - Mirjam Techt (willhaben.at) "Mobile Commerce"etailment WIEN 2015 - Mirjam Techt (willhaben.at) "Mobile Commerce"
etailment WIEN 2015 - Mirjam Techt (willhaben.at) "Mobile Commerce"
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
 
Usability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessUsability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im Entwicklungsprozess
 
developer-experience.pdf
developer-experience.pdfdeveloper-experience.pdf
developer-experience.pdf
 
"Ich sehe was, was du nicht siehst" - Wie Live User Tracking das wahre Nutze...
"Ich sehe was, was du nicht siehst" -  Wie Live User Tracking das wahre Nutze..."Ich sehe was, was du nicht siehst" -  Wie Live User Tracking das wahre Nutze...
"Ich sehe was, was du nicht siehst" - Wie Live User Tracking das wahre Nutze...
 
Guided Navigation (Faceted Search)
Guided Navigation (Faceted Search)Guided Navigation (Faceted Search)
Guided Navigation (Faceted Search)
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines Concepters
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
 
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
 
SEO + UX = Search Experience Optimization (SXO) - webinale 2016
SEO + UX = Search Experience Optimization (SXO) - webinale 2016SEO + UX = Search Experience Optimization (SXO) - webinale 2016
SEO + UX = Search Experience Optimization (SXO) - webinale 2016
 
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger InterfaceMehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
design
designdesign
design
 

Mehr von usability.de

IA Konferenz 2018 | Das Prototypen-Dilemma
IA Konferenz 2018 | Das Prototypen-DilemmaIA Konferenz 2018 | Das Prototypen-Dilemma
IA Konferenz 2018 | Das Prototypen-Dilemma
usability.de
 
Prototyping Conversations | Mit nutzerzentrierten Methoden zum Conversational...
Prototyping Conversations | Mit nutzerzentrierten Methoden zum Conversational...Prototyping Conversations | Mit nutzerzentrierten Methoden zum Conversational...
Prototyping Conversations | Mit nutzerzentrierten Methoden zum Conversational...
usability.de
 
Überall und Jederzeit: Die Recherche in den Beständen der Technischen Informa...
Überall und Jederzeit: Die Recherche in den Beständen der Technischen Informa...Überall und Jederzeit: Die Recherche in den Beständen der Technischen Informa...
Überall und Jederzeit: Die Recherche in den Beständen der Technischen Informa...
usability.de
 
Usability trifft IT-Sicherheit: Eine besondere Herausforderung für mobile Bus...
Usability trifft IT-Sicherheit: Eine besondere Herausforderung für mobile Bus...Usability trifft IT-Sicherheit: Eine besondere Herausforderung für mobile Bus...
Usability trifft IT-Sicherheit: Eine besondere Herausforderung für mobile Bus...
usability.de
 
"Wo guckst Du?" - Blickverlaufsmessung in mobilen Kontexten
"Wo guckst Du?" - Blickverlaufsmessung in mobilen Kontexten"Wo guckst Du?" - Blickverlaufsmessung in mobilen Kontexten
"Wo guckst Du?" - Blickverlaufsmessung in mobilen Kontexten
usability.de
 
Die mobile Zukunft. Neuheiten und aktuelle Trends rund um mobile Endgeräte un...
Die mobile Zukunft. Neuheiten und aktuelle Trends rund um mobile Endgeräte un...Die mobile Zukunft. Neuheiten und aktuelle Trends rund um mobile Endgeräte un...
Die mobile Zukunft. Neuheiten und aktuelle Trends rund um mobile Endgeräte un...
usability.de
 

Mehr von usability.de (6)

IA Konferenz 2018 | Das Prototypen-Dilemma
IA Konferenz 2018 | Das Prototypen-DilemmaIA Konferenz 2018 | Das Prototypen-Dilemma
IA Konferenz 2018 | Das Prototypen-Dilemma
 
Prototyping Conversations | Mit nutzerzentrierten Methoden zum Conversational...
Prototyping Conversations | Mit nutzerzentrierten Methoden zum Conversational...Prototyping Conversations | Mit nutzerzentrierten Methoden zum Conversational...
Prototyping Conversations | Mit nutzerzentrierten Methoden zum Conversational...
 
Überall und Jederzeit: Die Recherche in den Beständen der Technischen Informa...
Überall und Jederzeit: Die Recherche in den Beständen der Technischen Informa...Überall und Jederzeit: Die Recherche in den Beständen der Technischen Informa...
Überall und Jederzeit: Die Recherche in den Beständen der Technischen Informa...
 
Usability trifft IT-Sicherheit: Eine besondere Herausforderung für mobile Bus...
Usability trifft IT-Sicherheit: Eine besondere Herausforderung für mobile Bus...Usability trifft IT-Sicherheit: Eine besondere Herausforderung für mobile Bus...
Usability trifft IT-Sicherheit: Eine besondere Herausforderung für mobile Bus...
 
"Wo guckst Du?" - Blickverlaufsmessung in mobilen Kontexten
"Wo guckst Du?" - Blickverlaufsmessung in mobilen Kontexten"Wo guckst Du?" - Blickverlaufsmessung in mobilen Kontexten
"Wo guckst Du?" - Blickverlaufsmessung in mobilen Kontexten
 
Die mobile Zukunft. Neuheiten und aktuelle Trends rund um mobile Endgeräte un...
Die mobile Zukunft. Neuheiten und aktuelle Trends rund um mobile Endgeräte un...Die mobile Zukunft. Neuheiten und aktuelle Trends rund um mobile Endgeräte un...
Die mobile Zukunft. Neuheiten und aktuelle Trends rund um mobile Endgeräte un...
 

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 EvaluationKontext 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
  • 10. Problem: Nutzer besitzen noch kein “mentales Modell” des Systems Context „C“
  • 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!
  • 18. stationärer Webauftritt native App Frage Konventionelle Website konvertieren oder neu erschaffen? Layout Kontext
  • 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?

Hinweis der Redaktion

  1. Vorstellung
  2. Kontext: Zusammenhang von Beziehungen, die zwischen miteinander verbundenen Teilen bestehen!
  3. 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
  4. 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.
  5. 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
  6. Beispiel für physikalischen Kontext
  7. Bedeutungszuweisung: Kamera wird verwendet um Fotos zu machen – anderer verwendet Kamera zum Scannen von Belegen
  8. - Informationsarchitektur ist das Skelette der Anwendung und hält alles zusammen.
  9. - Kontext berücksichtigen
  10. Hier helfen Tools/Schablonen die es für nahezu jedes System gibt.