MOBILE USABILITY. Johannes Ewald peerigon UG

Transkript

1 MOBILE USABILITY Johannes Ewald peerigon UG

2 ÜBER MICH Johannes Ewald UI-Designer und Webentwickler Studium Interaktive Medien Gründung der peerigon UG

3

4 MOBILE APP MOBILE WEB

5 GRUNDLAGEN DER MOBILE USABILITY

6 62% Erfolgsquote bei der mobilen Nutzung von Webseiten Mobile Usability, Jakob Nielsen, 2011

7 Wenn wir für mobile Geräte entwickeln, optimieren wir unsere Software für Touchscreens Kleine Displays Schlechte Internetverbindungen

8 Durchschnittliche Druckfläche 1 cm 1 cm

9 Empfohlene Druckfläche 1 cm x 1 cm

10 Empfohlene Druckfläche Mindestdruckfläche 1 cm x 1 cm 7 mm x 7 mm ~90 px

11 Toucharea Button

12 WIE BIETE ICH EINE MOBILE WEBSEITE AN?

13 RESPONSIVE DESIGN DYNAMIC SERVING

14 RESPONSIVE DESIGN Gleiche Codebasis für alle Geräte Anpassungen des Designs durch sog. Media-Queries

15 DYNAMIC SERVING Jedes Gerät bekommt eine speziell optimierte Version ausgeliefert

16 RESPONSIVE DESIGN Pro Keine fehleranfällige Geräteerkennung Zukunftssicher Normalerweise geringerer Wartungsaufwand

17 RESPONSIVE DESIGN Contra Stärken einer Plattform werden evtl. nicht ausgereizt Unnötige bzw. zu große Dateien werden evtl. heruntergeladen

18 DYNAMIC SERVING Pro Eine optimierte Lösung für das jeweilige Gerät Evtl. bessere Ladezeiten, da nur benötigte Dateien heruntergeladen werden

19 DYNAMIC SERVING Contra Höherer Wartungsaufwand Evtl. verwirrend, wenn die einzelnen Versionen sich zu sehr unterscheiden

20 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.

21 HINWEISE ZUM DYNAMIC SERVING Links sollten shareable sein Die automatische Erkennung sollte manuell überschreibbar sein

22 WAS GIBT ES BEI MOBILEN WEBSEITEN ZU BEACHTEN?

23 Drei Bereiche, die zu einer guten Mobile Experience beitragen Layout Content Performance

24 LAYOUT Mindesttouchflächen einhalten Mouse-Overs vermeiden Aussagekräftige Buttons verwenden

25 CONTENT Einteilung in Primary- und Secondary-Content Aber: Keine Beschränkung der Funktionalität Formulare radikal vereinfachen

26 PERFORMANCE Anzahl der heruntergeladenen Dateien verringern (Stichwort:»above the fold«) Verschiedene Bildergrößen anbieten Komprimierung verwenden

27 ENTWICKLUNG EINER MOBILE-APP AM BEISPIEL VON PEERIGON

28 DAS WASSERFALL- MODELL HAT AUSGEDIENT

29 ITERATION IST ANGESAGT

30 1. USER-STORIES FÜR EIN FEATURE ENTWICKELN

31 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

32 2. WIREFRAMES ERSTELLEN

33

34 3. USABILITY- TESTS MIT DEN WIREFRAMES UND USER-STORIES

35 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«?

36 4. DESIGN-MOCK ERSTELLEN

37

38 5. FEATURE IMPLEMENTIEREN

39 6. USABILITY-TESTS MIT DER APP UND DEN GLEICHEN USER-STORIES

40 Und zum nächsten Feature...

41 Vorteil bei dieser Vorgehensweise FRÜHES FEEDBACK UND MÖGLICHKEIT ZUR KURSKORREKTUR

42 VIELEN DANK FÜR IHRE AUFMERKSAMKEIT

43 QUELLEN multi-screen-consumer-whitepaper_research-studies.pdf Entypo Piktogramme von Daniel Bruce