Usability im mobilen Web Rezepte und Konzepte für die beste mobile Web Usability web mobile specialists Benno Bartels, 02.12.09 iphonedevcon, Köln
Marketing Entwicklung Usability 2
Danke iphone!
Usability: Mobile Web vs. Native Applikation Mobile Website Native Applikation Design / Konzept geräteübergreifend Web-Erwartungshaltung Native Erwartungshaltung Toleranz für längere Ladezeiten Zugriff auf Hardware (Buttons ) Offline Browsing
Die Sorgenkinder des mobilen Webs. Eingabe Ausgabe Verbindung
Verbindung Die Sorgenkinder des mobilen Webs. Eingabe: Wo ist die Maus? Eingabe Ausgabe
Die Sorgenkinder des mobilen Webs. Eingabe Eingabe Ausgabe Verbindung Mouse-Navigation ohne Maus (scrollen, markieren, drag n drop ) Textinput on mobiles sucks! (egal ob Touch, Numpad oder Qwerty) Die Welt lenkt mich ab! (Unterbrechungen, Eingehende Anrufe, )
Die Sorgenkinder des mobilen Webs. Verbindung Eingabe Ausgabe Verbindung............... ich hab grad kein Netz!
Die Sorgenkinder des mobilen Webs. Ausgabe Seitenlayout Eingabe Ausgabe Verbindung (für... 128 x 128 176 x 208... 352 x 416 480 320?!?) Wenig Platz (Wohin mit der Navigation? Wo bin ich?) Content auf x Endgeräten (Grafiken, Animationen, Buttons, Formulare, Videos, ) Browsereigenheiten (JavaScript APIs, HTML-Bugs und seltsame Dialekte)
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
Konzept ausdenken Was ergibt Sinn? Wer soll das benutzen? Würde ich das selber Nutzen? Realität. Was will der Kunde? Kundenträume geschickt zerschlagen!
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
Endgeräte klassifizieren. Zielguppe (breite Masse bis spezielles Publikum, Altersstruktur) Logfiles der Website Mobile Analytics / Devicetrends
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
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
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
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
Zutaten für eine gute User Experience Eingabe der URL
Zutaten für eine gute User Experience Objekt - Suche
Zutaten für eine gute User Experience Fehleingaben
Zutaten für eine gute User Experience Suchergebnislisten
Zutaten für eine gute User Experience Content und Navigation
Zutaten für eine gute User Experience Touchfreundlichkeit (1 x 1 cm Fläche, auch für Textlinks) Personalisierung (Log-In Bereiche wenn sie Mehrwert bieten) Paging (Zwiespalt: Usability vs. Downloadzeit) Fragen, Ideen, Diskussionen,
Zum Mitnehmen
25
Contact Our office Benno Bartels mail: benno@insfx.com fon: 09 11 / 27 44 87-11 Fürther Strasse 53a D-90429 Nürnberg 26 inserfeffect