SlideShare ist ein Scribd-Unternehmen logo

Usability & Webdesign 2010

Benjamin Wiederkehr, profile picture
Benjamin Wiederkehr

Das Dokument bietet einen Überblick über Usability und Webdesign, präsentiert von Benjamin Wiederkehr, und thematisiert die Entwicklung und Herausforderungen des Internets von seiner Entstehung bis zur Gegenwart. Es wird auf die Bedeutung der Benutzererfahrung (User Experience) eingegangen sowie die verschiedenen Elemente, die das Design und die Nutzung von Websites beeinflussen, einschließlich Technologien, Benutzerbedürfnisse und interdisziplinäre Teamarbeit. Ziel ist es, ein besseres Verständnis für die Prinzipien und Praktiken des Online-Marketings und der Webgestaltung zu vermitteln.

DesignTechnologieBusiness
1 von 291
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
Usability & Webdesign Benjamin Wiederkehr Online Marketer SMA Lehrgang Zürich, 03.03.2010 1
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
Wer seid ihr? Online Sales, Sales Support, Marketing Stategist, Cross Media, Social Media… 03.03.10 Usability & Webdesign OM SMA | BW 3
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
Ziel des Abends 03.03.10 Usability & Webdesign OM SMA | BW 5
Ziel des Abends Verständnis 03.03.10 Usability & Webdesign OM SMA | BW 5
Ziel des Abends Verständnis Was machen wir? 03.03.10 Usability & Webdesign OM SMA | BW 5
Ziel des Abends Verständnis Was machen wir? Wie machen wir es? 03.03.10 Usability & Webdesign OM SMA | BW 5
Ziel des Abends Verständnis Was machen wir? Wie machen wir es? 03.03.10 Usability & Webdesign OM SMA | BW 5
Ziel des Abends Verständnis Was machen wir? Wie machen wir es? Sensibilisierung 03.03.10 Usability & Webdesign OM SMA | BW 5
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
Ablauf 03.03.10 Usability & Webdesign OM SMA | BW 6
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
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
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
http://flickr.com/photos/walkn/2236986927/ Einführung Einheit 01 Einführung 7
01 Das Internet 03.03.10 Usability & Webdesign OM SMA | BW 8
Wo kommt es her?
Entstehung Das Internet 10
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
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
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
Chapter 11
1965 - 1980 1980 - 1993 1993 - heute Chapter 11
1965 - 1980 1980 - 1993 1993 - heute Militär Chapter 11
1965 - 1980 1980 - 1993 1993 - heute Militär Wissenschaft Militär Chapter 11
1965 - 1980 1980 - 1993 1993 - heute Militär Wissenschaft Privatwirtschaf Militär t& persönlicher Gebrauch Wissenschaft Militär Chapter 11
Status Quo Das Internet 12
Status Quo Das Internet 12
Status Quo Vor 2000 Das Internet 12
Status Quo Vor 2000 Amazon eBay CraigsList Yahoo Google Das Internet 12
Status Quo Vor 2000 Nach 2000 Amazon eBay CraigsList Yahoo Google Das Internet 12
Status Quo Vor 2000 Nach 2000 Amazon Wikipedia eBay MySpace CraigsList Facebook Yahoo YouTube Google Twitter Das Internet 12
Ausblick Das Internet 13
Ausblick 1. Welle 2. Welle 3. Welle Das Internet 13
Ausblick 1. Welle 2. Welle 3. Welle Verknüpfte Computer ARPAnet Das Internet 13
Ausblick 1. Welle 2. Welle 3. Welle Verknüpfte Verknüpfte Computer Dokumente ARPAnet WorldWideWeb Das Internet 13
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
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
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
Internet Das Internet 15
Internet Das Internet 15
Internet Das Internet 15
Internet Das Internet 15
Internet Das Internet 15
Internet Das Internet 15
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
Das Internet 17
Das Internet 18
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
Realität Das Internet 20
Realität Meta Information Das Internet 20
http://www.youtube.com/watch?v=b64_16K2e08 Layar Real World Browser Das Internet 21
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
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
02 Die Technologie 03.03.10 Usability & Webdesign OM SMA | BW 23
Medien Die Produktion 24
Medien Die Produktion 24
Medien Text pdf, doc, rtf… (Plugin, Download) Die Produktion 24
Medien Text pdf, doc, rtf… (Plugin, Download) Audio mp3, wav, wmv… (Streams, Podcast, Download) Die Produktion 24
Medien Text pdf, doc, rtf… (Plugin, Download) Audio mp3, wav, wmv… (Streams, Podcast, Download) Animation Flash, Silverlight, ActiveX Die Produktion 24
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
Werkzeuge Die Produktion 25
Werkzeuge Serverside Languages ASP / .NET, PHP, Python, SQL, Ruby… Die Produktion 25
Werkzeuge Serverside Languages ASP / .NET, PHP, Python, SQL, Ruby… Die Produktion 25
Werkzeuge Serverside Languages ASP / .NET, PHP, Python, SQL, Ruby… Die Produktion 25
Werkzeuge Serverside Languages ASP / .NET, PHP, Python, SQL, Ruby… Markup Languages XML, HTML, Textile, Markdown… Die Produktion 25
Werkzeuge Serverside Languages ASP / .NET, PHP, Python, SQL, Ruby… Markup Languages XML, HTML, Textile, Markdown… Stylesheets CSS (Cascading Stylesheets) Die Produktion 25
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
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
Serverside Language Holt die angefragten Daten aus der Datenbank Die Produktion 26
Serverside Language Holt die angefragten Daten aus der Datenbank Liste Markup Language Bring die Daten in die gewünschte semantische 2 Die Produktion 26
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
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
http://flickr.com/photos/fortyseven/1537093876/ Erlebnis Einheit 02 Erlebnis 27
03 User Experience 03.03.10 Usability & Webdesign OM SMA | BW 28
Was bedeutet User Experience?
User Experience 03 30
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
User Experience Benutzerbedürfnisse 03 30
User Experience Benutzerbedürfnisse Geschäftsvorgab en 03 30
User Experience Benutzerbedürfnisse Technologische Geschäftsvorgab Anforderungen en 03 30
Bausteine 03 31
Bausteine 03 31
Bausteine Struktur Informations Architektur Taxonomie 03 31
Bausteine Struktur Informations Architektur Taxonomie Intuitivität Informations Design User Interface Design 03 31
Bausteine Struktur Informations Architektur Taxonomie Intuitivität Informations Design User Interface Design 2 Visuelles Design Grafik / Web Design, Photografie Illustration 03 31
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
Arbeitsteilung Die Produktion 32
Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Die Produktion 32
Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Die Produktion 32
Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Die Produktion 32
Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Die Produktion 32
Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Interaction Designer Die Produktion 32
Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Interaction Designer Usability Specialist Die Produktion 32
Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Interaction Designer Usability Specialist Web Developer Die Produktion 32
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
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
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
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
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
Wieso eine online Präsenz?
Die Produktion 34
1. Wie unterstützt eine Website zu erstellen meine Absichten? Die Produktion 34
1. Wie unterstützt eine Website zu erstellen meine Absichten? 2. Was sind die drei wichtigsten Ziele mit der Website? Die Produktion 34
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
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
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
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
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
Arbeitsprozess Die Produktion 35
Arbeitsprozess Konzept Spezifikation RealisierungImplementierung Kommunikation Die Produktion 35
Arbeitsprozess Konzept Spezifikation RealisierungImplementierung Kommunikation • Inhaltsgewichtun g • Informations- architektur • Kommunikations -konzept • Designkonzept • Technologisches Konzept • Benutzeridentifi- kation (Personas) • Konkurenzanalys e • Requirement Die Produktion 35
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
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
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
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
Arbeitsresultate Die Produktion 36
Arbeitsresultate Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp Die Produktion 36
Arbeitsresultate Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp Die Produktion 36
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
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
Arbeitsresultate Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp Die Produktion 36
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
Arbeitsresultate Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp Die Produktion 36
Beispiel http://www.straesslepaxis.ch als Beispiel 37
Beispiel http://www.straesslepaxis.ch als Beispiel 37
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
Beispiel http://www.straesslepaxis.ch als Beispiel 37
Beispiel http://www.straesslepaxis.ch als Beispiel 37
Was sind mögliche Probleme?
Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Die Produktion 39
Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Die Produktion 39
Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
Risiken bei Ad Hoc Änderungen Die Produktion 40
Risiken bei Ad Hoc Änderungen 1. Inhaltliches Konzept wird untergraben Die Produktion 40
Risiken bei Ad Hoc Änderungen 1. Inhaltliches Konzept wird untergraben 2. Gestalterisches Konzept wird untergraben Die Produktion 40
Risiken bei Ad Hoc Änderungen 1. Inhaltliches Konzept wird untergraben 2. Gestalterisches Konzept wird untergraben 3. Technologisches Konzept wird untergraben Die Produktion 40
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
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
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
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
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
04 Design 03.03.10 Usability & Webdesign OM SMA | BW 41
Faktor 1 Layout Design 42
„Organization makes a System of many appear “ fewer. —Law 2, „The laws of simplicity“, John Maeda, 2006 Design 43
Faktor 1 Layout Design 44
Faktor 1 Layout Struktur Design 44
Faktor 1 Layout Struktur Klarheit Design 44
Faktor 1 Layout Struktur Klarheit Gewichtung Design 44
Faktor 1 Layout Struktur Klarheit Gewichtung Design 44
Faktor 1 Layout Struktur Klarheit Gewichtung Design 44
Faktor 1 Layout Struktur Klarheit Gewichtung Design 44
Faktor 1 Layout „Grid Systems in Graphic Design“ Josef Muller-Brockmann Design 45
Faktor 2 Farbe Ist eines der wichtigsten visuellen Kommunikationsmittel. Auf unterschiedlichen Ebenen kann der Betrachter angesporchen werden. Design 46
Faktor 2 Farbe Stimmung Design 47
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
Faktor 2 Farbe Stimmung Empfindung Kulturelle, Politische und Religiöse Bedeutung Design 49
Faktor 2 Farbe Design 50
Faktor 2 Farbe Farbschema CI / CD Design 50
Faktor 2 Farbe Farbschema CI / CD Fokus Design 50
Faktor 2 Farbe Standardeinstellungen von Gerät, Betriebsystem & Browser CMYK vs RGB Design 51
Faktor 2 Farbe „The Elements of Color“ Johannes Itten Design 52
Faktor 3 Typographie Design 53
Faktor 3 Typographie Standardeinstellungen von Betriebsystem & Browser Design 53
95 Design % of the Web is Typography 54
Faktor 3 Typographie Design 55
Faktor 3 Typographie 4 sichere Webschriften Verdana, Arial, Georgia, Courier New Design 55
Faktor 3 Typographie 4 sichere Webschriften Verdana, Arial, Georgia, Courier New Standardeinstellungen von Design 55
Faktor 3 Typographie 4 sichere Webschriften Verdana, Arial, Georgia, Courier New Standardeinstellungen von Gerät, Betriebsystem & Browser Design 55
Faktor 3 Typographie Design 56
Faktor 3 Typographie Licht am Ende des Tunnels: Design 56
Faktor 3 Typographie Licht am Ende des Tunnels: sIFR (http://www.mikeindustries.com/blog/sifr) Design 56
Faktor 3 Typographie Licht am Ende des Tunnels: sIFR (http://www.mikeindustries.com/blog/sifr) Cufón (http://cufon.shoqolate.com/) Design 56
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
Faktor 3 Typographie „The Elements of Typographic Style“ Robert Bringhurst Design 57
Faktor 4 Kontrast Design 58
Faktor 4 Kontrast Helligkeit Design 58
Faktor 4 Kontrast Helligkeit Grösse Design 58
Faktor 4 Kontrast Helligkeit Grösse Farbe Design 58
Faktor 4 Kontrast Helligkeit Grösse Farbe Position Design 58
Faktor 4 Kontrast Helligkeit Grösse Farbe Position Typographie Design 58
Faktor 5 Emotion Die Gestaltung 59
http://flickr.com/photos/amsterdamned/1011990343/sizes/l/ Faktor 5 Emotion Die Gestaltung 59
http://flickr.com/photos/amsterdamned/1011990343/sizes/l/ http://flickr.com/photos/paulbence/ 2584299808/ Faktor 5 Emotion Die Gestaltung 59
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
Faktor 6 Flow Design 60
Faktor 6 Flow Design 60
Faktor 6 Flow Design 60
Faktor 6 Flow Design 60
Faktor 6 Flow Klare Ziele setzen Design 60
Faktor 6 Flow Klare Ziele setzen Effizienz optimieren Design 60
Faktor 6 Flow Klare Ziele setzen Effizienz optimieren Erlaube zu Entdecken Design 60
Exkurs Visueller Reichtum Design 61
Design 62
Design 62
Design 62
Design 62
Design 62
Design 62
Design 62
Design 62
Design 62
Exkurs Visueller Reichtum Attraktiviere um zu fokusieren Vermeide Klischees Sprich deine eigene Sprache Design 63
05 Usability 03.03.10 Usability & Webdesign OM SMA | BW 64
Faktor 1 Einfachheit Benutzerfreundlichkeit 65
„Simple is better than “ complex Complex is better than Benutzerfreundlichkeit 66
Faktor 1 Einfachheit Benutzerfreundlichkeit 67
Faktor 1 Einfachheit Reduktion Benutzerfreundlichkeit 67
Faktor 1 Einfachheit Reduktion Organisation Benutzerfreundlichkeit 67
Faktor 1 Einfachheit Reduktion Organisation Kontext Benutzerfreundlichkeit 67
Faktor 1 Einfachheit Reduktion Organisation Kontext Vertrauen Benutzerfreundlichkeit 67
http://www.google.com Benutzerfreundlichkeit 68
http://www.google.com Reduktion Benutzerfreundlichkeit 68
http://www.google.com Organisation Reduktion Benutzerfreundlichkeit 68
http://www.google.com Organisation Reduktion Kontext Benutzerfreundlichkeit 68
http://www.google.com Organisation Vertrauen Reduktion Kontext Benutzerfreundlichkeit 68
„ Simplicity is about subtracting the obvious, and adding the meaningful “ —Law 10, „The laws of simplicity“, John Maeda, 2006 Benutzerfreundlichkeit 69
Faktor 2 Lesbarkeit Benutzerfreundlichkeit 70
„Wir lesen keine– wir Internetseiten “ überfliegen sie. Benutzerfreundlichkeit 71
„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
Text als Inhalt Benutzerfreundlichkeit 72
Text als Inhalt Text als User Interface Benutzerfreundlichkeit 72
Faktor 2 Lesbarkeit Benutzerfreundlichkeit 73
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
Faktor 3 Findbarkeit Konventionen sind unsere Freunde! Benutzerfreundlichkeit 74
Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
Faktor 4 Zugänglichkeit Endgerätunabhängigkeit Barrierefreiheit Benutzerfreundlichkeit 76
Endgerät- Unabhängigkeit 1.Skalierbare Schriftgrössen 2.Flexibles / Elastisches Layout 3.Korrekt ausgezeichnete Seitenhierarchie 4.Lesbarkeit für Maschienen & Menschen Benutzerfreundlichkeit 77
Benutzerfreundlichkeit 78
Endgerät- Unabhängigkeit 1.Skalierbare Schriftgrössen 2.Flexibles / Elastisches Layout 3.Lesbarkeit für Maschienen & Menschen 4.Korrekt ausgezeichnete Seitenhierarchie Benutzerfreundlichkeit 79
Benutzerfreundlichkeit 80
Benutzerfreundlichkeit 80
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
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
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
http://flickr.com/photos/64522443@N00/540205343/ Kostprobe Einheit 03 Kostprobe 84
06 Beispiel 03.03.10 Usability & Webdesign OM SMA | BW 85
Beispiel Datavisualization.ch 2.0 86
„ “ 87
Beispiel Datavisualization.ch 2.0 88
Beispiel Datavisualization.ch 2.0 88
SHE Konzept zur Vereinfachung eines Interfaces Beispiel Datavisualization.ch 2.0 89
SHE Konzept zur Vereinfachung eines Interfaces • Shrink Beispiel Datavisualization.ch 2.0 89
SHE Konzept zur Vereinfachung eines Interfaces • Shrink • Hide Beispiel Datavisualization.ch 2.0 89
SHE Konzept zur Vereinfachung eines Interfaces • Shrink • Hide • Embed Beispiel Datavisualization.ch 2.0 89
90
Shrink Reduktion des Platzen den das Interface selbst einnimmt. 90
Shrink Reduktion des Platzen den das Interface selbst einnimmt. Hide Reduktion der visuellen Komplexität durch Interface Elemente. 90
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
07 Take Aways 03.03.10 Usability & Webdesign OM SMA | BW 91
http://www.flickr.com Ein Mythos names Take Away 1 92
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
} Wichtigster Platz auf einer Webpage zwischen 0-800px 0-800 px Hauptfokus bei 540px ~25% der Besucher beachten den Footer Knowlege Sweety 1 94
20min.ch 95
http://www.flickr.com/photos/f-r-a-n-k/469034312/ Limitiere die Auswahl Take Away 2 96
orange.co.uk & apple.com 97
orange.co.uk & apple.com 98
http://flickr.com/photos/ouvyt/2781242712/sizes/o/ Schreibe für deine Take Away 3 99
kompetent oder selbstironisch 100
kompetent oder selbstironisch 100
http://flickr.com/photos/alexa_soul/371288980/ Fokusiere auf Details Take Away 4 101
Form und Inhalt arbeiten komplementär 102
Form und Inhalt arbeiten komplementär 102
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
Design & Konzept auf der Mikro-Ebene 103
Design & Konzept auf der Mikro-Ebene 103
Question & 08 Answer 03.03.10 Usability & Webdesign OM SMA | BW 104
Literatur 03.03.10 Usability & Webdesign OM SMA | BW 105
Literatur „Designing With Web Standards“ Jeffrey Zeldman, 2003 03.03.10 Usability & Webdesign OM SMA | BW 105
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
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
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
Vielen Dank! Kontakt benjamin@interactivethings.com Slides http://www.slideshare.net/ wiederkehr 03.03.10 Usability & Webdesign OM SMA | BW 106

Weitere ähnliche Inhalte

PDF
Jacks of All Trades or Masters of One?
M. Jackson Wilkinson
 
PDF
Social Media Is Dead: Long Live Common Sense.
David Armano
 
PDF
Pen & Paper Tools for getting from Research to Design
Kate Rutter
 
PDF
Building an HTML5 Video Player
Jim Jeffers
 
PPTX
Zara Marketing Campaign Design
Carmen Neghina
 
PDF
Chemistry through the looking glass
Gareth Rowlands
 
PDF
What the F**K is Social Media: One Year Later
Martafy!
 
PDF
超簡単でハイセンスな表紙スライドの作り方
MOCKS | Yuta Morishige
 
Jacks of All Trades or Masters of One?
M. Jackson Wilkinson
 
Social Media Is Dead: Long Live Common Sense.
David Armano
 
Pen & Paper Tools for getting from Research to Design
Kate Rutter
 
Building an HTML5 Video Player
Jim Jeffers
 
Zara Marketing Campaign Design
Carmen Neghina
 
Chemistry through the looking glass
Gareth Rowlands
 
What the F**K is Social Media: One Year Later
Martafy!
 
超簡単でハイセンスな表紙スライドの作り方
MOCKS | Yuta Morishige
 

Andere mochten auch (18)

PDF
The Digital Statstics 2014: Zahlen und Fakten zu Deutschland
TWT
 
PDF
Transparency is the New Black
Dana Zezzo, CAS
 
PDF
Webdesign für Blogger
Webdesign Journal
 
PDF
Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)
die.agilen GmbH
 
PDF
Keeping it Snappy: Improving Website Performance
M. Jackson Wilkinson
 
PDF
Asset Positioning for Performance
M. Jackson Wilkinson
 
PDF
Webinale 14: Responsive Webdesign verkaufen / Pluswerk
die.agilen GmbH
 
PDF
Presentation Skills: How To Deal With The Four Personalities
Michael Weiss
 
PDF
Presentation Elevation Spring 2015
Michael Weiss
 
PDF
Gaceta COAAT Malaga
josearnaiz
 
PDF
Observatorio colegios El Mundo 2013
Caxton College
 
PPTX
Aborto xi$@r
Cesar Campos Meneses
 
PPTX
Alfabetizacion informartica
Mili Larrauri
 
PDF
Plan integrado espinar
JuanBraithuaite
 
PPT
Winning Email Practices In Retail Marketing
Richard Evans
 
PDF
Welche Firmenwagen wählen Manager in Österreich und Deutschland
NEWSROOM für Unternehmer
 
PPTX
jordi j.maria caules,toni, maria garcia
magdadanus
 
PDF
Pharmaceutical interventions in metabolic and nutritional follow-up of surgic...
José Joaquín Machí Ribes
 
The Digital Statstics 2014: Zahlen und Fakten zu Deutschland
TWT
 
Transparency is the New Black
Dana Zezzo, CAS
 
Webdesign für Blogger
Webdesign Journal
 
Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)
die.agilen GmbH
 
Keeping it Snappy: Improving Website Performance
M. Jackson Wilkinson
 
Asset Positioning for Performance
M. Jackson Wilkinson
 
Webinale 14: Responsive Webdesign verkaufen / Pluswerk
die.agilen GmbH
 
Presentation Skills: How To Deal With The Four Personalities
Michael Weiss
 
Presentation Elevation Spring 2015
Michael Weiss
 
Gaceta COAAT Malaga
josearnaiz
 
Observatorio colegios El Mundo 2013
Caxton College
 
Aborto xi$@r
Cesar Campos Meneses
 
Alfabetizacion informartica
Mili Larrauri
 
Plan integrado espinar
JuanBraithuaite
 
Winning Email Practices In Retail Marketing
Richard Evans
 
Welche Firmenwagen wählen Manager in Österreich und Deutschland
NEWSROOM für Unternehmer
 
jordi j.maria caules,toni, maria garcia
magdadanus
 
Pharmaceutical interventions in metabolic and nutritional follow-up of surgic...
José Joaquín Machí Ribes
 
Anzeige

Ähnlich wie Usability & Webdesign 2010 (20)

PDF
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
USECON
 
PDF
Usability & Webdesign 2009
Benjamin Wiederkehr
 
PDF
Online besser-nutzerfreundlich
Arno Karrasch
 
PDF
Präsentaton ONE Roundtable
ONE Schweiz
 
PDF
UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
fwippich
 
PDF
Saim Alkan: Texten im Internet
Hotelfachschule Garmisch-Partenkirchen
 
PPTX
Moxie Kb Webinar 12 11 12 By T&S
Teleconnect & Service GmbH
 
PDF
German Web Usability Training
Paulina
 
PDF
Mehr Nutzen, Weniger Interface
Moritz Haarmann
 
PDF
BarCamp Karlsruhe 18.06.2011
Eugene Terehov
 
PDF
Jan segers software oder papier, das leidige thema
janseg
 
PDF
120214 gpm basel_web_booklet
GPM - Agentur für digitale Kommunikation
 
PDF
Digitale Markenerlebnisse planen und gestalten
think moto GmbH
 
PDF
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Stephan Hamberger
 
PDF
Zukunftsskizzen der Online-PR
Thomas Pleil
 
PDF
Client Technologien - Ein Überblick für Usability Professionals
Thomas Memmel
 
PDF
Produce & Publish V 2.0 - Authoring Environment - Single-Source Multi-Channel...
Andreas Jung
 
PDF
Nefos: Nefos Mobile iPad App
Salesforce Deutschland
 
PDF
Erfolgsfaktoren der Wikieinführung in KMU
Martin Koser
 
PDF
MyMobile - Handy im Unterricht
Björn Friedrich
 
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
USECON
 
Usability & Webdesign 2009
Benjamin Wiederkehr
 
Online besser-nutzerfreundlich
Arno Karrasch
 
Präsentaton ONE Roundtable
ONE Schweiz
 
UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design
fwippich
 
Saim Alkan: Texten im Internet
Hotelfachschule Garmisch-Partenkirchen
 
Moxie Kb Webinar 12 11 12 By T&S
Teleconnect & Service GmbH
 
German Web Usability Training
Paulina
 
Mehr Nutzen, Weniger Interface
Moritz Haarmann
 
BarCamp Karlsruhe 18.06.2011
Eugene Terehov
 
Jan segers software oder papier, das leidige thema
janseg
 
120214 gpm basel_web_booklet
GPM - Agentur für digitale Kommunikation
 
Digitale Markenerlebnisse planen und gestalten
think moto GmbH
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Stephan Hamberger
 
Zukunftsskizzen der Online-PR
Thomas Pleil
 
Client Technologien - Ein Überblick für Usability Professionals
Thomas Memmel
 
Produce & Publish V 2.0 - Authoring Environment - Single-Source Multi-Channel...
Andreas Jung
 
Nefos: Nefos Mobile iPad App
Salesforce Deutschland
 
Erfolgsfaktoren der Wikieinführung in KMU
Martin Koser
 
MyMobile - Handy im Unterricht
Björn Friedrich
 
Anzeige

Mehr von Benjamin Wiederkehr (11)

PDF
7 Principles for Engaging Users with Visualization
Benjamin Wiederkehr
 
PDF
Intent & Impact: Thoughts on Persuasion in Visualization
Benjamin Wiederkehr
 
PDF
Intent & Impact at Data In Sight
Benjamin Wiederkehr
 
PDF
Candeo Documentation
Benjamin Wiederkehr
 
PDF
Replay Documentation
Benjamin Wiederkehr
 
PDF
Internos Documentation
Benjamin Wiederkehr
 
PDF
Datenbank Systeme Documentation
Benjamin Wiederkehr
 
PDF
Softare Visualisierung Documentation
Benjamin Wiederkehr
 
PDF
Data Visualization Präsentation
Benjamin Wiederkehr
 
PDF
Global Brain Präsentation
Benjamin Wiederkehr
 
PDF
Software Visualization 2 Documentation
Benjamin Wiederkehr
 
7 Principles for Engaging Users with Visualization
Benjamin Wiederkehr
 
Intent & Impact: Thoughts on Persuasion in Visualization
Benjamin Wiederkehr
 
Intent & Impact at Data In Sight
Benjamin Wiederkehr
 
Candeo Documentation
Benjamin Wiederkehr
 
Replay Documentation
Benjamin Wiederkehr
 
Internos Documentation
Benjamin Wiederkehr
 
Datenbank Systeme Documentation
Benjamin Wiederkehr
 
Softare Visualisierung Documentation
Benjamin Wiederkehr
 
Data Visualization Präsentation
Benjamin Wiederkehr
 
Global Brain Präsentation
Benjamin Wiederkehr
 
Software Visualization 2 Documentation
Benjamin Wiederkehr
 

Usability & Webdesign 2010

  • 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?
  • 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
  • 30. Status Quo Vor 2000 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
  • 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
  • 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
  • 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
  • 52. Realität Meta Information Das Internet 20
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 155. „Organization makes a System of many appear “ fewer. —Law 2, „The laws of simplicity“, John Maeda, 2006 Design 43
  • 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
  • 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
  • 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
  • 174. Faktor 3 Typographie Standardeinstellungen von Betriebsystem & Browser Design 53
  • 175. 95 Design % of the Web is Typography 54
  • 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
  • 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
  • 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
  • 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
  • 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
  • 216. „Simple is better than “ complex Complex is better than Benutzerfreundlichkeit 66
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 255. 06 Beispiel 03.03.10 Usability & Webdesign OM SMA | BW 85
  • 257. „ “ 87
  • 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
  • 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

Hinweis der Redaktion

  • #4: nach jobs fragen
  • #5: was ist eine online präsenz? kann sein: website / community profile / promo kampagne / online game
  • #12: fragen bitte einfach dazwischen stellen und bei unklarheiten nachfragen gerne mit beispielen aus eurem umfeld überprüfen
  • #13: fragen bitte einfach dazwischen stellen und bei unklarheiten nachfragen gerne mit beispielen aus eurem umfeld überprüfen
  • #14: fragen bitte einfach dazwischen stellen und bei unklarheiten nachfragen gerne mit beispielen aus eurem umfeld überprüfen
  • #18: 1993 tim berners lee am cern in genf
  • #19: 1993 tim berners lee am cern in genf
  • #20: 1993 tim berners lee am cern in genf
  • #21: 1993 tim berners lee am cern in genf
  • #22: ab 2000 mainstream privater gebrauch
  • #23: ab 2000 mainstream privater gebrauch
  • #24: ab 2000 mainstream privater gebrauch
  • #25: ab 2000 mainstream privater gebrauch
  • #26: 1993 tim berners lee am cern in genf
  • #27: 1993 tim berners lee am cern in genf
  • #28: 1993 tim berners lee am cern in genf
  • #29: 1993 tim berners lee am cern in genf
  • #30: 1993 tim berners lee am cern in genf
  • #31: informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes – paradigmawechsel
  • #32: informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes – paradigmawechsel
  • #33: informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes – paradigmawechsel
  • #34: informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes – paradigmawechsel
  • #35: informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes – paradigmawechsel
  • #36: informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes – paradigmawechsel
  • #37: informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes – paradigmawechsel
  • #43: informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes – paradigmawechsel
  • #46: informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes – paradigmawechsel
  • #65: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #66: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #67: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #68: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #69: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #70: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #71: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #72: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #73: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #74: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #75: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #76: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #77: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #78: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #79: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #80: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #81: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #82: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #83: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #84: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #85: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #86: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #87: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #88: datenspeicher zusammensetzen eines dokumentes styling verhalten
  • #89: wir produzieren keine texte, keine bilder, keine sounds. alles wird in einen kontext gestellt
  • #91: frage in die runde stellen
  • #126: frage in die runde stellen
  • #127: 6 fragen, die ich mir stelle bevor ich eine website mache!
  • #128: 6 fragen, die ich mir stelle bevor ich eine website mache!
  • #129: 6 fragen, die ich mir stelle bevor ich eine website mache!
  • #130: 6 fragen, die ich mir stelle bevor ich eine website mache!
  • #131: 6 fragen, die ich mir stelle bevor ich eine website mache!
  • #132: 6 fragen, die ich mir stelle bevor ich eine website mache!
  • #133: 6 fragen, die ich mir stelle bevor ich eine website mache!
  • #134: 6 fragen, die ich mir stelle bevor ich eine website mache!
  • #135: woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • #136: woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • #137: woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • #138: woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • #139: woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • #140: woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • #141: woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • #163: design programmierung budget klarheit!
  • #164: design programmierung budget klarheit!
  • #165: design programmierung budget klarheit!
  • #166: design programmierung budget klarheit!
  • #167: design programmierung budget klarheit!
  • #168: design programmierung budget klarheit!
  • #169: design programmierung budget klarheit!
  • #170: design programmierung budget klarheit!
  • #171: design programmierung budget klarheit!
  • #172: design programmierung budget klarheit!
  • #173: design programmierung budget klarheit!
  • #174: design programmierung budget klarheit!
  • #175: zeit, programmierung, inhalt, design, testing = budget klarheit für den user!
  • #176: zeit, programmierung, inhalt, design, testing = budget klarheit für den user!
  • #177: zeit, programmierung, inhalt, design, testing = budget klarheit für den user!
  • #178: zeit, programmierung, inhalt, design, testing = budget klarheit für den user!
  • #179: zeit, programmierung, inhalt, design, testing = budget klarheit für den user!
  • #180: zeit, programmierung, inhalt, design, testing = budget klarheit für den user!
  • #181: zeit, programmierung, inhalt, design, testing = budget klarheit für den user!
  • #182: zeit, programmierung, inhalt, design, testing = budget klarheit für den user!
  • #193: verweis auf farbenlehre farbe in der psychologie
  • #194: verweis auf farbenlehre farbe in der psychologie
  • #195: kandinski
  • #196: kandinski
  • #197: verweis auf farbenlehre farbe in der psychologie
  • #198: verweis auf farbenlehre farbe in der psychologie
  • #199: verweis auf farbenlehre farbe in der psychologie
  • #200: verweis auf farbenlehre farbe in der psychologie
  • #201: verweis auf farbenlehre farbe in der psychologie
  • #202: kandinski
  • #203: verweis auf farbenlehre farbe in der psychologie
  • #204: umsetzungskonzept eines corporate design auf screens flexibilität der darstellung
  • #206: umsetzungskonzept eines corporate design auf screens flexibilität der darstellung
  • #207: umsetzungskonzept eines corporate design auf screens flexibilität der darstellung
  • #208: umsetzungskonzept eines corporate design auf screens flexibilität der darstellung
  • #209: umsetzungskonzept eines corporate design auf screens flexibilität der darstellung
  • #210: umsetzungskonzept eines corporate design auf screens flexibilität der darstellung
  • #211: umsetzungskonzept eines corporate design auf screens flexibilität der darstellung
  • #212: umsetzungskonzept eines corporate design auf screens flexibilität der darstellung
  • #214: elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • #215: elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • #216: elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • #217: elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • #218: elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • #219: elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • #220: elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • #221: elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • #222: elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • #223: elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • #227: 1. call for action / ziel der website 2. feedback an user 3. hilf dem user 4. verleiten / browsen
  • #228: 1. call for action / ziel der website 2. feedback an user 3. hilf dem user 4. verleiten / browsen
  • #229: 1. call for action / ziel der website 2. feedback an user 3. hilf dem user 4. verleiten / browsen
  • #230: 1. call for action / ziel der website 2. feedback an user 3. hilf dem user 4. verleiten / browsen
  • #231: 1. call for action / ziel der website 2. feedback an user 3. hilf dem user 4. verleiten / browsen
  • #232: 1. call for action / ziel der website 2. feedback an user 3. hilf dem user 4. verleiten / browsen
  • #282: 1. lesbar für auch wenn die Bilder nicht dargestellt werden 2. erlaubt Tastaturnavigation 3. Kein unnötiges Vorlesen durch einen Screenreader 4. Unfähigkeit zur Bedienung einer Maus 5. Javascript wird von Geräten oft suboptimal unterstützt