SlideShare ist ein Scribd-Unternehmen logo
Workshop Usability
Erklärung einiger wichtiger Grundbegriffe und Regeln
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.
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)
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
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
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
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
Visibility of system status




 Der Nutzer sieht, in welcher Phase der Flugbuchung er sich befindet.

                                                      Quelle: http//www.ryanair.com
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
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
Consistency and Standards




 Der Nutzer fragt sich, ob verschiedene Begriffe oder
 Symbole dasselbe bedeuten.
                                                        Quelle: http://bibli.com
Error Prevention




     Das System verlangt eine Bestätigung des
     Nutzers, um Fehler zu vermeiden.
                                                Quelle: http://www.sag-zu.de
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
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
Flexibility and efficiency of use




Individuelle Konfiguration des Browsers: Häufig besuchte Websites werden
als Lesezeichen gespeichert.


                                                     Quelle: http:/www.facebook.com
Aesthetic and minimalistic Design




  Durch ein schlichtes Design werden zentrale Elemente hervorgehoben
  (Logo und Spenden-Button).                            Quelle: http://www.drk.de
Aesthetic and minimalistic Design




                                    Quelle: http://www.oxfam.de
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
Help and Documentation




 Kein Vorschlag für die Problemlösung
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)
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
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
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.
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.
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
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
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
Menüführung




  Zu viele gleiche Punkte auf kleiner Fläche



                                               Quelle: http://www.reformiert.de
Menüführung
The F-Shape or Golden Triangle



                    Schließen X
The F-Shape or Golden Triangle




 F
                    Schließen X
The F-Shape or Golden Triangle
Aufmerksamkeit und Lesen
Blickverlauf
Blickverlauf
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.
Suchen und Filtern




    Mehr Filter
Suchen und Filtern




    Weniger Filter
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...
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
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
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
Screencasting




     Videoaufnahme der Aktionen am Bildschirm

     Software:

          Silverback (für Mac OS)


          CamStudio (kostenlos, http://www.camstudio.org)


          Capture Fox
Capture Fox




     Add-On für Mozilla Firefox

     Kostenlos

     einfache Bedienung
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.
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.
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
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

Weitere ähnliche Inhalte

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

Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden BlendMartin Hey
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
.NET User Group Dresden
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Christoph Mühlbauer
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
usability.de
 
Ergonomie Tag3
Ergonomie Tag3Ergonomie Tag3
Ergonomie Tag3
Marcel Zimmermann
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
Luka Peters
 
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenUsability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
AlineDeicke
 
developer-experience.pdf
developer-experience.pdfdeveloper-experience.pdf
developer-experience.pdf
Konrad Ferdinand Heimel
 
Online texten-für-pr andreas-gnann-abp_11-08-29
Online texten-für-pr andreas-gnann-abp_11-08-29Online texten-für-pr andreas-gnann-abp_11-08-29
Online texten-für-pr andreas-gnann-abp_11-08-29
andreasgnann
 
In acht goldenen Regeln um die (UI-)Welt
In acht goldenen Regeln um die (UI-)WeltIn acht goldenen Regeln um die (UI-)Welt
In acht goldenen Regeln um die (UI-)Welt
Jochen Wolters
 
Plone im Kontext des WCMS Marktes
Plone im Kontext des WCMS MarktesPlone im Kontext des WCMS Marktes
Plone im Kontext des WCMS Marktes
Alexander Loechel
 
UX in Business Apps
UX in Business AppsUX in Business Apps
UX in Business Apps
Alexander Casall
 
German Web Usability Training
German Web Usability TrainingGerman Web Usability Training
German Web Usability Training
Paulina
 
Online-Texten für PR_ABP-Fobi 2010-03_Dr. Andreas Gnann
Online-Texten für PR_ABP-Fobi 2010-03_Dr. Andreas GnannOnline-Texten für PR_ABP-Fobi 2010-03_Dr. Andreas Gnann
Online-Texten für PR_ABP-Fobi 2010-03_Dr. Andreas Gnannandreasgnann
 
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...Peter Rozek
 
Top 10 Internet Trends 2007
Top 10 Internet Trends 2007Top 10 Internet Trends 2007
Top 10 Internet Trends 2007
Jürg Stuker
 
Social Media Lexikon für Personaler und Mittelstand
Social Media Lexikon für Personaler und MittelstandSocial Media Lexikon für Personaler und Mittelstand
Social Media Lexikon für Personaler und Mittelstand
Barbara Braehmer
 

Ähnlich wie Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability" (20)

Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
 
Ergonomie Tag3
Ergonomie Tag3Ergonomie Tag3
Ergonomie Tag3
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenUsability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
 
Usability Im Web 2.0
Usability Im Web 2.0Usability Im Web 2.0
Usability Im Web 2.0
 
developer-experience.pdf
developer-experience.pdfdeveloper-experience.pdf
developer-experience.pdf
 
Online texten-für-pr andreas-gnann-abp_11-08-29
Online texten-für-pr andreas-gnann-abp_11-08-29Online texten-für-pr andreas-gnann-abp_11-08-29
Online texten-für-pr andreas-gnann-abp_11-08-29
 
Barrierefreiheit
BarrierefreiheitBarrierefreiheit
Barrierefreiheit
 
In acht goldenen Regeln um die (UI-)Welt
In acht goldenen Regeln um die (UI-)WeltIn acht goldenen Regeln um die (UI-)Welt
In acht goldenen Regeln um die (UI-)Welt
 
Plone im Kontext des WCMS Marktes
Plone im Kontext des WCMS MarktesPlone im Kontext des WCMS Marktes
Plone im Kontext des WCMS Marktes
 
UX in Business Apps
UX in Business AppsUX in Business Apps
UX in Business Apps
 
German Web Usability Training
German Web Usability TrainingGerman Web Usability Training
German Web Usability Training
 
Online-Texten für PR_ABP-Fobi 2010-03_Dr. Andreas Gnann
Online-Texten für PR_ABP-Fobi 2010-03_Dr. Andreas GnannOnline-Texten für PR_ABP-Fobi 2010-03_Dr. Andreas Gnann
Online-Texten für PR_ABP-Fobi 2010-03_Dr. Andreas Gnann
 
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
 
Top 10 Internet Trends 2007
Top 10 Internet Trends 2007Top 10 Internet Trends 2007
Top 10 Internet Trends 2007
 
Social Media Lexikon für Personaler und Mittelstand
Social Media Lexikon für Personaler und MittelstandSocial Media Lexikon für Personaler und Mittelstand
Social Media Lexikon für Personaler und Mittelstand
 

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

  • 1. Workshop Usability Erklärung einiger wichtiger Grundbegriffe und Regeln
  • 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. 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. 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. 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. 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. 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. 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 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. 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. 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 Bestätigung des Nutzers, um Fehler zu vermeiden. Quelle: http://www.sag-zu.de
  • 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. 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. Flexibility and efficiency of use Individuelle Konfiguration des Browsers: Häufig 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 für die Nicht- Auffindbarkeit der Seite sein kann. Quelle: http://www.zdf.de
  • 19. Help and Documentation Kein Vorschlag für die Problemlösung
  • 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. 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. 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. 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. 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. 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. 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. 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. Menüführung Zu viele gleiche Punkte auf kleiner Fläche Quelle: http://www.reformiert.de
  • 30. The F-Shape or Golden Triangle Schließen X
  • 31. The F-Shape or Golden Triangle F Schließen X
  • 32. The F-Shape or Golden Triangle
  • 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. Suchen und Filtern Mehr Filter
  • 38. Suchen und Filtern Weniger Filter
  • 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. 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. 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. 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. Screencasting  Videoaufnahme der Aktionen am Bildschirm  Software:  Silverback (für Mac OS)  CamStudio (kostenlos, http://www.camstudio.org)  Capture Fox
  • 44. Capture Fox  Add-On für Mozilla Firefox  Kostenlos  einfache Bedienung
  • 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. 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. 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. 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