Überall die Finger drin:Anforderungen an das Touchscreen-DesignAlles wird mobil – soultank World Usability Day Event 2011
Agenda Einsatzgebiete von Touch-Technologien Nutzungskontextanalyse Gestaltungsrichtlinien Literatur & Links              ...
Touchscreens im Alltag                   soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 3
Touchscreens im Alltag                   soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 4
Touch-Technologien  Existenz von Vielzahl an Touch-Technologien       Branchenanalytiker zählten im Jahr 2009 rund       2...
Touch-Technologien     Durch Apples Einführung von Iphone usw. haben     Touchscreens Weg in breite Masse gefunden     Stu...
Agenda Einsatzgebiete von Touch-Technologien Nutzungskontextanalyse Gestaltungsrichtlinien Literatur & Links              ...
Nutzungsorientierter Gestaltungsprozess                   soultank AG | Anforderungen an das Touchscreen-Design | 10.11.20...
Nutzungskontextanalyse: Beispiel  Benutzer-, Aufgaben- und Kontextanalyse                                                 ...
In welchem Kontext wird mobiles Touchscreen benutzt?  Nutzungssituationen      Zu Hause: 84 %      Verschiedene Pausen wäh...
Welcher Interaktionstyp bist Du?  Vier wichtige Interaktionstypen   1.    Lookup/Find         «Ich benötige aktuell eine A...
Nutzungskontextanalyse: Ergebnis  Realitätsnahe auf Benutzer, Aufgaben und Kontext  ausgerichtete mobile Anwendungsfälle, ...
Nutzungskontextanalyse: Ergebnis  Mobile Website vs. App  3 Möglichkeiten für mobile Inhalte      Responsive Layout für We...
Inhaltsverzeichnis  Einsatzgebiete von Touch-Technologien  Nutzungskontextanalyse  Gestaltungsrichtlinien  Literatur & Lin...
Inhalt         | Folie 15
Inhalt: Tipps & Tricks  Inhaltlich stark auf Wesentliches beschränken     Hauptinhalte integrieren, alle anderen Inhalte e...
Inhalt: Positives Beispiel  Varianten: Corporate Website, Mobile Website                      soultank AG | Anforderungen ...
Inhalt: Negatives Beispiel  Keine Variante: Corporate Website                     soultank AG | Anforderungen an das Touch...
Design
Design: Tipps & Tricks  Geringere Bildschirmauflösungen bei mobilen Geräten  Gängige Bildschirmauflösungen     800 x 480 p...
Design: Tipps & Tricks  Design von Schaltflächen  Größe von Schaltflächen  Feedback und Akzeptieren von Eingaben  Einfache...
Design: Tipps & Tricks  Wichtige «Call to actions» visuell in Vordergrund stellen                      soultank AG | Anfor...
Design: Positives Beispiel                     soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 23
Design: Negatives Beispiel                    soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 24
Navigation
Navigation: Tipps & Tricks  Informationsarchitektur     Navigationsoptionen einschränken     Flache Navigationsstruktur ei...
Navigation: Positive Beispiele  Flache Navigationsstruktur: 1 Klick  Startseite auf Wichtigstes reduziert                 ...
Navigation: Negative Beispiele  Startseiten nicht auf Wichtigstes reduziert  Lenkt von  Navigation ab  Werbe-Teaser  störe...
Funktion
Funktion: Tipps & Tricks  Texteingaben minimieren  Texteingabe auf mobil genutzten Geräten wesentlich  schwieriger als auf...
Funktion: Tipps & Tricks  Vorteile von integrierter Funktionalität nutzen     Telefonanrufe ermöglichen     automatisches ...
Funktion: Positive Beispiele  Hilfreiche Funktionen  Unterstützung durch Hardware (z. B. GPS, Kamera)                     ...
Inhalt: Negative Beispiele  Einbinden von integrierter Funktion wäre bei App möglich  (z. B. Aktueller Standort, Route fes...
Interaktion
Interaktion: Tipps & Tricks – Input  Einfache Gesten                     soultank AG | Anforderungen an das Touchscreen-De...
Interaktion: Tipps & Tricks – Input  Komplexere Gesten  Touch Gesture Cards (PDF): Luke Wroblewski)                       ...
Interaktion: Beispiele – Input  Wenig bekannte Gesten     Wischen erzeugt Submenü     Zurück/weiter-Buttons bei   Formular...
Interaktion: Tipps & Tricks – Input  «Für den dicken Finger designen»     MIT: Fingerbeere Ø 10-14 mm breit     Fingerspit...
Interaktion: Tipps & Tricks – Input  Für Rechts- und Linkshänder designen  Websites: Navigationsleiste oft links -> ungüns...
Interaktion: Stolpersteine  Kein Maus-Zeiger vorhanden     User wissen immer, wo ihr Finger ist  Nicht möglich, versch. Ma...
Interaktion: Stolpersteine  Vermeiden:     Javascript-Tooltips mit wichtigen Informationen     Auslösende Elemente via Hov...
User Experience & Usability
User Experience & Usability – Tipps & Tricks  Mobile Anwendungen intuitiv gestalten  Fokus: KISS-Prinzip «Keep it short an...
Agenda Einsatzgebiete von Touch-Technologien Nutzungskontextanalyse Gestaltungsrichtlinien Literatur & Links              ...
Literatur & Links  Normen     DIN EN ISO 9241-210:2011     Prozess zur Gestaltung gebrauchstauglicher Systeme  Touch Guide...
Literatur & Links  Luke Wroblewski: Mobile First  Gesten und Buttons für verschiedene Plattformen:     Luke Wroblewski, ww...
Literatur & Links  Steven Hoober: Designing Mobile Interfaces                     soultank AG | Anforderungen an das Touch...
Herzlichen Dank für Ihre AufmerksamkeitBei Fragen stehen wir gerne zur Verfügung
Nächste SlideShare
Wird geladen in …5
×

Anforderungen an das Touchscreen-Design

3.253 Aufrufe

Veröffentlicht am

Alles wird mobil – soultank World Usability Day Event 2011
Überall die Finger drin: Anforderungen an das Touchscreen-Design.

Veröffentlicht in: Gesundheit & Medizin
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.253
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
18
Aktionen
Geteilt
0
Downloads
54
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Anforderungen an das Touchscreen-Design

  1. 1. Überall die Finger drin:Anforderungen an das Touchscreen-DesignAlles wird mobil – soultank World Usability Day Event 2011
  2. 2. Agenda Einsatzgebiete von Touch-Technologien Nutzungskontextanalyse Gestaltungsrichtlinien Literatur & Links soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 2
  3. 3. Touchscreens im Alltag soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 3
  4. 4. Touchscreens im Alltag soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 4
  5. 5. Touch-Technologien Existenz von Vielzahl an Touch-Technologien Branchenanalytiker zählten im Jahr 2009 rund 20 unterschiedliche Touch-Technologien* Beispiele: Kapazitive, optische, druckempfindliche, (Schall)wellengesteuerte Touch Technologien, Multi-Touch usw. Haben jeweils unterschiedliche Stärken und Schwächen, da ihnen unterschiedliche Techniken zu Grunde liegen Produkte mit Touch-Technologie zeichnen sich jeweils durch andere Charakteristiken aus Einige Kunden und Märkte verlangen nach speziellen Touch-Technologien * Quelle: NZZ, 07/2009 soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 5
  6. 6. Touch-Technologien Durch Apples Einführung von Iphone usw. haben Touchscreens Weg in breite Masse gefunden Studie* von Gartner Für 2013 erwartet, dass mehr als Hälfte (58 %) von verkauften Mobiltelefonen über Touchscreen steuerbar sein wird Besonders hohe Touchscreen-Verbreitung auf hoch entwickelten Märkten (USA, westliche Teile Europas)* Future Wireless Trends diskutiert auf Gartner Wireless, Networking & Communications Summit 2010, April 19-21, San Diego [URL: http://www.gartner.com/it/page.jsp?id=1313415] soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 6
  7. 7. Agenda Einsatzgebiete von Touch-Technologien Nutzungskontextanalyse Gestaltungsrichtlinien Literatur & Links soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 7
  8. 8. Nutzungsorientierter Gestaltungsprozess soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 8
  9. 9. Nutzungskontextanalyse: Beispiel Benutzer-, Aufgaben- und Kontextanalyse Benutzer: Kontext: Mann, Alter Business, Mobil unbekannt Aufgabe: System: Dateneingabe Stiftbedienung Touchscreen Quelle: Modell abgeleitet von Michael Herczeg soultank AG | 10.11.2011 | Folie 9
  10. 10. In welchem Kontext wird mobiles Touchscreen benutzt? Nutzungssituationen Zu Hause: 84 % Verschiedene Pausen während Tag: 80 % Während Wartezeit in Schlangen und in Einrichtungen: 74 % Während «Shopping»: 69 % Während Arbeiten: 64 % Während TV Schauen: 62 % Während Pendeln: 47 % Quelle: Luke Wroblewski. Mobile First. (2011) soultank AG | 10.11.2011 | Folie 10
  11. 11. Welcher Interaktionstyp bist Du? Vier wichtige Interaktionstypen 1. Lookup/Find «Ich benötige aktuell eine Antwort zu bestimmten Thema.» 2. Explore/Play «Ich will etwas Zeit überbrücken und mich ablenken.» 3. Check in/Status «Es ändert/aktualisiert sich etwas und ich möchte Bescheid wissen.» 4. Edit/Create «Ich muss jetzt etwas Dringendes tun, was nicht warten kann.» Quelle: Luke Wroblewski. Mobile First. (2011) soultank AG | 10.11.2011 | Folie 11
  12. 12. Nutzungskontextanalyse: Ergebnis Realitätsnahe auf Benutzer, Aufgaben und Kontext ausgerichtete mobile Anwendungsfälle, die Mehrwert für Benutzer bieten Beschränkung von Online-Services nicht auf ein Gerät Je nach Anwendungssituation unterschiedliche Geräte möglich “It looks like a giant iPhone,” is the first thing users say when asked to test an iPad. Their second comment? “Wow, its heavy.” Quelle: Jakob Nielsens Alertbox, 26.04.2010: iPad Usability: First Findings From User Testing soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 12
  13. 13. Nutzungskontextanalyse: Ergebnis Mobile Website vs. App 3 Möglichkeiten für mobile Inhalte Responsive Layout für Website Separate mobile Website Native Applikationen (Apps) Nutzerforschung* (2011) zeigt: Erfolgsrate bei mobilen Websites: 64 % Erfolgsrate bei Desktop-Websites auf mobilen Geräten: 58 % App noch besser: Erfolgsrate 76 % * http://www.useit.com/alertbox/mobile-usability.html soultank AG | 10.11.2011 | Folie 13
  14. 14. Inhaltsverzeichnis Einsatzgebiete von Touch-Technologien Nutzungskontextanalyse Gestaltungsrichtlinien Literatur & Links soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 14
  15. 15. Inhalt | Folie 15
  16. 16. Inhalt: Tipps & Tricks Inhaltlich stark auf Wesentliches beschränken Hauptinhalte integrieren, alle anderen Inhalte entfernen Keinen Werbetext einsetzen Starke Reduzierung von textlichem Inhalt Integration nur wichtigster Zusatzfunktionen (Features); Beschränkung sinnvoll Wichtigste Links als Hauptinhalt einbinden (Startseite), die auf Unterseiten verweisen (in Unterseiten auslagern) soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 16
  17. 17. Inhalt: Positives Beispiel Varianten: Corporate Website, Mobile Website soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 17
  18. 18. Inhalt: Negatives Beispiel Keine Variante: Corporate Website soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 18
  19. 19. Design
  20. 20. Design: Tipps & Tricks Geringere Bildschirmauflösungen bei mobilen Geräten Gängige Bildschirmauflösungen 800 x 480 px (Android) 960 x 640 px (Iphone) 1024 X 768 px (Ipad) Informationsangebot, Layout, Navigation müssen Grösse entsprechend angepasst werden Bildschirme und Verarbeitungsdauer können sich stark voneinander unterscheiden Je nach Anforderung unterschiedliche Versionen von mobilen Websites soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 20
  21. 21. Design: Tipps & Tricks Design von Schaltflächen Größe von Schaltflächen Feedback und Akzeptieren von Eingaben Einfaches GUI-Design Farbigkeit Wahlmöglichkeiten begrenzen soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 21
  22. 22. Design: Tipps & Tricks Wichtige «Call to actions» visuell in Vordergrund stellen soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 22
  23. 23. Design: Positives Beispiel soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 23
  24. 24. Design: Negatives Beispiel soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 24
  25. 25. Navigation
  26. 26. Navigation: Tipps & Tricks Informationsarchitektur Navigationsoptionen einschränken Flache Navigationsstruktur einbinden Benutzerführung ist A und O Startseite Variante A: Benutzerbedürfnis schnelle Navigation und Suche Variante B: Auf E-Commerce Websites Auf Unterseiten Navigation im unteren Bildschirmbereich einbinden Zurück-Button nur auf Unterseiten anbieten soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 26
  27. 27. Navigation: Positive Beispiele Flache Navigationsstruktur: 1 Klick Startseite auf Wichtigstes reduziert soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 27
  28. 28. Navigation: Negative Beispiele Startseiten nicht auf Wichtigstes reduziert Lenkt von Navigation ab Werbe-Teaser störend Corporate Website und App nicht ausreichend, mobile Website fehlt soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 28
  29. 29. Funktion
  30. 30. Funktion: Tipps & Tricks Texteingaben minimieren Texteingabe auf mobil genutzten Geräten wesentlich schwieriger als auf Desktop-PC oder Laptop-Tastatur Reduzierungswege: Nutzung von hinterlegten Daten z. B. unter «My Account» ermöglichen, Fragen ob Nutzer lieber PIN statt Passwort eingeben wollen, Vorteile von integrierten Funktionalitäten nutzen soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 30
  31. 31. Funktion: Tipps & Tricks Vorteile von integrierter Funktionalität nutzen Telefonanrufe ermöglichen automatisches Anstossen eines Anrufs bei Klick auf Tel.-Nr. Adresse auf Karte anzeigen «Finde das nächste…» (GPS) Input-Eingabe auf innovativen Wegen QR Codes, Barcodes soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 31
  32. 32. Funktion: Positive Beispiele Hilfreiche Funktionen Unterstützung durch Hardware (z. B. GPS, Kamera) soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 32
  33. 33. Inhalt: Negative Beispiele Einbinden von integrierter Funktion wäre bei App möglich (z. B. Aktueller Standort, Route festlegen) Klickbereich in Navigation zu klein soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 33
  34. 34. Interaktion
  35. 35. Interaktion: Tipps & Tricks – Input Einfache Gesten soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 35
  36. 36. Interaktion: Tipps & Tricks – Input Komplexere Gesten Touch Gesture Cards (PDF): Luke Wroblewski) soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 36
  37. 37. Interaktion: Beispiele – Input Wenig bekannte Gesten Wischen erzeugt Submenü Zurück/weiter-Buttons bei Formulareingaben soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 37
  38. 38. Interaktion: Tipps & Tricks – Input «Für den dicken Finger designen» MIT: Fingerbeere Ø 10-14 mm breit Fingerspitze Ø 8-10 mm breit Detailangaben für verschiedene Plattformen: www.lukew.com, Touch Target Sizes soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 38
  39. 39. Interaktion: Tipps & Tricks – Input Für Rechts- und Linkshänder designen Websites: Navigationsleiste oft links -> ungünstig für Rechtshänder Browsererkennung: für mobile Geräte alternative Navigation anbieten soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 39
  40. 40. Interaktion: Stolpersteine Kein Maus-Zeiger vorhanden User wissen immer, wo ihr Finger ist Nicht möglich, versch. Maus-Stati anzuzeigen Status-Anzeige möglich durch Hervorhebung (Farbe, Rand, Animation o.ä.) Keine Analogie zu Maus-Button Interaktion (anzeigen und auslösen in 1 Schritt) soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 40
  41. 41. Interaktion: Stolpersteine Vermeiden: Javascript-Tooltips mit wichtigen Informationen Auslösende Elemente via Hover-Status (zB editieren, löschen) Grafiken oder Fotos, welche erst bei Hover-Status vollständig angezeigt werden Drop-down Menüs. Falls tap möglich, klaren Hinweis darauf geben. Zu stark auf Hover-abhängiges CSS3 fokussieren. Multi-touch User sehen die coolen Effekte nicht. soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 41
  42. 42. User Experience & Usability
  43. 43. User Experience & Usability – Tipps & Tricks Mobile Anwendungen intuitiv gestalten Fokus: KISS-Prinzip «Keep it short and simple» «Joy of Use» in Vordergrund stellen Performanz im Hinterkopf behalten Bei träger Anwendung verliert Benutzer schnell Interesse Aufmerksamkeit durch schnelle Reaktion auf Berührung steigern Konzipiertes Produkt unbedingt mit Zielgruppe testen Test mit echtem Gerät durchführen, keine Simulationen Wenn Benutzer an bestimmter Stelle «zögert» oder «stolpert», diese Stelle unbedingt optimieren soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 43
  44. 44. Agenda Einsatzgebiete von Touch-Technologien Nutzungskontextanalyse Gestaltungsrichtlinien Literatur & Links soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 44
  45. 45. Literatur & Links Normen DIN EN ISO 9241-210:2011 Prozess zur Gestaltung gebrauchstauglicher Systeme Touch Guidelines Apple: http://developer.apple.com/library/ios/#documentation/user experience/conceptual/mobilehig/Introduction/Introduction.html Windows: http://msdn.microsoft.com/en-us/library/windows/ desktop/cc872774.aspx#interaction SAP: http://www.sapdesignguild.org Usability of Mobile Websites & Applications: 210 Design Guidelines for Improving the User Experience of Mobile Sites and Apps, 2nd Edition. Nielsen Norman Group Report (2011): www.nngroup.com/reports/mobile soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 45
  46. 46. Literatur & Links Luke Wroblewski: Mobile First Gesten und Buttons für verschiedene Plattformen: Luke Wroblewski, www.lukew.com, Touch Target Sizes soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 46
  47. 47. Literatur & Links Steven Hoober: Designing Mobile Interfaces soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 47
  48. 48. Herzlichen Dank für Ihre AufmerksamkeitBei Fragen stehen wir gerne zur Verfügung

×