Usability / Software-Ergonomie Dr. Siegfried Olschner · 2009-12-04 · Web-Design, Referenten:...

Web-DesignUsability / Software-ErgonomieDr. Siegfried Olschner

Referenten:Monika PilarskaMartin Schmidkunz

Erlangen, 10.02.2006

Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 2/73

InhaltAllgemeines – Design Fehler 2005Navigation

Grafik

Methoden

eCommerce

Schlechte Beispiele

Allgemeines –Design Fehler 2005

Probleme mit der Lesbarkeitzu kleine oder festgelegte Schrift

geringer Kontrast zwischen Text und Hintergrund

Unstandardisierte Linksnicht ersichtlichkein Unterschied zwischen benutzt/unbenutztunklares LinkzielEinsatz ungewohnter Techniken

Öffnen neuer Fenster

Flashsinnloser Einsatz

Splash-Screens

Startseiten

Inhalt nicht für das Internet verfasstzu lang

nicht scanbar

weitschweifig

keine Antworten auf Benutzerfragen

keine Alltagssprache

Schlechte Suchfunktion

Browser InkompatibilitätBrowser Statistik 12/2005

IEFirefoxSafariNetscapeOpera

Quelle: http://marketshare.hitslink.com/report.aspx?qprid=3 Non-IE = 15%

Beschwerliche Formulareunnötige Fragen

zu viele Pflichtfelder

erstes Eingabefeld nicht markiert

unklare Eingabeaufforderung

unklares Eingabeformat

Keine Kontaktinformation

Keine Firmeninformation

Kein Impressum

Fest vorgegebenes Layout

Bildschirm Auflösungen 07/2005

höher1024x768800x600640x480unbekannt

Quelle: http://www.w3schools.com/browsers/browsers_stats.asp

Pop-ups

Druck-Probleme

Lange Ladezeiten

Privater Internetzugang 09/2005

analogesModemISDN

andere/unbekanntQuelle:

http://www.agof.de/die_internet_facts.195.html

Grafik

Methoden

eCommerce

Schlechte Beispiele

NavigationJede Website ist nur so gut wie ihre Navigation. Sie muss daher sorgfältig konzipiert werden. Dazu gehören:

die Auswahl und Kombination der richtigen Navigationsstrukturen

die Anforderungen an eine gute Navigation zu kennen und umsetzen zu können

Navigationdie Navigationsbereiche auf den Webseiten optimal anordnen zu könnendie systematische und ästhetische Gestaltung der Hyperlinks

die Ergänzung der Navigationsstrukturen um eine lokale Suchmaschine

zusätzlich einen Überblick über die Inhalte und Strukturen der Website anzubieten

NavigationNavigationstrukturen

Die primäre Navigation bildet die oberste Strukturierung für eine Webseite. Sie wird um die sekundäre Navigation ergänzt. Primäre und sekundäre Navigation werden durch Hyperlink-Strukturen dargestellt:

BaumstrukturRegisterListenPull-Down-MenüsHyperbolische Bäume

Die primäre Navigation besitzt für eine Webseite die gleiche Bedeutung wie die Kapitelstruktur für ein Buch. Sie teilt die Webseite in Hauptkategorien ein und sollte einen schnellen Überblick über die gesamte Webseite ermöglichen.

Die primäre Navigation soll auf den meisten Seiten einer Website direkt zur Verfügung stehen. Dann kann der Benutzer jederzeit in eine andere Hauptkategorie wechseln.

Die sekundäre Navigation entspricht der Strukturierung der einzelnen Kapitel innerhalb eines Buchs. Sie ermöglicht es dem Benutzer, zwischen den verschiedenen Seiten innerhalb einer Hauptkategorie zu navigieren.In einer Webseite sollte jede Seite über die primäre und sekundäre Navigation erreicht werden können.

Primäre und sekundäre Navigation sollten getrennt vom Inhalt der Webseiten angeboten und durch strukturierte Hyperlinks realisiert werden d.h. Hyperlinks, die in einer Struktur angeordnet sind. Dazu gehören:

BaumstrukturenRegistereinfache Listen von HyperlinksKlassische Drop-Down-MenüsHyperbolische Bäume

Baumstrukturen

Register

Eine Liste mir Hyperlinks

Drop-Down-Menüs

Hyperbolische Bäume

NavigationAnforderungen

Eine gut gestaltete Navigation erleichtert dem Benutzer die Orientierung, zeigt ihm, was es auf der Website zu sehen gibt und wie er dahin kommt. Außerdem kann der Benutzer erkennen, welche Seiten er schon besucht hat.

Wo bin ich?Wohin kann ich gehen und wie komme ich dahin?

Konkret erwartet der Benutzer Antworten auf folgende Fragen:

War ich schon hier?

Eine gute Navigation zeichnet sich durch folgende Eigenschaften aus:

die Navigationselemente sind dem Thema und dem Charakter der Website angepasstdie Navigation wird konsistent in der gesamten Website verwendetdie Navigation bietet dem Benutzer mehrere Wege, um zu den gewünschten Seiten zu gelangen

die Navigationselemente sind nicht dominantdie Navigation funktioniert intuitiv, d.h. die Navigationselemente sind sofort begreifbar und müssen nicht gelernt werden

NavigationNavigationsstrukturen können auf der Website oben, unten, links, rechts und mittig platziert werden. Am häufigsten findet man eine Kombination von oberen und linken Navigationsbereichen.Seltener ist ein rechts angeordneter Navigationsbereich.Der untere Bereich sollte nur für bestimmte Hyperlinks verwendet werden. Eine zentrale Anordnung empfiehlt sich nur bei Startseiten und für Aufzählungen in Übersichtslisten.

Navigationsbereich platzieren

NavigationNavigationsbereich platzieren

NavigationHyperlinks darstellen

Durch das Web zu navigieren bedeutet auf Hyperlinks zu klicken, die einzelne Webseiten miteinander verbinden.

Schaltflächen (buttons)Bilder (images) einschließlich Piktogrammen (icons)Teile von Bildern (hotspots)

Hyperlinks können auf einer Website unterschiedlich dargestellt werden, durch:

Texte (hotwords)

NavigationHyperlinks darstellen

Schaltflächen (buttons)

Texte (hotwords)

Piktogramme (icons)

NavigationSuchen in Websites

Größere Websites sollten eine lokale Suchmaschine besitzen, deren Benutzungsoberfläche in das Design der Websites integriert wird. Bei sehr großen Websites empfiehlt sich eine erweiterte Suchmaschine.Die Suchergebnisse müssen dem Benutzer in einer leicht auswertbaren Darstellung angeboten werden.

Einfache Suche

Erweiterte Suche für große Websites

NavigationSite Map und Site Index

Viele Websites bieten eine Site Map, in der sich die Benutzer über die Inhalte der Website informieren und über einen Hyperlink direkt verzweigen können. Während die Site Map Hyperlinks logisch gruppiert, sind in einem Site Index alle Hyperlinks alphabetisch geordnet.

NavigationDiese Site Map zeigt die Inhalte der Website www.uni-erlangen.de

Site Map und Site Index

NavigationDie Website www.intel.de zeigt die Site Map in tabellarischer Form

Site Map und Site Index

NavigationSite Map und Site Index

AOL verwendet einen alphabetisch sortierten Site Index

Grafik

Methoden

eCommerce

Schlechte Beispiele

LinksEingebettete Links

Kontext-Links

Struktur-Links

LinksKlar anzeigen

LinksInterne von externen Links unterscheiden

LinksEindeutige Beschreibung

LinksText-Links statt Image-Links

Mouse-over-Effekt vermeiden

LinksTabs effektiv präsentieren

LinksBesuchte Links kennzeichnen

Grafik

Methoden

eCommerce

Schlechte Beispiele

GrafikBilder im Web

Websites ohne Bilder kann man sich heute kaum mehr vorstellen.Bilder sind ein unverzichtbarer Bestandteil von attraktiven Websites. Dabei ist es wichtig, einen geeigneten Kompromiss zwischen guter Qualität und kurzer Ladezeit zu erreichen.Grundsätzlich lassen sich zwei Arten von Bildern unterscheiden:

VektorgrafikenBitmaps

GrafikBildformate für das Web

Bitmaps bestehen aus einer Vielzahl von Pixeln (Bildpunkten), von denen jedes eine Farbinformation besitzt.Bei den Bitmaps werden im Web die Formate: JPEG, GIF und PNG verwendet.Vektorgrafiken benötigen wesentlich weniger Speicherplatz als pixelorientierte Bilder. Ihr Aufbau ist mathematisch definiert. Beispielweise besteht eine Linie aus einem Startpunkt, einem Endpunkt und einem Winkel.

Für Fotos immer JPEG verwenden.

Für Logos GIF oder PNG verwenden, niemals JPEG.

JPEGGIF

Für Schriftzüge immer GIF oder PNG verwenden, niemals JPEG.

Alt-TexteMan soll in HTML für Bilder einen kurzen Alt-Text angeben. Bei Bildern, die nur der Formatierung dienen, wird der Text alt=”” angegeben.

Bilder in Websites sollten durch Texte ergänzt werden, die als Tooltip angezeigt werden, wenn das Bild mit der Maus berührt wird.Wenn man darauf verzichtet, geht einer Website wichtige Information verloren, wenn der Nutzer die Anzeige von Bildern deaktiviert hat (z.B. um lange Webseiten schneller herunterzuladen).

Grafik

Methoden

eCommerce

Schlechte Beispiele

MethodenForschungstests

Assesment-Tests

Auswertungstests

MethodenBeobachtungCard-SortingFragebogen

Experten-Review

Experiment

Checklisten

Grafik

Methoden

eCommerce

Schlechte Beispiele

eCommerceNur etwa 56% aller beabsichtigten Online-Einkäufe verlaufen erfolgreich. Das heißt, in fast der Hälfte der Fälle gelingt es dem Kunden nicht, das gewünschte Produkt auch wirklich zu kaufen. Die meisten eCommerce Sites befolgen nur ein Drittel veröffentlichter Usability Guidelines.

eCommerceJeder dritte Kunde (33 Prozent) hatschon mal eine Online-Einkaufstour abgebrochen, weil er die gesuchte Information nicht finden konnte.

Drei von zehn Nutzern ließen sich vom Kauf abhalten, weil sie den Bestellvorgang als zu umständlich empfanden.Mehr als jeder fünfte befragte Online-Kunde (21 Prozent) gab an, er habe auf einen Kauf verzichtet, weil er den Warenkorb oder die Kasse nicht finden konnte.

eCommerceHauptgründe für Kaufabbrüche sind:

Unübersichtlichkeit und schlechte Bedienbarkeit des ShopsSicherheitsbedenken Fehlendes Vertrauen Performance Technische ProblemeMangelnde Informationen

Grafik

Methoden

eCommerce

Schlechte Beispiele

Schlechte Beispielehttp://www.deutsche-bank.de

Schlechte Beispielehttp://www.freenet.de

Schlechte Beispielehttp://www.t-online.de

VIELEN DANK

Für Ihre Aumerksamkeit !

Usability / Software-Ergonomie Dr. Siegfried Olschner · 2009-12-04 · Web-Design, Referenten:...

Documents

Transcript of Usability / Software-Ergonomie Dr. Siegfried Olschner · 2009-12-04 · Web-Design, Referenten:...

The Usability / UX Profession - Berufsfeld Usability

Ergonomie Richtige Haltung am Arbeitsplatz. Ergonomie Organisation Umgebung SehenSehen SitzenSitzen.

Usability Definition

The Usability / UX Profession Berufsfeld Usability · The Usability Professionals. Compared to others, the profession ‘Usability Profession-al’ is still a very young one. In fact,

World Usability Day 2011: Usability quadratisch, pragmatisch, schnell

Usability & User Experience · 2018-11-14 · Usability & User Experience 4 Danksagung Der vorliegende Leitfaden wurde im Bitkom-Arbeitskreis »Usability & User Experience (UUX)«

INNOVATIONSPREIS ERGONOMIE 2019 · e.V. INNOVATIONSPREIS ERGONOMIE 2019 BEWERBUNG ZUM INNOVATIONSPREIS ERGONOMIE 2019 Ja, wir möchten uns für den Innovati onspreis Ergonomie bewerben:

Usability Engineering

Verbesserung der Usability von Saros unter Verwendung ... · Verbesserung der Usability von Saros, 15.03.2012, Freie Universität Berlin Vorgehen 16 Verbesserung der Usability Erheben

Nutzerbasierte Usability-Tests

MAD Zürich | 05.05.06 | Mobile Usability Mobile Usability: Einführung Mai 2005.

20120116hmü dbä(Vortrag Scifi Usability) - asqf.de · Science Fiction und Usability Scifi und Usability – passt das zusammen? Häufig wiederkehrende Themen im SciFi-Genre: •

Usability-Testing BildungsWikiwiki.bildungsserver.de/bilder/upload/Usability-Testing_BildungsWiki.pdf · Karlsruhe, 04.02.09 | Anke Reinhold | Learntec | Usability-Testing BildungsWiki

Wie kann man eine GUI unter dem Gesichtspunkt Usability ... · 2 Motivation Warum Usability messen? – Usability Probleme frühzeitig erkennen – Unterschiedliche Bedienelemente

Human Computer Interaction · ‣ Software-Ergonomie . 3 Vorlesung HCI V3 Prof. Dr. Detlef Krömker Rückblick - Ziele im HCI -- Usability ‣ Benutzbarkeit oder Bedienungsfreundlichkeit

Usability & User Experience - bitkom.org · Usability & User Experience 4 Danksagung Der vorliegende Leitfaden wurde im Bitkom-Arbeitskreis »Usability & User Experience (UUX)« erarbeitet.

Die Kunst der Ergonomie - tc-tuningen.de · 4 DIE KUNST DER ERGONOMIE 1. Was ist Ergonomie? Ergonomie ist eine relativ junge Wissenschaft, die Erkenntnisse aus hauptsächlich drei

Ergonomie Design Drehstuhl rückenfreundlich schwingend ... · Ergonomie Design rückenfreundliche schwingende Drehstühle für gesunde Bewegung im Büro. Keywords: Ergonomie Design

Erlebbare Ergonomie und Arbeitsplatzgestaltung · Erlebbare Ergonomie und Arbeitsplatzgestaltung Ergonomische Grundlagen erleben und erkennen Im Lernparcours Ergonomie stehen den

Usability & Ästhetik