Das Dokument behandelt mobile UX und Webdesign, insbesondere die Herausforderungen der Benutzerfreundlichkeit auf kleinen Bildschirmen. Jakob Nielsen wird zitiert, um die derzeit miserable mobile Nutzererfahrung zu verdeutlichen, und es werden Strategien zur Verbesserung der Usability präsentiert. Der Fokus liegt auf der Wichtigkeit von lesbarem Content, klarer Navigation und der Anpassung an verschiedene Bildschirmgrößen, um die Nutzererfahrung zu optimieren.

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

2. Peter Rozek
...

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. los geht´s...

5. mobile
Mobile Webdesign
UX
was ist das ...

6. mobile
worüber sprechen wir ...
UX

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

8. mobile
oder
UX

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

10. mobile
nein...
UX

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

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

13. mobile
traurige Realität
UX

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

15. mobile
Gründe...
UX

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

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

18. mobile
was tun ...
UX

19. mobile
Kopf in den Sand
UX
stecken... ?

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. mobile
Das iPhone hat die
mobile Nutung
von Internetseiten
UX
erst möglich
gemacht.

22. mobile
... kein Endpunkt
UX

23. mobile
Lösung
UX

24. mobile
Verstehen
Analysieren
Definition
UX
Entwurf / Design
Realisation
Test

25. mobile
Verstehen
UX

26. mobile
Die 3 Dimensionen
mobiler
UX
Internetnutzung

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

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

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

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

31. mobile
Context
UX

32. Context

33. Demografie

34. Umfeld

35. Fähigkeiten

36. mobile
Content
UX

37. mobile
Content:
Lesbarkeit
Navigierbarkeit
UX
Interaktion

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

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

40. (

41. Navigation
(
(
lesbare Inhaltsstruktur
kaum erkennbar

42. Navigation
(
(
Übersichtliche und klare
Navigation

43. (

44. Fokus
(
(
Fokus auf Ihnalte
...typisch Bild

45. mobile
Reduktion
bedeutet mehr
UX
User Experience!

46. Lesbarkeit
(
(

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

48. Buttons
(
(
Klickbare Buttons Viel zu klein und kaum
erkennbar

49. mobile
„Formulare sind
Kommunikation
UX
und kein
Datenbankprozess.“

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

51. (
(

52. (

53. mobile
Component
UX

54. Component

55. Unterschiedliche Screengrößen

56. Unterschiedliche Funktionen und Interfaces

57. mobile
Verstehen
Analysieren
Definition
UX
Entwurf (Design)
Realisation
Test

58. mobile
Analysieren
UX

59. mobile
Zielgruppe
kennen und
UX
verstehen...

60. Fokus Gruppen

61. Card Sorting

62. Personas

63. mobile
Verstehen
Analysieren
Definition
UX
Entwurf (Design)
Realisation
Test

64. mobile
Defintion
UX

65. mobile
Informationsarchitektur
UX
optimieren

66. mobile
UX

67. Geringe
Verschachtelungstiefe

69. mobile
Verstehen
Analysieren
Definition
UX
Entwurf / Design
Realisation
Test

70. mobile
Entwurf /
UX
Design

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

72. http://konigi.com/tools/overview

74. mobile
Verstehen
Analysieren
Definition
UX
Entwurf (Design)
Realisation
Test

75. mobile
Realisation
UX

76. mobile
Webstandards
UX
nutzen !

77. http://www.w3c.org

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

79. mobile
Verstehen
Analysieren
Definition
UX
Entwurf (Design)
Realisation
Test

80. mobile
Test
UX

81. Usability Tests

82. Interview

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

84. mobile
Traffic analysieren
UX

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

86. Fragen
Peter Rozek, 12.10.2010

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