Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

1,917 views
1,789 views

Published on

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

Published in: Health & Medicine
4 Comments
0 Likes
Statistics
Notes
  • Die Kernaussage kann man sicherlich unterschreiben. Allerdings bin ich nicht der Meinung, das IA die Brücke zwischen den Disziplinen ist. Sie ist eben selbst eine. Inzwischen taucht immer häufiger der Begriff des conceptual Designer auf - das wäre jemand, der sowohl IA, IxD, UX und die wichtigsten Kernfunktionen der technischen Systeme verstanden hat.
    Aber es kommt natürlich immer auf den Standpunkt an. :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Ach so, an alle Einsteiger, die das hier lesen, GUI ist eine weit verbreitete Abkürzung von Graphical User Interface, zu deutsch Grafische Benutzeroberfläche. Die Ontologie schreibt sich ohne h und das semantische Netz mit einem n :) Bitte nicht falsch merken!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sehr geehrter Herr Karrasch,

    wir freuen uns über Feedback auf unser Bemühen, den Kerngedanken der Informationsarchitektur auf einer Folie zusammenzufassen.

    Wie Sie evtl. der Beschreibung der Folien entnommen haben, richtet sich diese Präsentation an Einsteiger in das Thema Usability und Websitegestaltung.

    Unser Grundverständnis von der Rolle einer Informationsarchitektur ist mit dem Bild der Brücke bewusst einfach aber, wie Sie richtig anmerken, etwas gewagt illustriert.

    Wir verstehen die Kernaussage der Folie so, dass in der wirklichen Welt kein Programmierer einfach drauf los coden sollte, und ein Design nicht ohne die Kenntnis der möglichen und notwendigen Systemarchitektur auskommt.

    Es braucht immer ein architektonisches Konzept, eine Vorstellung vom Grundaufbau der abzubildenden Informationsnetzwerke sowie möglicher hierarchischer Gliederungen und Kategorisierung von Inhalten. Dazu kommen noch die notwendigen Funktionen und Interaktionen, um zuvor ermittelte zentrale Bedürfnisse der Benutzer einer Website oder Software aufzugreifen.

    Vielleicht ist das Bild eines ständigen Sprachrohrs zwischen den Benutzern und ihren Anforderungen, der Aufbereitung und Abbildung von Inhalten der Website (Stichwort Content Sharing und Taxonomien), der programmiertechnischen Systemarchitektur sowie eines nutzerzentrierten Designs der Oberflächen besser geeignet, um den Kerngedanken von 'Informationsarchitektur als Bindeglied zwischen den beteiligten Disziplinen' zu umreißen.

    Es grüßt Sie freundlich
    das Ponton-Team.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Folie 4 ist leider ziemlich falsch! IA ist mehr als eine Verbindung zwischen GUI und Technik. Taxonomien? Onthologien? Sematisches Netz?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
1,917
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
22
Comments
4
Likes
0
Embeds 0
No embeds

No notes for slide

Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

  1. 1. Workshop Usability Erklärung einiger wichtiger Grundbegriffe und Regeln
  2. 2. Usability  Engl. für Gebrauchstauglichkeit, Benutzerfreundlichkeit  Bezeichnet die Möglichkeit ein Produkt möglichst effizient und effektiv zu benutzen, um die vorgegebene Ziele zufriedenstellend zu erreichen.  Software-Ergonomie: Ergonomie für Informatiker.  Neuer Begriff: User Experience.
  3. 3. User Experience (UX)  engl. für Nutzererfahrung, Anwendungserfahrung  Bezeichnung für 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 Gerüst, Sitemap meiner Website)  Surface (Welche Farben, Schrifttypen verwende ich? Oberflächendesign, bunte Tapete)
  4. 4. Informationsarchitektur Informationsarchitektur ist die Brücke zwischen Design (Ästhetische Wirkung der Seite) und Programmierung (Technische Realisierung der Abläufe). 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. 5. Gestaltgesetze  Gesetz der Nähe  Näher zueinander liegende Elemente werden als zusammengehörig wahrgenommen  Gesetz der Ähnlichkeit  Ähnlich aussehende Elemente werden auch als zusammengehörig wahrgenommen  Gesetz der Geschlossenheit  Ergänzung der nicht vorhandenen Teile einer Figur
  6. 6. Gestaltgesetze  Gesetz der Prägnanz  Die wahrgenommene Elemente stellen eine einfache und einprägsame 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 zusammengehörig wahr
  7. 7. Zehn Daumenregeln für Usability - 1  Visibility of system status  Match between system and the real world  User control and freedom  Consistency and standards  Error prevention
  8. 8. Visibility of system status Der Nutzer sieht, in welcher Phase der Flugbuchung er sich befindet. Quelle: http//www.ryanair.com
  9. 9. Visibility of system status Das System informiert den Nutzer stets darüber, was geschieht. Bei längeren Ladezeiten denkt der Nutzer so nicht, dass sich das System evtl. „aufgehängt“ hat. Quelle: http//www.parlameter.zdf.de
  10. 10. Match between system and real world Die Seite spricht die Sprache seines Nutzers. Das Beispiel zeigt eine Website, auf der ausgebildete Heizungsfachkräfte Bauteile bestellen können. Die Verwendung von Fachsprache ist hier angemessen. Quelle: http://www.weinmann-schanz.de
  11. 11. Consistency and Standards Der Nutzer fragt sich, ob verschiedene Begriffe oder Symbole dasselbe bedeuten. Quelle: http://bibli.com
  12. 12. Error Prevention Das System verlangt eine Bestätigung des Nutzers, um Fehler zu vermeiden. Quelle: http://www.sag-zu.de
  13. 13. Zehn Daumenregeln für 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. 14. Recognition rather than recall Objekte, Optionen und Aktionen sind sichtbar und sollen nicht aus früheren Abschnitten erinnert werden. Quelle: http://www.parlameter.zdf.de
  15. 15. Flexibility and efficiency of use Individuelle Konfiguration des Browsers: Häufig besuchte Websites werden als Lesezeichen gespeichert. Quelle: http:/www.facebook.com
  16. 16. Aesthetic and minimalistic Design Durch ein schlichtes Design werden zentrale Elemente hervorgehoben (Logo und Spenden-Button). Quelle: http://www.drk.de
  17. 17. Aesthetic and minimalistic Design Quelle: http://www.oxfam.de
  18. 18. Help users recognize, diagnose and recover from errors Die Fehlermeldung gibt Hinweise, was die Ursache für die Nicht- Auffindbarkeit der Seite sein kann. Quelle: http://www.zdf.de
  19. 19. Help and Documentation Kein Vorschlag für die Problemlösung
  20. 20. Barrierefreiheit nach BITV  Barrierefreie Informationstechnik-Verordnung zum Bundesgleichstellungsgesetz.  Zielt grundsätzlich darauf, Sonderlösungen für behinderte Menschen oder für einzelne Gruppen behinderter Menschen zu vermeiden. Die Erstellung eines Internetangebots, das für alle Benutzergruppen gleichermaßen uneingeschränkt nutzbar ist, hat Vorrang insbesondere vor einer "Nur-Text-Lösung" als Alternative zum eigentlichen Internetangebot, da eine solche Darstellung in erster Linie nur für bestimmte Benutzergruppen von behinderten Menschen, etwa für Benutzer von Braille-Zeilen oder Screen-Readern, Barrierefreiheit erreicht. (Nr. 11.3, Anlage 1)
  21. 21. Barrierefreiheit – Beispiele 1  Einstellbarkeit der Schriftgröße, Kontraste (Farbenblindheit?)  Der Nutzerin/dem Nutzer sind Informationen zum Kontext und zur Orientierung bereitzustellen (Suche, Hilfe & Sitemap)  Navigationsmechanismen sind übersichtlich und schlüssig zu gestalten.  Konventionen einhalten  Was steht wo, was finde ich wo?  Äquivalente für Audio- oder visuellen Inhalt, z.B. Textversion oder Alt-Tag, Flash
  22. 22. Barrierefreiheit – Beispiele 2  Inhaltliche Barrierefreiheit („Einfache Sprache“, Abkürzungen, Sprachwechsel kennenzeichnen für Screenreader)  Technische Barrierefreiheit / Webstandards einhalten  unabhängig vom Eingabegerät oder Ausgabegerät nutzbar  Kompatibilität vor allem mit älteren Geräten, Browsern  HTML/ CSS entsprechend der vorgegebenen Standards, Vereinbarungen  „valides HTML → fehlerfrei bestätigtes Markup“, der Browser muss nicht raten, welche Art der Darstellung er wählen soll.  http://validator.w3.org
  23. 23. EN ISO Norm 9241-11 Anforderungen an die Gebrauchstauglichkeit Die Gebrauchstauglichkeit einer Software ist von ihrem Nutzungskontext abhängig. Im Teil 11 der ISO 9241 werden drei Leitkriterien für die Gebrauchstauglichkeit einer Software bestimmt:  Effektivität zur Lösung einer Aufgabe,  Effizienz der Handhabung des Systems,  Zufriedenheit der Nutzer einer Software.
  24. 24. EN ISO 9241-110 Grundsätze der Dialoggestaltung Benutzungsschnittstellen von interaktiven Systemen, wie Webseiten oder Software, sollten vom Benutzer leicht zu bedienen sein. Der Teil 110 der DIN EN ISO 9241 beschreibt die Grundsätze für die Gestaltung und Bewertung einer Schnittstelle zwischen Benutzer und System.
  25. 25. EN ISO 9241-110 Grundsätze der Dialoggestaltung - I  Aufgabenangemessenheit – geeignete Funktionalität, Minimierung unnötiger Interaktionen  Selbstbeschreibungsfähigkeit – Verständlichkeit durch Hilfen / Rückmeldungen  Lernförderlichkeit – Anleitung des Benutzers, Verwendung geeigneter Metaphern, Ziel: minimale Erlernzeit  Steuerbarkeit – Steuerung des Dialogs durch den Benutzer
  26. 26. EN ISO 9241-110 Grundsätze der Dialoggestaltung - II  Erwartungskonformität – Konsistenz, Anpassung an das Benutzermodell  Individualisierbarkeit – Anpassbarkeit an Benutzer und an seinen Arbeitskontext  Fehlertoleranz – Intelligente Dialoggestaltung zur Fehlervermeidung seitens der Benutzer steht an erster Stelle; ansonsten: erkannte Fehler des Benutzers verhindern nicht das Benutzerziel, unerkannte Fehler: leichte Korrektur durch den Benutzer
  27. 27. Gestaltungselemente für Websites  Fließtext  Überschriften  Grafische Elemente und Hintergrund (z.B. Logo)  Navigationsmenüs (Gruppierung einzelner Menüpunkte)  Contentlinks  Eingabefelder  Buttons  Icons  Bilder und Thumbnails  Leerflächen und Abstände  Muster / Farben / Schriftarten / Größen
  28. 28. Menüführung Zu viele gleiche Punkte auf kleiner Fläche Quelle: http://www.reformiert.de
  29. 29. Menüführung
  30. 30. The F-Shape or Golden Triangle Schließen X
  31. 31. The F-Shape or Golden Triangle F Schließen X
  32. 32. The F-Shape or Golden Triangle
  33. 33. Aufmerksamkeit und Lesen
  34. 34. Blickverlauf
  35. 35. Blickverlauf
  36. 36. Gestaltung von Benutzerinteraktion  Benutzer scannt.  Benutzer liest.  Benutzer klickt einen Link.  Benutzer gibt etwas ein.  Benutzer sendet ab.  Benutzer denkt nicht nach.  Benutzer denkt nach.
  37. 37. Suchen und Filtern Mehr Filter
  38. 38. Suchen und Filtern Weniger Filter
  39. 39. Zielgruppenanalyse  Interviews / Beobachtung von realen Benutzer der Website  Ableiten von typischen Benutzerprofilen (Personas)  Anwendungsfälle für Personas beschreiben  Ablaufschritte einzeln dokumentieren  User klickt Link  User landet auf Seite XY  User klickt Button...  User landet auf...
  40. 40. Personas  Fiktive Benutzer, die auf Charakteristiken von realen Benutzer basieren  Werkzeug zur effektiven und effizienten Identifizierung der Bedürfnisse der Benutzer  Unterscheidung  Primäre: Benutzer, auf denen der Hauptfokus liegt  Sekundäre: weitere „mögliche“ Benutzer
  41. 41. Vorstellung einiger Usability-Methoden  Test: Wie gut lässt sich meine Website bedienen? → Thinking Aloud  Test: Wo klicken meine Nutzer wirklich? → Screencasting → Clickheat Erstellung eines „Wärmebilds“ → Wie betrachten meine Nutzer die Seite? Eye Tracking  Benutzerfreundliche Menüstruktur → Card Sorting  Design und Aufbau von zentralen Bausteinen meiner Website → Paper Prototyping
  42. 42. Thinking Aloud  „lautes Denken“  Testpersonen beschreiben laut, warum sie nun welche Aktionen durchführen  Ziel: Verständnis der Denkweise des Benutzers  Oft einzeln aber auch in Gruppen durchgeführt
  43. 43. Screencasting  Videoaufnahme der Aktionen am Bildschirm  Software:  Silverback (für Mac OS)  CamStudio (kostenlos, http://www.camstudio.org)  Capture Fox
  44. 44. Capture Fox  Add-On für Mozilla Firefox  Kostenlos  einfache Bedienung
  45. 45. Card Sorting  Eine Methode, um eine benutzergerechte Sortierung von Begriffen zu ermitteln. (Hierarchie, Zugehörigkeit, Reihenfolge)  Ziel: besucherfreundliche Gestaltung der Menüführung.  Die Methode ist einfach und effektiv.  Wann wird sie gebraucht? Ganz zu Beginn der Konzeptionsphase.
  46. 46. Paper Prototyping  Skizzierung der Website / der Software-Bedienungsoberfläche mit Hilfe eines ausgedruckten (oder von Hand skizzierten) Papier-Prototypen  Eine Person fungiert als „virtueller Computer“ und unterstützt die Testperson.  Ziel: Schnelles und effektives Testen zur Ermittlung der Probleme der Oberfläche.  Kann parallel zu anderen Entwicklungsphasen durchgeführt werden.
  47. 47. Quellen  http://www.useit.com - Webseite von Jakob Nielsen  http://www.marcel-zimmermann.de/seminar.htm - Vorlesung „Ergonomie für Informatiker“  http://www.informatik.uni-bremen.de/~fmike/multilern/gestaltgesetze.html  http://www.flow-usability.de/gestaltgesetze  http://www.tg8.eu/webseiten/gestaltgesetze.html  http://www.usability.de - Goodbye Golden Triangle: Eye Tracking Studie (Sep. 2009)  http://dmt.fh-joanneum.at/projects/ebus2/  http://www.barrierefreies-webdesign.de  Don‘t make me think : Web usability - das intuitive Web / Steve Krug. Übers. aus dem Amerikan. von Jürgen Dubau – Bonn : mitp-Verl., 2002 – ISBN: 3-8266-0890-9  DIN EN ISO 9241 Ergonomie der Mensch-System-Interaktion
  48. 48. Ansprechpartner Ponton-Lab GmbH Wiebke Müller Junior Projektleiterin Goseriede 4 30159 Hannover 0511 / 89 7009 0 wiebke.mueller@ponton-lab.de www.ponton-lab.de

×