Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Usability Im Mobile Web

2,343 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Usability Im Mobile Web

  1. 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. 2. © insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi © insertEFFECT 2
  3. 3. Entwicklung Marketing Usability © insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi 3
  4. 4. Danke iPhone! © insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi
  5. 5. Die Sorgenkinder des mobilen Webs. Ausgabe Verbindung Eingabe © insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. Zutaten für eine gute User Experience Eingabe der URL © insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi
  16. 16. Zutaten für eine gute User Experience Objekt - Suche © insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi
  17. 17. Zutaten für eine gute User Experience Suchergebnislisten © insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi
  18. 18. Zum Mitnehmen © insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi
  19. 19. © insertEFFECT – web mobile specialists Mobile Web Development http://insfx.mobi © insertEFFECT 19
  20. 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 |

×