Usability & Webdesign
Benjamin Wiederkehr
Online Marketer SMA Lehrgang
Zürich, 01.04.2009
1
Wer seid ihr?
Online Sales, Sales Support, Marketing Stategist,
Cross Media, Market Analytics…
Online-Marketer!
01.04.09 Usability & Webdesign OM SMA | BW 2
Was tun wir?
Überblick über die Arbeit an einer Online Präsenz
01.04.09 Usability & Webdesign OM SMA | BW 3
Ziel des Abends
Verständnis
Was machen wir?
Wie machen wir es?
Sensibilisierung
Wieso machen wir es?
Wieso machen wir es auf diese Weise?
01.04.09 Usability & Webdesign OM SMA | BW 4
Ablauf
Introduction Experience Goodies
Das Internet User Experience Take Aways
Entstehung Bausteine Der Fold
• • •
Facts & Figures Arbeitsteilung Die Auswahl
• • •
Ausblick Die Sprache
• •
Das Detail
•
Die Gestaltung
Die Produktion Layout
•
Werkzeuge Farbe
• •
Arbeitsprozess Typografie
• •
Arbeitsresultate Kontrast
• •
Kommunikation Emotion
• •
Flow
•
Visueller Reichtum
•
Benutzer-
freundlichkeit
Einfachheit
•
Lesbarkeit
•
Findbarkeit
•
Zugänglichkeit
•
01.04.09 Usability & Webdesign OM SMA | BW 5
01 Das Internet
01.04.09 Usability & Webdesign OM SMA | BW 7
Entstehung
1965 1989 2003
Randcorporation beginnt mit Forschung Schweizerisches Forschungsnetz SWITCH Online Communities beginnen wieder
bezüglich Sicherung von wird ans Internet angeschlossen. aufzupoppen. Man organsiert sich vermehrt
Computersystemen gegen Ausfälle. Wichtig online. Foto Communities starten und die
1994-1999
bei Abwehr von atomaren Angriffen. Anzahl Blogs beginnt an Relevanz zu
Das Internet boomt, wächst über die gewinnen.
1969 Grenzen der Universitäten hinaus und hat
2005
ARPAnet wird gegründet, der Vorläufer des zeitweise bis 15% Zuwachsrate/Monat.
Internets. Leitgedanke auch hier die Angst Das Social Networking beginnt zu
2000
vor dem Supergau mit Computersysteme. greifen. Erste Durchbrüche mit grossen
Überlegung: Dezentrales Computersystem Erste Reformierung des Internets beginnt. Plattformen.
kann schwerer zerstört werden als Viele DOTCOMs in die grosse Hoffnung an
zentrales. der Börse gesetzt wurde schliessen ihre 2006
Tore. Suchmaschinen und Portale beenden Die Millionen-Verkäufe werden wieder
ihre Tätigkeiten.
1977 im Internetbusiness möglich. Web 2.0
Erstmalige Anwendung des TCP/IP- beginnt ein Begriff zu werden.
2001/2002
Protokolls. (Transmission Control Protocol/
Die Zweite Runde beginnt. Das Internet 2007
Internet Protocol).
sucht seine neue Definition. Durch den 11. Die Social Networking Plattformen
September wird die Diskussion über
1980 boomen. Unzählige Web 2.0 Websites
Privacy und Sicherheit nicht nur im
Aufbau von erstem Internet. ARPAnet und Tools werden entwickelt. Die alte
Zusammenhang mit der Suche nach
fungiert als Backbone, als Sammelpunkt Goldgräberstimmung ist wieder da - nur
Terroristen wieder lauter. Die
aller Hauptknotenpunkte. erwachsener.
Internetbranche hat sich gelichtet. Die
Prophezeihung, dass nach einem Crash nur
1983 2008
die Grossen überleben werden hat sich
TCP/IP wird zum Standard erklärt. Personal Media, Video Content, Mobile
nicht bewahrheitet. Viele kleine Internet, WebTV werden immer wichtiger
Spezialisten haben sich durch ihre
1987 und vermehrt eingesetzt.
Flexibilität besser gehalten als manch ein
Aufbau von TCP/IP Netzen beginnt in
grosser Betrieb.
Europa und Australien.
Das Internet 8
Ausblick
we
are !
here
1. Welle 2. Welle 3. Welle
Verknüpfte Verknüpfte
Verknüpfte
Dokumente Daten
Computer
WorldWideWeb XML / OWL / RDF
ARPAnet
Semantic Web
Intelligenter
Personalisierter
Allgegenwärtiger
Das Internet 12
02 Die Produktion
01.04.09 Usability & Webdesign OM SMA | BW 13
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 14
Werkzeuge
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 15
03 User Experience
01.04.09 Usability & Webdesign OM SMA | BW 17
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 18
User Experience
Benutzerbedürfnisse
Technologische Geschäftsvorgaben
Anforderungen
03 19
Arbeitsteilung
Core Team
Information Architect
Information Designer
Web Designer
Interaction Designer
Usability Specialist
Web Developer
Impuls Experts
Content Specialist
Identity Designer
Taxonomist
Interactive Marketer
Human Factors Specialist
Die Produktion 21
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 22
Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.
Interaktive Funktionalitäten, Multimedia,
Anpassungen an der Struktur…
Die Produktion 24
Risiken bei Ad Hoc Änderungen
1. Zeitpläne können nicht mehr eingehalten werden
2. Technologisches Konzept wird untergraben
3. Inhaltliches Konzept wird untergraben
4. Getätigte Tests werden ungültig
> Verschlechterung der User-Experiences
Die Produktion 25
Moodboard, Sitemap,Wireframes, Paper Prototype,
Flow Diagram, Screendesigns, Prototyp
Arbeitsresultate
Die Produktion 26
Moodboard, Sitemap,Wireframes, Paper Prototype,
Flow Diagram, Screendesigns, Prototyp
captUS Site Information Architecture
0
1/27/04
captUS Home
National
Arbeitsresultate
Top Global Navigation Left Hand Navigation
1 2 3 4 5 6 7 9 10 11 12
Continue to:
About the
Calendar - Search (not Privacy & Welcome to Publications CSAP Live (not CAPT Staff
CAPT
Regions Contact Links Latest News
Monthly View working) Disclaimer captUS and Resources working) Login
Program
9.1 9.2 9.3 9.4
4.2 4.3 4.4
4.1
2.1
Funding Resources Facts Links
Weekly View Search Admin Login
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 27
Moodboard, Sitemap,Wireframes, Paper Prototype,
Flow Diagram, Screendesigns, Prototyp
Page I.D. 0 Page Title Home
Date Version
captUS Site Information Architecture
0
1/27/04
captUS Home
National
Page Details
Adolescent and Child Targets (ACT)
Search
for Health Foundation. Inc.
Logo
Arbeitsresultate
Top Global Navigation Left Hand Navigation
about health goals projects resources contact us
1 2 3 4 5 6 7 9 10 11 12
Continue to:
About the
Calendar - Search (not Privacy & Welcome to Publications CSAP Live (not CAPT Staff
CAPT
Regions Contact Links Latest News
Monthly View working) Disclaimer captUS and Resources working) Login
Too many Americans suffer the daily
Program
effects of diabetes, asthma and obesity.
Perhaps the greatest tragedy is the
increasing toll all three of these afflictions
are taking on our children.
9.1 9.2 9.3 9.4
4.2 4.3 4.4
4.1
2.1
Tommy Thompson, Secretary of
Funding Resources Facts Links
Weekly View Search Admin Login
Health and Human Services
CAPT Specific Event Details
Information
Achieving the vision of “Healthy People in
Healthy Communities” represents an
opportunity for individuals to make healthy
lifestyle choices for themselves and their
4.3.1
9.1.1 9.2.1 9.3.1 9.4.1
families.
Search Results
JTO Articles JTO Articles JTO Articles JTO Articles
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 8
Page ID, and page title About the CAPT
Program
Proven,
National
Effective
Multiple Similar Pages
Goals 8.3Strategies8.4
8.1 8.2 8.5 8.6 8.7
Core
Research Target Progress
Purpose Process Prevention Key Terms
Application Audience Reports
Services
Conditional Area
Local
Communities
Content that can be replaced by the
new National CAPT
Content that will require additional
ACT for Health, Adolescent and Child Targets for Health Foundation, Inc., is an educational and charitable non-profit,
attention. Databases, Mailing lists, etc.
non-governmental agency, tax exempt under Section 501(c)3 of the Internal Revenue Code.
Page: 1
Die Produktion 28
Moodboard, Sitemap,Wireframes, Paper Prototype,
Flow Diagram, Screendesigns, Prototyp
Page I.D. 0 Page Title Home
Date Version
captUS Site Information Architecture
0
1/27/04
captUS Home
National
Page Details
Adolescent and Child Targets (ACT)
Search
for Health Foundation. Inc.
Logo
Arbeitsresultate
Top Global Navigation Left Hand Navigation
about health goals projects resources contact us
1 2 3 4 5 6 7 9 10 11 12
Continue to:
About the
Calendar - Search (not Privacy & Welcome to Publications CSAP Live (not CAPT Staff
CAPT
Regions Contact Links Latest News
Monthly View working) Disclaimer captUS and Resources working) Login
Too many Americans suffer the daily
Program
effects of diabetes, asthma and obesity.
Perhaps the greatest tragedy is the
increasing toll all three of these afflictions
are taking on our children.
9.1 9.2 9.3 9.4
4.2 4.3 4.4
4.1
2.1
Tommy Thompson, Secretary of
Funding Resources Facts Links
Weekly View Search Admin Login
Health and Human Services
CAPT Specific Event Details
Information
Achieving the vision of “Healthy People in
Healthy Communities” represents an
opportunity for individuals to make healthy
lifestyle choices for themselves and their
4.3.1
9.1.1 9.2.1 9.3.1 9.4.1
families.
Search Results
JTO Articles JTO Articles JTO Articles JTO Articles
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 8
Page ID, and page title About the CAPT
Program
Proven,
National
Effective
Multiple Similar Pages
Goals 8.3Strategies8.4
8.1 8.2 8.5 8.6 8.7
Core
Research Target Progress
Purpose Process Prevention Key Terms
Application Audience Reports
Services
Conditional Area
Local
Communities
Content that can be replaced by the
new National CAPT
Content that will require additional
ACT for Health, Adolescent and Child Targets for Health Foundation, Inc., is an educational and charitable non-profit,
attention. Databases, Mailing lists, etc.
non-governmental agency, tax exempt under Section 501(c)3 of the Internal Revenue Code.
Page: 1
Die Produktion 29
Moodboard, Sitemap,Wireframes, Paper Prototype,
Flow Diagram, Screendesigns, Prototyp
Page I.D. 0 Page Title Home
Date Version
captUS Site Information Architecture Pushes IIB
Supplemental Data
0
1/27/04 to Data Mart
captUS Home
National
Page Details
Adolescent and Child Targets (ACT)
Search
for Health Foundation. Inc.
Logo
Login
Arbeitsresultate
Top Global Navigation Left Hand Navigation
about health goals projects resources contact us
1 2 3 4 5 6 7 9 10 11 12
Continue to:
About the
Calendar - Search (not Privacy & Welcome to Publications CSAP Live (not CAPT Staff
CAPT
Regions Contact Links Latest News
Monthly View working) Disclaimer captUS and Resources working) Login
Too many Americans suffer the daily
Program
effects of diabetes, asthmaPublish to
Batch and obesity. Batch Publish to
Home / Products & Add Products &
Perhaps the greatest Staging is the Production
tragedy
Home / Benchmarks Add Benchmarks
increasing toll all three of these afflictions
are taking on our children.
9.1 9.2 9.3 9.4
4.2 4.3 4.4
4.1
2.1
Tommy Thompson, Secretary of Pushes IIB
Funding Resources Facts Links
Weekly View Search Admin Login
Health and Human Services Supplemental Data
CAPT Specific Event Details
Information
to Data Mart
Achieving the vision of “Healthy People in
Healthy Communities” represents an
Links to PPW
opportunity for individuals to make healthy
lifestyle choices for themselves and their
4.3.1
9.1.1 9.2.1 9.3.1 9.4.1
families.
Search Results
JTO Articles JTO Articles JTO Articles JTO Articles
Donna E. Shalala
Former Secretary of Health and Human
Link to Product Master Publish to Staging Publish to Production
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
Pushes Site & Tools
Associations Data to
A National & International Model Data Mart
8
Page ID, and page title About the CAPT
Program
Proven,
National
Effective
Multiple Similar Pages
Goals 8.3Strategies8.4
8.1 8.2 8.5 8.6 8.7
Core Update Site and Tools
Research Target Progress
Purpose Process Prevention Key Terms
Associations
Application Audience Reports
Services
Conditional Area
Local
Pushes “n/a” to Data
Communities
Mart for suspended
data points
Content that can be replaced by the
new National CAPT
Product Overview &
Content that will require additional Edit Static Product Data & Benchmark Overview
ACT for Health, Adolescent and Child Targets for Health Foundation, Inc., is an educational and charitable non-profit,
attention. Databases, Mailing lists, etc. Edit Static Benchmark Data
non-governmental agency, tax exempt under Section 501(c)3 of the Internal Revenue Code.
Turn Off Data
Project Penguin Page Flow Diagram (3/15/2006)
Page: 1
Die Produktion 30
Moodboard, Sitemap,Wireframes, Paper Prototype,
Flow Diagram, Screendesigns, Prototyp
Page I.D. 0 Page Title Home
Date Version
captUS Site Information Architecture Pushes IIB
Supplemental Data
0
1/27/04 to Data Mart
captUS Home
National
Page Details
Adolescent and Child Targets (ACT)
Search
for Health Foundation. Inc.
Logo
Login
Arbeitsresultate
Top Global Navigation Left Hand Navigation
about health goals projects resources contact us
1 2 3 4 5 6 7 9 10 11 12
Continue to:
About the
Calendar - Search (not Privacy & Welcome to Publications CSAP Live (not CAPT Staff
CAPT
Regions Contact Links Latest News
Monthly View working) Disclaimer captUS and Resources working) Login
Too many Americans suffer the daily
Program
effects of diabetes, asthmaPublish to
Batch and obesity. Batch Publish to
Home / Products & Add Products &
Perhaps the greatest Staging is the Production
tragedy
Home / Benchmarks Add Benchmarks
increasing toll all three of these afflictions
are taking on our children.
9.1 9.2 9.3 9.4
4.2 4.3 4.4
4.1
2.1
Tommy Thompson, Secretary of Pushes IIB
Funding Resources Facts Links
Weekly View Search Admin Login
Health and Human Services Supplemental Data
CAPT Specific Event Details
Information
to Data Mart
Achieving the vision of “Healthy People in
Healthy Communities” represents an
Links to PPW
opportunity for individuals to make healthy
lifestyle choices for themselves and their
4.3.1
9.1.1 9.2.1 9.3.1 9.4.1
families.
Search Results
JTO Articles JTO Articles JTO Articles JTO Articles
Donna E. Shalala
Former Secretary of Health and Human
Link to Product Master Publish to Staging Publish to Production
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
Pushes Site & Tools
Associations Data to
A National & International Model Data Mart
8
Page ID, and page title About the CAPT
Program
Proven,
National
Effective
Multiple Similar Pages
Goals 8.3Strategies8.4
8.1 8.2 8.5 8.6 8.7
Core Update Site and Tools
Research Target Progress
Purpose Process Prevention Key Terms
Associations
Application Audience Reports
Services
Conditional Area
Local
Pushes “n/a” to Data
Communities
Mart for suspended
data points
Content that can be replaced by the
new National CAPT
Product Overview &
Content that will require additional Edit Static Product Data & Benchmark Overview
ACT for Health, Adolescent and Child Targets for Health Foundation, Inc., is an educational and charitable non-profit,
attention. Databases, Mailing lists, etc. Edit Static Benchmark Data
non-governmental agency, tax exempt under Section 501(c)3 of the Internal Revenue Code.
Turn Off Data
Project Penguin Page Flow Diagram (3/15/2006)
Page: 1
Die Produktion 31
03 Die Gestaltung
01.04.09 Usability & Webdesign OM SMA | BW 32
Faktor 1
Layout
„Grid Systems in Graphic Design“
Josef Muller-Brockmann
Die Gestaltung 33
„Organization makes a System “
of many appear fewer.
—Law 2, „The laws of simplicity“, John Maeda, 2006
Die Gestaltung 34
Faktor 1
Layout
Struktur
Klarheit
Gewichtung
Die Gestaltung 35
Faktor 2
Farbe
Farbschema CI / CD
Grundstimmung
Fokus
unterschiedliche
Farbprofile für
Betriebsysteme, Farbdisplays & Browser
Die Gestaltung 36
Faktor 2
Farbe
„The Elements of Color“
Johannes Itten
Die Gestaltung 37
Faktor 3
Typographie
4 sichere Webschriften
Skalierbarkeit der Typografie
Standardeinstellungen von Betriebsystem &
Browser
Die Gestaltung 38
Faktor 3
Typographie
„The Elements of Typographic Style“
Robert Bringhurst
Die Gestaltung 39
Faktor 4
Kontrast
Helligkeit
Grösse
Farbe
Position
Typographie
Die Gestaltung 40
Faktor 6
Flow
Setze klare Ziele
Gib sofortiges Feedback
Maximiere die Effizienz
Erlaube zu Entdecken
Die Gestaltung 41
Exkurs
Visueller Reichtum
Attraktiviere um zu fokusieren
Vermeide Klischees
Sprich deine eigene Sprache
Die Gestaltung 42
05 Benutzer-
freundlichkeit
01.04.09 Usability & Webdesign OM SMA | BW 43
Faktor 1
Einfachheit
Benutzerfreundlichkeit 44
„Simple is better than complex“
Complex is better than complicated
—Aphorismen 1&2, „The Zen of Python“, Tim Peters, 2004
Benutzerfreundlichkeit 45
Faktor 1
Einfachheit
Reduktion Kontext
Organisation Vertrauen
„ “
Simplicity is about subtracting the obvous, and
adding the meaningful
—Law 10, „The laws of simplicity“, John Maeda, 2006
Benutzerfreundlichkeit 46
Faktor 2
Lesbarkeit
Benutzerfreundlichkeit 47
„Wir lesen keine Internetseiten“
– wir überfliegen sie.
—„Don‘t make me think“, Steve Krug, 2006
Gewöhnlich sind wir in Eile
•
Wir wissen, dass wir nicht alles lesen müssen
•
Wir sind gut darin
•
Benutzerfreundlichkeit 48
Text als Inhalt Text als User Interface
Benutzerfreundlichkeit 49
Faktor 2
Lesbarkeit
Reduziere den Text um 50%
•
Stell‘ davon die Hälfte auf die Website
•
25% werden die Benutzer davon noch lesen
•
Benutzerfreundlichkeit 50
Faktor 3
Findbarkeit
Konventionen sind unsere Freunde!
Benutzerfreundlichkeit 51
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 55
Barrierefreiheit
65% der Bevölkerung hat eine Behinderung
•
Jeder sollte die gleiche Chance und Möglichkeit
•
auf den Zugang zu Information haben
Es ist nicht nur eine gute Idee, sondern Gesetz
•
Benutzerfreundlichkeit 56
e
impl
s
6 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)
6. Auf Image-Maps verzichten
Benutzerfreundlichkeit 57
http://www.flickr.com
Vergiss den „Fold“
Knowlege Sweety 1 59
Knowlege Sweety 1
Vergiss den „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 60
}
Wichtigster Platz auf einer
Webpage zwischen 0-800px 0-800px
Hauptfokus bei 540px
~25% der Besucher beachten den Footer
Knowlege Sweety 1 61
http://www.flickr.com/photos/f-r-a-n-k/469034312/
Limitiere die Auswahl
Knowlege Sweety2 62
orange.co.uk & apple.com 63
http://flickr.com/photos/ouvyt/2781242712/sizes/o/
Schreibe für deine Leser
Knowlege Sweety 3 64
kompetent oder selbstironisch 65
http://flickr.com/photos/alexa_soul/371288980/
Fokusiere auf Details
Knowlege Sweety 4 66
Design & Konzept auf der Mikro-Ebene 67
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
01.04.09 Usability & Webdesign OM SMA | BW 68
Vielen Dank!
Kontakt wiederkehr@coundco.ch
Weiterführende Links http://om.coundco.ch
Slides http://artillery.com
01.04.09 Usability & Webdesign OM SMA | BW 69
0 comments
Post a comment