SlideShare ist ein Scribd-Unternehmen logo
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
Handliche Designkonzepte, UX und Mobile Webdesign
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
Handliche Designkonzepte, UX und Mobile Webdesign
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

Weitere ähnliche Inhalte

Handliche Designkonzepte, UX und Mobile Webdesign