Die mobile Benutzerfreundlichkeit ist entscheidend für den Erfolg mobiler Lösungen. Das Dokument beschreibt die Herausforderungen des mobilen Internets und bietet einen Leitfaden zur Entwicklung benutzerfreundlicher mobiler Websites, einschließlich der Klassifizierung von Endgeräten, Wireframe-Erstellung und Durchführung von Usability-Tests. Es betont die Bedeutung von Benutzerfeedback und Tests mit echten Benutzern zur Verbesserung der User Experience.

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 |