Usability & Webdesign
Benjamin Wiederkehr
Online Marketer SMA Lehrgang
Zürich, 01.04.2009




                            ...
Wer seid ihr?
Online Sales, Sales Support, Marketing Stategist,
Cross Media, Market Analytics…


Online-Marketer!
01.04.09...
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 ...
Ablauf
Introduction                                 Experience                 Goodies
Das Internet                       ...
http://flickr.com/photos/walkn/2236986927/




                          Introduction



Lection 01 Introduction          ...
01 Das Internet



01.04.09 Usability & Webdesign OM SMA | BW   7
Entstehung
1965                                          1989                                         2003
Randcorporation...
1965 - 1980      1980 - 1993      1993 - heute


                        Wissenschaft     Privatwirtschaft
Militär
       ...
Facts & Figures
Rechenleistung
                           Chips
100‘000‘000‘000
                           Links
100‘000‘0...
Internet




Das Internet              11
Ausblick
                                         we
                                         are !
                      ...
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…
St...
Werkzeuge
Text
  pdf, doc, rtf… (Plugin, Download)
Audio
   mp3, wav, wmv… (Streams, Podcast, Download)
Animation
   Flash...
http://flickr.com/photos/fortyseven/1537093876/




    Experience




Lection 02 Experience                              ...
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
specif...
User Experience
                 Benutzerbedürfnisse




Technologische            Geschäftsvorgaben
Anforderungen




03 ...
Bausteine
Structure
   Informations Architektur
Intuitiveness
   Informations Design
Visual Aesthetics
   Visuelles Design...
Arbeitsteilung
Core Team
Information Architect
Information Designer
Web Designer
Interaction Designer
Usability Specialist...
Fortlaufender Prozess

 1. Wie unterstützt eine Website zu erstellen meine Absichten?
 2. Was sind die drei wichtigsten Zi...
Arbeitsprozess

                                               Realisierung Implementierung Kommunikation
        Konzept ...
Scope Creep
Wird der Prozess genannt bei dem ungeplante
„Features“ hinzugefügt werden.

Interaktive Funktionalitäten, Mult...
Risiken bei Ad Hoc Änderungen

 1. Zeitpläne können nicht mehr eingehalten werden
 2. Technologisches Konzept wird untergr...
Moodboard, Sitemap,Wireframes, Paper Prototype,
Flow Diagram, Screendesigns, Prototyp




Arbeitsresultate



Die Produkti...
Moodboard, Sitemap,Wireframes, Paper Prototype,
Flow Diagram, Screendesigns, Prototyp

         captUS Site Information Ar...
Moodboard, Sitemap,Wireframes, Paper Prototype,
Flow Diagram, Screendesigns, Prototyp

                                   ...
Moodboard, Sitemap,Wireframes, Paper Prototype,
Flow Diagram, Screendesigns, Prototyp

                                   ...
Moodboard, Sitemap,Wireframes, Paper Prototype,
Flow Diagram, Screendesigns, Prototyp

                                   ...
Moodboard, Sitemap,Wireframes, Paper Prototype,
Flow Diagram, Screendesigns, Prototyp

                                   ...
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...
Faktor 1
Layout
Struktur
Klarheit
Gewichtung




Die Gestaltung   35
Faktor 2
Farbe
Farbschema CI / CD
Grundstimmung
Fokus

unterschiedliche
Farbprofile für
Betriebsysteme, Farbdisplays & Bro...
Faktor 2
Farbe
„The Elements of Color“
   Johannes Itten




Die Gestaltung            37
Faktor 3
Typographie
4 sichere Webschriften
Skalierbarkeit der Typografie
Standardeinstellungen von Betriebsystem &
Browse...
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   ...
Exkurs
Visueller Reichtum
Attraktiviere um zu fokusieren
Vermeide Klischees
Sprich deine eigene Sprache




Die Gestaltung...
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...
Faktor 1
    Einfachheit
    Reduktion                    Kontext
    Organisation                 Vertrauen


„          ...
Faktor 2
Lesbarkeit



Benutzerfreundlichkeit   47
„Wir lesen keine Internetseiten“
 – wir überfliegen sie.
                                   —„Don‘t make me think“, Steve ...
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
     •
    ...
Faktor 3
Findbarkeit
Konventionen sind unsere Freunde!




Benutzerfreundlichkeit              51
Konventionen
     1. Persistente Navigation (Hauptnavigation)
     2. Lokale Navigation
     3. Verlinktes Logo
     4. Or...
Faktor 4
Zugänglichkeit
Endgerätunabhängigkeit
Barrierefreiheit




Benutzerfreundlichkeit   53
Endgerät-
Unabhängigkeit
     1. Skalierbare Schriftgrössen
     2. Flexibles / Elastisches Layout
     3. Korrekt ausgeze...
Einige Gründe
     1. Lesbarer Inhalt ausserhalb der Website
        (RSS, Widgets, Aggregatoren…)
     2. Offenheit für k...
Barrierefreiheit
         65% der Bevölkerung hat eine Behinderung
     •
         Jeder sollte die gleiche Chance und Mög...
e
    impl
  s



6 Verbesserungen
     1. Bilder mit einem Alt-Text versehen
     2. Formularfelder korrekt auszeichnen
 ...
http://flickr.com/photos/64522443@N00/540205343/




                     Goodies



Lection 03 Goodies                   ...
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
...
}
Wichtigster Platz auf einer
Webpage zwischen 0-800px                     0-800px
Hauptfokus bei 540px




~25% der Besuc...
http://www.flickr.com/photos/f-r-a-n-k/469034312/




Limitiere die Auswahl

Knowlege Sweety2                             ...
orange.co.uk & apple.com   63
http://flickr.com/photos/ouvyt/2781242712/sizes/o/




Schreibe für deine Leser




 Knowlege Sweety 3                    ...
kompetent oder selbstironisch   65
http://flickr.com/photos/alexa_soul/371288980/




Fokusiere auf Details



Knowlege Sweety 4                             ...
Design & Konzept auf der Mikro-Ebene   67
Literatur
„Designing With Web Standards“
      Jeffrey Zeldman, 2003

„Don‘t Make Me Think!“
      Steve Krug, 2000

„Webs...
Vielen Dank!

Kontakt                                      wiederkehr@coundco.ch
Weiterführende Links                     ...
Nächste SlideShare
Wird geladen in …5
×

Usability & Webdesign 2009

1.376 Aufrufe

Veröffentlicht am

Slides for a lecture about usability and webdesign at the Swiss Marketing Academy

Veröffentlicht in: Design, Technologie
0 Kommentare
5 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.376
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
Aktionen
Geteilt
0
Downloads
50
Kommentare
0
Gefällt mir
5
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Usability & Webdesign 2009

  1. 1. Usability & Webdesign Benjamin Wiederkehr Online Marketer SMA Lehrgang Zürich, 01.04.2009 1
  2. 2. Wer seid ihr? Online Sales, Sales Support, Marketing Stategist, Cross Media, Market Analytics… Online-Marketer! 01.04.09 Usability & Webdesign OM SMA | BW 2
  3. 3. Was tun wir? Überblick über die Arbeit an einer Online Präsenz 01.04.09 Usability & Webdesign OM SMA | BW 3
  4. 4. 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
  5. 5. 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
  6. 6. http://flickr.com/photos/walkn/2236986927/ Introduction Lection 01 Introduction 6
  7. 7. 01 Das Internet 01.04.09 Usability & Webdesign OM SMA | BW 7
  8. 8. 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
  9. 9. 1965 - 1980 1980 - 1993 1993 - heute Wissenschaft Privatwirtschaft Militär & persönlicher Militär Gebrauch Wissenschaft Militär Chapter 9
  10. 10. 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
  11. 11. Internet Das Internet 11
  12. 12. 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
  13. 13. 02 Die Produktion 01.04.09 Usability & Webdesign OM SMA | BW 13
  14. 14. 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
  15. 15. 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
  16. 16. http://flickr.com/photos/fortyseven/1537093876/ Experience Lection 02 Experience 16
  17. 17. 03 User Experience 01.04.09 Usability & Webdesign OM SMA | BW 17
  18. 18. 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
  19. 19. User Experience Benutzerbedürfnisse Technologische Geschäftsvorgaben Anforderungen 03 19
  20. 20. Bausteine Structure Informations Architektur Intuitiveness Informations Design Visual Aesthetics Visuelles Design Functionality Interaktions Design 03 20
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 24
  25. 25. 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
  26. 26. Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp Arbeitsresultate Die Produktion 26
  27. 27. 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
  28. 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 28
  29. 29. 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
  30. 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 30
  31. 31. 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
  32. 32. 03 Die Gestaltung 01.04.09 Usability & Webdesign OM SMA | BW 32
  33. 33. Faktor 1 Layout „Grid Systems in Graphic Design“ Josef Muller-Brockmann Die Gestaltung 33
  34. 34. „Organization makes a System “ of many appear fewer. —Law 2, „The laws of simplicity“, John Maeda, 2006 Die Gestaltung 34
  35. 35. Faktor 1 Layout Struktur Klarheit Gewichtung Die Gestaltung 35
  36. 36. Faktor 2 Farbe Farbschema CI / CD Grundstimmung Fokus unterschiedliche Farbprofile für Betriebsysteme, Farbdisplays & Browser Die Gestaltung 36
  37. 37. Faktor 2 Farbe „The Elements of Color“ Johannes Itten Die Gestaltung 37
  38. 38. Faktor 3 Typographie 4 sichere Webschriften Skalierbarkeit der Typografie Standardeinstellungen von Betriebsystem & Browser Die Gestaltung 38
  39. 39. Faktor 3 Typographie „The Elements of Typographic Style“ Robert Bringhurst Die Gestaltung 39
  40. 40. Faktor 4 Kontrast Helligkeit Grösse Farbe Position Typographie Die Gestaltung 40
  41. 41. Faktor 6 Flow Setze klare Ziele Gib sofortiges Feedback Maximiere die Effizienz Erlaube zu Entdecken Die Gestaltung 41
  42. 42. Exkurs Visueller Reichtum Attraktiviere um zu fokusieren Vermeide Klischees Sprich deine eigene Sprache Die Gestaltung 42
  43. 43. 05 Benutzer- freundlichkeit 01.04.09 Usability & Webdesign OM SMA | BW 43
  44. 44. Faktor 1 Einfachheit Benutzerfreundlichkeit 44
  45. 45. „Simple is better than complex“ Complex is better than complicated —Aphorismen 1&2, „The Zen of Python“, Tim Peters, 2004 Benutzerfreundlichkeit 45
  46. 46. 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
  47. 47. Faktor 2 Lesbarkeit Benutzerfreundlichkeit 47
  48. 48. „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
  49. 49. Text als Inhalt Text als User Interface Benutzerfreundlichkeit 49
  50. 50. 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
  51. 51. Faktor 3 Findbarkeit Konventionen sind unsere Freunde! Benutzerfreundlichkeit 51
  52. 52. Konventionen 1. Persistente Navigation (Hauptnavigation) 2. Lokale Navigation 3. Verlinktes Logo 4. Orientierung (Breadcrumbs, Page Titles) 5. Suchfunktion 6. Sitemap Benutzerfreundlichkeit 52
  53. 53. Faktor 4 Zugänglichkeit Endgerätunabhängigkeit Barrierefreiheit Benutzerfreundlichkeit 53
  54. 54. Endgerät- Unabhängigkeit 1. Skalierbare Schriftgrössen 2. Flexibles / Elastisches Layout 3. Korrekt ausgezeichnete Seitenhierarchie 4. Lesbarkeit für Maschienen & Menschen Benutzerfreundlichkeit 54
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. http://flickr.com/photos/64522443@N00/540205343/ Goodies Lection 03 Goodies 58
  59. 59. http://www.flickr.com Vergiss den „Fold“ Knowlege Sweety 1 59
  60. 60. 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
  61. 61. } Wichtigster Platz auf einer Webpage zwischen 0-800px 0-800px Hauptfokus bei 540px ~25% der Besucher beachten den Footer Knowlege Sweety 1 61
  62. 62. http://www.flickr.com/photos/f-r-a-n-k/469034312/ Limitiere die Auswahl Knowlege Sweety2 62
  63. 63. orange.co.uk & apple.com 63
  64. 64. http://flickr.com/photos/ouvyt/2781242712/sizes/o/ Schreibe für deine Leser Knowlege Sweety 3 64
  65. 65. kompetent oder selbstironisch 65
  66. 66. http://flickr.com/photos/alexa_soul/371288980/ Fokusiere auf Details Knowlege Sweety 4 66
  67. 67. Design & Konzept auf der Mikro-Ebene 67
  68. 68. 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
  69. 69. 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

×