SlideShare ist ein Scribd-Unternehmen logo

User xperience entsteht nicht durch Zufall

1 von 79
Downloaden Sie, um offline zu lesen
User Experience 
Gute Produkte entstehen nicht durch Zufall 
CAS Mobile Business 
Daniel Muther 
12.09.2014
Ablauf des heutigen Nachmittags 
1 
2 
3 
Warum User Experience wichtig ist 
Grundlagen User Centered Design, 
Methodisches Vorgehen 
Design für Mobile
1 
Warum User Experience wichtig ist
Gute Produkte entstehen nicht durch Zufall 
Wie es heute abläuft 
Quellen: scottadams@aol.com
Was heisst „Easy to use“ oder „gute Usability“? 
Frage in die Runde: 
Welche App ist besser bezüglich Usability? 
Teletext App 
Blick Fussball 
Quellen: Apple iTunes Store
Die Antwort ist abhängig von verschiedenen Faktoren 
Die Frage kann so nicht beantwortet werden 
Harry Meier, Fussball-Fan: 
„Im Stadion möchte ich schnell auf einen Blick die Resultate aller Spiele sehen, ohne gross abgelenkt zu werden “ 
Pat Schneider, Student: 
„Wenn unterwegs bin, informiere ich mich gerne über das Gesamt-Geschehen im Schweizer Fussball “ 
Benutzern – Wer sind die Benutzer des Systems? 
 Den Aufgaben – Welche Aufgaben sollen damit erfüllt werden? 
 Dem Umfeld – In welcher Umgebung wird das System benutzt? 
Aufgabe: 
Resultatsübersicht der laufenden Fussballspiele anzeigen
Anzeige

Recomendados

IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011Alexander Beck
 
Anforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-DesignAnforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-Designsoultank AG
 
Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)denkwerk GmbH
 
Ebook250714 2
Ebook250714 2Ebook250714 2
Ebook250714 2Meami Chu
 
Grundlagen des Interaktionsdesigns: Human-Computer-Interaction
Grundlagen des Interaktionsdesigns: Human-Computer-InteractionGrundlagen des Interaktionsdesigns: Human-Computer-Interaction
Grundlagen des Interaktionsdesigns: Human-Computer-Interactionh1m
 
Usability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
Usability / Designtrends in Kommunalen Internetportalen - Nicole ArmbrusterUsability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
Usability / Designtrends in Kommunalen Internetportalen - Nicole ArmbrusterCity & Bits GmbH
 

Más contenido relacionado

Destacado

Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und EntwicklerWebdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und EntwicklerDaniela Wibbeke
 
Digitale Stadt - Christian Geiger
Digitale Stadt - Christian GeigerDigitale Stadt - Christian Geiger
Digitale Stadt - Christian GeigerCity & Bits GmbH
 
Second Life® Etikette
Second Life® EtiketteSecond Life® Etikette
Second Life® EtiketteAnnalyse
 
Universal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes InteraktionsdesignUniversal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes InteraktionsdesignSENSORY-MINDS
 
Designing usable web applications (part 1) experience dynamics web seminar
Designing usable web applications (part 1)  experience dynamics web seminarDesigning usable web applications (part 1)  experience dynamics web seminar
Designing usable web applications (part 1) experience dynamics web seminarExperience Dynamics
 

Destacado (6)

Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und EntwicklerWebdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
 
Digitale Stadt - Christian Geiger
Digitale Stadt - Christian GeigerDigitale Stadt - Christian Geiger
Digitale Stadt - Christian Geiger
 
Second Life® Etikette
Second Life® EtiketteSecond Life® Etikette
Second Life® Etikette
 
Universal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes InteraktionsdesignUniversal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes Interaktionsdesign
 
Mobile Produktentwicklung
Mobile ProduktentwicklungMobile Produktentwicklung
Mobile Produktentwicklung
 
Designing usable web applications (part 1) experience dynamics web seminar
Designing usable web applications (part 1)  experience dynamics web seminarDesigning usable web applications (part 1)  experience dynamics web seminar
Designing usable web applications (part 1) experience dynamics web seminar
 

Ähnlich wie User xperience entsteht nicht durch Zufall

eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo GmbH
 
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 BenutzerzentralePatric Schmid
 
"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
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Christoph Mühlbauer
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...usability.de
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Bokowsky + Laymann GmbH
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Bokowsky + Laymann GmbH
 
User Experience im Digital Banking
User Experience im Digital BankingUser Experience im Digital Banking
User Experience im Digital BankingJürg Stuker
 
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
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability EngineeringNina Rebele
 
Wie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
Wie Sie Mit Design Sprints Echten Digitalen Wandel SchaffenWie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
Wie Sie Mit Design Sprints Echten Digitalen Wandel SchaffeniTiZZiMO
 
Usability im online-marketing_wud_2010__e-lement
Usability im online-marketing_wud_2010__e-lementUsability im online-marketing_wud_2010__e-lement
Usability im online-marketing_wud_2010__e-lementLars Schoening
 
Wie funktioniert EinfacheUmfrage.de?
Wie funktioniert EinfacheUmfrage.de?Wie funktioniert EinfacheUmfrage.de?
Wie funktioniert EinfacheUmfrage.de?EinfacheUmfrage
 
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Bokowsky + Laymann GmbH
 
Wie Open APIs das Banking der Zukunft verändern (figo)
Wie Open APIs das Banking der Zukunft verändern (figo)Wie Open APIs das Banking der Zukunft verändern (figo)
Wie Open APIs das Banking der Zukunft verändern (figo)figo GmbH
 
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...Dieter Ziegler
 
[Mobile Usability Testing] Zahlen, Daten, Fakten Mobil - World Usability Day ...
[Mobile Usability Testing] Zahlen, Daten, Fakten Mobil - World Usability Day ...[Mobile Usability Testing] Zahlen, Daten, Fakten Mobil - World Usability Day ...
[Mobile Usability Testing] Zahlen, Daten, Fakten Mobil - World Usability Day ...UserZoom Deutschland
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Wolfram Nagel
 
Daniel Mark: Produktentwicklung bei My Hammer und die MyHammer iPhone App
Daniel Mark: Produktentwicklung bei My Hammer und die MyHammer iPhone AppDaniel Mark: Produktentwicklung bei My Hammer und die MyHammer iPhone App
Daniel Mark: Produktentwicklung bei My Hammer und die MyHammer iPhone AppMyHammer AG
 

Ähnlich wie User xperience entsteht nicht durch Zufall (20)

eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
 
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
 
"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...
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
 
User Experience im Digital Banking
User Experience im Digital BankingUser Experience im Digital Banking
User Experience im Digital Banking
 
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...
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
 
Wie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
Wie Sie Mit Design Sprints Echten Digitalen Wandel SchaffenWie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
Wie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
 
Usability im online-marketing_wud_2010__e-lement
Usability im online-marketing_wud_2010__e-lementUsability im online-marketing_wud_2010__e-lement
Usability im online-marketing_wud_2010__e-lement
 
Wie funktioniert EinfacheUmfrage.de?
Wie funktioniert EinfacheUmfrage.de?Wie funktioniert EinfacheUmfrage.de?
Wie funktioniert EinfacheUmfrage.de?
 
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
 
Wie Open APIs das Banking der Zukunft verändern (figo)
Wie Open APIs das Banking der Zukunft verändern (figo)Wie Open APIs das Banking der Zukunft verändern (figo)
Wie Open APIs das Banking der Zukunft verändern (figo)
 
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...
 
eStrategy Magazin 02 / 2013
eStrategy Magazin 02 / 2013eStrategy Magazin 02 / 2013
eStrategy Magazin 02 / 2013
 
[Mobile Usability Testing] Zahlen, Daten, Fakten Mobil - World Usability Day ...
[Mobile Usability Testing] Zahlen, Daten, Fakten Mobil - World Usability Day ...[Mobile Usability Testing] Zahlen, Daten, Fakten Mobil - World Usability Day ...
[Mobile Usability Testing] Zahlen, Daten, Fakten Mobil - World Usability Day ...
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
Daniel Mark: Produktentwicklung bei My Hammer und die MyHammer iPhone App
Daniel Mark: Produktentwicklung bei My Hammer und die MyHammer iPhone AppDaniel Mark: Produktentwicklung bei My Hammer und die MyHammer iPhone App
Daniel Mark: Produktentwicklung bei My Hammer und die MyHammer iPhone App
 

User xperience entsteht nicht durch Zufall

  • 1. User Experience Gute Produkte entstehen nicht durch Zufall CAS Mobile Business Daniel Muther 12.09.2014
  • 2. Ablauf des heutigen Nachmittags 1 2 3 Warum User Experience wichtig ist Grundlagen User Centered Design, Methodisches Vorgehen Design für Mobile
  • 3. 1 Warum User Experience wichtig ist
  • 4. Gute Produkte entstehen nicht durch Zufall Wie es heute abläuft Quellen: scottadams@aol.com
  • 5. Was heisst „Easy to use“ oder „gute Usability“? Frage in die Runde: Welche App ist besser bezüglich Usability? Teletext App Blick Fussball Quellen: Apple iTunes Store
  • 6. Die Antwort ist abhängig von verschiedenen Faktoren Die Frage kann so nicht beantwortet werden Harry Meier, Fussball-Fan: „Im Stadion möchte ich schnell auf einen Blick die Resultate aller Spiele sehen, ohne gross abgelenkt zu werden “ Pat Schneider, Student: „Wenn unterwegs bin, informiere ich mich gerne über das Gesamt-Geschehen im Schweizer Fussball “ Benutzern – Wer sind die Benutzer des Systems?  Den Aufgaben – Welche Aufgaben sollen damit erfüllt werden?  Dem Umfeld – In welcher Umgebung wird das System benutzt? Aufgabe: Resultatsübersicht der laufenden Fussballspiele anzeigen
  • 7. Das Gesamtbild über den Benutzer hilft uns gute Systeme zu bauen nach Shackel, 1991 Benutzer Aufgabe System Umfeld „Ziele sind die Gründe warum wir Aufgaben ausführen“ Cooper, 1999 Ziele der Benutzer Deshalb müssen wir wissen für wen, für was und worauf wir etwas entwickeln, bevor wir entwickeln.
  • 8. Terminologie: Usability ist ein wichtiges Qualitätskriterium Akzeptanz Nützlichkeit Kosten Performance Verfügbarkeit etc. Nutzen Usability Effektivität Effizienz Fehlertoleranz Erlernbarkeit Motivation Quellen: Nielsen sowie Quesenbery
  • 9. Nicht alle Teilaspekte sind immer gleich zu gewichten Effektivität Effizienz Motivation Fehler Toleranz Erlernbar- keit Gewichtung der Aspekte Informations-Sucher (Nutzung x mal pro Tag) Online-Shopper (Nutzung 1x pro Quartal) Wer ist also unsere Hauptbenutzergruppe? Für wen wird das System optimiert? Quellen: Nielsen sowie Quesenbery
  • 10. 1 2 Grundlagen User Centered Design, Methodisches Vorgehen
  • 11. ISO 9241-210: Prozess zur Gestaltung gebrauchstauglicher Systeme Und wie erreicht man das? UCD planen Analysieren Nutzungsanforderungen spezifizieren Design Testen und überarbeiten System erfüllt Anforderungen Iteration, soweit Evaluierungsergebnisse Bedarf hierfür aufzeigen Eine Definition: Generelle Philosophie oder «Mindset» bei der Entwicklung technischer Systeme, bei welcher die Benutzer im Zentrum stehen – nicht die Technik Gegenteil wäre: Technologie-zentriertes Vorgehen
  • 12. User Centered Design Kreislauf Schritt für Schritt
  • 13. User Centered Design Kreislauf Schritt für Schritt Interviews und Beobachtungen
  • 15. Beobachten der Benutzer in ihrer natürlichen Umgebung You can learn a lot from just sitting and watching. (From Kitchen Stories, 2003)
  • 16. User Centered Design Kreislauf Schritt für Schritt Interviews und Beobachtungen Personas
  • 18. 18 Alle haben eine andere Vorstellung von den Benutzern... Die Benutzer brauchen X... Ohne Personas sind die Diskussionen einiges mühsamer…
  • 19. User Centered Design Kreislauf Schritt für Schritt Interviews und Beobachtungen Taskanalysen Brainstorming und Ideation Personas
  • 20. Taskanalysen z.b mit einer Customer Journey Map
  • 22. User Centered Design Kreislauf Schritt für Schritt Interviews und Beobachtungen Papierprototypen Taskanalysen Brainstorming und Ideation Klickbarer Prototyp Personas
  • 26. User Centered Design Kreislauf Schritt für Schritt Interviews und Beobachtungen Papierprototypen Taskanalysen Usability-Testing Brainstorming und Ideation Klickbarer Prototyp Personas Expert-Reviews
  • 29. User Centered Design Kreislauf Schritt für Schritt Interviews und Beobachtungen Papierprototypen Taskanalysen Usability-Testing Brainstorming und Ideation Klickbarer Prototyp Personas Expert-Reviews
  • 31. 1 3 Design für Mobile Usability
  • 32. Zuerst einige Fakten… Timeline der Verbreitung von Massenmedien 1500 1890 1900 1910 1950 1990 2000 20?? Print Ton- aufnahmen Kino Radio Fernsehen Internet Mobile Geräte Zukunft?
  • 33. Was haben wir aus dieser Entwicklung gelernt? Jedes Medium ist anders! Radio ist nicht TV! Print ist nicht Desktop Web! Desktop Web ist nicht Mobile!
  • 34. Was haben wir aus dieser Entwicklung gelernt? Wir sollten zukunftsorientiert denken! Gestern Heute Morgen Was kennen wir vom Desktop Web? Wie adaptieren und optimieren wir das auf das Mobile Web? Wie stellen wir sicher für die Zukunft gerüstet zu sein?
  • 35. Vermutlich reicht es nicht, einfach das Hamburger-Icon auf die Apple Watch zu übertragen Wir sollten zukunftsorientiert denken!
  • 36. Kontext Desktop Web Was macht Desktop Web aus? Quellen: Joachimott.de und Apple inc. Grosser Bildschirm Stromanschluss Permanentes Netzwerk Tastatur Maus Stuhl Tisch
  • 37. Kontext Mobile Was macht ein Mobile Device aus? Quellen: Lukew.com und Google.com Kleiner Bildschirm Batterie Inkonsistentes Netzwerk Finger Sensoren
  • 38. Kontext Mobile Was macht ein Mobile Device aus? Quellen: Steve Rhodes Ein Auge Ein Daumen Partielle Aufmerksamkeit erfordert gezieltes Design
  • 39. Dateneingaben auf Mobile ist mühsam… aber der grösste Hebel für die Mobile Usability Es gibt viele Möglichkeiten Daten in einem Mobile Device einzugeben. Quellen: http://goo.gl/aXYdIj
  • 40. A D ... „Reduce to the max“ B C •Bei Formularen nur die Mussfelder •Informationen kurz und klar •Keine Sekundär- Aktionen Mobile Usability: die wichtigsten Faktoren Die vier wichtigsten Design-Principles für Mobile Usability
  • 41. A: Reduce to the max Für mobile Interaktionen nur das wirklich notwendige verwenden Quellen: http://built.bymoby.com/mobile_checkout und Bring.ch Nur die Mussfelder Keine Sekundär Aktionen wie «Abbrechen» Informationen kurz und klar
  • 42. Selbstbestimmung und Kontrolle über die Daten sind für die Benutzer die wichtigsten Faktoren für die Nutzung des Services. A ... „Reduce to the max“ „Touch first “ B •Bei Formularen nur die Mussfelder •Informationen kurz und klar •Keine Sekundär- Aktionen •Touch- optimierte Controls einsetzen •User auf der Tastatur behalten •Smarte Defaults, Maskierungen Mobile Usability: die wichtigsten Faktoren Die vier wichtigsten Design-Principles für Mobile Usability
  • 43. B: Touch first Die Eingabe von Daten muss mit den Fingern einfach möglich sein Quellen: : http://bit.ly/yJ3N2d
  • 44. B: Touch first Die Eingabe von Daten muss mit den Fingern einfach möglich sein Quellen: Tapworthy: Designing Great IPhone Apps By Josh Clark und http://m.kay.com/en/kaystore 80-90% der Leute sind Rechtshänder Eingaben ermöglichen ohne häufig das Tastatur Layout zu wechseln oder die Tastatur zu verlassen
  • 45. Selbstbestimmung und Kontrolle über die Daten sind für die Benutzer die wichtigsten Faktoren für die Nutzung des Services. A ... „Reduce to the max“ „Touch first “ „Content before Chrome“ B C •Bei Formularen nur die Mussfelder •Informationen kurz und klar •Keine Sekundär- Aktionen •Touch- optimierte Controls einsetzen •User auf der Tastatur behalten •Smarte Defaults, Maskierungen •Titelleiste, Statusleiste, Scrollleiste und Navigations- elemente auf das Minimum reduzieren Mobile Usability: die wichtigsten Faktoren Die vier wichtigsten Design-Principles für Mobile Usability
  • 46. C: Content before Chrome Der beschränkte Platz gilt es möglichst gut zu nutzen Quellenm.youtube.com, Espn.com und Instagram Minimale Navigation Maximaler Content
  • 47. Lasst uns das versuchen: optimieren wir einen mobilen Checkout von Boingo Wireless Hotspot Provider Benutzerziel und Kontext Geek So schnell wie möglich online sein iPhone 5s Mitten auf der Strasse
  • 48. Lasst uns das versuchen: optimieren wir einen mobilen Checkout von Boingo Wireless Hotspot Provider Gewichtung der Usability Aspekte Effektivität Effizienz Motivation Fehler Toleranz Erlernbar- keit
  • 50. Titel: User Ziel Kurze, prägnante Information Minimale Anzahl benötigter Informationen E-Mailadresse Eingabefeld Inline Hilfetext Primäre Aktion Optimierte AGB’s keine Checkbox Sekundäre Aktion Unnötige, störende Elemente
  • 51. Schritt 1: Feld «Vorname» und «Nachname» zusammenführen Design Principle: Touch first Ziel: auf der Tastatur bleiben Design Principle: Reduce to the max
  • 52. Design Principle: Reduce to the max Schritt 2: Felder Monat und Jahr zusammenführen Design Principle: Touch first Ziel: Mobile optimierte Controls verwenden Type = month
  • 53. Ziel: auf der Tastatur bleiben Mobile-optimierte Eingabe email@example.com Schritt 1: Feld «Vorname» und «Nachname» zusammenführen Schritt 2: Felder Monat und Jahr zusammenführen Schritt 3: Eingabe maskieren Design Principle: Touch first E-Mail Eingabefeld maskieren; erwartetes Format Schritt 4: Sekundär Aktion entfernen Design Principle: Reduce to the max, Conversion Optimierung
  • 54. email@example.com Von 7 Eingabefelder auf 5 email@example.com
  • 55. Reduktion der Anzahl Eingabefelder Ziel: Auf der Tatstatur bleiben Schritt 5: Eingabefeld für Kreditkarten Nummer optimieren
  • 57. Von 7 Eingabefelder auf 3 email@example.com
  • 59. Selbstbestimmung und Kontrolle über die Daten sind für die Benutzer die wichtigsten Faktoren für die Nutzung des Services. A D ... „Reduce to the max“ „Touch first “ „Content before Chrome“ „Use Device Capabilities B C •Bei Formularen nur die Mussfelder •Informationen kurz und klar •Keine Sekundär- Aktionen •Touch- optimierte Controls einsetzen •User auf der Tastatur behalten •Smarte Defaults, Maskierungen •Titelleiste, Statusleiste, Scrollleiste und Navigations- elemente auf das Minimum reduzieren •Nutzung der Funktionen welche das Gerät bietet: Standort- bestimmung, Kamera, Gyroskop, etc. Mobile Usability: die wichtigsten Faktoren Die vier wichtigsten Design-Principles für Mobile Usability
  • 60. Selbstbestimmung und Kontrolle über die Daten sind für die Benutzer die wichtigsten Faktoren für die Nutzung des Services. A D ... „Reduce to the max“ „Touch first “ „Content before Chrome“ „Use Device Capabilities B C •Bei Formularen nur die Mussfelder •Informationen kurz und klar •Keine Sekundär- Aktionen •Touch- optimierte Controls einsetzen •User auf der Tastatur behalten •Smarte Defaults, Maskierungen •Titelleiste, Statusleiste, Scrollleiste und Navigations- elemente auf das Minimum reduzieren •Nutzung der Funktionen welche das Gerät bietet: Standort- bestimmung, Kamera, Gyroskop, etc. Mobile Usability: die wichtigsten Faktoren
  • 61. D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen Quellen: appleinsider.com und questvisual.com Gruppenarbeit: Was ist das erstaunlichste, coolste, beste was euer Smartphone kann? Feature, App, Website, etc… •3-4er Gruppen •10 min Diskussion •Pro Gruppe 4 Killerfunktionen vorstellen •Video: Questvisual
  • 62. Funktionen von mobilen Geräten • Standorterkennung • Multi-Touch-Sensoren • Positionierung des Gerät und Bewegung: Beschleunigungsmesser • Gyroskop: 360 Grad Bewegung • Ausrichtung: Richtung von einem digitalen Kompass • Video-& Bild: Aufnahme / Eingang von einer Kamera (Native App) • Dual-Kameras: Vorder-und Rückseite • Audio: Eingang von einem Mikrofon, Lautsprecher-Ausgang • Ambient Light: hell / dunkel Umgebungswahrnehmung • Nähe: Gerät Nähe zu physischen Objekten • NFC: Near Field Communications durch RFID-Lesegeräte • Geräteanschlüsse : über Bluetooth mehreren Geräte koppeln •Barometer : messen des Luftdrucks D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
  • 63. • Standorterkennung D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
  • 64. • Multi-Touch-Sensoren D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen Quellen: http://static.lukew.com/TouchGestureTemplate.pdf
  • 65. • Positionierung des Gerät und Bewegung: Beschleunigungsmesser D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen Bump: •2 Geräte miteinander synchronisieren •Beschleunigungsmesser Daten •Position des Gerätes •IP Adress-Austausch •Möglichkeit Daten auszutauschen Quellen: bu.mp
  • 66. • Gyroskop: 360 Grad Bewegung D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen Quellen: occipital.com/360 und http://youtu.be/v3717E_AQfI
  • 67. • Ausrichtung: Richtung von einem digitalen Kompass D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
  • 68. • Video-& Bild: Aufnahme / Eingang von einer Kamera (Native App) D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
  • 69. • Dual-Kameras: Vorder-und Rückseite D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen #selfie
  • 70. • Audio: Eingang von einem Mikrofon, Lautsprecher-Ausgang D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
  • 71. • Ambient Light: hell / dunkel Umgebungswahrnehmung D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
  • 72. • Nähe: Gerät Nähe zu physischen Objekten D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen Ein/Aus Sensor: •Bemerkt wenn z.b das Telefon ans Ohr gehalten wird und schaltet den Bildschirm an oder aus.
  • 73. • NFC: Near Field Communications durch RFID-Lesegeräte D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
  • 74. • Geräteanschlüsse : über Bluetooth mehrere Geräte verbinden D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
  • 75. • Barometer : messen des Luftdrucks D: Use Device Capabilities Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
  • 76. Zusammenfassung Design für Mobile Usability unterscheidet sich vom Design für Web Usability Kontext und Fokus: Kenne deine User, deren Bedürfnisse und Ziele Prototyping: Fail early, fail often, fail cheap, iterate Web ist nicht Mobile! Dateneingaben auf mobilen Geräten sind mühsam, optimiere so weit wie möglich Nutze die Features der Smartphones sinnvoll Messe vor Verbesserung und danach und sprecht darüber
  • 77. 1 4 Diskussion Best practices und Mobile Expriences
  • 78. Gruppenarbeit Mobile Experiences Herausforderungen und Erfolgsfaktoren Mögliche Themen •Responsive Design oder Native App? •Wearables, the next big Thing? •Mobile first? •Sind Tablets mobile Geräte? • … Bearbeitung •Thema auswählen, Gruppen à 3-4 Personen bilden •Diskussion über Herausforderungen und Erfolgsfaktoren •Erkenntnisse auf einen Flipchart festhalten •Präsentation im Plenum, inkl. Fragen und Diskussion
  • 79. Thank you! Think mobile and… ... be prepared for the next big thing