Usability & Webdesign 2010

19.452 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
  • Als Erste(r) kommentieren

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

×