A lecture about Usability and Webdesign given at the Swiss Marketing Academy as part of the Online Marketer course.

1. Usability &
Webdesign
Benjamin Wiederkehr
Online Marketer SMA Lehrgang
Zürich, 03.03.2010
1

2. Wer bin ich?
Benjamin Wiederkehr
Bachelor of Arts in Interaction Design
User Experience Lead
Interactive Things
http://interactivethings.com
03.03.10 Usability & Webdesign OM SMA | BW 2

3. Wer seid ihr?
Online Sales, Sales Support, Marketing
Stategist, Cross Media, Social Media…
03.03.10 Usability & Webdesign OM SMA | BW 3

4. Was tun wir?
Blick hinter die Kulissen einer Online Präsenz
und Einblick in die Gestaltung und Umsetzung
03.03.10 Usability & Webdesign OM SMA | BW 4

5. Ziel des Abends
03.03.10 Usability & Webdesign OM SMA | BW 5

6. Ziel des Abends
Verständnis
03.03.10 Usability & Webdesign OM SMA | BW 5

7. Ziel des Abends
Verständnis
Was machen wir?
03.03.10 Usability & Webdesign OM SMA | BW 5

8. Ziel des Abends
Verständnis
Was machen wir?
Wie machen wir es?
03.03.10 Usability & Webdesign OM SMA | BW 5

9. Ziel des Abends
Verständnis
Was machen wir?
Wie machen wir es?
03.03.10 Usability & Webdesign OM SMA | BW 5

10. Ziel des Abends
Verständnis
Was machen wir?
Wie machen wir es?
Sensibilisierung
03.03.10 Usability & Webdesign OM SMA | BW 5

11. Ziel des Abends
Verständnis
Was machen wir?
Wie machen wir es?
Sensibilisierung
Wieso machen wir es auf diese Weise?
03.03.10 Usability & Webdesign OM SMA | BW 5

12. Ablauf
03.03.10 Usability & Webdesign OM SMA | BW 6

13. Ablauf
Einführung
Das Internet
• Entstehung
• Status Quo
• Ausblick
Die
Technologie
• Medien
• Werkzeuge
Die Dualität
• Voraussetzung
• Erklärung
03.03.10 Usability & Webdesign OM SMA | BW 6

14. Ablauf
Einführung Erlebnis
Das Internet User
Entstehung
Experience
•
• Status Quo
• Ausblick • Bausteine
• Arbeitsteilung
Die Arbeitsprozess
•
• Arbeitsresultate
Kommunikation
Technologie
•
Medien
Design
•
• Werkzeuge
• Layout
Farbe
Die Dualität
•
• Typografie
• Voraussetzung • Kontrast
• Erklärung • Emotion
• Flow
• Visueller Reichtum
Usability
• Einfachheit
• Lesbarkeit
• Findbarkeit
• Zugänglichkeit
03.03.10 Usability & Webdesign OM SMA | BW 6

15. Ablauf
Einführung Erlebnis Kostprobe
Das Internet User Beispiel
Entstehung Ausgangslage
Experience
• •
• Status Quo • Refinement
• Ausblick • Bausteine • SHE
• Arbeitsteilung
Die Arbeitsprozess
Take
•
• Arbeitsresultate
Kommunikation
Technologie Aways
•
Medien
Design Der Fold
• •
• Werkzeuge • Die Auswahl
• Layout • Die Sprache
Farbe Das Detail
Die Dualität
• •
• Typografie
Kontrast
Voraussetzung
Q&A
• •
• Erklärung • Emotion
• Flow Fragen, Beispiele,
• Visueller Reichtum Falldiskussion
Usability
• Einfachheit
• Lesbarkeit
• Findbarkeit
• Zugänglichkeit
03.03.10 Usability & Webdesign OM SMA | BW 6

16. http://flickr.com/photos/walkn/2236986927/
Einführung
Einheit 01 Einführung 7

17. 01 Das Internet
03.03.10 Usability & Webdesign OM SMA | BW 8

18. Wo kommt es her?

19. Entstehung
Das Internet 10

20. 1965
Entstehung
Randcorporation beginnt mit
Forschung
bezüglich Sicherung von
Computersystemen gegen Ausfälle.
Wichtig
bei Abwehr von atomaren Angriffen.
1969
ARPAnet wird gegründet, der Vorläufer
des
Internets. Leitgedanke auch hier die
Angst
vor dem Supergau mit
Computersysteme.
Überlegung: Dezentrales
Computersystem
kann schwerer zerstört werden als
zentrales.
1977
Erstmalige Anwendung des TCP/IP-
Protokolls. (Transmission Control
Protocol/
Internet Protocol).
1980
Aufbau von erstem Internet. ARPAnet
fungiert als Backbone, als
Sammelpunkt
aller Hauptknotenpunkte.
1983
Das Internet 10

21. 1965
Entstehung 1989
Randcorporation beginnt mit Schweizerisches Forschungsnetz
Forschung SWITCH
bezüglich Sicherung von wird ans Internet angeschlossen.
Computersystemen gegen Ausfälle.
Wichtig 1991
bei Abwehr von atomaren Angriffen. Das WWW wird als Hypertext-System
zur allgemeinen Benutzung
1969 freigegeben
ARPAnet wird gegründet, der Vorläufer
des 1994-1999
Internets. Leitgedanke auch hier die Das Internet boomt, wächst über die
Angst Grenzen der Universitäten hinaus und
vor dem Supergau mit hat zeitweise bis 15% Zuwachsrate/
Computersysteme. Monat.
Überlegung: Dezentrales
Computersystem 2000
kann schwerer zerstört werden als Dotcom Bubble platzt. Viele DOTCOMs
zentrales. in die grosse Hoffnung an der Börse
gesetzt wurde schliessen ihre Tore.
1977 Erste Reformierung des Internets
Erstmalige Anwendung des TCP/IP- beginnt.
Protokolls. (Transmission Control
Protocol/ 2001
Internet Protocol). Die Zweite Runde beginnt. Das Internet
sucht seine neue Definition. Die
1980 Internetbranche hat sich gelichtet. Die
Aufbau von erstem Internet. ARPAnet Prophezeihung, dass nach einem Crash
fungiert als Backbone, als nur
Sammelpunkt die Grossen überleben werden hat sich
aller Hauptknotenpunkte. nicht bewahrheitet. Viele kleine
Spezialisten haben sich durch ihre
1983 Flexibilität besser gehalten als manch
ein grosser Betrieb.
Das Internet 10

22. 1965
Entstehung 1989 2002 - 2005
Randcorporation beginnt mit Schweizerisches Forschungsnetz Online Communities beginnen wieder
Forschung SWITCH aufzupoppen ( bsp. MySpace &
bezüglich Sicherung von wird ans Internet angeschlossen. Facebook). Man organsiert sich
Computersystemen gegen Ausfälle. vermehrt
Wichtig 1991 online. Foto Communities starten
bei Abwehr von atomaren Angriffen. Das WWW wird als Hypertext-System (Flickr) und die Anzahl Blogs beginnt an
zur allgemeinen Benutzung Relevanz zu gewinnen.
1969 freigegeben
ARPAnet wird gegründet, der Vorläufer 2006
des 1994-1999 Web 2.0 beginnt ein Begriff zu werden.
Internets. Leitgedanke auch hier die Das Internet boomt, wächst über die Obwohl bereits 2003 als Begriff
Angst Grenzen der Universitäten hinaus und eingeführt wird er zum Buzzword. Web
vor dem Supergau mit hat zeitweise bis 15% Zuwachsrate/ 2.0 wird zur Bezeichnung des Internet
Computersysteme. Monat. als Plattform und der damit
Überlegung: Dezentrales einhergehenden Veränderung von
Computersystem 2000 geschäftsmodellen verwendet.
kann schwerer zerstört werden als Dotcom Bubble platzt. Viele DOTCOMs
zentrales. in die grosse Hoffnung an der Börse Neben Social Networking wird Social
gesetzt wurde schliessen ihre Tore. Media (YouTube) wichtiger und
1977 Erste Reformierung des Internets verändert das Verhältnins von
Erstmalige Anwendung des TCP/IP- beginnt. Inhaltsproduzenten und -konsumenten
Protokolls. (Transmission Control grundlegend.
Protocol/ 2001
Internet Protocol). Die Zweite Runde beginnt. Das Internet 2007 - 2008
sucht seine neue Definition. Die Die Social Networking / Media
1980 Internetbranche hat sich gelichtet. Die Plattformen
Aufbau von erstem Internet. ARPAnet Prophezeihung, dass nach einem Crash boomen. WebApplikationen ersetzen
fungiert als Backbone, als nur Desktop Software. Die alte
Sammelpunkt die Grossen überleben werden hat sich Goldgräberstimmung ist wieder da.
aller Hauptknotenpunkte. nicht bewahrheitet. Viele kleine
Spezialisten haben sich durch ihre 2009
1983 Flexibilität besser gehalten als manch WebTV, WebNews, Lifestreaming, Real-
ein grosser Betrieb.
Das Internet 10

23. Chapter 11

24. 1965 - 1980 1980 - 1993 1993 - heute
Chapter 11

25. 1965 - 1980 1980 - 1993 1993 - heute
Militär
Chapter 11

26. 1965 - 1980 1980 - 1993 1993 - heute
Militär Wissenschaft
Militär
Chapter 11

27. 1965 - 1980 1980 - 1993 1993 - heute
Militär Wissenschaft Privatwirtschaf
Militär t&
persönlicher
Gebrauch
Wissenschaft
Militär
Chapter 11

28. Status Quo
Das Internet 12

29. Status Quo
Das Internet 12

30. Status Quo
Vor 2000
Das Internet 12

31. Status Quo
Vor 2000
Amazon
eBay
CraigsList
Yahoo
Google
Das Internet 12

32. Status Quo
Vor 2000 Nach 2000
Amazon
eBay
CraigsList
Yahoo
Google
Das Internet 12

33. Status Quo
Vor 2000 Nach 2000
Amazon Wikipedia
eBay MySpace
CraigsList Facebook
Yahoo YouTube
Google Twitter
Das Internet 12

34. Ausblick
Das Internet 13

35. Ausblick
1. Welle 2. Welle 3. Welle
Das Internet 13

36. Ausblick
1. Welle 2. Welle 3. Welle
Verknüpfte
Computer
ARPAnet
Das Internet 13

37. Ausblick
1. Welle 2. Welle 3. Welle
Verknüpfte Verknüpfte
Computer Dokumente
ARPAnet WorldWideWeb
Das Internet 13

38. Ausblick
1. Welle 2. Welle 3. Welle
Verknüpfte Verknüpfte Verknüpfte
Computer Dokumente Daten
ARPAnet WorldWideWeb Internet of Things
Semantic Web
Augmented Reality
Das Internet 13

39. Ausblick
we e
arre!
he
1. Welle 2. Welle 3. Welle
Verknüpfte Verknüpfte Verknüpfte
Computer Dokumente Daten
ARPAnet WorldWideWeb Internet of Things
Semantic Web
Augmented Reality
Das Internet 13

40. we e
arre!
he
Ausblick 1. Welle 2. Welle 3. Welle
Verknüpfte Verknüpfte Verknüpfte
Computer Dokumente Daten
ARPAnet WorldWideWeb Internet of Things
Semantic Web
Augmented Reality
Das Internet 14

41. Internet
Das Internet 15

42. Internet
Das Internet 15

43. Internet
Das Internet 15

44. Internet
Das Internet 15

45. Internet
Das Internet 15

46. Internet
Das Internet 15

47. Ausblick
we e
arre!
he
1. Welle 2. Welle 3. Welle
Verknüpfte Verknüpfte Verknüpfte
Computer Dokumente Daten
ARPAnet WorldWideWeb Internet of Things
Semantic Web
Augmented Reality
Das Internet 16

48. Das Internet 17

49. Das Internet 18

50. Ausblick
we e
arre!
he
1. Welle 2. Welle 3. Welle
Verknüpfte Verknüpfte Verknüpfte
Computer Dokumente Daten
ARPAnet WorldWideWeb Internet of Things
Semantic Web
Augmented Reality
Das Internet 19

51. Realität
Das Internet 20

52. Realität
Meta
Information
Das Internet 20

53. http://www.youtube.com/watch?v=b64_16K2e08
Layar
Real World Browser
Das Internet 21

54. Ausblick
we e
arre!
he
1. Welle 2. Welle 3. Welle
Verknüpfte Verknüpfte Verknüpfte
Computer Dokumente Daten
ARPAnet WorldWideWeb Internet of Things
Semantic Web
Augmented Reality
Das Internet 22

55. Ausblick
we e
arre!
he
1. Welle 2. Welle 3. Welle
Verknüpfte Verknüpfte Verknüpfte
Computer Dokumente Daten
ARPAnet WorldWideWeb Internet of Things
Semantic Web
Augmented Reality
Allgegenwärtiger, Intelligenter,
Personalisierter
Das Internet 22

56. 02 Die Technologie
03.03.10 Usability & Webdesign OM SMA | BW 23

57. Medien
Die Produktion 24

58. Medien
Die Produktion 24

59. Medien
Text
pdf, doc, rtf… (Plugin, Download)
Die Produktion 24

60. Medien
Text
pdf, doc, rtf… (Plugin, Download)
Audio
mp3, wav, wmv… (Streams, Podcast,
Download)
Die Produktion 24

61. Medien
Text
pdf, doc, rtf… (Plugin, Download)
Audio
mp3, wav, wmv… (Streams, Podcast,
Download)
Animation
Flash, Silverlight, ActiveX
Die Produktion 24

62. Medien
Text
pdf, doc, rtf… (Plugin, Download)
Audio
mp3, wav, wmv… (Streams, Podcast,
Download)
Animation
Flash, Silverlight, ActiveX
Video
mpeg, mov, avi, flv… (Streams, Videocast)
Die Produktion 24

63. Werkzeuge
Die Produktion 25

64. Werkzeuge
Serverside Languages
ASP / .NET, PHP, Python, SQL, Ruby…
Die Produktion 25

65. Werkzeuge
Serverside Languages
ASP / .NET, PHP, Python, SQL, Ruby…
Die Produktion 25

66. Werkzeuge
Serverside Languages
ASP / .NET, PHP, Python, SQL, Ruby…
Die Produktion 25

67. Werkzeuge
Serverside Languages
ASP / .NET, PHP, Python, SQL, Ruby…
Markup Languages
XML, HTML, Textile, Markdown…
Die Produktion 25

68. Werkzeuge
Serverside Languages
ASP / .NET, PHP, Python, SQL, Ruby…
Markup Languages
XML, HTML, Textile, Markdown…
Stylesheets
CSS (Cascading Stylesheets)
Die Produktion 25

69. Werkzeuge
Serverside Languages
ASP / .NET, PHP, Python, SQL, Ruby…
Markup Languages
XML, HTML, Textile, Markdown…
Stylesheets
CSS (Cascading Stylesheets)
Scripting Languages
Javascript, Processing…
Die Produktion 25

70. Werkzeuge
Serverside Languages
ASP / .NET, PHP, Python, SQL, Ruby…
Markup Languages
XML, HTML, Textile, Markdown…
Stylesheets
CSS (Cascading Stylesheets)
Scripting Languages
Javascript, Processing…
Die Produktion 25

71. Serverside Language
Holt die angefragten Daten aus der Datenbank
Die Produktion 26

72. Serverside Language
Holt die angefragten Daten aus der Datenbank
Liste
Markup Language
Bring die Daten in die gewünschte semantische
2
Die Produktion 26

73. Serverside Language
Holt die angefragten Daten aus der Datenbank
Liste
Markup Language
Bring die Daten in die gewünschte semantische
2
Stylesheets
Geben den Daten das gewünschte Aussehen
Die Produktion 26

74. Serverside Language
Holt die angefragten Daten aus der Datenbank
Liste
Markup Language
Bring die Daten in die gewünschte semantische
2
Stylesheets
Geben den Daten das gewünschte Aussehen
Scripting Language
Geben den Daten die gewünschte Funktionalität
Die Produktion 26

75. http://flickr.com/photos/fortyseven/1537093876/
Erlebnis
Einheit 02 Erlebnis 27

76. 03 User Experience
03.03.10 Usability & Webdesign OM SMA | BW 28

77. Was bedeutet User
Experience?

78. User Experience
03 30

79. User Experience
User Experience (abbreviated: UX) is the quality
of experience a person has when interacting
with a specific design. This can range from a
specific artifact, such as a cup, toy or website,
up to larger, integrated experiences such as a
museum or an airport.
http://uxnet.org/
03 30

80. User Experience
Benutzerbedürfnisse
03 30

81. User Experience
Benutzerbedürfnisse
Geschäftsvorgab
en
03 30

82. User Experience
Benutzerbedürfnisse
Technologische Geschäftsvorgab
Anforderungen en
03 30

83. Bausteine
03 31

84. Bausteine
03 31

85. Bausteine
Struktur
Informations Architektur
Taxonomie
03 31

86. Bausteine
Struktur
Informations Architektur
Taxonomie
Intuitivität
Informations Design
User Interface Design
03 31

87. Bausteine
Struktur
Informations Architektur
Taxonomie
Intuitivität
Informations Design
User Interface Design 2
Visuelles Design
Grafik / Web Design,
Photografie
Illustration
03 31

88. Bausteine
Struktur
Informations Architektur
Taxonomie
Intuitivität
Informations Design
User Interface Design 2
Visuelles Design
Grafik / Web Design,
Photografie
Illustration
Funktionalität
Interaktions Design
03 31

89. Arbeitsteilung
Die Produktion 32

90. Arbeitsteilung
http://flickr.com/photos/jonnagl/2789728566
Kern Team
Die Produktion 32

91. Arbeitsteilung
http://flickr.com/photos/jonnagl/2789728566
Kern Team
Information Architect
Die Produktion 32

92. Arbeitsteilung
http://flickr.com/photos/jonnagl/2789728566
Kern Team
Information Architect
Information Designer
Die Produktion 32

93. Arbeitsteilung
http://flickr.com/photos/jonnagl/2789728566
Kern Team
Information Architect
Information Designer
Web Designer
Die Produktion 32

94. Arbeitsteilung
http://flickr.com/photos/jonnagl/2789728566
Kern Team
Information Architect
Information Designer
Web Designer
Interaction Designer
Die Produktion 32

95. Arbeitsteilung
http://flickr.com/photos/jonnagl/2789728566
Kern Team
Information Architect
Information Designer
Web Designer
Interaction Designer
Usability Specialist
Die Produktion 32

96. Arbeitsteilung
http://flickr.com/photos/jonnagl/2789728566
Kern Team
Information Architect
Information Designer
Web Designer
Interaction Designer
Usability Specialist
Web Developer
Die Produktion 32

97. Arbeitsteilung
http://flickr.com/photos/jonnagl/2789728566
http://flickr.com/photos/jonnagl/2789728566
Kern Team
Information Architect
Information Designer
Web Designer
Interaction Designer
Usability Specialist
Web Developer
Impuls Experten
Die Produktion 32

98. Arbeitsteilung
http://flickr.com/photos/jonnagl/2789728566
http://flickr.com/photos/jonnagl/2789728566
Kern Team
Information Architect
Information Designer
Web Designer
Interaction Designer
Usability Specialist
Web Developer
Impuls Experten
Content Specialist
Die Produktion 32

99. Arbeitsteilung
http://flickr.com/photos/jonnagl/2789728566
http://flickr.com/photos/jonnagl/2789728566
Kern Team
Information Architect
Information Designer
Web Designer
Interaction Designer
Usability Specialist
Web Developer
Impuls Experten
Content Specialist
Identity Designer
Die Produktion 32

100. Arbeitsteilung
http://flickr.com/photos/jonnagl/2789728566
http://flickr.com/photos/jonnagl/2789728566
Kern Team
Information Architect
Information Designer
Web Designer
Interaction Designer
Usability Specialist
Web Developer
Impuls Experten
Content Specialist
Identity Designer
Taxonomist
Die Produktion 32

101. Arbeitsteilung
http://flickr.com/photos/jonnagl/2789728566
http://flickr.com/photos/jonnagl/2789728566
Kern Team
Information Architect
Information Designer
Web Designer
Interaction Designer
Usability Specialist
Web Developer
Impuls Experten
Content Specialist
Identity Designer
Taxonomist
Interactive Marketer
Die Produktion 32

102. Wieso eine online
Präsenz?

103. Die Produktion 34

104. 1. Wie unterstützt eine Website zu erstellen meine
Absichten?
Die Produktion 34

105. 1. Wie unterstützt eine Website zu erstellen meine
Absichten?
2. Was sind die drei wichtigsten Ziele mit der Website?
Die Produktion 34

106. 1. Wie unterstützt eine Website zu erstellen meine
Absichten?
2. Was sind die drei wichtigsten Ziele mit der Website?
3. Wer ist das Zielpublikum der Website?
Die Produktion 34

107. 1. Wie unterstützt eine Website zu erstellen meine
Absichten?
2. Was sind die drei wichtigsten Ziele mit der Website?
3. Wer ist das Zielpublikum der Website?
4. Was soll der Benutzer tun nach Besichtigung der
Website?
Die Produktion 34

108. 1. Wie unterstützt eine Website zu erstellen meine
Absichten?
2. Was sind die drei wichtigsten Ziele mit der Website?
3. Wer ist das Zielpublikum der Website?
4. Was soll der Benutzer tun nach Besichtigung der
Website?
5. Wie wird der Erfolg der Website gemessen?
Die Produktion 34

109. 1. Wie unterstützt eine Website zu erstellen meine
Absichten?
2. Was sind die drei wichtigsten Ziele mit der Website?
3. Wer ist das Zielpublikum der Website?
4. Was soll der Benutzer tun nach Besichtigung der
Website?
5. Wie wird der Erfolg der Website gemessen?
6. Wie wird die erstellte Website angemessen gepflegt?
Die Produktion 34

110. Fortlaufender Prozess
1. Wie unterstützt eine Website zu erstellen meine
Absichten?
2. Was sind die drei wichtigsten Ziele mit der Website?
3. Wer ist das Zielpublikum der Website?
4. Was soll der Benutzer tun nach Besichtigung der
Website?
5. Wie wird der Erfolg der Website gemessen?
6. Wie wird die erstellte Website angemessen gepflegt?
Die Produktion 34

111. Arbeitsprozess
Die Produktion 35

112. Arbeitsprozess
Konzept Spezifikation RealisierungImplementierung
Kommunikation
Die Produktion 35

113. Arbeitsprozess
Konzept Spezifikation RealisierungImplementierung
Kommunikation
• Inhaltsgewichtun
g
• Informations-
architektur
• Kommunikations
-konzept
• Designkonzept
• Technologisches
Konzept
• Benutzeridentifi-
kation (Personas)
• Konkurenzanalys
e
• Requirement
Die Produktion 35

114. Arbeitsprozess
Konzept Spezifikation RealisierungImplementierung
Kommunikation
• Inhaltsgewichtun • Inhaltsumfang
g • CI / CD Adaption
• Informations- • Design Standards
architektur • Funktionsumfang
• Kommunikations • Technologiewahl
-konzept • Datenbankstrukt
• Designkonzept ur
• Technologisches • SEO Strategie
Konzept • Externe
• Benutzeridentifi- Applikationen
kation (Personas) • Technologie
• Konkurenzanalys Spezifikation
e
• Requirement
Die Produktion 35

115. Arbeitsprozess
Konzept Spezifikation RealisierungImplementierung
Kommunikation
• Inhaltsgewichtun • Inhaltsumfang • Inhaltsaufbereitu
g • CI / CD Adaption ng
• Informations- • Design Standards • Inhaltsabfüllung
architektur • Funktionsumfang • Detaildesign
• Kommunikations • Technologiewahl • Server Setup
-konzept • Datenbankstrukt • Programmierung
• Designkonzept ur Backend
• Technologisches • SEO Strategie • Umsetzung
Konzept • Externe Frontend
• Benutzeridentifi- Applikationen • SEO Optimierung
kation (Personas) • Technologie • Usability Tests
• Konkurenzanalys Spezifikation
e
• Requirement
Die Produktion 35

116. Arbeitsprozess
Konzept Spezifikation RealisierungImplementierung
Kommunikation
• Inhaltsgewichtun • Inhaltsumfang • Inhaltsaufbereitu • Inhaltskontrollen
g • CI / CD Adaption ng • Crossbrowser
• Informations- • Design Standards • Inhaltsabfüllung Test
architektur • Funktionsumfang • Detaildesign • System
• Kommunikations • Technologiewahl • Server Setup Debugging
-konzept • Datenbankstrukt • Programmierung • Performance
• Designkonzept ur Backend Optimerung
• Technologisches • SEO Strategie • Umsetzung • Usability Tests
Konzept • Externe Frontend
• Benutzeridentifi- Applikationen • SEO Optimierung
kation (Personas) • Technologie • Usability Tests
• Konkurenzanalys Spezifikation
e
• Requirement
Die Produktion 35

117. Arbeitsprozess
Konzept Spezifikation RealisierungImplementierung
Kommunikation
• Inhaltsgewichtun • Inhaltsumfang • Inhaltsaufbereitu • Inhaltskontrollen • Launch
g • CI / CD Adaption ng • Crossbrowser • Newsletter
• Informations- • Design Standards • Inhaltsabfüllung Test • Medien
architektur • Funktionsumfang • Detaildesign • System Mitteilung
• Kommunikations • Technologiewahl • Server Setup Debugging • interne
-konzept • Datenbankstrukt • Programmierung • Performance Mitteilung
• Designkonzept ur Backend Optimerung • Flyer
• Technologisches • SEO Strategie • Umsetzung • Usability Tests • Inserate
Konzept • Externe Frontend • Social
• Benutzeridentifi- Applikationen • SEO Optimierung Networking
kation (Personas) • Technologie • Usability Tests • Social Media
• Konkurenzanalys Spezifikation • etc.
e • User Acceptance
• Requirement Test
Die Produktion 35

118. Arbeitsresultate
Die Produktion 36

119. Arbeitsresultate
Moodboard, Sitemap,Wireframes, Paper
Prototype, Flow Diagram, Screendesigns,
Prototyp
Die Produktion 36

120. Arbeitsresultate
Moodboard, Sitemap,Wireframes, Paper
Prototype, Flow Diagram, Screendesigns,
Prototyp
Die Produktion 36

121. Arbeitsresultate
Moodboard, Sitemap,Wireframes, Paper
Prototype, Flow Diagram, Screendesigns,
Prototyp
captUS Site Information Architecture
0
1/27/04
captUS Home
National
Top Global Navigation Left Hand Navigation
1 2 3 4 5 6 7 Continue to: 9 10 11 12
About the
Calendar - Search (not Privacy & Welcome to CAPT Publications CSAP Live (not CAPT Staff
Regions Contact Links Latest News
Monthly View working) Disclaimer captUS Program and Resources working) Login
4.2 4.3 4.4 9.1 9.2 9.3 9.4
2.1 4.1
Weekly View Search Admin Login Funding Resources Facts Links
CAPT Specific Event Details
Information
4.3.1
9.1.1 9.2.1 9.3.1 9.4.1
Search Results
JTO Articles JTO Articles JTO Articles JTO Articles
8
Page ID, and page title About the CAPT
Program
Multiple Similar Pages
8.1 8.2 8.3 8.4 8.5 8.6 8.7
Core
Research Target Progress
Purpose Process Prevention Key Terms
Application Audience Reports
Services
Conditional Area
Content that can be replaced by the
new National CAPT
Content that will require additional
attention. Databases, Mailing lists, etc.
Page: 1
Die Produktion 36

122. Arbeitsresultate
Moodboard, Sitemap,Wireframes, Paper
Prototype, Flow Diagram, Screendesigns,
Prototyp
Page I.D. 0 Page Title Home
Date Version
Adolescent and Child Targets (ACT) Page Details
Search
Logo for Health Foundation. Inc.
about health goals projects resources contact us
Too many Americans suffer the daily
effects of diabetes, asthma and obesity.
Perhaps the greatest tragedy is the
increasing toll all three of these afflictions
are taking on our children.
Tommy Thompson, Secretary of
Health and Human Services
Achieving the vision of “Healthy People in
Healthy Communities” represents an
opportunity for individuals to make healthy
lifestyle choices for themselves and their
families.
Donna E. Shalala
Former Secretary of Health and Human
ACT for Health serves those in local communities responsible for improving Services
child and adolescent health and well-being by providing essential
information and facilitating cooperative action. More Information
A National & International Model
Proven,
National
Effective
Goals
Strategies
Local
Communities
ACT for Health, Adolescent and Child Targets for Health Foundation, Inc., is an educational and charitable non-profit,
non-governmental agency, tax exempt under Section 501(c)3 of the Internal Revenue Code.
Die Produktion 36

123. Arbeitsresultate
Moodboard, Sitemap,Wireframes, Paper
Prototype, Flow Diagram, Screendesigns,
Prototyp
Die Produktion 36

124. Arbeitsresultate
Moodboard, Sitemap,Wireframes, Paper
Prototype, Flow Diagram, Screendesigns,
Prototyp
Pushes IIB
Supplemental Data
to Data Mart
Login
Home / Products & Add Products & Batch Publish to Batch Publish to
Home / Benchmarks Add Benchmarks Staging Production
Pushes IIB
Supplemental Data
to Data Mart
Links to PPW
Link to Product Master Publish to Staging Publish to Production
Pushes Site & Tools
Associations Data to
Data Mart
Update Site and Tools
Associations
Pushes “n/a” to Data
Mart for suspended
data points
Product Overview &
Edit Static Product Data & Benchmark Overview
Edit Static Benchmark Data
Turn Off Data
Project Penguin Page Flow Diagram (3/15/2006)
Die Produktion 36

125. Arbeitsresultate
Moodboard, Sitemap,Wireframes, Paper
Prototype, Flow Diagram, Screendesigns,
Prototyp
Die Produktion 36

126. Beispiel
http://www.straesslepaxis.ch als Beispiel 37

127. Beispiel
http://www.straesslepaxis.ch als Beispiel 37

128. Title: 080321_SP_IA.graffle
Strässle Praxis Creator: BW
Modified: Mon Mar 24 2008
Page 1/1
Site Map
Matrix Rollen
Links (Friendslist) Wellness
News Homepage Vorsorge
Beschwerde
Lebensberatung
Beispiel Methoden Über uns
Produkte Praxis Posts
Posts mit statischer
Posts mit statischer (Teammitglieder) Kontakt
Page (Matrix mit Page mit Photos
Page (Einführung) mit statischer Page
Links)
(Einführung)
Formular
Methode Produkt
Post mit Details Post mit Details Koordinaten
Lageplan
Bestellformular
Mail an Veli (Adresse)
Formular
http://www.straesslepaxis.ch als Beispiel 37

129. Beispiel
http://www.straesslepaxis.ch als Beispiel 37

130. Beispiel
http://www.straesslepaxis.ch als Beispiel 37

131. Was sind mögliche
Probleme?

132. Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Die Produktion 39

133. Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Die Produktion 39

134. Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Interaktive Funktionalitäten, Multimedia,
Anpassungen an der Struktur…
Die Produktion 39

135. Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Interaktive Funktionalitäten, Multimedia,
Anpassungen an der Struktur…
Die Produktion 39

136. Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Interaktive Funktionalitäten, Multimedia,
Anpassungen an der Struktur…
Die Produktion 39

137. Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Interaktive Funktionalitäten, Multimedia,
Anpassungen an der Struktur…
Die Produktion 39

138. Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Interaktive Funktionalitäten, Multimedia,
Anpassungen an der Struktur…
Die Produktion 39

139. Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Interaktive Funktionalitäten, Multimedia,
Anpassungen an der Struktur…
Die Produktion 39

140. Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Interaktive Funktionalitäten, Multimedia,
Anpassungen an der Struktur…
Die Produktion 39

141. Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Interaktive Funktionalitäten, Multimedia,
Anpassungen an der Struktur…
Die Produktion 39

142. Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Interaktive Funktionalitäten, Multimedia,
Anpassungen an der Struktur…
Die Produktion 39

143. Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Interaktive Funktionalitäten, Multimedia,
Anpassungen an der Struktur…
Die Produktion 39

144. Risiken bei Ad Hoc Änderungen
Die Produktion 40

145. Risiken bei Ad Hoc Änderungen
1. Inhaltliches Konzept wird untergraben
Die Produktion 40

146. Risiken bei Ad Hoc Änderungen
1. Inhaltliches Konzept wird untergraben
2. Gestalterisches Konzept wird untergraben
Die Produktion 40

147. Risiken bei Ad Hoc Änderungen
1. Inhaltliches Konzept wird untergraben
2. Gestalterisches Konzept wird untergraben
3. Technologisches Konzept wird untergraben
Die Produktion 40

148. Risiken bei Ad Hoc Änderungen
1. Inhaltliches Konzept wird untergraben
2. Gestalterisches Konzept wird untergraben
3. Technologisches Konzept wird untergraben
4. Getätigte Tests werden ungültig
Die Produktion 40

149. Risiken bei Ad Hoc Änderungen
1. Inhaltliches Konzept wird untergraben
2. Gestalterisches Konzept wird untergraben
3. Technologisches Konzept wird untergraben
4. Getätigte Tests werden ungültig
5. Zeitpläne können nicht mehr eingehalten werden
Die Produktion 40

150. Risiken bei Ad Hoc Änderungen
1. Inhaltliches Konzept wird untergraben
2. Gestalterisches Konzept wird untergraben
3. Technologisches Konzept wird untergraben
4. Getätigte Tests werden ungültig
5. Zeitpläne können nicht mehr eingehalten werden
Die Produktion 40

151. Risiken bei Ad Hoc Änderungen
1. Inhaltliches Konzept wird untergraben
2. Gestalterisches Konzept wird untergraben
3. Technologisches Konzept wird untergraben
4. Getätigte Tests werden ungültig
5. Zeitpläne können nicht mehr eingehalten werden
> Verschlechterung der User-Experiences
Die Produktion 40

152. Risiken bei Ad Hoc Änderungen
1. Inhaltliches Konzept wird untergraben
2. Gestalterisches Konzept wird untergraben
3. Technologisches Konzept wird untergraben
4. Getätigte Tests werden ungültig
5. Zeitpläne können nicht mehr eingehalten werden
> Verschlechterung der User-Experiences
> Budget kann nicht eingehalten werden
Die Produktion 40

153. 04 Design
03.03.10 Usability & Webdesign OM SMA | BW 41

154. Faktor 1
Layout
Design 42

155. „Organization makes a
System of many appear
“
fewer.
—Law 2, „The laws of simplicity“, John Maeda, 2006
Design 43

156. Faktor 1
Layout
Design 44

157. Faktor 1
Layout
Struktur
Design 44

158. Faktor 1
Layout
Struktur
Klarheit
Design 44

159. Faktor 1
Layout
Struktur
Klarheit
Gewichtung
Design 44

160. Faktor 1
Layout
Struktur
Klarheit
Gewichtung
Design 44

161. Faktor 1
Layout
Struktur
Klarheit
Gewichtung
Design 44

162. Faktor 1
Layout
Struktur
Klarheit
Gewichtung
Design 44

163. Faktor 1
Layout
„Grid Systems in Graphic Design“
Josef Muller-Brockmann
Design 45

164. Faktor 2
Farbe
Ist eines der wichtigsten visuellen
Kommunikationsmittel. Auf unterschiedlichen
Ebenen kann der Betrachter angesporchen
werden.
Design 46

165. Faktor 2
Farbe
Stimmung
Design 47

166. warm, spannend, glücklich
gesund, strahlend
glühend, zuversicht,
Faktor 2
Farbe lebhaft
Stimmung
tief, friedvoll, übernatürlich
Empfindung
friede, ruhe, natur
harmonie, stille, sauberkeit
Design 48

167. Faktor 2
Farbe
Stimmung
Empfindung
Kulturelle, Politische
und Religiöse
Bedeutung
Design 49

168. Faktor 2
Farbe
Design 50

169. Faktor 2
Farbe
Farbschema CI / CD
Design 50

170. Faktor 2
Farbe
Farbschema CI / CD
Fokus
Design 50

171. Faktor 2
Farbe
Standardeinstellungen von
Gerät, Betriebsystem & Browser
CMYK vs RGB
Design 51

172. Faktor 2
Farbe
„The Elements of Color“
Johannes Itten
Design 52

173. Faktor 3
Typographie
Design 53

174. Faktor 3
Typographie
Standardeinstellungen von Betriebsystem &
Browser
Design 53

175. 95
Design
%
of the Web is Typography
54

176. Faktor 3
Typographie
Design 55

177. Faktor 3
Typographie
4 sichere Webschriften
Verdana, Arial, Georgia, Courier New
Design 55

178. Faktor 3
Typographie
4 sichere Webschriften
Verdana, Arial, Georgia, Courier New
Standardeinstellungen von
Design 55

179. Faktor 3
Typographie
4 sichere Webschriften
Verdana, Arial, Georgia, Courier New
Standardeinstellungen von
Gerät, Betriebsystem & Browser
Design 55

180. Faktor 3
Typographie
Design 56

181. Faktor 3
Typographie
Licht am Ende des Tunnels:
Design 56

182. Faktor 3
Typographie
Licht am Ende des Tunnels:
sIFR (http://www.mikeindustries.com/blog/sifr)
Design 56

183. Faktor 3
Typographie
Licht am Ende des Tunnels:
sIFR (http://www.mikeindustries.com/blog/sifr)
Cufón (http://cufon.shoqolate.com/)
Design 56

184. Faktor 3
Typographie
Licht am Ende des Tunnels:
sIFR (http://www.mikeindustries.com/blog/sifr)
Cufón (http://cufon.shoqolate.com/)
TypeKit (http://typekit.com/)
Design 56

185. Faktor 3
Typographie
„The Elements of Typographic Style“
Robert Bringhurst
Design 57

186. Faktor 4
Kontrast
Design 58

187. Faktor 4
Kontrast
Helligkeit
Design 58

188. Faktor 4
Kontrast
Helligkeit
Grösse
Design 58

189. Faktor 4
Kontrast
Helligkeit
Grösse
Farbe
Design 58

190. Faktor 4
Kontrast
Helligkeit
Grösse
Farbe
Position
Design 58

191. Faktor 4
Kontrast
Helligkeit
Grösse
Farbe
Position
Typographie
Design 58

192. Faktor 5
Emotion
Die Gestaltung 59

193. http://flickr.com/photos/amsterdamned/1011990343/sizes/l/
Faktor 5
Emotion
Die Gestaltung 59

194. http://flickr.com/photos/amsterdamned/1011990343/sizes/l/
http://flickr.com/photos/paulbence/
2584299808/
Faktor 5
Emotion
Die Gestaltung 59

195. http://flickr.com/photos/amsterdamned/1011990343/sizes/l/
http://flickr.com/photos/paulbence/
http://flickr.com/photos/paulbence/
2584299808/
2584299808/
Faktor 5
Emotion
Die Gestaltung 59

196. Faktor 6
Flow
Design 60

197. Faktor 6
Flow
Design 60

198. Faktor 6
Flow
Design 60

199. Faktor 6
Flow
Design 60

200. Faktor 6
Flow
Klare Ziele setzen
Design 60

201. Faktor 6
Flow
Klare Ziele setzen
Effizienz optimieren
Design 60

202. Faktor 6
Flow
Klare Ziele setzen
Effizienz optimieren
Erlaube zu Entdecken
Design 60

203. Exkurs
Visueller Reichtum
Design 61

204. Design 62

205. Design 62

206. Design 62

207. Design 62

208. Design 62

209. Design 62

210. Design 62

211. Design 62

212. Design 62

213. Exkurs
Visueller Reichtum
Attraktiviere um zu fokusieren
Vermeide Klischees
Sprich deine eigene Sprache
Design 63

214. 05 Usability
03.03.10 Usability & Webdesign OM SMA | BW 64

215. Faktor 1
Einfachheit
Benutzerfreundlichkeit 65

216. „Simple is better than “
complex
Complex is better than
Benutzerfreundlichkeit 66

217. Faktor 1
Einfachheit
Benutzerfreundlichkeit 67

218. Faktor 1
Einfachheit
Reduktion
Benutzerfreundlichkeit 67

219. Faktor 1
Einfachheit
Reduktion
Organisation
Benutzerfreundlichkeit 67

220. Faktor 1
Einfachheit
Reduktion
Organisation
Kontext
Benutzerfreundlichkeit 67

221. Faktor 1
Einfachheit
Reduktion
Organisation
Kontext
Vertrauen
Benutzerfreundlichkeit 67

222. http://www.google.com
Benutzerfreundlichkeit 68

223. http://www.google.com
Reduktion
Benutzerfreundlichkeit 68

224. http://www.google.com
Organisation
Reduktion
Benutzerfreundlichkeit 68

225. http://www.google.com
Organisation
Reduktion
Kontext
Benutzerfreundlichkeit 68

226. http://www.google.com
Organisation Vertrauen
Reduktion
Kontext
Benutzerfreundlichkeit 68

227. „ Simplicity is about subtracting the
obvious, and adding the meaningful
“
—Law 10, „The laws of simplicity“, John Maeda, 2006
Benutzerfreundlichkeit 69

228. Faktor 2
Lesbarkeit
Benutzerfreundlichkeit 70

229. „Wir lesen keine– wir
Internetseiten
“
überfliegen sie.
Benutzerfreundlichkeit 71

230. „Wir lesen keine– wir
Internetseiten
“
überfliegen sie. in Eile
• Gewöhnlich sind wir
• Wir wissen, dass wir nicht alles lesen
müssen
• Wir sind gut darin
Benutzerfreundlichkeit 71

231. Text als Inhalt
Benutzerfreundlichkeit 72

232. Text als Inhalt Text als User Interface
Benutzerfreundlichkeit 72

233. Faktor 2
Lesbarkeit
Benutzerfreundlichkeit 73

234. Faktor 2
Lesbarkeit
Daumenregel:
• Reduziere den Text um 50%
• Stell‘ davon die Hälfte auf die Website
• 50% werden die Benutzer davon noch
lesen
Benutzerfreundlichkeit 73

235. Faktor 3
Findbarkeit
Konventionen sind unsere Freunde!
Benutzerfreundlichkeit 74

236. Konventionen
1.Persistente Navigation (Hauptnavigation)
2.Lokale Navigation
3.Verlinktes Logo
4.Orientierung (Breadcrumbs, Page Titles)
5.Suchfunktion
6.Sitemap
Benutzerfreundlichkeit 75

237. Konventionen
1.Persistente Navigation (Hauptnavigation)
2.Lokale Navigation
3.Verlinktes Logo
4.Orientierung (Breadcrumbs, Page Titles)
5.Suchfunktion
6.Sitemap
Benutzerfreundlichkeit 75

238. Konventionen
1.Persistente Navigation (Hauptnavigation)
2.Lokale Navigation
3.Verlinktes Logo
4.Orientierung (Breadcrumbs, Page Titles)
5.Suchfunktion
6.Sitemap
Benutzerfreundlichkeit 75

239. Konventionen
1.Persistente Navigation (Hauptnavigation)
2.Lokale Navigation
3.Verlinktes Logo
4.Orientierung (Breadcrumbs, Page Titles)
5.Suchfunktion
6.Sitemap
Benutzerfreundlichkeit 75

240. Konventionen
1.Persistente Navigation (Hauptnavigation)
2.Lokale Navigation
3.Verlinktes Logo
4.Orientierung (Breadcrumbs, Page Titles)
5.Suchfunktion
6.Sitemap
Benutzerfreundlichkeit 75

241. Konventionen
1.Persistente Navigation (Hauptnavigation)
2.Lokale Navigation
3.Verlinktes Logo
4.Orientierung (Breadcrumbs, Page Titles)
5.Suchfunktion
6.Sitemap
Benutzerfreundlichkeit 75

242. Konventionen
1.Persistente Navigation (Hauptnavigation)
2.Lokale Navigation
3.Verlinktes Logo
4.Orientierung (Breadcrumbs, Page Titles)
5.Suchfunktion
6.Sitemap
Benutzerfreundlichkeit 75

243. Konventionen
1.Persistente Navigation (Hauptnavigation)
2.Lokale Navigation
3.Verlinktes Logo
4.Orientierung (Breadcrumbs, Page Titles)
5.Suchfunktion
6.Sitemap
Benutzerfreundlichkeit 75

244. Konventionen
1.Persistente Navigation (Hauptnavigation)
2.Lokale Navigation
3.Verlinktes Logo
4.Orientierung (Breadcrumbs, Page Titles)
5.Suchfunktion
6.Sitemap
Benutzerfreundlichkeit 75

245. Faktor 4
Zugänglichkeit
Endgerätunabhängigkeit
Barrierefreiheit
Benutzerfreundlichkeit 76

246. Endgerät-
Unabhängigkeit
1.Skalierbare Schriftgrössen
2.Flexibles / Elastisches Layout
3.Korrekt ausgezeichnete Seitenhierarchie
4.Lesbarkeit für Maschienen & Menschen
Benutzerfreundlichkeit 77

247. Benutzerfreundlichkeit 78

248. Endgerät-
Unabhängigkeit
1.Skalierbare Schriftgrössen
2.Flexibles / Elastisches Layout
3.Lesbarkeit für Maschienen & Menschen
4.Korrekt ausgezeichnete Seitenhierarchie
Benutzerfreundlichkeit 79

249. Benutzerfreundlichkeit 80

250. Benutzerfreundlichkeit 80

251. Einige Gründe
1.Lesbarer Inhalt ausserhalb der Website
(RSS, Widgets, Aggregatoren…)
2.Offenheit für kommende Technologien
(Browser, Bandbreite… )
3.Offenheit für kommende Benutzerschichten
(OLPC ua.)
Benutzerfreundlichkeit 81

252. Barrierefreiheit
• 65% der Bevölkerung hat eine Behinderung
( zB. Farbenblindheit)
• Jeder sollte die gleiche Chance und
Möglichkeit auf den Zugang zu Information
haben
• Es ist nicht nur eine gute Idee, sondern
Gesetz
Benutzerfreundlichkeit 82

253. l e
s imp
5 Verbesserungen
1.Bilder mit einem Alt-Text versehen
2.Formularfelder korrekt auszeichnen
3.Direkter Link zum Hauptinhalt zuoberst
4.Zugänglichkeit mit der Tastatur
ermöglichen
5.Nicht ohne Grund JavaScript einsetzen
(Besondere Vorsicht mit AJAX)
Benutzerfreundlichkeit 83

254. http://flickr.com/photos/64522443@N00/540205343/
Kostprobe
Einheit 03 Kostprobe 84

255. 06 Beispiel
03.03.10 Usability & Webdesign OM SMA | BW 85

256. Beispiel Datavisualization.ch 2.0 86

257. „ “
87

258. Beispiel Datavisualization.ch 2.0 88

259. Beispiel Datavisualization.ch 2.0 88

260. SHE
Konzept zur Vereinfachung eines Interfaces
Beispiel Datavisualization.ch 2.0 89

261. SHE
Konzept zur Vereinfachung eines Interfaces
• Shrink
Beispiel Datavisualization.ch 2.0 89

262. SHE
Konzept zur Vereinfachung eines Interfaces
• Shrink
• Hide
Beispiel Datavisualization.ch 2.0 89

263. SHE
Konzept zur Vereinfachung eines Interfaces
• Shrink
• Hide
• Embed
Beispiel Datavisualization.ch 2.0 89

264. 90

265. Shrink
Reduktion des
Platzen den das
Interface selbst
einnimmt.
90

266. Shrink
Reduktion des
Platzen den das
Interface selbst
einnimmt.
Hide
Reduktion der
visuellen Komplexität
durch Interface
Elemente.
90

267. Shrink
Reduktion des
Platzen den das
Interface selbst
einnimmt.
Hide
Reduktion der
visuellen Komplexität
durch Interface
Elemente.
Embed
Funktionalität wird
ausgeführt statt
aufgerufen.
90

268. 07 Take Aways
03.03.10 Usability & Webdesign OM SMA | BW 91

269. http://www.flickr.com
Ein Mythos names
Take Away 1 92

270. Take Away 1
Der Fold
• 91% der Pages sind scrollbar
• 76% werden vom Benutzer gescrollt
• 22% der Pages werden bis zum Footer
gescrollt
http://blog.clicktale.com
Knowlege Sweety 1 93

271. }
Wichtigster Platz auf einer
Webpage zwischen 0-800px 0-800
px
Hauptfokus bei 540px
~25% der Besucher beachten den Footer
Knowlege Sweety 1 94

272. 20min.ch 95

273. http://www.flickr.com/photos/f-r-a-n-k/469034312/
Limitiere die Auswahl
Take Away 2 96

274. orange.co.uk & apple.com 97

275. orange.co.uk & apple.com 98

276. http://flickr.com/photos/ouvyt/2781242712/sizes/o/
Schreibe für deine
Take Away 3 99

277. kompetent oder selbstironisch 100

278. kompetent oder selbstironisch 100

279. http://flickr.com/photos/alexa_soul/371288980/
Fokusiere auf Details
Take Away 4 101

280. Form und Inhalt arbeiten komplementär 102

281. Form und Inhalt arbeiten komplementär 102

282. If you‘re reading this, you must be
bored. So why not try doing this stuff
instead: weed the garden path, disco
strut all the way to work, top up the
dishwasher salt, go to the park and
Form und Inhalt arbeiten komplementär 102

283. Design & Konzept auf der Mikro-Ebene 103

284. Design & Konzept auf der Mikro-Ebene 103

285. Question &
08 Answer
03.03.10 Usability & Webdesign OM SMA | BW 104

286. Literatur
03.03.10 Usability & Webdesign OM SMA | BW 105

287. Literatur
„Designing With Web Standards“
Jeffrey Zeldman, 2003
03.03.10 Usability & Webdesign OM SMA | BW 105

288. Literatur
„Designing With Web Standards“
Jeffrey Zeldman, 2003
„Don‘t Make Me Think!“
Steve Krug, 2000
03.03.10 Usability & Webdesign OM SMA | BW 105

289. Literatur
„Designing With Web Standards“
Jeffrey Zeldman, 2003
„Don‘t Make Me Think!“
Steve Krug, 2000
„Website Owners Manual“
Paul Boag, 2008
03.03.10 Usability & Webdesign OM SMA | BW 105

290. Literatur
„Designing With Web Standards“
Jeffrey Zeldman, 2003
„Don‘t Make Me Think!“
Steve Krug, 2000
„Website Owners Manual“
Paul Boag, 2008
„The Unusually Useful Web Book“
June Cohen, 2003
03.03.10 Usability & Webdesign OM SMA | BW 105

291. Vielen Dank!
Kontakt
benjamin@interactivethings.com
Slides
http://www.slideshare.net/
wiederkehr
03.03.10 Usability & Webdesign OM SMA | BW 106