Usability & Webdesign 2009

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


Ziel des Abends
Verständnis
Was machen wir?
Wie machen wir es?
Sensibilisierung
Wieso machen wir es?
Wieso machen wir es auf diese Weise?


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
•


http://flickr.com/photos/walkn/2236986927/

Introduction

Lection 01 Introduction 6

01 Das Internet


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 Deﬁnition. 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

1965 - 1980 1980 - 1993 1993 - heute

Wissenschaft Privatwirtschaft
Militär
& persönlicher
Militär
Gebrauch
Wissenschaft
Militär

Chapter 9

Facts & Figures
Rechenleistung
Chips
100‘000‘000‘000
Links
100‘000‘000‘000‘000
20‘000‘000‘000‘000‘000‘000 Bytes

Konnektivität
Emails / Sekunde
1‘000‘000
SMS / Sekunde
1‘000‘000
Links / Sekunde
100‘000‘000‘000
RFID Chips
600‘000‘000‘000
Terrabyte Traffic
8‘000‘000‘000‘000

Das Internet 10

Internet

Das Internet 11

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


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

http://flickr.com/photos/fortyseven/1537093876/

Experience

Lection 02 Experience 16

03 User Experience


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

Bausteine
Structure
Informations Architektur
Intuitiveness
Informations Design
Visual Aesthetics
Visuelles Design
Functionality
Interaktions Design

03 20

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

Arbeitsprozess

Realisierung Implementierung Kommunikation
Konzept Spezifikation

• Inhaltsgewichtung • Inhaltsumfang • Inhaltsaufbereitung • Inhaltskontrollen • Launch
• Informations- • CI/ CD Adaption • Inhaltsabfüllung • Crossbrowser Test • Newsletter
architektur • Design Standards • Detaildesign • System Debugging • interne Mitteilung
• Kommunikations- • Funktionsumfang • Server Setup • Performance • Flyer
konzept • Technologiewahl • Programmierung Optimerung • Inserate
• Designkonzept • Datenbankstruktur Backend • Usability Tests • etc.
• Technologisches • SEO Strategie • Umsetzung
Konzept • Externe Frontend
• Benutzeridentifi- Applikationen • SEO Optimierung
kation (Personas) • Usability Tests
• Konkurenzanalyse

Die Produktion 23

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


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


Page I.D. 0 Page Title Home
Date Version
0
1/27/04
captUS Home
National
Page Details
Adolescent and Child Targets (ACT)
Search
for Health Foundation. Inc.
Logo

Arbeitsresultate
about health goals projects resources contact us
1 2 3 4 5 6 7 9 10 11 12
Continue to:
About the
CAPT
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
Health and Human Services
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
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
Program

Proven,
National
Effective
Goals 8.3Strategies8.4
8.1 8.2 8.5 8.6 8.7
Core
Services
Conditional Area
Local
Communities
new National CAPT

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.

Page: 1

Die Produktion 28


Date Version
0
1/27/04
captUS Home
National
Page Details
Search
Logo

Arbeitsresultate
1 2 3 4 5 6 7 9 10 11 12
Continue to:
About the
CAPT
Program

effects of diabetes, asthma and obesity.
Perhaps the greatest tragedy is the
9.1 9.2 9.3 9.4
4.2 4.3 4.4
4.1
2.1
Tommy Thompson, Secretary of
Health and Human Services
Information

4.3.1
9.1.1 9.2.1 9.3.1 9.4.1
families.
Search Results
Donna E. Shalala

A National & International Model 8
Program

Proven,
National
Effective
8.1 8.2 8.5 8.6 8.7
Core
Services
Conditional Area
Local
Communities
new National CAPT


Page: 1

Die Produktion 29


Date Version
captUS Site Information Architecture Pushes IIB
Supplemental Data
0
1/27/04 to Data Mart
captUS Home
National
Page Details
Search
Logo
Login

Arbeitsresultate
1 2 3 4 5 6 7 9 10 11 12
Continue to:
About the
CAPT
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
9.1 9.2 9.3 9.4
4.2 4.3 4.4
4.1
2.1
Tommy Thompson, Secretary of Pushes IIB
Health and Human Services Supplemental Data
Information
to Data Mart
Links to PPW
4.3.1
9.1.1 9.2.1 9.3.1 9.4.1
families.
Search Results
Donna E. Shalala
Link to Product Master Publish to Staging Publish to Production
Pushes Site & Tools
Associations Data to
A National & International Model Data Mart
8
Program

Proven,
National
Effective
8.1 8.2 8.5 8.6 8.7
Core Update Site and Tools
Associations
Services
Conditional Area
Local
Pushes “n/a” to Data
Communities
Mart for suspended
data points
new National CAPT

Product Overview &
Content that will require additional Edit Static Product Data & Benchmark Overview
attention. Databases, Mailing lists, etc. Edit Static Benchmark Data
Turn Off Data
Project Penguin Page Flow Diagram (3/15/2006)
Page: 1

Die Produktion 30


Date Version
captUS Site Information Architecture Pushes IIB
Supplemental Data
0
1/27/04 to Data Mart
captUS Home
National
Page Details
Search
Logo
Login

Arbeitsresultate
1 2 3 4 5 6 7 9 10 11 12
Continue to:
About the
CAPT
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
9.1 9.2 9.3 9.4
4.2 4.3 4.4
4.1
2.1
Tommy Thompson, Secretary of Pushes IIB
Health and Human Services Supplemental Data
Information
to Data Mart
Links to PPW
4.3.1
9.1.1 9.2.1 9.3.1 9.4.1
families.
Search Results
Donna E. Shalala
Link to Product Master Publish to Staging Publish to Production
Pushes Site & Tools
Associations Data to
A National & International Model Data Mart
8
Program

Proven,
National
Effective
8.1 8.2 8.5 8.6 8.7
Core Update Site and Tools
Associations
Services
Conditional Area
Local
Pushes “n/a” to Data
Communities
Mart for suspended
data points
new National CAPT

Product Overview &
Content that will require additional Edit Static Product Data & Benchmark Overview
attention. Databases, Mailing lists, etc. Edit Static Benchmark Data
Turn Off Data
Project Penguin Page Flow Diagram (3/15/2006)
Page: 1

Die Produktion 31

03 Die Gestaltung


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


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


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


Faktor 2
Lesbarkeit


„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
•


Text als Inhalt Text als User Interface


Faktor 2
Lesbarkeit
Reduziere den Text um 50%
•
Stell‘ davon die Hälfte auf die Website
•
25% werden die Benutzer davon noch lesen
•


Faktor 3
Findbarkeit
Konventionen sind unsere Freunde!


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


Faktor 4
Zugänglichkeit
Endgerätunabhängigkeit
Barrierefreiheit


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


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.)


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
•


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

http://flickr.com/photos/64522443@N00/540205343/

Goodies

Lection 03 Goodies 58

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


}
Wichtigster Platz auf einer
Webpage zwischen 0-800px 0-800px
Hauptfokus bei 540px

~25% der Besucher beachten den Footer

http://www.flickr.com/photos/f-r-a-n-k/469034312/

Limitiere die Auswahl

Knowlege Sweety2 62

http://flickr.com/photos/ouvyt/2781242712/sizes/o/

Schreibe für deine Leser


kompetent oder selbstironisch 65

http://flickr.com/photos/alexa_soul/371288980/

Fokusiere auf Details


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


Vielen Dank!

Kontakt wiederkehr@coundco.ch
Weiterführende Links http://om.coundco.ch
Slides http://artillery.com


Usability & Webdesign 2009

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Usability & Webdesign 2009

Semelhante a Usability & Webdesign 2009 (20)

Mais de Benjamin Wiederkehr

Mais de Benjamin Wiederkehr (11)

Usability & Webdesign 2009