Weitere ähnliche Inhalte Ähnlich wie Usability Im Mobile Web (20) Usability Im Mobile Web2. © 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
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
19. © insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi
© insertEFFECT 19