MOBILE USABILITY Johannes Ewald peerigon UG
ÜBER MICH Johannes Ewald UI-Designer und Webentwickler Studium Interaktive Medien Gründung der peerigon UG
MOBILE APP MOBILE WEB
GRUNDLAGEN DER MOBILE USABILITY
62% Erfolgsquote bei der mobilen Nutzung von Webseiten Mobile Usability, Jakob Nielsen, 2011
Wenn wir für mobile Geräte entwickeln, optimieren wir unsere Software für Touchscreens Kleine Displays Schlechte Internetverbindungen
Durchschnittliche Druckfläche 1 cm 1 cm
Empfohlene Druckfläche 1 cm x 1 cm
Empfohlene Druckfläche Mindestdruckfläche 1 cm x 1 cm 7 mm x 7 mm ~90 px
Toucharea Button
WIE BIETE ICH EINE MOBILE WEBSEITE AN?
RESPONSIVE DESIGN DYNAMIC SERVING
RESPONSIVE DESIGN Gleiche Codebasis für alle Geräte Anpassungen des Designs durch sog. Media-Queries
DYNAMIC SERVING Jedes Gerät bekommt eine speziell optimierte Version ausgeliefert
RESPONSIVE DESIGN Pro Keine fehleranfällige Geräteerkennung Zukunftssicher Normalerweise geringerer Wartungsaufwand
RESPONSIVE DESIGN Contra Stärken einer Plattform werden evtl. nicht ausgereizt Unnötige bzw. zu große Dateien werden evtl. heruntergeladen
DYNAMIC SERVING Pro Eine optimierte Lösung für das jeweilige Gerät Evtl. bessere Ladezeiten, da nur benötigte Dateien heruntergeladen werden
DYNAMIC SERVING Contra Höherer Wartungsaufwand Evtl. verwirrend, wenn die einzelnen Versionen sich zu sehr unterscheiden
LEITFADEN Responsive Design ist in der Regel vorzuziehen, da zukunftssicherer und geringerer Wartungsaufwand. Unter Umständen kann sich aber Dynamic Serving als praktischer erweisen. Es muss daher immer im Anwendungsfall abgewogen werden.
HINWEISE ZUM DYNAMIC SERVING Links sollten shareable sein Die automatische Erkennung sollte manuell überschreibbar sein
WAS GIBT ES BEI MOBILEN WEBSEITEN ZU BEACHTEN?
Drei Bereiche, die zu einer guten Mobile Experience beitragen Layout Content Performance
LAYOUT Mindesttouchflächen einhalten Mouse-Overs vermeiden Aussagekräftige Buttons verwenden
CONTENT Einteilung in Primary- und Secondary-Content Aber: Keine Beschränkung der Funktionalität Formulare radikal vereinfachen
PERFORMANCE Anzahl der heruntergeladenen Dateien verringern (Stichwort:»above the fold«) Verschiedene Bildergrößen anbieten Komprimierung verwenden
ENTWICKLUNG EINER MOBILE-APP AM BEISPIEL VON PEERIGON
DAS WASSERFALL- MODELL HAT AUSGEDIENT
ITERATION IST ANGESAGT
1. USER-STORIES FÜR EIN FEATURE ENTWICKELN
Beispiel Du bist gerade in der Arbeit. Plötzlich vibriert dein Handy und meldet, dass du über peerigon eine neue Einladung gekriegt hast. Ein Freund von dir möchte heute Abend zusammen Pizza backen. Aufgabe: Teile deinem Freund über die App mit, dass du dabei bist
2. WIREFRAMES ERSTELLEN
3. USABILITY- TESTS MIT DEN WIREFRAMES UND USER-STORIES
Beispiel Hat der User Probleme, den Create-Button zu finden? Entdeckt der User den Preset-Button? Fügt er ein Bild hinzu? Wie kommt der User mit dem Userpicker zurecht? Bereitet die mehrfache Auswahl Probleme? Versteht der User den Unterschied zwischen»in der Kontaktliste«und»Bekommt eine Mail«?
4. DESIGN-MOCK ERSTELLEN
5. FEATURE IMPLEMENTIEREN
6. USABILITY-TESTS MIT DER APP UND DEN GLEICHEN USER-STORIES
Und zum nächsten Feature...
Vorteil bei dieser Vorgehensweise FRÜHES FEEDBACK UND MÖGLICHKEIT ZUR KURSKORREKTUR
VIELEN DANK FÜR IHRE AUFMERKSAMKEIT
QUELLEN http://static.googleusercontent.com/media/www.google.com/de//intl/all_all/think/multiscreen/pdf/ multi-screen-consumer-whitepaper_research-studies.pdf http://www.lukew.com/ff/entry.asp?1085 http://webkrauts.de/artikel/2011/mobile-usability-gebrauchstauglichkeit-fuer-unterwegs Entypo Piktogramme von Daniel Bruce www.entypo.com