Leitfaden zur Optimierung einer schon bestehenden Anwendung für unterschiedliche mobile Endgeräte (Responsive Retrofitting) sowie das Testen und Auswerten mittels Eye-Tracking Werkzeugen. Diskussionspunkte waren - Der Umfang der Anwendung sowie der Anwendungsfälle. - Der Umfang der Spezifikation des Konzepts über Breakpoints und Geräte und Seitentypen. - Konzeptionstools, die bei der Entwicklung helfen. - Das Testen mittels Eye-Tracking Methoden. Weitere technische Informationen zu diesem Thema gibt es auch in unserem Blog: http://blog-de.akquinet.de/2014/06/03/responsive-retrofitting-am-beispiel-einer-webanwendung/

1. Edna Kropp & Nicole Charlier
Die WM fuer die Jackentasche

8. Neuauflage WM-Tippspiel

11. Stategie 1 - Mobile-First-Ansatz
Responsive Design

12. Stategie 2 - Mobile-First-und
Content-First-Ansatz
Responsive Design

14. A Endstand
B Erzielte Punkte pro Gruppe
C Erzielte Punkte pro Spiel
D Karstens Tipp
A
B
DC

18. Responsive Retrofitting

20. 1. Was ist geblieben?
2. Was wurde entfernt?
3. Was kam hinzu?
4. Was wurde veraendert?

21. 1. Was ist geblieben?
Aufteilung der Inhalte auf den Seiten
Anmeldung/
Registrierung
Profil
Auswertung
Kontakt /
Impressum
Regeln /
Gewinne
Tippen

22. 2. Was wurde entfernt?
sich wiederholende Daten

23. 3. Was kam hinzu?
Breakpoints
≤ 672 px ≤ 1000 px > 1000 px

24. 3. Was kam hinzu?
SVG Logos

25. 3. Was kam hinzu?
Unterstuetzung
fuer kleine Viewports

26. 4. Was wurde veraendert?
Inhaltliche Ueberarbeitung

27. Usability Test
mit Eye-Tracking
Warum ist das wichtig?

28. Fragestellungen
1. Intuitiv auf mobil?
2. Blickverlauf?
3. Gestik?
4. Geraetewechsel?

30. Zusammenfassung
• Content-First-Ansatz für kleine
Viewports für Responsive Retrofitting
– Inhaltliche, vertikale und horizontale
Anpassungen notwendig
– Herausforderung bei Tabellen
• Prüfung anhand von mobilen Usability
Tests empfohlen

31. Danke

32. Mehr auf unserem Blog
http://goo.gl/YcHrHQ
edna.kropp@akquinet.de
nicole.charlier@akquinet.de