Usability & Webdesign 2010

19.056 Aufrufe

Veröffentlicht am

A lecture about Usability and Webdesign given at the Swiss Marketing Academy as part of the Online Marketer course.

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
19.056
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
13.220
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
12
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie


  • nach jobs fragen
  • was ist eine online präsenz?
    kann sein: website / community profile / promo kampagne / online game






  • fragen bitte einfach dazwischen stellen und bei unklarheiten nachfragen
    gerne mit beispielen aus eurem umfeld überprüfen
  • fragen bitte einfach dazwischen stellen und bei unklarheiten nachfragen
    gerne mit beispielen aus eurem umfeld überprüfen
  • fragen bitte einfach dazwischen stellen und bei unklarheiten nachfragen
    gerne mit beispielen aus eurem umfeld überprüfen



  • 1993 tim berners lee am cern in genf
  • 1993 tim berners lee am cern in genf
  • 1993 tim berners lee am cern in genf
  • 1993 tim berners lee am cern in genf
  • ab 2000 mainstream privater gebrauch
  • ab 2000 mainstream privater gebrauch
  • ab 2000 mainstream privater gebrauch
  • ab 2000 mainstream privater gebrauch
  • 1993 tim berners lee am cern in genf
  • 1993 tim berners lee am cern in genf
  • 1993 tim berners lee am cern in genf
  • 1993 tim berners lee am cern in genf
  • 1993 tim berners lee am cern in genf
  • informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes
    – paradigmawechsel
  • informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes
    – paradigmawechsel
  • informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes
    – paradigmawechsel
  • informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes
    – paradigmawechsel
  • informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes
    – paradigmawechsel
  • informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes
    – paradigmawechsel
  • informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes
    – paradigmawechsel





  • informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes
    – paradigmawechsel


  • informationen sind nicht länger an ein dokument gebunden / öffnung des inhaltes
    – paradigmawechsel



















  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • datenspeicher
    zusammensetzen eines dokumentes
    styling
    verhalten
  • wir produzieren keine texte, keine bilder, keine sounds. alles wird in einen kontext gestellt

  • frage in die runde stellen


































  • frage in die runde stellen
  • 6 fragen, die ich mir stelle bevor ich eine website mache!
  • 6 fragen, die ich mir stelle bevor ich eine website mache!
  • 6 fragen, die ich mir stelle bevor ich eine website mache!
  • 6 fragen, die ich mir stelle bevor ich eine website mache!
  • 6 fragen, die ich mir stelle bevor ich eine website mache!
  • 6 fragen, die ich mir stelle bevor ich eine website mache!
  • 6 fragen, die ich mir stelle bevor ich eine website mache!
  • 6 fragen, die ich mir stelle bevor ich eine website mache!
  • woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • woher kommt usability – bekannte patterns, user tests, spezifische anforderungen
  • woher kommt usability – bekannte patterns, user tests, spezifische anforderungen





















  • design
    programmierung
    budget
    klarheit!
  • design
    programmierung
    budget
    klarheit!
  • design
    programmierung
    budget
    klarheit!
  • design
    programmierung
    budget
    klarheit!
  • design
    programmierung
    budget
    klarheit!
  • design
    programmierung
    budget
    klarheit!
  • design
    programmierung
    budget
    klarheit!
  • design
    programmierung
    budget
    klarheit!
  • design
    programmierung
    budget
    klarheit!
  • design
    programmierung
    budget
    klarheit!
  • design
    programmierung
    budget
    klarheit!
  • design
    programmierung
    budget
    klarheit!
  • zeit, programmierung, inhalt, design, testing = budget
    klarheit für den user!
  • zeit, programmierung, inhalt, design, testing = budget
    klarheit für den user!
  • zeit, programmierung, inhalt, design, testing = budget
    klarheit für den user!
  • zeit, programmierung, inhalt, design, testing = budget
    klarheit für den user!
  • zeit, programmierung, inhalt, design, testing = budget
    klarheit für den user!
  • zeit, programmierung, inhalt, design, testing = budget
    klarheit für den user!
  • zeit, programmierung, inhalt, design, testing = budget
    klarheit für den user!
  • zeit, programmierung, inhalt, design, testing = budget
    klarheit für den user!










  • verweis auf farbenlehre
    farbe in der psychologie
  • verweis auf farbenlehre
    farbe in der psychologie
  • kandinski
  • kandinski
  • verweis auf farbenlehre
    farbe in der psychologie
  • verweis auf farbenlehre
    farbe in der psychologie
  • verweis auf farbenlehre
    farbe in der psychologie
  • verweis auf farbenlehre
    farbe in der psychologie
  • verweis auf farbenlehre
    farbe in der psychologie
  • kandinski
  • verweis auf farbenlehre
    farbe in der psychologie
  • umsetzungskonzept eines corporate design auf screens
    flexibilität der darstellung

  • umsetzungskonzept eines corporate design auf screens
    flexibilität der darstellung
  • umsetzungskonzept eines corporate design auf screens
    flexibilität der darstellung
  • umsetzungskonzept eines corporate design auf screens
    flexibilität der darstellung
  • umsetzungskonzept eines corporate design auf screens
    flexibilität der darstellung
  • umsetzungskonzept eines corporate design auf screens
    flexibilität der darstellung
  • umsetzungskonzept eines corporate design auf screens
    flexibilität der darstellung
  • umsetzungskonzept eines corporate design auf screens
    flexibilität der darstellung

  • elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über
  • elemente mit hohem kontrast unterscheiden sich, elemente mit kleinem kontrast gehen ineinander über



  • 1. call for action / ziel der website
    2. feedback an user
    3. hilf dem user
    4. verleiten / browsen
  • 1. call for action / ziel der website
    2. feedback an user
    3. hilf dem user
    4. verleiten / browsen
  • 1. call for action / ziel der website
    2. feedback an user
    3. hilf dem user
    4. verleiten / browsen
  • 1. call for action / ziel der website
    2. feedback an user
    3. hilf dem user
    4. verleiten / browsen
  • 1. call for action / ziel der website
    2. feedback an user
    3. hilf dem user
    4. verleiten / browsen
  • 1. call for action / ziel der website
    2. feedback an user
    3. hilf dem user
    4. verleiten / browsen

















































  • 1. lesbar für auch wenn die Bilder nicht dargestellt werden
    2. erlaubt Tastaturnavigation
    3. Kein unnötiges Vorlesen durch einen Screenreader
    4. Unfähigkeit zur Bedienung einer Maus
    5. Javascript wird von Geräten oft suboptimal unterstützt







































  • Usability & Webdesign 2010

    1. 1. Usability & Webdesign Benjamin Wiederkehr Online Marketer SMA Lehrgang Zürich, 03.03.2010 1
    2. 2. Wer bin ich? Benjamin Wiederkehr Bachelor of Arts in Interaction Design User Experience Lead Interactive Things http://interactivethings.com 03.03.10 Usability & Webdesign OM SMA | BW 2
    3. 3. Wer seid ihr? Online Sales, Sales Support, Marketing Stategist, Cross Media, Social Media… 03.03.10 Usability & Webdesign OM SMA | BW 3
    4. 4. Was tun wir? Blick hinter die Kulissen einer Online Präsenz und Einblick in die Gestaltung und Umsetzung 03.03.10 Usability & Webdesign OM SMA | BW 4
    5. 5. Ziel des Abends 03.03.10 Usability & Webdesign OM SMA | BW 5
    6. 6. Ziel des Abends Verständnis 03.03.10 Usability & Webdesign OM SMA | BW 5
    7. 7. Ziel des Abends Verständnis Was machen wir? 03.03.10 Usability & Webdesign OM SMA | BW 5
    8. 8. Ziel des Abends Verständnis Was machen wir? Wie machen wir es? 03.03.10 Usability & Webdesign OM SMA | BW 5
    9. 9. Ziel des Abends Verständnis Was machen wir? Wie machen wir es? 03.03.10 Usability & Webdesign OM SMA | BW 5
    10. 10. Ziel des Abends Verständnis Was machen wir? Wie machen wir es? Sensibilisierung 03.03.10 Usability & Webdesign OM SMA | BW 5
    11. 11. Ziel des Abends Verständnis Was machen wir? Wie machen wir es? Sensibilisierung Wieso machen wir es auf diese Weise? 03.03.10 Usability & Webdesign OM SMA | BW 5
    12. 12. Ablauf 03.03.10 Usability & Webdesign OM SMA | BW 6
    13. 13. Ablauf Einführung Das Internet • Entstehung • Status Quo • Ausblick Die Technologie • Medien • Werkzeuge Die Dualität • Voraussetzung • Erklärung 03.03.10 Usability & Webdesign OM SMA | BW 6
    14. 14. Ablauf Einführung Erlebnis Das Internet User Entstehung Experience • • Status Quo • Ausblick • Bausteine • Arbeitsteilung Die Arbeitsprozess • • Arbeitsresultate Kommunikation Technologie • Medien Design • • Werkzeuge • Layout Farbe Die Dualität • • Typografie • Voraussetzung • Kontrast • Erklärung • Emotion • Flow • Visueller Reichtum Usability • Einfachheit • Lesbarkeit • Findbarkeit • Zugänglichkeit 03.03.10 Usability & Webdesign OM SMA | BW 6
    15. 15. Ablauf Einführung Erlebnis Kostprobe Das Internet User Beispiel Entstehung Ausgangslage Experience • • • Status Quo • Refinement • Ausblick • Bausteine • SHE • Arbeitsteilung Die Arbeitsprozess Take • • Arbeitsresultate Kommunikation Technologie Aways • Medien Design Der Fold • • • Werkzeuge • Die Auswahl • Layout • Die Sprache Farbe Das Detail Die Dualität • • • Typografie Kontrast Voraussetzung Q&A • • • Erklärung • Emotion • Flow Fragen, Beispiele, • Visueller Reichtum Falldiskussion Usability • Einfachheit • Lesbarkeit • Findbarkeit • Zugänglichkeit 03.03.10 Usability & Webdesign OM SMA | BW 6
    16. 16. http://flickr.com/photos/walkn/2236986927/ Einführung Einheit 01 Einführung 7
    17. 17. 01 Das Internet 03.03.10 Usability & Webdesign OM SMA | BW 8
    18. 18. Wo kommt es her?
    19. 19. Entstehung Das Internet 10
    20. 20. 1965 Entstehung Randcorporation beginnt mit Forschung bezüglich Sicherung von Computersystemen gegen Ausfälle. Wichtig bei Abwehr von atomaren Angriffen. 1969 ARPAnet wird gegründet, der Vorläufer des Internets. Leitgedanke auch hier die Angst vor dem Supergau mit Computersysteme. Überlegung: Dezentrales Computersystem kann schwerer zerstört werden als zentrales. 1977 Erstmalige Anwendung des TCP/IP- Protokolls. (Transmission Control Protocol/ Internet Protocol). 1980 Aufbau von erstem Internet. ARPAnet fungiert als Backbone, als Sammelpunkt aller Hauptknotenpunkte. 1983 Das Internet 10
    21. 21. 1965 Entstehung 1989 Randcorporation beginnt mit Schweizerisches Forschungsnetz Forschung SWITCH bezüglich Sicherung von wird ans Internet angeschlossen. Computersystemen gegen Ausfälle. Wichtig 1991 bei Abwehr von atomaren Angriffen. Das WWW wird als Hypertext-System zur allgemeinen Benutzung 1969 freigegeben ARPAnet wird gegründet, der Vorläufer des 1994-1999 Internets. Leitgedanke auch hier die Das Internet boomt, wächst über die Angst Grenzen der Universitäten hinaus und vor dem Supergau mit hat zeitweise bis 15% Zuwachsrate/ Computersysteme. Monat. Überlegung: Dezentrales Computersystem 2000 kann schwerer zerstört werden als Dotcom Bubble platzt. Viele DOTCOMs zentrales. in die grosse Hoffnung an der Börse gesetzt wurde schliessen ihre Tore. 1977 Erste Reformierung des Internets Erstmalige Anwendung des TCP/IP- beginnt. Protokolls. (Transmission Control Protocol/ 2001 Internet Protocol). Die Zweite Runde beginnt. Das Internet sucht seine neue Definition. Die 1980 Internetbranche hat sich gelichtet. Die Aufbau von erstem Internet. ARPAnet Prophezeihung, dass nach einem Crash fungiert als Backbone, als nur Sammelpunkt die Grossen überleben werden hat sich aller Hauptknotenpunkte. nicht bewahrheitet. Viele kleine Spezialisten haben sich durch ihre 1983 Flexibilität besser gehalten als manch ein grosser Betrieb. Das Internet 10
    22. 22. 1965 Entstehung 1989 2002 - 2005 Randcorporation beginnt mit Schweizerisches Forschungsnetz Online Communities beginnen wieder Forschung SWITCH aufzupoppen ( bsp. MySpace & bezüglich Sicherung von wird ans Internet angeschlossen. Facebook). Man organsiert sich Computersystemen gegen Ausfälle. vermehrt Wichtig 1991 online. Foto Communities starten bei Abwehr von atomaren Angriffen. Das WWW wird als Hypertext-System (Flickr) und die Anzahl Blogs beginnt an zur allgemeinen Benutzung Relevanz zu gewinnen. 1969 freigegeben ARPAnet wird gegründet, der Vorläufer 2006 des 1994-1999 Web 2.0 beginnt ein Begriff zu werden. Internets. Leitgedanke auch hier die Das Internet boomt, wächst über die Obwohl bereits 2003 als Begriff Angst Grenzen der Universitäten hinaus und eingeführt wird er zum Buzzword. Web vor dem Supergau mit hat zeitweise bis 15% Zuwachsrate/ 2.0 wird zur Bezeichnung des Internet Computersysteme. Monat. als Plattform und der damit Überlegung: Dezentrales einhergehenden Veränderung von Computersystem 2000 geschäftsmodellen verwendet. kann schwerer zerstört werden als Dotcom Bubble platzt. Viele DOTCOMs zentrales. in die grosse Hoffnung an der Börse Neben Social Networking wird Social gesetzt wurde schliessen ihre Tore. Media (YouTube) wichtiger und 1977 Erste Reformierung des Internets verändert das Verhältnins von Erstmalige Anwendung des TCP/IP- beginnt. Inhaltsproduzenten und -konsumenten Protokolls. (Transmission Control grundlegend. Protocol/ 2001 Internet Protocol). Die Zweite Runde beginnt. Das Internet 2007 - 2008 sucht seine neue Definition. Die Die Social Networking / Media 1980 Internetbranche hat sich gelichtet. Die Plattformen Aufbau von erstem Internet. ARPAnet Prophezeihung, dass nach einem Crash boomen. WebApplikationen ersetzen fungiert als Backbone, als nur Desktop Software. Die alte Sammelpunkt die Grossen überleben werden hat sich Goldgräberstimmung ist wieder da. aller Hauptknotenpunkte. nicht bewahrheitet. Viele kleine Spezialisten haben sich durch ihre 2009 1983 Flexibilität besser gehalten als manch WebTV, WebNews, Lifestreaming, Real- ein grosser Betrieb. Das Internet 10
    23. 23. Chapter 11
    24. 24. 1965 - 1980 1980 - 1993 1993 - heute Chapter 11
    25. 25. 1965 - 1980 1980 - 1993 1993 - heute Militär Chapter 11
    26. 26. 1965 - 1980 1980 - 1993 1993 - heute Militär Wissenschaft Militär Chapter 11
    27. 27. 1965 - 1980 1980 - 1993 1993 - heute Militär Wissenschaft Privatwirtschaf Militär t& persönlicher Gebrauch Wissenschaft Militär Chapter 11
    28. 28. Status Quo Das Internet 12
    29. 29. Status Quo Das Internet 12
    30. 30. Status Quo Vor 2000 Das Internet 12
    31. 31. Status Quo Vor 2000 Amazon eBay CraigsList Yahoo Google Das Internet 12
    32. 32. Status Quo Vor 2000 Nach 2000 Amazon eBay CraigsList Yahoo Google Das Internet 12
    33. 33. Status Quo Vor 2000 Nach 2000 Amazon Wikipedia eBay MySpace CraigsList Facebook Yahoo YouTube Google Twitter Das Internet 12
    34. 34. Ausblick Das Internet 13
    35. 35. Ausblick 1. Welle 2. Welle 3. Welle Das Internet 13
    36. 36. Ausblick 1. Welle 2. Welle 3. Welle Verknüpfte Computer ARPAnet Das Internet 13
    37. 37. Ausblick 1. Welle 2. Welle 3. Welle Verknüpfte Verknüpfte Computer Dokumente ARPAnet WorldWideWeb Das Internet 13
    38. 38. Ausblick 1. Welle 2. Welle 3. Welle Verknüpfte Verknüpfte Verknüpfte Computer Dokumente Daten ARPAnet WorldWideWeb Internet of Things Semantic Web Augmented Reality Das Internet 13
    39. 39. Ausblick we e arre! he 1. Welle 2. Welle 3. Welle Verknüpfte Verknüpfte Verknüpfte Computer Dokumente Daten ARPAnet WorldWideWeb Internet of Things Semantic Web Augmented Reality Das Internet 13
    40. 40. we e arre! he Ausblick 1. Welle 2. Welle 3. Welle Verknüpfte Verknüpfte Verknüpfte Computer Dokumente Daten ARPAnet WorldWideWeb Internet of Things Semantic Web Augmented Reality Das Internet 14
    41. 41. Internet Das Internet 15
    42. 42. Internet Das Internet 15
    43. 43. Internet Das Internet 15
    44. 44. Internet Das Internet 15
    45. 45. Internet Das Internet 15
    46. 46. Internet Das Internet 15
    47. 47. Ausblick we e arre! he 1. Welle 2. Welle 3. Welle Verknüpfte Verknüpfte Verknüpfte Computer Dokumente Daten ARPAnet WorldWideWeb Internet of Things Semantic Web Augmented Reality Das Internet 16
    48. 48. Das Internet 17
    49. 49. Das Internet 18
    50. 50. Ausblick we e arre! he 1. Welle 2. Welle 3. Welle Verknüpfte Verknüpfte Verknüpfte Computer Dokumente Daten ARPAnet WorldWideWeb Internet of Things Semantic Web Augmented Reality Das Internet 19
    51. 51. Realität Das Internet 20
    52. 52. Realität Meta Information Das Internet 20
    53. 53. http://www.youtube.com/watch?v=b64_16K2e08 Layar Real World Browser Das Internet 21
    54. 54. Ausblick we e arre! he 1. Welle 2. Welle 3. Welle Verknüpfte Verknüpfte Verknüpfte Computer Dokumente Daten ARPAnet WorldWideWeb Internet of Things Semantic Web Augmented Reality Das Internet 22
    55. 55. Ausblick we e arre! he 1. Welle 2. Welle 3. Welle Verknüpfte Verknüpfte Verknüpfte Computer Dokumente Daten ARPAnet WorldWideWeb Internet of Things Semantic Web Augmented Reality Allgegenwärtiger, Intelligenter, Personalisierter Das Internet 22
    56. 56. 02 Die Technologie 03.03.10 Usability & Webdesign OM SMA | BW 23
    57. 57. Medien Die Produktion 24
    58. 58. Medien Die Produktion 24
    59. 59. Medien Text pdf, doc, rtf… (Plugin, Download) Die Produktion 24
    60. 60. Medien Text pdf, doc, rtf… (Plugin, Download) Audio mp3, wav, wmv… (Streams, Podcast, Download) Die Produktion 24
    61. 61. Medien Text pdf, doc, rtf… (Plugin, Download) Audio mp3, wav, wmv… (Streams, Podcast, Download) Animation Flash, Silverlight, ActiveX Die Produktion 24
    62. 62. Medien Text pdf, doc, rtf… (Plugin, Download) Audio mp3, wav, wmv… (Streams, Podcast, Download) Animation Flash, Silverlight, ActiveX Video mpeg, mov, avi, flv… (Streams, Videocast) Die Produktion 24
    63. 63. Werkzeuge Die Produktion 25
    64. 64. Werkzeuge Serverside Languages ASP / .NET, PHP, Python, SQL, Ruby… Die Produktion 25
    65. 65. Werkzeuge Serverside Languages ASP / .NET, PHP, Python, SQL, Ruby… Die Produktion 25
    66. 66. Werkzeuge Serverside Languages ASP / .NET, PHP, Python, SQL, Ruby… Die Produktion 25
    67. 67. Werkzeuge Serverside Languages ASP / .NET, PHP, Python, SQL, Ruby… Markup Languages XML, HTML, Textile, Markdown… Die Produktion 25
    68. 68. Werkzeuge Serverside Languages ASP / .NET, PHP, Python, SQL, Ruby… Markup Languages XML, HTML, Textile, Markdown… Stylesheets CSS (Cascading Stylesheets) Die Produktion 25
    69. 69. Werkzeuge Serverside Languages ASP / .NET, PHP, Python, SQL, Ruby… Markup Languages XML, HTML, Textile, Markdown… Stylesheets CSS (Cascading Stylesheets) Scripting Languages Javascript, Processing… Die Produktion 25
    70. 70. Werkzeuge Serverside Languages ASP / .NET, PHP, Python, SQL, Ruby… Markup Languages XML, HTML, Textile, Markdown… Stylesheets CSS (Cascading Stylesheets) Scripting Languages Javascript, Processing… Die Produktion 25
    71. 71. Serverside Language Holt die angefragten Daten aus der Datenbank Die Produktion 26
    72. 72. Serverside Language Holt die angefragten Daten aus der Datenbank Liste Markup Language Bring die Daten in die gewünschte semantische 2 Die Produktion 26
    73. 73. Serverside Language Holt die angefragten Daten aus der Datenbank Liste Markup Language Bring die Daten in die gewünschte semantische 2 Stylesheets Geben den Daten das gewünschte Aussehen Die Produktion 26
    74. 74. Serverside Language Holt die angefragten Daten aus der Datenbank Liste Markup Language Bring die Daten in die gewünschte semantische 2 Stylesheets Geben den Daten das gewünschte Aussehen Scripting Language Geben den Daten die gewünschte Funktionalität Die Produktion 26
    75. 75. http://flickr.com/photos/fortyseven/1537093876/ Erlebnis Einheit 02 Erlebnis 27
    76. 76. 03 User Experience 03.03.10 Usability & Webdesign OM SMA | BW 28
    77. 77. Was bedeutet User Experience?
    78. 78. User Experience 03 30
    79. 79. User Experience User Experience (abbreviated: UX) is the quality of experience a person has when interacting with a specific design. This can range from a specific artifact, such as a cup, toy or website, up to larger, integrated experiences such as a museum or an airport. http://uxnet.org/ 03 30
    80. 80. User Experience Benutzerbedürfnisse 03 30
    81. 81. User Experience Benutzerbedürfnisse Geschäftsvorgab en 03 30
    82. 82. User Experience Benutzerbedürfnisse Technologische Geschäftsvorgab Anforderungen en 03 30
    83. 83. Bausteine 03 31
    84. 84. Bausteine 03 31
    85. 85. Bausteine Struktur Informations Architektur Taxonomie 03 31
    86. 86. Bausteine Struktur Informations Architektur Taxonomie Intuitivität Informations Design User Interface Design 03 31
    87. 87. Bausteine Struktur Informations Architektur Taxonomie Intuitivität Informations Design User Interface Design 2 Visuelles Design Grafik / Web Design, Photografie Illustration 03 31
    88. 88. Bausteine Struktur Informations Architektur Taxonomie Intuitivität Informations Design User Interface Design 2 Visuelles Design Grafik / Web Design, Photografie Illustration Funktionalität Interaktions Design 03 31
    89. 89. Arbeitsteilung Die Produktion 32
    90. 90. Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Die Produktion 32
    91. 91. Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Die Produktion 32
    92. 92. Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Die Produktion 32
    93. 93. Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Die Produktion 32
    94. 94. Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Interaction Designer Die Produktion 32
    95. 95. Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Interaction Designer Usability Specialist Die Produktion 32
    96. 96. Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Interaction Designer Usability Specialist Web Developer Die Produktion 32
    97. 97. Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Interaction Designer Usability Specialist Web Developer Impuls Experten Die Produktion 32
    98. 98. Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Interaction Designer Usability Specialist Web Developer Impuls Experten Content Specialist Die Produktion 32
    99. 99. Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Interaction Designer Usability Specialist Web Developer Impuls Experten Content Specialist Identity Designer Die Produktion 32
    100. 100. Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Interaction Designer Usability Specialist Web Developer Impuls Experten Content Specialist Identity Designer Taxonomist Die Produktion 32
    101. 101. Arbeitsteilung http://flickr.com/photos/jonnagl/2789728566 http://flickr.com/photos/jonnagl/2789728566 Kern Team Information Architect Information Designer Web Designer Interaction Designer Usability Specialist Web Developer Impuls Experten Content Specialist Identity Designer Taxonomist Interactive Marketer Die Produktion 32
    102. 102. Wieso eine online Präsenz?
    103. 103. Die Produktion 34
    104. 104. 1. Wie unterstützt eine Website zu erstellen meine Absichten? Die Produktion 34
    105. 105. 1. Wie unterstützt eine Website zu erstellen meine Absichten? 2. Was sind die drei wichtigsten Ziele mit der Website? Die Produktion 34
    106. 106. 1. Wie unterstützt eine Website zu erstellen meine Absichten? 2. Was sind die drei wichtigsten Ziele mit der Website? 3. Wer ist das Zielpublikum der Website? Die Produktion 34
    107. 107. 1. Wie unterstützt eine Website zu erstellen meine Absichten? 2. Was sind die drei wichtigsten Ziele mit der Website? 3. Wer ist das Zielpublikum der Website? 4. Was soll der Benutzer tun nach Besichtigung der Website? Die Produktion 34
    108. 108. 1. Wie unterstützt eine Website zu erstellen meine Absichten? 2. Was sind die drei wichtigsten Ziele mit der Website? 3. Wer ist das Zielpublikum der Website? 4. Was soll der Benutzer tun nach Besichtigung der Website? 5. Wie wird der Erfolg der Website gemessen? Die Produktion 34
    109. 109. 1. Wie unterstützt eine Website zu erstellen meine Absichten? 2. Was sind die drei wichtigsten Ziele mit der Website? 3. Wer ist das Zielpublikum der Website? 4. Was soll der Benutzer tun nach Besichtigung der Website? 5. Wie wird der Erfolg der Website gemessen? 6. Wie wird die erstellte Website angemessen gepflegt? Die Produktion 34
    110. 110. Fortlaufender Prozess 1. Wie unterstützt eine Website zu erstellen meine Absichten? 2. Was sind die drei wichtigsten Ziele mit der Website? 3. Wer ist das Zielpublikum der Website? 4. Was soll der Benutzer tun nach Besichtigung der Website? 5. Wie wird der Erfolg der Website gemessen? 6. Wie wird die erstellte Website angemessen gepflegt? Die Produktion 34
    111. 111. Arbeitsprozess Die Produktion 35
    112. 112. Arbeitsprozess Konzept Spezifikation RealisierungImplementierung Kommunikation Die Produktion 35
    113. 113. Arbeitsprozess Konzept Spezifikation RealisierungImplementierung Kommunikation • Inhaltsgewichtun g • Informations- architektur • Kommunikations -konzept • Designkonzept • Technologisches Konzept • Benutzeridentifi- kation (Personas) • Konkurenzanalys e • Requirement Die Produktion 35
    114. 114. Arbeitsprozess Konzept Spezifikation RealisierungImplementierung Kommunikation • Inhaltsgewichtun • Inhaltsumfang g • CI / CD Adaption • Informations- • Design Standards architektur • Funktionsumfang • Kommunikations • Technologiewahl -konzept • Datenbankstrukt • Designkonzept ur • Technologisches • SEO Strategie Konzept • Externe • Benutzeridentifi- Applikationen kation (Personas) • Technologie • Konkurenzanalys Spezifikation e • Requirement Die Produktion 35
    115. 115. Arbeitsprozess Konzept Spezifikation RealisierungImplementierung Kommunikation • Inhaltsgewichtun • Inhaltsumfang • Inhaltsaufbereitu g • CI / CD Adaption ng • Informations- • Design Standards • Inhaltsabfüllung architektur • Funktionsumfang • Detaildesign • Kommunikations • Technologiewahl • Server Setup -konzept • Datenbankstrukt • Programmierung • Designkonzept ur Backend • Technologisches • SEO Strategie • Umsetzung Konzept • Externe Frontend • Benutzeridentifi- Applikationen • SEO Optimierung kation (Personas) • Technologie • Usability Tests • Konkurenzanalys Spezifikation e • Requirement Die Produktion 35
    116. 116. Arbeitsprozess Konzept Spezifikation RealisierungImplementierung Kommunikation • Inhaltsgewichtun • Inhaltsumfang • Inhaltsaufbereitu • Inhaltskontrollen g • CI / CD Adaption ng • Crossbrowser • Informations- • Design Standards • Inhaltsabfüllung Test architektur • Funktionsumfang • Detaildesign • System • Kommunikations • Technologiewahl • Server Setup Debugging -konzept • Datenbankstrukt • Programmierung • Performance • Designkonzept ur Backend Optimerung • Technologisches • SEO Strategie • Umsetzung • Usability Tests Konzept • Externe Frontend • Benutzeridentifi- Applikationen • SEO Optimierung kation (Personas) • Technologie • Usability Tests • Konkurenzanalys Spezifikation e • Requirement Die Produktion 35
    117. 117. Arbeitsprozess Konzept Spezifikation RealisierungImplementierung Kommunikation • Inhaltsgewichtun • Inhaltsumfang • Inhaltsaufbereitu • Inhaltskontrollen • Launch g • CI / CD Adaption ng • Crossbrowser • Newsletter • Informations- • Design Standards • Inhaltsabfüllung Test • Medien architektur • Funktionsumfang • Detaildesign • System Mitteilung • Kommunikations • Technologiewahl • Server Setup Debugging • interne -konzept • Datenbankstrukt • Programmierung • Performance Mitteilung • Designkonzept ur Backend Optimerung • Flyer • Technologisches • SEO Strategie • Umsetzung • Usability Tests • Inserate Konzept • Externe Frontend • Social • Benutzeridentifi- Applikationen • SEO Optimierung Networking kation (Personas) • Technologie • Usability Tests • Social Media • Konkurenzanalys Spezifikation • etc. e • User Acceptance • Requirement Test Die Produktion 35
    118. 118. Arbeitsresultate Die Produktion 36
    119. 119. Arbeitsresultate Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp Die Produktion 36
    120. 120. Arbeitsresultate Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp Die Produktion 36
    121. 121. Arbeitsresultate Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp captUS Site Information Architecture 0 1/27/04 captUS Home National Top Global Navigation Left Hand Navigation 1 2 3 4 5 6 7 Continue to: 9 10 11 12 About the Calendar - Search (not Privacy & Welcome to CAPT Publications CSAP Live (not CAPT Staff Regions Contact Links Latest News Monthly View working) Disclaimer captUS Program and Resources working) Login 4.2 4.3 4.4 9.1 9.2 9.3 9.4 2.1 4.1 Weekly View Search Admin Login Funding Resources Facts Links CAPT Specific Event Details Information 4.3.1 9.1.1 9.2.1 9.3.1 9.4.1 Search Results JTO Articles JTO Articles JTO Articles JTO Articles 8 Page ID, and page title About the CAPT Program Multiple Similar Pages 8.1 8.2 8.3 8.4 8.5 8.6 8.7 Core Research Target Progress Purpose Process Prevention Key Terms Application Audience Reports Services Conditional Area Content that can be replaced by the new National CAPT Content that will require additional attention. Databases, Mailing lists, etc. Page: 1 Die Produktion 36
    122. 122. Arbeitsresultate Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp Page I.D. 0 Page Title Home Date Version Adolescent and Child Targets (ACT) Page Details Search Logo for Health Foundation. Inc. about health goals projects resources contact us Too many Americans suffer the daily effects of diabetes, asthma and obesity. Perhaps the greatest tragedy is the increasing toll all three of these afflictions are taking on our children. Tommy Thompson, Secretary of Health and Human Services Achieving the vision of “Healthy People in Healthy Communities” represents an opportunity for individuals to make healthy lifestyle choices for themselves and their families. Donna E. Shalala Former Secretary of Health and Human ACT for Health serves those in local communities responsible for improving Services child and adolescent health and well-being by providing essential information and facilitating cooperative action. More Information A National & International Model Proven, National Effective Goals Strategies Local Communities ACT for Health, Adolescent and Child Targets for Health Foundation, Inc., is an educational and charitable non-profit, non-governmental agency, tax exempt under Section 501(c)3 of the Internal Revenue Code. Die Produktion 36
    123. 123. Arbeitsresultate Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp Die Produktion 36
    124. 124. Arbeitsresultate Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp Pushes IIB Supplemental Data to Data Mart Login Home / Products & Add Products & Batch Publish to Batch Publish to Home / Benchmarks Add Benchmarks Staging Production Pushes IIB Supplemental Data to Data Mart Links to PPW Link to Product Master Publish to Staging Publish to Production Pushes Site & Tools Associations Data to Data Mart Update Site and Tools Associations Pushes “n/a” to Data Mart for suspended data points Product Overview & Edit Static Product Data & Benchmark Overview Edit Static Benchmark Data Turn Off Data Project Penguin Page Flow Diagram (3/15/2006) Die Produktion 36
    125. 125. Arbeitsresultate Moodboard, Sitemap,Wireframes, Paper Prototype, Flow Diagram, Screendesigns, Prototyp Die Produktion 36
    126. 126. Beispiel http://www.straesslepaxis.ch als Beispiel 37
    127. 127. Beispiel http://www.straesslepaxis.ch als Beispiel 37
    128. 128. Title: 080321_SP_IA.graffle Strässle Praxis Creator: BW Modified: Mon Mar 24 2008 Page 1/1 Site Map Matrix Rollen Links (Friendslist) Wellness News Homepage Vorsorge Beschwerde Lebensberatung Beispiel Methoden Über uns Produkte Praxis Posts Posts mit statischer Posts mit statischer (Teammitglieder) Kontakt Page (Matrix mit Page mit Photos Page (Einführung) mit statischer Page Links) (Einführung) Formular Methode Produkt Post mit Details Post mit Details Koordinaten Lageplan Bestellformular Mail an Veli (Adresse) Formular http://www.straesslepaxis.ch als Beispiel 37
    129. 129. Beispiel http://www.straesslepaxis.ch als Beispiel 37
    130. 130. Beispiel http://www.straesslepaxis.ch als Beispiel 37
    131. 131. Was sind mögliche Probleme?
    132. 132. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Die Produktion 39
    133. 133. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Die Produktion 39
    134. 134. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
    135. 135. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
    136. 136. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
    137. 137. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
    138. 138. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
    139. 139. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
    140. 140. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
    141. 141. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
    142. 142. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
    143. 143. Scope Creep Wird der Prozess genannt bei dem ungeplante „Features“ hinzugefügt werden. Interaktive Funktionalitäten, Multimedia, Anpassungen an der Struktur… Die Produktion 39
    144. 144. Risiken bei Ad Hoc Änderungen Die Produktion 40
    145. 145. Risiken bei Ad Hoc Änderungen 1. Inhaltliches Konzept wird untergraben Die Produktion 40
    146. 146. Risiken bei Ad Hoc Änderungen 1. Inhaltliches Konzept wird untergraben 2. Gestalterisches Konzept wird untergraben Die Produktion 40
    147. 147. Risiken bei Ad Hoc Änderungen 1. Inhaltliches Konzept wird untergraben 2. Gestalterisches Konzept wird untergraben 3. Technologisches Konzept wird untergraben Die Produktion 40
    148. 148. Risiken bei Ad Hoc Änderungen 1. Inhaltliches Konzept wird untergraben 2. Gestalterisches Konzept wird untergraben 3. Technologisches Konzept wird untergraben 4. Getätigte Tests werden ungültig Die Produktion 40
    149. 149. Risiken bei Ad Hoc Änderungen 1. Inhaltliches Konzept wird untergraben 2. Gestalterisches Konzept wird untergraben 3. Technologisches Konzept wird untergraben 4. Getätigte Tests werden ungültig 5. Zeitpläne können nicht mehr eingehalten werden Die Produktion 40
    150. 150. Risiken bei Ad Hoc Änderungen 1. Inhaltliches Konzept wird untergraben 2. Gestalterisches Konzept wird untergraben 3. Technologisches Konzept wird untergraben 4. Getätigte Tests werden ungültig 5. Zeitpläne können nicht mehr eingehalten werden Die Produktion 40
    151. 151. Risiken bei Ad Hoc Änderungen 1. Inhaltliches Konzept wird untergraben 2. Gestalterisches Konzept wird untergraben 3. Technologisches Konzept wird untergraben 4. Getätigte Tests werden ungültig 5. Zeitpläne können nicht mehr eingehalten werden > Verschlechterung der User-Experiences Die Produktion 40
    152. 152. Risiken bei Ad Hoc Änderungen 1. Inhaltliches Konzept wird untergraben 2. Gestalterisches Konzept wird untergraben 3. Technologisches Konzept wird untergraben 4. Getätigte Tests werden ungültig 5. Zeitpläne können nicht mehr eingehalten werden > Verschlechterung der User-Experiences > Budget kann nicht eingehalten werden Die Produktion 40
    153. 153. 04 Design 03.03.10 Usability & Webdesign OM SMA | BW 41
    154. 154. Faktor 1 Layout Design 42
    155. 155. „Organization makes a System of many appear “ fewer. —Law 2, „The laws of simplicity“, John Maeda, 2006 Design 43
    156. 156. Faktor 1 Layout Design 44
    157. 157. Faktor 1 Layout Struktur Design 44
    158. 158. Faktor 1 Layout Struktur Klarheit Design 44
    159. 159. Faktor 1 Layout Struktur Klarheit Gewichtung Design 44
    160. 160. Faktor 1 Layout Struktur Klarheit Gewichtung Design 44
    161. 161. Faktor 1 Layout Struktur Klarheit Gewichtung Design 44
    162. 162. Faktor 1 Layout Struktur Klarheit Gewichtung Design 44
    163. 163. Faktor 1 Layout „Grid Systems in Graphic Design“ Josef Muller-Brockmann Design 45
    164. 164. Faktor 2 Farbe Ist eines der wichtigsten visuellen Kommunikationsmittel. Auf unterschiedlichen Ebenen kann der Betrachter angesporchen werden. Design 46
    165. 165. Faktor 2 Farbe Stimmung Design 47
    166. 166. warm, spannend, glücklich gesund, strahlend glühend, zuversicht, Faktor 2 Farbe lebhaft Stimmung tief, friedvoll, übernatürlich Empfindung friede, ruhe, natur harmonie, stille, sauberkeit Design 48
    167. 167. Faktor 2 Farbe Stimmung Empfindung Kulturelle, Politische und Religiöse Bedeutung Design 49
    168. 168. Faktor 2 Farbe Design 50
    169. 169. Faktor 2 Farbe Farbschema CI / CD Design 50
    170. 170. Faktor 2 Farbe Farbschema CI / CD Fokus Design 50
    171. 171. Faktor 2 Farbe Standardeinstellungen von Gerät, Betriebsystem & Browser CMYK vs RGB Design 51
    172. 172. Faktor 2 Farbe „The Elements of Color“ Johannes Itten Design 52
    173. 173. Faktor 3 Typographie Design 53
    174. 174. Faktor 3 Typographie Standardeinstellungen von Betriebsystem & Browser Design 53
    175. 175. 95 Design % of the Web is Typography 54
    176. 176. Faktor 3 Typographie Design 55
    177. 177. Faktor 3 Typographie 4 sichere Webschriften Verdana, Arial, Georgia, Courier New Design 55
    178. 178. Faktor 3 Typographie 4 sichere Webschriften Verdana, Arial, Georgia, Courier New Standardeinstellungen von Design 55
    179. 179. Faktor 3 Typographie 4 sichere Webschriften Verdana, Arial, Georgia, Courier New Standardeinstellungen von Gerät, Betriebsystem & Browser Design 55
    180. 180. Faktor 3 Typographie Design 56
    181. 181. Faktor 3 Typographie Licht am Ende des Tunnels: Design 56
    182. 182. Faktor 3 Typographie Licht am Ende des Tunnels: sIFR (http://www.mikeindustries.com/blog/sifr) Design 56
    183. 183. Faktor 3 Typographie Licht am Ende des Tunnels: sIFR (http://www.mikeindustries.com/blog/sifr) Cufón (http://cufon.shoqolate.com/) Design 56
    184. 184. Faktor 3 Typographie Licht am Ende des Tunnels: sIFR (http://www.mikeindustries.com/blog/sifr) Cufón (http://cufon.shoqolate.com/) TypeKit (http://typekit.com/) Design 56
    185. 185. Faktor 3 Typographie „The Elements of Typographic Style“ Robert Bringhurst Design 57
    186. 186. Faktor 4 Kontrast Design 58
    187. 187. Faktor 4 Kontrast Helligkeit Design 58
    188. 188. Faktor 4 Kontrast Helligkeit Grösse Design 58
    189. 189. Faktor 4 Kontrast Helligkeit Grösse Farbe Design 58
    190. 190. Faktor 4 Kontrast Helligkeit Grösse Farbe Position Design 58
    191. 191. Faktor 4 Kontrast Helligkeit Grösse Farbe Position Typographie Design 58
    192. 192. Faktor 5 Emotion Die Gestaltung 59
    193. 193. http://flickr.com/photos/amsterdamned/1011990343/sizes/l/ Faktor 5 Emotion Die Gestaltung 59
    194. 194. http://flickr.com/photos/amsterdamned/1011990343/sizes/l/ http://flickr.com/photos/paulbence/ 2584299808/ Faktor 5 Emotion Die Gestaltung 59
    195. 195. http://flickr.com/photos/amsterdamned/1011990343/sizes/l/ http://flickr.com/photos/paulbence/ http://flickr.com/photos/paulbence/ 2584299808/ 2584299808/ Faktor 5 Emotion Die Gestaltung 59
    196. 196. Faktor 6 Flow Design 60
    197. 197. Faktor 6 Flow Design 60
    198. 198. Faktor 6 Flow Design 60
    199. 199. Faktor 6 Flow Design 60
    200. 200. Faktor 6 Flow Klare Ziele setzen Design 60
    201. 201. Faktor 6 Flow Klare Ziele setzen Effizienz optimieren Design 60
    202. 202. Faktor 6 Flow Klare Ziele setzen Effizienz optimieren Erlaube zu Entdecken Design 60
    203. 203. Exkurs Visueller Reichtum Design 61
    204. 204. Design 62
    205. 205. Design 62
    206. 206. Design 62
    207. 207. Design 62
    208. 208. Design 62
    209. 209. Design 62
    210. 210. Design 62
    211. 211. Design 62
    212. 212. Design 62
    213. 213. Exkurs Visueller Reichtum Attraktiviere um zu fokusieren Vermeide Klischees Sprich deine eigene Sprache Design 63
    214. 214. 05 Usability 03.03.10 Usability & Webdesign OM SMA | BW 64
    215. 215. Faktor 1 Einfachheit Benutzerfreundlichkeit 65
    216. 216. „Simple is better than “ complex Complex is better than Benutzerfreundlichkeit 66
    217. 217. Faktor 1 Einfachheit Benutzerfreundlichkeit 67
    218. 218. Faktor 1 Einfachheit Reduktion Benutzerfreundlichkeit 67
    219. 219. Faktor 1 Einfachheit Reduktion Organisation Benutzerfreundlichkeit 67
    220. 220. Faktor 1 Einfachheit Reduktion Organisation Kontext Benutzerfreundlichkeit 67
    221. 221. Faktor 1 Einfachheit Reduktion Organisation Kontext Vertrauen Benutzerfreundlichkeit 67
    222. 222. http://www.google.com Benutzerfreundlichkeit 68
    223. 223. http://www.google.com Reduktion Benutzerfreundlichkeit 68
    224. 224. http://www.google.com Organisation Reduktion Benutzerfreundlichkeit 68
    225. 225. http://www.google.com Organisation Reduktion Kontext Benutzerfreundlichkeit 68
    226. 226. http://www.google.com Organisation Vertrauen Reduktion Kontext Benutzerfreundlichkeit 68
    227. 227. „ Simplicity is about subtracting the obvious, and adding the meaningful “ —Law 10, „The laws of simplicity“, John Maeda, 2006 Benutzerfreundlichkeit 69
    228. 228. Faktor 2 Lesbarkeit Benutzerfreundlichkeit 70
    229. 229. „Wir lesen keine– wir Internetseiten “ überfliegen sie. Benutzerfreundlichkeit 71
    230. 230. „Wir lesen keine– wir Internetseiten “ überfliegen sie. in Eile • Gewöhnlich sind wir • Wir wissen, dass wir nicht alles lesen müssen • Wir sind gut darin Benutzerfreundlichkeit 71
    231. 231. Text als Inhalt Benutzerfreundlichkeit 72
    232. 232. Text als Inhalt Text als User Interface Benutzerfreundlichkeit 72
    233. 233. Faktor 2 Lesbarkeit Benutzerfreundlichkeit 73
    234. 234. Faktor 2 Lesbarkeit Daumenregel: • Reduziere den Text um 50% • Stell‘ davon die Hälfte auf die Website • 50% werden die Benutzer davon noch lesen Benutzerfreundlichkeit 73
    235. 235. Faktor 3 Findbarkeit Konventionen sind unsere Freunde! Benutzerfreundlichkeit 74
    236. 236. Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
    237. 237. Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
    238. 238. Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
    239. 239. Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
    240. 240. Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
    241. 241. Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
    242. 242. Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
    243. 243. Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
    244. 244. Konventionen 1.Persistente Navigation (Hauptnavigation) 2.Lokale Navigation 3.Verlinktes Logo 4.Orientierung (Breadcrumbs, Page Titles) 5.Suchfunktion 6.Sitemap Benutzerfreundlichkeit 75
    245. 245. Faktor 4 Zugänglichkeit Endgerätunabhängigkeit Barrierefreiheit Benutzerfreundlichkeit 76
    246. 246. Endgerät- Unabhängigkeit 1.Skalierbare Schriftgrössen 2.Flexibles / Elastisches Layout 3.Korrekt ausgezeichnete Seitenhierarchie 4.Lesbarkeit für Maschienen & Menschen Benutzerfreundlichkeit 77
    247. 247. Benutzerfreundlichkeit 78
    248. 248. Endgerät- Unabhängigkeit 1.Skalierbare Schriftgrössen 2.Flexibles / Elastisches Layout 3.Lesbarkeit für Maschienen & Menschen 4.Korrekt ausgezeichnete Seitenhierarchie Benutzerfreundlichkeit 79
    249. 249. Benutzerfreundlichkeit 80
    250. 250. Benutzerfreundlichkeit 80
    251. 251. Einige Gründe 1.Lesbarer Inhalt ausserhalb der Website (RSS, Widgets, Aggregatoren…) 2.Offenheit für kommende Technologien (Browser, Bandbreite… ) 3.Offenheit für kommende Benutzerschichten (OLPC ua.) Benutzerfreundlichkeit 81
    252. 252. Barrierefreiheit • 65% der Bevölkerung hat eine Behinderung ( zB. Farbenblindheit) • Jeder sollte die gleiche Chance und Möglichkeit auf den Zugang zu Information haben • Es ist nicht nur eine gute Idee, sondern Gesetz Benutzerfreundlichkeit 82
    253. 253. l e s imp 5 Verbesserungen 1.Bilder mit einem Alt-Text versehen 2.Formularfelder korrekt auszeichnen 3.Direkter Link zum Hauptinhalt zuoberst 4.Zugänglichkeit mit der Tastatur ermöglichen 5.Nicht ohne Grund JavaScript einsetzen (Besondere Vorsicht mit AJAX) Benutzerfreundlichkeit 83
    254. 254. http://flickr.com/photos/64522443@N00/540205343/ Kostprobe Einheit 03 Kostprobe 84
    255. 255. 06 Beispiel 03.03.10 Usability & Webdesign OM SMA | BW 85
    256. 256. Beispiel Datavisualization.ch 2.0 86
    257. 257. „ “ 87
    258. 258. Beispiel Datavisualization.ch 2.0 88
    259. 259. Beispiel Datavisualization.ch 2.0 88
    260. 260. SHE Konzept zur Vereinfachung eines Interfaces Beispiel Datavisualization.ch 2.0 89
    261. 261. SHE Konzept zur Vereinfachung eines Interfaces • Shrink Beispiel Datavisualization.ch 2.0 89
    262. 262. SHE Konzept zur Vereinfachung eines Interfaces • Shrink • Hide Beispiel Datavisualization.ch 2.0 89
    263. 263. SHE Konzept zur Vereinfachung eines Interfaces • Shrink • Hide • Embed Beispiel Datavisualization.ch 2.0 89
    264. 264. 90
    265. 265. Shrink Reduktion des Platzen den das Interface selbst einnimmt. 90
    266. 266. Shrink Reduktion des Platzen den das Interface selbst einnimmt. Hide Reduktion der visuellen Komplexität durch Interface Elemente. 90
    267. 267. Shrink Reduktion des Platzen den das Interface selbst einnimmt. Hide Reduktion der visuellen Komplexität durch Interface Elemente. Embed Funktionalität wird ausgeführt statt aufgerufen. 90
    268. 268. 07 Take Aways 03.03.10 Usability & Webdesign OM SMA | BW 91
    269. 269. http://www.flickr.com Ein Mythos names Take Away 1 92
    270. 270. Take Away 1 Der Fold • 91% der Pages sind scrollbar • 76% werden vom Benutzer gescrollt • 22% der Pages werden bis zum Footer gescrollt http://blog.clicktale.com Knowlege Sweety 1 93
    271. 271. } Wichtigster Platz auf einer Webpage zwischen 0-800px 0-800 px Hauptfokus bei 540px ~25% der Besucher beachten den Footer Knowlege Sweety 1 94
    272. 272. 20min.ch 95
    273. 273. http://www.flickr.com/photos/f-r-a-n-k/469034312/ Limitiere die Auswahl Take Away 2 96
    274. 274. orange.co.uk & apple.com 97
    275. 275. orange.co.uk & apple.com 98
    276. 276. http://flickr.com/photos/ouvyt/2781242712/sizes/o/ Schreibe für deine Take Away 3 99
    277. 277. kompetent oder selbstironisch 100
    278. 278. kompetent oder selbstironisch 100
    279. 279. http://flickr.com/photos/alexa_soul/371288980/ Fokusiere auf Details Take Away 4 101
    280. 280. Form und Inhalt arbeiten komplementär 102
    281. 281. Form und Inhalt arbeiten komplementär 102
    282. 282. If you‘re reading this, you must be bored. So why not try doing this stuff instead: weed the garden path, disco strut all the way to work, top up the dishwasher salt, go to the park and Form und Inhalt arbeiten komplementär 102
    283. 283. Design & Konzept auf der Mikro-Ebene 103
    284. 284. Design & Konzept auf der Mikro-Ebene 103
    285. 285. Question & 08 Answer 03.03.10 Usability & Webdesign OM SMA | BW 104
    286. 286. Literatur 03.03.10 Usability & Webdesign OM SMA | BW 105
    287. 287. Literatur „Designing With Web Standards“ Jeffrey Zeldman, 2003 03.03.10 Usability & Webdesign OM SMA | BW 105
    288. 288. Literatur „Designing With Web Standards“ Jeffrey Zeldman, 2003 „Don‘t Make Me Think!“ Steve Krug, 2000 03.03.10 Usability & Webdesign OM SMA | BW 105
    289. 289. Literatur „Designing With Web Standards“ Jeffrey Zeldman, 2003 „Don‘t Make Me Think!“ Steve Krug, 2000 „Website Owners Manual“ Paul Boag, 2008 03.03.10 Usability & Webdesign OM SMA | BW 105
    290. 290. Literatur „Designing With Web Standards“ Jeffrey Zeldman, 2003 „Don‘t Make Me Think!“ Steve Krug, 2000 „Website Owners Manual“ Paul Boag, 2008 „The Unusually Useful Web Book“ June Cohen, 2003 03.03.10 Usability & Webdesign OM SMA | BW 105
    291. 291. Vielen Dank! Kontakt benjamin@interactivethings.com Slides http://www.slideshare.net/ wiederkehr 03.03.10 Usability & Webdesign OM SMA | BW 106

    ×