Anforderungen an das Touchscreen-Design

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

Agenda
Einsatzgebiete von Touch-Technologien
Nutzungskontextanalyse
Gestaltungsrichtlinien
Literatur & Links

soultank AG | Anforderungen an das Touchscreen-Design | 10.11.2011 | Folie 2

Touchscreens im Alltag


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

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]


Agenda
Literatur & Links


Nutzungsorientierter Gestaltungsprozess


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

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

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

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


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

Inhaltsverzeichnis
Literatur & Links


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)


Inhalt: Positives Beispiel

Varianten: Corporate Website, Mobile Website


Inhalt: Negatives Beispiel

Keine Variante: Corporate Website


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


Design von Schaltflächen
Größe von Schaltflächen
Feedback und Akzeptieren von Eingaben
Einfaches GUI-Design
Farbigkeit
Wahlmöglichkeiten begrenzen



Wichtige «Call to actions» visuell in Vordergrund stellen


Design: Positives Beispiel


Design: Negatives Beispiel


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

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örend
Corporate
Website und
App nicht
ausreichend,
mobile Website
fehlt

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


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


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 festlegen)
Klickbereich in Navigation zu klein


Interaktion: Tipps & Tricks – Input

Einfache Gesten



Komplexere Gesten

Touch Gesture Cards (PDF): Luke Wroblewski)


Interaktion: Beispiele – Input

Wenig bekannte Gesten
Wischen erzeugt Submenü

Zurück/weiter-Buttons bei
Formulareingaben



«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



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


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)


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.


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


Agenda
Literatur & Links


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


Literatur & Links

Luke Wroblewski: Mobile First
Gesten und Buttons für verschiedene Plattformen:
Luke Wroblewski, www.lukew.com, Touch Target Sizes


Literatur & Links

Steven Hoober: Designing Mobile Interfaces


Herzlichen Dank für Ihre Aufmerksamkeit
Bei Fragen stehen wir gerne zur Verfügung

Anforderungen an das Touchscreen-Design

Weitere ähnliche Inhalte

Anforderungen an das Touchscreen-Design