Als PDF, PPTX herunterladen
![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](https://image.slidesharecdn.com/wud-touchscreenprsentationbrkb-11v1-0-111111024316-phpapp02/75/Anforderungen-an-das-Touchscreen-Design-6-2048.jpg)
Hochgeladen vonsoultank AG
Anforderungen an das Touchscreen-Design
Das Dokument behandelt die Anforderungen an das Design von Touchscreens, insbesondere in Bezug auf Nutzungskontexte, Gestaltungsrichtlinien und Benutzererfahrungen. Es werden verschiedene Touch-Technologien vorgestellt und die Notwendigkeit einer benutzerzentrierten Gestaltung hervorgehoben, um die Benutzerfreundlichkeit zu optimieren. Zudem werden Tipps zu Inhalten, Navigation, Funktionen und Interaktionen gegeben, um die Effektivität mobiler Anwendungen zu steigern.
Weitere ähnliche Inhalte
Ähnlich wie Anforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-Design
- 1. Überall die Fingerdrin: Anforderungen an das Touchscreen-Design Alles wird mobil – soultank World Usability Day Event 2011
- 2. Agenda Einsatzgebiete vonTouch-Technologien Nutzungskontextanalyse Gestaltungsrichtlinien Literatur & Links soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 2
- 3. Touchscreens im Alltag soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 3
- 4. Touchscreens im Alltag soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 4
- 5. Touch-Technologien Existenzvon 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. 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. Agenda Einsatzgebiete vonTouch-Technologien Nutzungskontextanalyse Gestaltungsrichtlinien Literatur & Links soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 7
- 8. Nutzungsorientierter Gestaltungsprozess soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 8
- 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. In welchem Kontextwird 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. Welcher Interaktionstyp bistDu? 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. 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, it's heavy.” Quelle: Jakob Nielsen's Alertbox, 26.04.2010: iPad Usability: First Findings From User Testing soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 12
- 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. Inhaltsverzeichnis Einsatzgebietevon Touch-Technologien Nutzungskontextanalyse Gestaltungsrichtlinien Literatur & Links soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 14
- 15. Inhalt | Folie 15
- 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. Inhalt: Positives Beispiel Varianten: Corporate Website, Mobile Website soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 17
- 18. Inhalt: Negatives Beispiel Keine Variante: Corporate Website soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 18
- 19.
- 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. 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. Design: Tipps &Tricks Wichtige «Call to actions» visuell in Vordergrund stellen soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 22
- 23. Design: Positives Beispiel soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 23
- 24. Design: Negatives Beispiel soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 24
- 25.
- 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. Navigation: Positive Beispiele Flache Navigationsstruktur: 1 Klick Startseite auf Wichtigstes reduziert soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 27
- 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.
- 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. 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. 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. 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.
- 35. Interaktion: Tipps &Tricks – Input Einfache Gesten soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 35
- 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. 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. 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. 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. 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. 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. User Experience &Usability
- 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. Agenda Einsatzgebiete vonTouch-Technologien Nutzungskontextanalyse Gestaltungsrichtlinien Literatur & Links soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 44
- 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. 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. Literatur & Links Steven Hoober: Designing Mobile Interfaces soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 47
- 48. Herzlichen Dank fürIhre Aufmerksamkeit Bei Fragen stehen wir gerne zur Verfügung