Download - Usability Im Mobile Web

Transcript
Page 1: Usability Im Mobile Web

web mobile specialists

Entscheidend für Hopp oder Flopp einer mobilen Lösung

Mobile Usability

Benno Bartels , 29.01.2010 M-Days, München

Page 2: Usability Im Mobile Web

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

Page 3: Usability Im Mobile Web

3

MarketingEntwicklung

Usability

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

Page 4: Usability Im Mobile Web

Danke iPhone!

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

Page 5: Usability Im Mobile Web

Die Sorgenkinder des mobilen Webs.

Verb

indu

ng

Eing

abe

Aus

gabe

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

Page 6: Usability Im Mobile Web

Die Sorgenkinder des mobilen Webs.

Eingabe

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, …)

Verb

indu

ng

Eing

abe

Aus

gabe

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

Page 7: Usability Im Mobile Web

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

Die Sorgenkinder des mobilen Webs.

Verbindung

...... …… … .. . . . . . . . . . . ich hab grad kein Netz!

Verb

indu

ng

Eing

abe

Aus

gabe

Page 8: Usability Im Mobile Web

Die Sorgenkinder des mobilen Webs.

Ausgabe

Seitenlayout

(für... 128 x 128 … 176 x 208 ... 352 x 416 … 480×320 … ?!?)

Wenig Platz

(Wohin mit der Navigation? Wo bin ich?)

Browsereigenheiten

(JavaScript APIs, HTML-Bugs und seltsame Dialekte)

Verb

indu

ng

Eing

abe

Aus

gabe

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

Page 9: Usability Im Mobile Web

Der Weg zur benutzerfreundlichen mobilen Website

Endgeräte klassifizierenKonzept ausdenken 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

Presenter
Presentation Notes
Definition der 3 Geräteklassen nach Nielsen (von links nach rechts) 1. Feature phones (regular cellphones) with a tiny screen and a numeric keypad. These devices account for the vast majority of the market (at least 85% in some statistics). 2. Smartphones, in a range of form factors, typically with a mid-sized screen and a full A-Z keypad. 3. Touch-screen phones (such as the iPhone) with a nearly device-sized screen and a true GUI driven by direct manipulation and touch gestures.
Page 10: Usability Im Mobile Web

Endgeräte klassifizieren….

Zielguppe

(breite Masse bis spezielles Publikum, Altersstruktur)

Logfiles der Website

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

Page 11: Usability Im Mobile Web

Der Weg zur benutzerfreundlichen mobilen Website

Endgeräte klassifizierenKonzept ausdenken 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

Presenter
Presentation Notes
Definition der 3 Geräteklassen nach Nielsen (von links nach rechts) 1. Feature phones (regular cellphones) with a tiny screen and a numeric keypad. These devices account for the vast majority of the market (at least 85% in some statistics). 2. Smartphones, in a range of form factors, typically with a mid-sized screen and a full A-Z keypad. 3. Touch-screen phones (such as the iPhone) with a nearly device-sized screen and a true GUI driven by direct manipulation and touch gestures.
Page 12: Usability Im Mobile Web

Wireframes erstellen und testen

Desktop: http://www.inserteffect.com/showcase/clickdummy Mobile : http://tinyurl.com/insfxclick

Klickbare Wireframes

(… zwingen zu durchdachtem

Konzept)

Desktop und Mobile testen

(… nur so kommen Probleme zum

Vorschein)

Userfeedback einholen

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

Page 13: Usability Im Mobile Web

Der Weg zur benutzerfreundlichen mobilen Website

Endgeräte klassifizierenKonzept ausdenken 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

Presenter
Presentation Notes
Definition der 3 Geräteklassen nach Nielsen (von links nach rechts) 1. Feature phones (regular cellphones) with a tiny screen and a numeric keypad. These devices account for the vast majority of the market (at least 85% in some statistics). 2. Smartphones, in a range of form factors, typically with a mid-sized screen and a full A-Z keypad. 3. Touch-screen phones (such as the iPhone) with a nearly device-sized screen and a true GUI driven by direct manipulation and touch gestures.
Page 14: Usability Im Mobile Web

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

Page 15: Usability Im Mobile Web

Zutaten für eine gute User Experience Eingabe der URL

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

Page 16: Usability Im Mobile Web

Zutaten für eine gute User Experience Objekt - Suche

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

Page 17: Usability Im Mobile Web

Zutaten für eine gute User Experience Suchergebnislisten

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

Page 18: Usability Im Mobile Web

Zum Mitnehmen

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

Page 19: Usability Im Mobile Web

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

Page 20: Usability Im Mobile Web

© inserfEFFECT |20

Kontact

Benno Bartelsmail: [email protected]: 09 11 / 27 44 87 -11

Fürther Strasse 53aD-90429 Nürnberg

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

Danke!