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...
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.h...
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 fi...
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               ...
(
Navigation




                              (
                          (



lesbare Inhaltsstruktur
                    ...
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 I...
Buttons




                        (
                    (



Klickbare Buttons       Viel zu klein und kaum
            ...
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
Handliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile Webdesign
Nächste SlideShare
Wird geladen in …5
×

Handliche Designkonzepte, UX und Mobile Webdesign

2.991 Aufrufe

Veröffentlicht am

Veröffentlicht in: Design
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.991
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Handliche Designkonzepte, UX und Mobile Webdesign

  1. 1. mobile Handliche Designkonzepte UX User Experience und Mobile Webdesign Peter Rozek, 12.10.2010
  2. 2. Peter Rozek ...
  3. 3. ... 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.
  4. 4. los geht´s...
  5. 5. mobile Mobile Webdesign UX was ist das ...
  6. 6. mobile worüber sprechen wir ... UX
  7. 7. mobile ... Design für das UX iPhone...?
  8. 8. mobile oder UX
  9. 9. mobile ... Design für das UX iPad...?
  10. 10. mobile nein... UX
  11. 11. Mobile Webdesign für eine Vielzahl an Geräten...
  12. 12. mobile UX ...und für die Zielgruppe!
  13. 13. mobile traurige Realität UX
  14. 14. mobile Jakob Nielsen: „The Mobile User Experience is UX Miserable“ http://www.useit.com/alertbox/mobile-usability.html
  15. 15. mobile Gründe... UX
  16. 16. mobile Kleine Bildschirme GUI UX Performance schlechte Usability http://www.useit.com/alertbox/mobile-usability.html
  17. 17. mobile Jakob Nielsen: 59% Erfolgsquote UX http://www.useit.com/alertbox/mobile-usability.html
  18. 18. mobile was tun ... UX
  19. 19. mobile Kopf in den Sand UX stecken... ?
  20. 20. 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
  21. 21. mobile Das iPhone hat die mobile Nutung von Internetseiten UX erst möglich gemacht.
  22. 22. mobile ... kein Endpunkt UX
  23. 23. mobile Lösung UX
  24. 24. mobile Verstehen Analysieren Definition UX Entwurf / Design Realisation Test
  25. 25. mobile Verstehen UX
  26. 26. mobile Die 3 Dimensionen mobiler UX Internetnutzung
  27. 27. mobile Eckdaten für Konzeption und Entwicklung: Context Content UX Component
  28. 28. mobile Für den Nutzer wichtig: Content Connect UX Share
  29. 29. mobile Für den Nutzer wichtig: Content der mobil nutzbar ist. UX
  30. 30. mobile Für den Nutzer wichtig: Vernetzen und Inhalte teilen UX
  31. 31. mobile Context UX
  32. 32. Context
  33. 33. Demografie
  34. 34. Umfeld
  35. 35. Fähigkeiten
  36. 36. mobile Content UX
  37. 37. mobile Content: Lesbarkeit Navigierbarkeit UX Interaktion
  38. 38. mobile „Mobile bedeutet nicht Dinge zu verkleinern, sondern sie mobil UX nutzbar und bedienbar zu machen.“
  39. 39. Login ( ( große Input-Felder und Submit-Buttons viel zu klein und kaum erkennbar
  40. 40. (
  41. 41. Navigation ( ( lesbare Inhaltsstruktur kaum erkennbar
  42. 42. Navigation ( ( Übersichtliche und klare Navigation
  43. 43. (
  44. 44. Fokus ( ( Fokus auf Ihnalte ...typisch Bild
  45. 45. mobile Reduktion bedeutet mehr UX User Experience!
  46. 46. Lesbarkeit ( (
  47. 47. Suche ( ( Inputfelder in guter Größe Typische Inputfelder, viel zu klein
  48. 48. Buttons ( ( Klickbare Buttons Viel zu klein und kaum erkennbar
  49. 49. mobile „Formulare sind Kommunikation UX und kein Datenbankprozess.“
  50. 50. mobile ... das gilt umso mehr für den UX Bereich Mobile !
  51. 51. ( (
  52. 52. (
  53. 53. mobile Component UX
  54. 54. Component
  55. 55. Unterschiedliche Screengrößen
  56. 56. Unterschiedliche Funktionen und Interfaces
  57. 57. mobile Verstehen Analysieren Definition UX Entwurf (Design) Realisation Test
  58. 58. mobile Analysieren UX
  59. 59. mobile Zielgruppe kennen und UX verstehen...
  60. 60. Fokus Gruppen
  61. 61. Card Sorting
  62. 62. Personas
  63. 63. mobile Verstehen Analysieren Definition UX Entwurf (Design) Realisation Test
  64. 64. mobile Defintion UX
  65. 65. mobile Informationsarchitektur UX optimieren
  66. 66. mobile UX
  67. 67. Geringe Verschachtelungstiefe
  68. 68. mobile Verstehen Analysieren Definition UX Entwurf / Design Realisation Test
  69. 69. mobile Entwurf / UX Design
  70. 70. mobile UX http://designreviver.com/inspiration/a-selection-of-mobile-ui-wireframe-sketches/
  71. 71. http://konigi.com/tools/overview
  72. 72. mobile Verstehen Analysieren Definition UX Entwurf (Design) Realisation Test
  73. 73. mobile Realisation UX
  74. 74. mobile Webstandards UX nutzen !
  75. 75. http://www.w3c.org
  76. 76. 3 http://ready.mobi/launch.jsp?locale=en_EN
  77. 77. mobile Verstehen Analysieren Definition UX Entwurf (Design) Realisation Test
  78. 78. mobile Test UX
  79. 79. Usability Tests
  80. 80. Interview
  81. 81. 3 Webdienste http://ready.mobi/launch.jsp?locale=en_EN
  82. 82. mobile Traffic analysieren UX
  83. 83. mobile Vielen Dank für Ihre UX Aufmerksamkeit Peter Rozek, 12.10.2010
  84. 84. Fragen Peter Rozek, 12.10.2010
  85. 85. E-Mail: peter.rozek@complexx.com E-Mail: rozek.p@think-green.de Twitter: Webinterface Peter Rozek, 12.10.2010

×