Pr¤sentation f¼r den Workshop "Schreiben f¼rs Web/Optimierung der...

download Pr¤sentation f¼r den Workshop "Schreiben f¼rs Web/Optimierung der Usability"

of 48

Embed Size (px)

description

Diese Folien geben einen Überblick über die Anforderungen und Grundlagen einer benutzerfreundlichen Websitegestaltung. Die Präsentation war Bestandteil eines Einsteiger-Workshops mit dem Titel Schreiben fürs Web/Optimierung der Usability am 08.03.2010 in Hannover. Mehr Infos / Ansprechpartner finden Sie unter www.ponton-lab.de

Transcript of Pr¤sentation f¼r den Workshop "Schreiben f¼rs Web/Optimierung der...

  • 1. Workshop Usability Erklrung einiger wichtiger Grundbegriffe und Regeln
  • 2. Usability Engl. fr Gebrauchstauglichkeit, Benutzerfreundlichkeit Bezeichnet die Mglichkeit ein Produkt mglichst effizient und effektiv zu benutzen, um die vorgegebene Ziele zufriedenstellend zu erreichen. Software-Ergonomie: Ergonomie fr Informatiker. Neuer Begriff: User Experience.
  • 3. User Experience (UX) engl. fr Nutzererfahrung, Anwendungserfahrung Bezeichnung fr die Erfahrungen des Benutzers bei der Interaktion mit Software oder Webseite Das Modell The Elements of User Experience (J.J. Garrett) Strategy (Zielgruppe und Ziele der Website) Scope (Umfang, was will ich abbilden?) Structure (Wie will ich es abbilden? Brauche ich eine Website, einen Blog, eine Community?) Skeleton (Das Gerst, Sitemap meiner Website) Surface (Welche Farben, Schrifttypen verwende ich? Oberflchendesign, bunte Tapete)
  • 4. Informationsarchitektur Informationsarchitektur ist die Brcke zwischen Design (sthetische Wirkung der Seite) und Programmierung (Technische Realisierung der Ablufe). Some Web sites "work" and some don't. Good Web site consultants know that you can't just jump in and start writing HTML, the same way you can't build a house by just pouring a foundation and putting up some walls. You need to know who will be using the site, and what they'll be using it for. You need some idea of what you'd like to draw their attention to during their visit. Zitat Louis Rosenfeld, Peter Morville
  • 5. Gestaltgesetze Gesetz der Nhe Nher zueinander liegende Elemente werden als zusammengehrig wahrgenommen Gesetz der hnlichkeit hnlich aussehende Elemente werden auch als zusammengehrig wahrgenommen Gesetz der Geschlossenheit Ergnzung der nicht vorhandenen Teile einer Figur
  • 6. Gestaltgesetze Gesetz der Prgnanz Die wahrgenommene Elemente stellen eine einfache und einprgsame Gestalt dar Gesetz der Symmetrie Symmetrisch geordnete Elemente werden als eine Einheit wahrgenommen Gesetz der guten Fortsetzung Elemente, die sich auf einer durchgehenden Linie befinden, nimmt man als zusammengehrig wahr
  • 7. Zehn Daumenregeln fr Usability - 1 Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention
  • 8. Visibility of system status Der Nutzer sieht, in welcher Phase der Flugbuchung er sich befindet. Quelle: http//www.ryanair.com
  • 9. Visibility of system status Das System informiert den Nutzer stets darber, was geschieht. Bei lngeren Ladezeiten denkt der Nutzer so nicht, dass sich das System evtl. aufgehngt hat. Quelle: http//www.parlameter.zdf.de
  • 10. Match between system and real world Die Seite spricht die Sprache seines Nutzers. Das Beispiel zeigt eine Website, auf der ausgebildete Heizungsfachkrfte Bauteile bestellen knnen. Die Verwendung von Fachsprache ist hier angemessen. Quelle: http://www.weinmann-schanz.de
  • 11. Consistency and Standards Der Nutzer fragt sich, ob verschiedene Begriffe oder Symbole dasselbe bedeuten. Quelle: http://bibli.com
  • 12. Error Prevention Das System verlangt eine Besttigung des Nutzers, um Fehler zu vermeiden. Quelle: http://www.sag-zu.de
  • 13. Zehn Daumenregeln fr Usability - 2 Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalistic design Help users recognize, diagnose and recover from errors Help and documentation
  • 14. Recognition rather than recall Objekte, Optionen und Aktionen sind sichtbar und sollen nicht aus frheren Abschnitten erinnert werden. Quelle: http://www.parlameter.zdf.de
  • 15. Flexibility and efficiency of use Individuelle Konfiguration des Browsers: Hufig besuchte Websites werden als Lesezeichen gespeichert. Quelle: http:/www.facebook.com
  • 16. Aesthetic and minimalistic Design Durch ein schlichtes Design werden zentrale Elemente hervorgehoben (Logo und Spenden-Button). Quelle: http://www.drk.de
  • 17. Aesthetic and minimalistic Design Quelle: http://www.oxfam.de
  • 18. Help users recognize, diagnose and recover from errors Die Fehlermeldung gibt Hinweise, was die Ursache fr die Nicht- Auffindbarkeit der Seite sein kann. Quelle: http://www.zdf.de
  • 19. Help and Documentation Kein Vorschlag fr die Problemlsung
  • 20. Barrierefreiheit nach BITV Barrierefreie Informationstechnik-Verordnung zum Bundesgleichstellungsgesetz. Zielt grundstzlich darauf, Sonderlsungen fr behinderte Menschen oder fr einzelne Gruppen behinderter Menschen zu vermeiden. Die Erstellung eines Internetangebots, das fr alle Benutzergruppen gleichermaen uneingeschrnkt nutzbar ist, hat Vorrang insbesondere vor einer "Nur-Text-Lsung" als Alternative zum eigentlichen Internetangebot, da eine solche Darstellung in erster Linie nur fr bestimmte Benutzergruppen von behinderten Menschen, etwa fr Benutzer von Braille-Zeilen oder Screen-Readern, Barrierefreiheit erreicht. (Nr. 11.3, Anlage 1)
  • 21. Barrierefreiheit Beispiele 1 Einstellbarkeit der Schriftgre, Kontraste (Farbenblindheit?) Der Nutzerin/dem Nutzer sind Informationen zum Kontext und zur Orientierung bereitzustellen (Suche, Hilfe & Sitemap) Navigationsmechanismen sind bersichtlich und schlssig zu gestalten. Konventionen einhalten Was steht wo, was finde ich wo? quivalente fr Audio- oder visuellen Inhalt, z.B. Textversion oder Alt-Tag, Flash
  • 22. Barrierefreiheit Beispiele 2 Inhaltliche Barrierefreiheit (Einfache Sprache, Abkrzungen, Sprachwechsel kennenzeichnen fr Screenreader) Technische Barrierefreiheit / Webstandards einhalten unabhngig vom Eingabegert oder Ausgabegert nutzbar Kompatibilitt vor allem mit lteren Gerten, Browsern HTML/ CSS entsprechend der vorgegebenen Standards, Vereinbarungen valides HTML fehlerfrei besttigtes Markup, der Browser muss