SlideShare ist ein Scribd-Unternehmen logo
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
http://flickr.com/photos/walkn/2236986927/




                          Introduction



Lection 01 Introduction                                                    6
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
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



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
http://flickr.com/photos/fortyseven/1537093876/




    Experience




Lection 02 Experience                                               16
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
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
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
Konventionen
     1. Persistente Navigation (Hauptnavigation)
     2. Lokale Navigation
     3. Verlinktes Logo
     4. Orientierung (Breadcrumbs, Page Titles)
     5. Suchfunktion
     6. Sitemap


Benutzerfreundlichkeit                             52
Faktor 4
Zugänglichkeit
Endgerätunabhängigkeit
Barrierefreiheit




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



Benutzerfreundlichkeit                            54
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://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




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

Weitere ähnliche Inhalte

Ähnlich wie Usability & Webdesign 2009

Barcamp München 2008: Enterprise Microblogging mit Communote
Barcamp München 2008: Enterprise Microblogging mit CommunoteBarcamp München 2008: Enterprise Microblogging mit Communote
Barcamp München 2008: Enterprise Microblogging mit Communote
Communardo GmbH
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Jens Grochtdreis
 
20090212 Infogarden
20090212 Infogarden20090212 Infogarden
20090212 Infogarden
Dominik Faber
 
Web20 Lehrerkurs
Web20 LehrerkursWeb20 Lehrerkurs
Web20 Lehrerkurs
Andreas Mertens
 
Andreas Pleschek zu den Clients der Zukunft
Andreas Pleschek zu den Clients der ZukunftAndreas Pleschek zu den Clients der Zukunft
Andreas Pleschek zu den Clients der ZukunftIBM Lotus
 
BarCamp Karlsruhe 18.06.2011
BarCamp Karlsruhe 18.06.2011BarCamp Karlsruhe 18.06.2011
BarCamp Karlsruhe 18.06.2011
Eugene Terehov
 
Key-Note: Publishing im Auf- und Umbruch
Key-Note: Publishing im Auf- und UmbruchKey-Note: Publishing im Auf- und Umbruch
Key-Note: Publishing im Auf- und Umbruch
Digicomp Academy AG
 
Referenz Evonik Intranet 2007
Referenz Evonik Intranet 2007Referenz Evonik Intranet 2007
Referenz Evonik Intranet 2007HIRSCHTEC
 
Bedingungen digitaler Geschäftsmodelle für Fachmedien
Bedingungen digitaler Geschäftsmodelle für FachmedienBedingungen digitaler Geschäftsmodelle für Fachmedien
Bedingungen digitaler Geschäftsmodelle für Fachmedien
Karen Heidl
 
Intranet Forum Zurich Vortrag Jürgen Mirbach
Intranet Forum Zurich Vortrag Jürgen MirbachIntranet Forum Zurich Vortrag Jürgen Mirbach
Intranet Forum Zurich Vortrag Jürgen MirbachJürgen Mirbach
 
Internet und Web 2.0, eine Einführung für Kinder
Internet und Web 2.0, eine Einführung für KinderInternet und Web 2.0, eine Einführung für Kinder
Internet und Web 2.0, eine Einführung für Kinder
AndiH
 
Die Soziale Revolution
Die Soziale RevolutionDie Soziale Revolution
Die Soziale Revolution
social apps
 
Smart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web ContextSmart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web ContextJanGroenefeld
 
B3 Lotusday Mbg Mailarchivierung
B3 Lotusday Mbg MailarchivierungB3 Lotusday Mbg Mailarchivierung
B3 Lotusday Mbg Mailarchivierung
Andreas Schulte
 
Silverlight 2.0 Prozess Editor
Silverlight 2.0 Prozess EditorSilverlight 2.0 Prozess Editor
Silverlight 2.0 Prozess EditorMartin Hey
 
Web 2.0 odp
Web 2.0 odpWeb 2.0 odp
Web 2.0 odp
brhempen
 
Client Technologien - Ein Überblick für Usability Professionals
Client Technologien - Ein Überblick für Usability ProfessionalsClient Technologien - Ein Überblick für Usability Professionals
Client Technologien - Ein Überblick für Usability Professionals
Thomas Memmel
 
Das Internet ist dezentral. Und andere gefährliche Mythen
Das Internet ist dezentral. Und andere gefährliche MythenDas Internet ist dezentral. Und andere gefährliche Mythen
Das Internet ist dezentral. Und andere gefährliche Mythen
Sebastian Deterding
 
eTourismus
eTourismuseTourismus
eTourismus
Ed Wohlfahrt
 

Ähnlich wie Usability & Webdesign 2009 (20)

Barcamp München 2008: Enterprise Microblogging mit Communote
Barcamp München 2008: Enterprise Microblogging mit CommunoteBarcamp München 2008: Enterprise Microblogging mit Communote
Barcamp München 2008: Enterprise Microblogging mit Communote
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 
20090212 Infogarden
20090212 Infogarden20090212 Infogarden
20090212 Infogarden
 
Web20 Lehrerkurs
Web20 LehrerkursWeb20 Lehrerkurs
Web20 Lehrerkurs
 
Andreas Pleschek zu den Clients der Zukunft
Andreas Pleschek zu den Clients der ZukunftAndreas Pleschek zu den Clients der Zukunft
Andreas Pleschek zu den Clients der Zukunft
 
BarCamp Karlsruhe 18.06.2011
BarCamp Karlsruhe 18.06.2011BarCamp Karlsruhe 18.06.2011
BarCamp Karlsruhe 18.06.2011
 
Key-Note: Publishing im Auf- und Umbruch
Key-Note: Publishing im Auf- und UmbruchKey-Note: Publishing im Auf- und Umbruch
Key-Note: Publishing im Auf- und Umbruch
 
Referenz Evonik Intranet 2007
Referenz Evonik Intranet 2007Referenz Evonik Intranet 2007
Referenz Evonik Intranet 2007
 
Bedingungen digitaler Geschäftsmodelle für Fachmedien
Bedingungen digitaler Geschäftsmodelle für FachmedienBedingungen digitaler Geschäftsmodelle für Fachmedien
Bedingungen digitaler Geschäftsmodelle für Fachmedien
 
Intranet Forum Zurich Vortrag Jürgen Mirbach
Intranet Forum Zurich Vortrag Jürgen MirbachIntranet Forum Zurich Vortrag Jürgen Mirbach
Intranet Forum Zurich Vortrag Jürgen Mirbach
 
Internet und Web 2.0, eine Einführung für Kinder
Internet und Web 2.0, eine Einführung für KinderInternet und Web 2.0, eine Einführung für Kinder
Internet und Web 2.0, eine Einführung für Kinder
 
Die Soziale Revolution
Die Soziale RevolutionDie Soziale Revolution
Die Soziale Revolution
 
Web3.0 Internet Briefing
Web3.0 Internet BriefingWeb3.0 Internet Briefing
Web3.0 Internet Briefing
 
Smart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web ContextSmart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web Context
 
B3 Lotusday Mbg Mailarchivierung
B3 Lotusday Mbg MailarchivierungB3 Lotusday Mbg Mailarchivierung
B3 Lotusday Mbg Mailarchivierung
 
Silverlight 2.0 Prozess Editor
Silverlight 2.0 Prozess EditorSilverlight 2.0 Prozess Editor
Silverlight 2.0 Prozess Editor
 
Web 2.0 odp
Web 2.0 odpWeb 2.0 odp
Web 2.0 odp
 
Client Technologien - Ein Überblick für Usability Professionals
Client Technologien - Ein Überblick für Usability ProfessionalsClient Technologien - Ein Überblick für Usability Professionals
Client Technologien - Ein Überblick für Usability Professionals
 
Das Internet ist dezentral. Und andere gefährliche Mythen
Das Internet ist dezentral. Und andere gefährliche MythenDas Internet ist dezentral. Und andere gefährliche Mythen
Das Internet ist dezentral. Und andere gefährliche Mythen
 
eTourismus
eTourismuseTourismus
eTourismus
 

Mehr von Benjamin Wiederkehr

7 Principles for Engaging Users with Visualization
7 Principles for Engaging Users with Visualization7 Principles for Engaging Users with Visualization
7 Principles for Engaging Users with Visualization
Benjamin Wiederkehr
 
Intent & Impact: Thoughts on Persuasion in Visualization
Intent & Impact: Thoughts on Persuasion in VisualizationIntent & Impact: Thoughts on Persuasion in Visualization
Intent & Impact: Thoughts on Persuasion in Visualization
Benjamin Wiederkehr
 
Intent & Impact at Data In Sight
Intent & Impact at Data In SightIntent & Impact at Data In Sight
Intent & Impact at Data In Sight
Benjamin Wiederkehr
 
Candeo Documentation
Candeo DocumentationCandeo Documentation
Candeo Documentation
Benjamin Wiederkehr
 
Replay Documentation
Replay DocumentationReplay Documentation
Replay Documentation
Benjamin Wiederkehr
 
Internos Documentation
Internos DocumentationInternos Documentation
Internos Documentation
Benjamin Wiederkehr
 
Datenbank Systeme Documentation
Datenbank Systeme DocumentationDatenbank Systeme Documentation
Datenbank Systeme Documentation
Benjamin Wiederkehr
 
Softare Visualisierung Documentation
Softare Visualisierung DocumentationSoftare Visualisierung Documentation
Softare Visualisierung Documentation
Benjamin Wiederkehr
 
Data Visualization Präsentation
Data Visualization PräsentationData Visualization Präsentation
Data Visualization Präsentation
Benjamin Wiederkehr
 
Global Brain Präsentation
Global Brain PräsentationGlobal Brain Präsentation
Global Brain Präsentation
Benjamin Wiederkehr
 
Software Visualization 2 Documentation
Software Visualization 2 DocumentationSoftware Visualization 2 Documentation
Software Visualization 2 Documentation
Benjamin Wiederkehr
 

Mehr von Benjamin Wiederkehr (11)

7 Principles for Engaging Users with Visualization
7 Principles for Engaging Users with Visualization7 Principles for Engaging Users with Visualization
7 Principles for Engaging Users with Visualization
 
Intent & Impact: Thoughts on Persuasion in Visualization
Intent & Impact: Thoughts on Persuasion in VisualizationIntent & Impact: Thoughts on Persuasion in Visualization
Intent & Impact: Thoughts on Persuasion in Visualization
 
Intent & Impact at Data In Sight
Intent & Impact at Data In SightIntent & Impact at Data In Sight
Intent & Impact at Data In Sight
 
Candeo Documentation
Candeo DocumentationCandeo Documentation
Candeo Documentation
 
Replay Documentation
Replay DocumentationReplay Documentation
Replay Documentation
 
Internos Documentation
Internos DocumentationInternos Documentation
Internos Documentation
 
Datenbank Systeme Documentation
Datenbank Systeme DocumentationDatenbank Systeme Documentation
Datenbank Systeme Documentation
 
Softare Visualisierung Documentation
Softare Visualisierung DocumentationSoftare Visualisierung Documentation
Softare Visualisierung Documentation
 
Data Visualization Präsentation
Data Visualization PräsentationData Visualization Präsentation
Data Visualization Präsentation
 
Global Brain Präsentation
Global Brain PräsentationGlobal Brain Präsentation
Global Brain Präsentation
 
Software Visualization 2 Documentation
Software Visualization 2 DocumentationSoftware Visualization 2 Documentation
Software Visualization 2 Documentation
 

Usability & Webdesign 2009

  • 1. Usability & Webdesign Benjamin Wiederkehr Online Marketer SMA Lehrgang Zürich, 01.04.2009 1
  • 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. Was tun wir? Überblick über die Arbeit an einer Online Präsenz 01.04.09 Usability & Webdesign OM SMA | BW 3
  • 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. 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. http://flickr.com/photos/walkn/2236986927/ Introduction Lection 01 Introduction 6
  • 7. 01 Das Internet 01.04.09 Usability & Webdesign OM SMA | BW 7
  • 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. 1965 - 1980 1980 - 1993 1993 - heute Wissenschaft Privatwirtschaft Militär & persönlicher Militär Gebrauch Wissenschaft Militär Chapter 9
  • 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
  • 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. 02 Die Produktion 01.04.09 Usability & Webdesign OM SMA | BW 13
  • 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. 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. http://flickr.com/photos/fortyseven/1537093876/ Experience Lection 02 Experience 16
  • 17. 03 User Experience 01.04.09 Usability & Webdesign OM SMA | BW 17
  • 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. User Experience Benutzerbedürfnisse Technologische Geschäftsvorgaben Anforderungen 03 19
  • 20. Bausteine Structure Informations Architektur Intuitiveness Informations Design Visual Aesthetics Visuelles Design Functionality Interaktions Design 03 20
  • 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. 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. 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. 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. 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. Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp Arbeitsresultate Die Produktion 26
  • 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. 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. 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. 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. 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. 03 Die Gestaltung 01.04.09 Usability & Webdesign OM SMA | BW 32
  • 33. Faktor 1 Layout „Grid Systems in Graphic Design“ Josef Muller-Brockmann Die Gestaltung 33
  • 34. „Organization makes a System “ of many appear fewer. —Law 2, „The laws of simplicity“, John Maeda, 2006 Die Gestaltung 34
  • 36. Faktor 2 Farbe Farbschema CI / CD Grundstimmung Fokus unterschiedliche Farbprofile für Betriebsysteme, Farbdisplays & Browser Die Gestaltung 36
  • 37. Faktor 2 Farbe „The Elements of Color“ Johannes Itten Die Gestaltung 37
  • 38. Faktor 3 Typographie 4 sichere Webschriften Skalierbarkeit der Typografie Standardeinstellungen von Betriebsystem & Browser Die Gestaltung 38
  • 39. Faktor 3 Typographie „The Elements of Typographic Style“ Robert Bringhurst Die Gestaltung 39
  • 41. Faktor 6 Flow Setze klare Ziele Gib sofortiges Feedback Maximiere die Effizienz Erlaube zu Entdecken Die Gestaltung 41
  • 42. Exkurs Visueller Reichtum Attraktiviere um zu fokusieren Vermeide Klischees Sprich deine eigene Sprache Die Gestaltung 42
  • 43. 05 Benutzer- freundlichkeit 01.04.09 Usability & Webdesign OM SMA | BW 43
  • 45. „Simple is better than complex“ Complex is better than complicated —Aphorismen 1&2, „The Zen of Python“, Tim Peters, 2004 Benutzerfreundlichkeit 45
  • 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
  • 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. Text als Inhalt Text als User Interface Benutzerfreundlichkeit 49
  • 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. Faktor 3 Findbarkeit Konventionen sind unsere Freunde! Benutzerfreundlichkeit 51
  • 52. Konventionen 1. Persistente Navigation (Hauptnavigation) 2. Lokale Navigation 3. Verlinktes Logo 4. Orientierung (Breadcrumbs, Page Titles) 5. Suchfunktion 6. Sitemap Benutzerfreundlichkeit 52
  • 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. 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. 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. 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. http://flickr.com/photos/64522443@N00/540205343/ Goodies Lection 03 Goodies 58
  • 59. http://www.flickr.com Vergiss den „Fold“ Knowlege Sweety 1 59
  • 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. } Wichtigster Platz auf einer Webpage zwischen 0-800px 0-800px Hauptfokus bei 540px ~25% der Besucher beachten den Footer Knowlege Sweety 1 61
  • 67. Design & Konzept auf der Mikro-Ebene 67
  • 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. 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