Upload
one-schweiz
View
1.651
Download
4
Embed Size (px)
Citation preview
10 Do’s und Don’ts bei der Gestaltung mobiler Anwendungen
ONE Konferenz, 10.05.2012, Marcel B.F. Uhr, Iris Müller, soultank AG
Apps, mobile Webseiten etc. gibt es viele, viele, viele und es werden immer mehr
� Der Erfolg der mobilen Lösung wird vom Nutzer schlussendlich bestimmt.
Wechseln wir nun den Blickwinkel zum Benutzer
| Folie 2soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Agenda
� Einleitung
� Die wichtigsten Do’s and Don’ts
� Mobiles Testen
� Fazit
soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 3
� 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 %
In welchem Kontext werden mobile Apps/Websites benutzt?
| Folie 4soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Quelle: Luke Wroblewski. Mobile First. (2011)
� Benutzer-, Aufgaben- und Kontextanalyse
Kenne Deinen Nutzer: Nutzungskontextanalyse
| Folie 5soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Quelle: Modell abgeleitet von Michael Herczeg
Benutzer:Mann, Alter unbekannt
Kontext:Business, Mobil
Aufgabe:Dateneingabe
System:Stiftbedienung
Touchscreen
� Vier wichtige Interaktionstypen1. 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.»
Welcher Interaktionstyp bist Du?
| Folie 6soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Quelle: Luke Wroblewski. Mobile First. (2011)
soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� Mobile Website vs. App
� Nutzerforschung* (2011) zeigt:� Erfolgsrate bei mobilen Websites: 64 %
� Erfolgsrate bei Desktop-Websites auf mobilen Geräten: 58 %
� App noch besser: Erfolgsrate 76 %
� 3 Möglichkeiten für mobile Inhalte� Responsive Layout für Website
� Separate mobile Website
� Native Applikationen (Apps)
Nutzungskontextanalyse: Ergebnis
| Folie 7
Agenda
� Einleitung
� 10 Do’s and Don'ts
� Mobiles Testen
� Fazit
soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 8
Ergonomischer Grundsatz «less is more» gilt bei Mobile umso mehr!
Wichtigstes Do
| Folie 9soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
InhaltInhalt
| Folie 10soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� 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 (aber: Abbildung ganzer Funktionalität möglich)
� Wichtigste Links als Hauptinhalt einbinden (Startseite), die auf Unterseiten verweisen (in Unterseiten auslagern)
Inhalt: Darauf achten, dass …
| Folie 11soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� Varianten: Corporate Website, Mobile Website
Inhalt: Positives Beispiel
| Folie 12soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� Keine Variante: Corporate Web
Inhalt: Negatives Beispiel
| Folie 13soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
DesignDesign
soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 14
� 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: Darauf achten, dass …
| Folie 15soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� Design von Schaltflächen. Stark abhängig vom Betriebssystem z.B. Android vs. iOS
� Grösse von Schaltflächen
� Feedback und Akzeptieren von Eingaben
� Einfaches GUI-Design
� Farbigkeit
� Wahlmöglichkeiten begrenzen
� Bewegte Bilder sparsam einsetzen
Design: Darauf achten, dass …
| Folie 16soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Quelle: http://developer.android.com/design/patterns/pure-android.html
� Wichtige «Call to actions» visuell in Vordergrund stellen
Design: Darauf achten, dass …
| Folie 17soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Design: Positives Beispiel
| Folie 18soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� Webseite und App
Design: Positives Beispiel
| Folie 19soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Design: Negatives Beispiel
| Folie 20soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
NavigationNavigation
soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 21
� Informationsarchitektur: Reduktion auf das Nötigste� Navigationsoptionen einschränken
� Flache Navigationsstruktur einbinden
� Benutzerführung ist A und O: Nicht auf Webseite umleiten, sondern angepasste Inhalte anzeigen.
� «Mobile First» nach Luke Wroblewski
� Auf Unterseiten Navigation im unteren Bildschirmbereich einbinden
� Zurück-Button nur auf Unterseiten anbieten
Navigation: Darauf achten, dass …
| Folie 22soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� Flache Navigationsstruktur: 1 Klick
� Startseite auf Wichtigstes reduziert
Navigation: Positive Beispiele
| Folie 23soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� Startseiten nicht auf Wichtigstes reduziert
� Lenkt vonNavigation ab
� Werbe-Teaser störend
� Corporate Website undApp nicht ausreichend, mobile Websitefehlt
Navigation: Negative Beispiele
| Folie 24soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
FunktionFunktion
soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 25
� 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: Darauf achten, dass …
| Folie 26soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� 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, Fotofunktion
Vorteile von integrierter Funktionalität nutzen!
| Folie 27soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� Hilfreiche Funktionen
� Unterstützung durch Hardware (z. B. GPS, Kamera)
Funktion: Positive Beispiele
| Folie 28soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Inhalt: Negative Beispiele
| Folie 29soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� Einbinden von integrierter Funktion wäre bei App möglich (z. B. Aktueller Standort, Route festlegen)
� Klickbereich in Navigation zu klein
InteraktionInteraktion
soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 30
� Wenig bekannte Gesten (Art Shortcut)� Wischen erzeugt Submenü
� Zurück/weiter-Buttons bei
Formulareingaben
Interaktion: Beispiele – Input
| Folie 31soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� «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
Interaktion: Darauf achten, dass …
| Folie 32soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� 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: Darauf achten, dass …
| Folie 33soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Quelle: www.delorean-power.com
� Kein Maus-Zeiger vorhanden� User wissen immer, wo ihr Finger ist
� Nicht möglich, verschiedene 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
| Folie 34soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
� Vermeiden:� Javascript-Tooltips mit wichtigen Informationen
� Auslösende Elemente via Hover-Status (z. B. 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.
Interaktion: Stolpersteine
| Folie 35soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
User Experience & Usability User Experience & Usability
soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 36
� 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
User Experience & Usability – Darauf achten, dass …
| Folie 37soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Agenda
� Einleitung
� 10 Do’s and Don'ts
� Mobiles Testen
� Fazit
soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 38
Unser Vorgehensmodell: Benutzerzentrierter Prozess ISO 9241 Teil 210
| Folie 39soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Nutzungskontextanalyse
Benutzerbefragung- Interview / Contextual Inquiry- Fragebogen- Fokusgruppen
Styleguide / Guidelines entwickeln
LoFi Prototyping
Heuristic Evaluation
Usability-Testing- Walkthrough- Labortest- Feldtest
Card SortingCard Storming
Personas
Informationsarchitektur entwickeln
Interaktionskonzept
Konkurrenzanalyse
IST-Analyse
Expert Review
HiFi PrototypingWireframes
Zugangskonzept
Navigationskonzept
Vorher-Nachher-Untersuchung (Online-Umfrage)
Seitentypen definieren
Interaction Patterns
Worauf testen?Worauf testen?
http://samsung-blog.com/wp-content/uploads/2011/05/iphone4-vs-galaxys2-2.jpg
Womit testen?Womit testen?
Was wird getestet?Was wird getestet?
Wo?Wo?
Wie wird getestet?
| Folie 46soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Usability Test
Wie wird getestet?
| Folie 47soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Test-vorbereitung
Usability Test
Anpassungen
1. Woche 2. Woche
Test-vorbereitung
Wie wird getestet?
| Folie 48soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Test-vorbereitung
Usability Test
Anpassungen
1. Woche 2. Woche
Test-vorbereitung
Wie wird getestet?
| Folie 49soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Test-vorbereitung
Usability Test
Anpassungen
1. Woche 2. Woche
Test-vorbereitung
Wie wird getestet?
| Folie 50soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Test-vorbereitung
Usability Test
Anpassungen
1. Woche 2. Woche
Test-vorbereitung
Wie wird getestet?
| Folie 51soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Test-vorbereitung
Usability Test
Anpassungen
1. Woche 2. Woche
Test-vorbereitung
Iteratives Vorgehen
Agenda
� Einleitung
� 10 Do’s and Don'ts
� Mobiles Testen
� Fazit
soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 52
� Den Nutzer kennen
� Limitationen und Chancen von mobilen Apps erkennen (weniger ist mehr)
� Iteratives Testing erhöht die Usability � Der Nutzer nutzt es dann auch
Fazit
| Folie 53soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012
Herzlichen Dank für Ihre Aufmerksamkeit
Bei Fragen stehen wir gerne zur Verfügung