mobile
Handliche
Designkonzepte
UX
User Experience und
Mobile Webdesign
Peter Rozek, 12.10.2010

Peter Rozek
...

... seit 2010 bei der ecomplexx GmbH als Frontend-
Entwickler für die barrierefreie und
gebrauchtsaugliche Entwicklung von Websites.
...Usability Professional im AK Barrierefreiheit
... mit think green - neue Medien im Einkaufsführer
Barrierefreies Internet aufgenommen und
Unterstützer im Aktionsbündnis für barrierefreie
Informationstechnik.

los geht´s...

mobile
Mobile Webdesign
UX
was ist das ...

mobile
worüber sprechen wir ...
UX

mobile
... Design
für das
UX
iPhone...?

mobile
oder
UX

mobile
... Design
für das
UX
iPad...?

mobile
nein...
UX

Mobile Webdesign für eine
Vielzahl an Geräten...

mobile
UX
...und für die Zielgruppe!

mobile
traurige Realität
UX

mobile
Jakob Nielsen:
„The Mobile User
Experience is
UX
Miserable“
http://www.useit.com/alertbox/mobile-usability.html

mobile
Gründe...
UX

mobile
Kleine Bildschirme
GUI
UX
Performance
schlechte Usability
http://www.useit.com/alertbox/mobile-usability.html

mobile
Jakob Nielsen:
59% Erfolgsquote
UX
http://www.useit.com/alertbox/mobile-usability.html

mobile
was tun ...
UX

mobile
Kopf in den Sand
UX
stecken... ?

mobile
Alan Kay famously said that the Mac
was “the first computer worth
criticizing.” Similarly, the iPhone is
the first mobile Internet device worth
UX
criticizing. It’s a starting point for
mobile online-services access, not an
endpoint.
http://www.useit.com/alertbox/mobile-2009.html

mobile
Das iPhone hat die
mobile Nutung
von Internetseiten
UX
erst möglich
gemacht.

mobile
... kein Endpunkt
UX

mobile
Lösung
UX

mobile
Verstehen
Analysieren
Definition
UX
Entwurf / Design
Realisation
Test

mobile
Verstehen
UX

mobile
Die 3 Dimensionen
mobiler
UX
Internetnutzung

mobile
Eckdaten für Konzeption und Entwicklung:
Context
Content
UX
Component

mobile
Für den Nutzer wichtig:
Content
Connect
UX
Share

mobile
Für den Nutzer wichtig:
Content der mobil
nutzbar ist.
UX

mobile
Für den Nutzer wichtig:
Vernetzen und
Inhalte teilen
UX

mobile
Context
UX

Context

Demografie

Umfeld

Fähigkeiten

mobile
Content
UX

mobile
Content:
Lesbarkeit
Navigierbarkeit
UX
Interaktion

mobile
„Mobile bedeutet nicht
Dinge zu verkleinern,
sondern sie mobil
UX
nutzbar und bedienbar
zu machen.“

Login
(
(
große Input-Felder und
Submit-Buttons viel zu klein und kaum
erkennbar

(

Navigation
(
(
lesbare Inhaltsstruktur
kaum erkennbar

Navigation
(
(
Übersichtliche und klare
Navigation

(

Fokus
(
(
Fokus auf Ihnalte
...typisch Bild

mobile
Reduktion
bedeutet mehr
UX
User Experience!

Lesbarkeit
(
(

Suche
(
(
Inputfelder in guter Größe Typische Inputfelder, viel zu
klein

Buttons
(
(
Klickbare Buttons Viel zu klein und kaum
erkennbar

mobile
„Formulare sind
Kommunikation
UX
und kein
Datenbankprozess.“

mobile
... das gilt umso
mehr für den
UX
Bereich Mobile !

(
(

(

mobile
Component
UX

Component

Unterschiedliche Screengrößen

Unterschiedliche Funktionen und Interfaces

mobile
Verstehen
Analysieren
Definition
UX
Entwurf (Design)
Realisation
Test

mobile
Analysieren
UX

mobile
Zielgruppe
kennen und
UX
verstehen...

Fokus Gruppen

Card Sorting

Personas

mobile
Verstehen
Analysieren
Definition
UX
Entwurf (Design)
Realisation
Test

mobile
Defintion
UX

mobile
Informationsarchitektur
UX
optimieren

mobile
UX

Geringe
Verschachtelungstiefe

mobile
Verstehen
Analysieren
Definition
UX
Entwurf / Design
Realisation
Test

mobile
Entwurf /
UX
Design

mobile
UX
http://designreviver.com/inspiration/a-selection-of-mobile-ui-wireframe-sketches/

http://konigi.com/tools/overview

mobile
Verstehen
Analysieren
Definition
UX
Entwurf (Design)
Realisation
Test

mobile
Realisation
UX

mobile
Webstandards
UX
nutzen !

http://www.w3c.org

3
http://ready.mobi/launch.jsp?locale=en_EN

mobile
Verstehen
Analysieren
Definition
UX
Entwurf (Design)
Realisation
Test

mobile
Test
UX

Usability Tests

Interview

3
Webdienste
http://ready.mobi/launch.jsp?locale=en_EN

mobile
Traffic analysieren
UX

mobile
Vielen Dank für
Ihre
UX Aufmerksamkeit
Peter Rozek, 12.10.2010

Fragen
Peter Rozek, 12.10.2010

E-Mail: peter.rozek@complexx.com
E-Mail: rozek.p@think-green.de
Twitter: Webinterface
Peter Rozek, 12.10.2010