Mobile Usability - Entscheidend für Hopp oder Flopp einer mobilen Lösung • Usability Dos & Don'ts im mobilen Kontext • Endgeräte-übergreifendes Konzept und Design insertEFFECT, Benno Bartels; Mobile Solutions

1. Mobile Usability
Entscheidend für Hopp oder Flopp einer mobilen Lösung
web mobile specialists
Benno Bartels , 29.01.2010 M-Days, München

2. © insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi
© insertEFFECT 2

3. Entwicklung
Marketing
Usability
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi 3

4. Danke iPhone!
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

5. Die Sorgenkinder des mobilen Webs.
Ausgabe
Verbindung
Eingabe
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

6. Die Sorgenkinder des mobilen Webs.
Eingabe
Ausgabe
Mouse-Navigation ohne Maus
(scrollen, markieren, drag‘n‘drop … )
Verbindung
Textinput on mobiles sucks!
Eingabe
(egal ob Touch, Numpad oder Qwerty)
Die Welt lenkt mich ab!
(Unterbrechungen, Eingehende Anrufe, …)
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

7. Die Sorgenkinder des mobilen Webs.
Verbindung
Ausgabe
Verbindung
Eingabe
...... …… … .. . . . . . . . . . . ich hab grad kein Netz!
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

8. Die Sorgenkinder des mobilen Webs.
Ausgabe
Seitenlayout
Ausgabe
(für... 128 x 128 … 176 x 208 ... 352 x 416 … 480×320 … ?!?)
Verbindung
Wenig Platz
(Wohin mit der Navigation? Wo bin ich?)
Eingabe
Browsereigenheiten
(JavaScript APIs, HTML-Bugs und seltsame Dialekte)
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

9. Der Weg zur benutzerfreundlichen mobilen Website
Konzept ausdenken Endgeräte klassifizieren Wireframe erstellen Usability Test des Prototypen
Wireframe anpassen/ optimieren GUI entwerfen GUI testen Website entwickeln
Usability Test durchführen Ergebnisse einarbeiten Online stellen
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

10. Endgeräte klassifizieren….
Zielguppe
(breite Masse bis spezielles Publikum, Altersstruktur)
Logfiles der Website
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

11. Der Weg zur benutzerfreundlichen mobilen Website
Konzept ausdenken Endgeräte klassifizieren Wireframes erstellen Usability Test des Prototypen
Wireframe anpassen/ optimieren GUI entwerfen GUI testen Website entwickeln
Usability Test durchführen Ergebnisse einarbeiten Online stellen
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

12. Wireframes erstellen und testen
Klickbare Wireframes
(… zwingen zu durchdachtem
Konzept)
Desktop und Mobile testen
(… nur so kommen Probleme zum
Vorschein)
Userfeedback einholen
Desktop: http://www.inserteffect.com/showcase/clickdummy
Mobile : http://tinyurl.com/insfxclick
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

13. Der Weg zur benutzerfreundlichen mobilen Website
Konzept ausdenken Endgeräte klassifizieren Wireframes erstellen Usability Test des Prototypen
Wireframe anpassen/ optimieren GUI entwerfen GUI testen Website entwickeln
Usability Test durchführen Ergebnisse einarbeiten Online stellen
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

14. Usability Test durchführen
„Handyschlitten“
(Testkandidaten bringen ihr eigenes Handy mit)
Nur 5-7 Testpersonen
(das reicht um Probleme aufzudecken)
Spezielle Aufgaben geben
Zum „laut Denken“ animieren
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

15. Zutaten für eine gute User Experience Eingabe der URL
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

16. Zutaten für eine gute User Experience Objekt - Suche
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

17. Zutaten für eine gute User Experience Suchergebnislisten
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

18. Zum Mitnehmen
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi

19. © insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi
© insertEFFECT 19

20. Danke!
Kontact
Benno Bartels
mail: benno@insfx.com Fürther Strasse 53a
fon: 09 11 / 27 44 87 -11 D-90429 Nürnberg
© insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi
20 © inserfEFFECT |