Tobias_Hauser-Usability-Tipps-Tools-Techniken.pdf
Tobias_Hauser-Usability-Tipps-Tools-Techniken.pdf
Tobias_Hauser-Usability-Tipps-Tools-Techniken.pdf
Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.
YUMPU macht aus Druck-PDFs automatisch weboptimierte ePaper, die Google liebt.
Webdesign und <strong>Usability</strong><br />
am 10. November 2010<br />
Von Arrabiata Solutions GmbH<br />
<strong>Tobias</strong> <strong>Hauser</strong><br />
www.arrabiata.de<br />
Tel. 089.7298 9689-0
Übersicht<br />
01<br />
02<br />
03<br />
04<br />
05<br />
06<br />
PROFILE<br />
GESTALTUNGSGRUNDLAGEN<br />
USABILITY<br />
FUNKTIONALES WEBDESIGN<br />
USABILITY – ENTSCHEIDENDE BEREICHE<br />
USABILITY – TESTING
01<br />
TOBIAS HAUSER<br />
Technischer Leiter der Arrabiata Solutions GmbH<br />
Spezialgebiete:<br />
Entwicklung von Benutzerschnittstellen<br />
Rich Internet Applications<br />
Berater und Trainer für Webentwicklung<br />
Web Gestalter und Entwickler seit 1996<br />
Ausbildung zum Informationsdesigner<br />
Dipl.-Kfm. Univ. Ludwig-Maximilians-Universität<br />
München<br />
Autor von über 50 Büchern über<br />
Informationsdesign und Webentwicklung<br />
PHP World<br />
10. November 2010<br />
01.01
01<br />
ARMIN KAPPLER<br />
Projektleiter im Bereich Webdesign und <strong>Usability</strong><br />
Spezialgebiete:<br />
Screendesign<br />
Multimedia<br />
Autor und Fachlektor, u.a. tätig für: Addison-<br />
Wesley, Galileo Press, Internet Professionell<br />
Trainer für Photoshop; Sprecher für Webdesign<br />
und <strong>Usability</strong><br />
Studium Kommunikationsdesign, FH München<br />
Dipl.-Kommunikationsdesigner<br />
PHP World<br />
10. November 2010<br />
01.02
02<br />
GESTALTUNGS-<br />
GRUNDLAGEN<br />
PHP World<br />
10. November 2010
02<br />
GESTALTUNGSGRUNDLAGEN -<br />
WAHRNEHMUNG<br />
„Das Ganze ist mehr als die Summe seiner Teile“ -<br />
Aristoteles<br />
Das Wahrgenommene nicht nur als Ganzes<br />
sondern auch in Teilen<br />
Bestreben des Menschen, Elemente auf einer<br />
Fläche in Beziehung zueinander zu setzen<br />
Zusammenhänge in Bezug auf Form, Farbe,<br />
Größe suchen<br />
>Interface: Interpretation einzelner Elemente<br />
PHP World<br />
10. November 2010<br />
02.01
02<br />
GESTALTUNGSGRUNDLAGEN – PUNKT – LINIE - FLÄCHE<br />
Definition:<br />
Punkt<br />
Linie<br />
Fläche<br />
Räumlichkeit<br />
Überlagerung<br />
Linien<br />
Licht und<br />
Schatten<br />
PHP World<br />
10. November 2010<br />
02.02
02<br />
GESTALTUNGSGRUNDLAGEN -<br />
GESTALTUNGSGESETZE<br />
Intensität<br />
Prioritäten festlegen<br />
Klare Vorstellung<br />
von Reihenfolge<br />
und Wichtigkeit der<br />
Inhalte<br />
PHP World<br />
10. November 2010<br />
02.03
02<br />
GESTALTUNGSGRUNDLAGEN -<br />
GESTALTUNGSGESETZE<br />
Abweichung<br />
Irritation durch<br />
Abweichung<br />
-> Aufmerksamkeit<br />
PHP World<br />
10. November 2010<br />
02.04
02<br />
GESTALTUNGSGRUNDLAGEN -<br />
GESTALTUNGSGESETZE<br />
Ausnahme<br />
PHP World<br />
10. November 2010<br />
02.05
02<br />
GESTALTUNGSGRUNDLAGEN -<br />
GESTALTUNGSGESETZE<br />
Ausnahme und Priorität<br />
PHP World<br />
10. November 2010<br />
02.06
02<br />
GESTALTUNGSGRUNDLAGEN -<br />
GESTALTUNGSGESETZE<br />
Ähnlichkeit<br />
Elemente werden bevorzugt<br />
als zusammengehörig<br />
betrachtet:<br />
Farbe<br />
Helligkeit<br />
Größe<br />
Form<br />
PHP World<br />
10. November 2010<br />
02.07
02<br />
GESTALTUNGSGRUNDLAGEN -<br />
GESTALTUNGSGESETZE<br />
Nähe<br />
Zugehörigkeit der Elemente<br />
Gruppenbildung<br />
PHP World<br />
10. November 2010<br />
02.08
02<br />
GESTALTUNGSGRUNDLAGEN - KONTEXT<br />
Gelernter Kontext<br />
www.oyuna.com<br />
www.clearwire.com<br />
Vervollständigung<br />
"Erwartung" wird erkannt<br />
PHP World<br />
10. November 2010<br />
02.09
02<br />
GESTALTUNGSGRUNDLAGEN - MUSTER<br />
Mensch versucht Ordnung und Muster zu<br />
erkennen<br />
-> Klarheit gewinnt vor Einfachheit<br />
PHP World<br />
10. November 2010<br />
02.10
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Farbsysteme<br />
CYMK<br />
cyan<br />
magenta<br />
yellow<br />
kontrast/black<br />
subtraktive Farbmischung<br />
Print-Grafik<br />
PHP World<br />
10. November 2010<br />
02.11
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Farbsysteme<br />
PHP World<br />
10. November 2010<br />
02.12
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Farbsysteme:<br />
RGB<br />
Lichtfarben<br />
rot<br />
grün<br />
blau<br />
additive Farbmischung<br />
Überlagerung der Farben ergibt weiss<br />
selbstleuchtende Medien wie Monitore,<br />
etc.<br />
PHP World<br />
10. November 2010<br />
02.13
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Farbsysteme<br />
PHP World<br />
10. November 2010<br />
02.14
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Farbkreis<br />
symmetrische Farbkreis<br />
physikalische Logik<br />
Blau und Gelb stehen gegenüber<br />
Farbkreis nach Harald Küppers<br />
berücksichtigt menschliche Wahrnehmung<br />
Violett und Gelb stehen gegenüber<br />
Primärfarben (Grundfarben)<br />
Sekundärfarben, Mischung aus 2 Grundfarben<br />
Tertiärfarben, alle Primärfarben sind an der Mischung<br />
beteiligt<br />
Komplementärfarbe:<br />
Gegenüberliegende Farbe im Farbkreis<br />
PHP World<br />
10. November 2010<br />
02.15
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Farbkreise<br />
Symmetrischer Farbkreis<br />
Farbkreis nach Harald Küppers<br />
PHP World<br />
10. November 2010<br />
02.16
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Nachbilder<br />
stattfindendes Phänomen<br />
objektive Erwartung wird hervorsehbar<br />
Verantwortlich für die Wirkung von farbigen<br />
Flächen<br />
Farbharmonien<br />
PHP World<br />
10. November 2010<br />
02.17
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Kontrast<br />
Wahrnehmung der Farben<br />
Auge gibt Farben nicht nach physikalischen Werten<br />
entsprechend wieder, sondern macht Unterschiede deutlich<br />
Warme und kalte Farben, Farbempfindung<br />
PHP World<br />
10. November 2010<br />
02.18
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Simultankontrast<br />
Wahrnehmung der Farbe relativ zur Umgebung<br />
Umgebungsfarbe wird mit einbezogen<br />
je dunkler der Hintergrund, desto heller erscheint<br />
eine Farbe (ebenfalls in der Umkehrung)<br />
Komplementärkontrast<br />
www.osram.de/osram_de<br />
PHP World<br />
10. November 2010<br />
02.19
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Farbe als Farbe Kontrast:<br />
Trennung an Hand der Farben<br />
Vielseitigkeit<br />
Lebhaftigkeit<br />
www.milliondollarhomepage.com<br />
PHP World<br />
10. November 2010<br />
02.20
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Quantitätskontrast:<br />
Menge an Farben<br />
zueinander<br />
www.sparkasse.de<br />
www.joomza.co.za<br />
www.gelbeseiten.de<br />
PHP World<br />
10. November 2010<br />
02.21
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Qualitätskontrast:<br />
Reiner Farbton ist von abgestuften<br />
Tonwerten umgeben<br />
Gewinnt dadurch an Bedeutung<br />
Gliederung der Fläche<br />
Gefahr der Langeweile -> Eintönigkeit<br />
www.digitalpodge.co.uk/2009<br />
www.lake-district-yurts.co.uk<br />
PHP World<br />
10. November 2010<br />
02.22
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Bunt-Unbunt-Kontrast<br />
Kombination aus satten Farben (bunt) mit<br />
entfärbten Farben (unbunt)<br />
Oft auch in Kombination mit Quantitätskontrast zu<br />
sehen<br />
www.topsitetally.com/queue<br />
PHP World<br />
10. November 2010<br />
02.23
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Hell-Dunkel-Kontrast<br />
Für Farbenblinde<br />
relevant<br />
Zu starker Kontrast<br />
kann ermüdend wirken<br />
Positiv/ negativ<br />
www.brancozero.com<br />
www.sold-out.ch<br />
PHP World<br />
10. November 2010<br />
02.24
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Kalt-Warm-Kontrast<br />
Natur<br />
Kältere Farben wirken eher fern<br />
Wärmere Farben eher nah<br />
Kaltes Grau, warmes Grau, neutraler Grauton<br />
www.viessmann.de<br />
www.lifestylebeachsports.com<br />
www.grado-tourism.com<br />
www.iconomix.ch<br />
www.compasslearning.com<br />
PHP World<br />
10. November 2010<br />
02.25
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Farbe als Struktur<br />
Infografik<br />
Farbe als Hilfe zur Differenzierung<br />
Trennung von Inhaltsbereichen<br />
Zusammengehörigkeit von Inhalten und klare<br />
Abgrenzung<br />
Steuerung der Aufmerksamkeit<br />
PHP World<br />
10. November 2010<br />
02.26
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Infografik<br />
PHP World<br />
10. November 2010<br />
02.27
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Farbe für Funktion<br />
Rückmeldung bei Interaktion des Benutzers<br />
An/Aus Schalter Stereoanlage etc.<br />
Rückmeldung von Position oder Verlauf<br />
Wo bin ich<br />
Wo war ich<br />
Trennung von Inhalts- und Funktionsbereich<br />
-> Gefahr der Verschmelzung<br />
Benutzerführung, Leitsysteme<br />
www.wk.se<br />
www.sat1.de<br />
PHP World<br />
10. November 2010<br />
02.28
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
PHP World<br />
10. November 2010<br />
02.29
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Farbtools:<br />
de-de.colourlovers.com<br />
kuler.adobe.com<br />
www.colorotate.org<br />
www.colorschemedesigner.com<br />
Farben aus Bildern:<br />
www.cssdrive.com<br />
Kommerziell:<br />
www.colorschemer.com<br />
Gute Übersicht:<br />
www.codestorm.de<br />
PHP World<br />
10. November 2010<br />
02.30
02<br />
GESTALTUNGSGRUNDLAGEN - FARBEN<br />
Gestaltungsraster:<br />
Bringen Struktur und Ordnung in die Seite<br />
www.960.gs<br />
www.tapbots.com<br />
www.briterevolution.com<br />
PHP World<br />
10. November 2010<br />
02.31
03<br />
USABILITY<br />
PHP World<br />
10. November 2010
03<br />
USABILITY - DEFINITION<br />
PHP World<br />
10. November 2010<br />
Nutzbarkeit einer Website – Tod dem Anglizismus<br />
Wie gut und wie schnell ist die Nutzung der Website<br />
erfassbar<br />
(Nutzungs-Effizienz)<br />
Im Web von Jakob Nielsen als Begriff eingeführt<br />
Ursprünglich aus der klassischen Software-<br />
Entwicklung<br />
03.01
03<br />
USABILITY TESTING - DEFINITION<br />
PHP World<br />
10. November 2010<br />
03.02
03<br />
USABILITY-TESTING<br />
Ein Definitionsversuch für <strong>Usability</strong>-Testing:<br />
<strong>Usability</strong>-Testing ist ein systematischer Weg,<br />
um aktuelle und potentielle Nutzer einer<br />
Website zu beobachten wie Sie damit unter<br />
kontrollierten Bedingungen arbeiten.<br />
PHP World<br />
10. November 2010<br />
03.03
03<br />
USABILITY TESTING - ZIELE<br />
ZIEL: Möglichst viele <strong>Usability</strong>-Fehler aufzudecken<br />
Der Fokus liegt auf der Nutzbarkeit<br />
Warum überhaupt testen?<br />
Fehler frühzeitig erkennen bevor ein Release erfolgt<br />
Unterschiedliche Designs testen<br />
Überarbeitetes Design testen<br />
Finanzieller Aspekt bei z.B. Shops<br />
Testen bei akuten Problemen<br />
PHP World<br />
10. November 2010<br />
03.04
03<br />
USABILITY TESTING – EIN MINI-QUIZ<br />
PHP World<br />
10. November 2010<br />
03.05
03<br />
USABILITY - STANDARDS<br />
PHP World<br />
10. November 2010<br />
Nicht wirklich standardisiert – oftmals unsinnige Regeln z.B. in<br />
Ausschreibungen<br />
Allerdings gibt es einige Regelsätze, die recht interessant sind,<br />
z.B. EN ISO 9241-110 mit sieben Grundsätzen für Dialoge:<br />
Aufgabenangemessenheit<br />
Selbstbeschreibungsfähigkeit<br />
Erwartungskonformität<br />
Fehlertoleranz<br />
Steuerbarkeit<br />
Individualisierbarkeit<br />
Lernförderlichkeit<br />
Ansonsten entscheiden die <strong>Usability</strong>-Konventionen – das heißt<br />
die gelebte Praxis<br />
03.06
03<br />
USABILITY – WIE ÄUSSERN SICH FEHLER<br />
<strong>Usability</strong>-Fehler äußern sich meist subjektiv: Das Empfinden<br />
einer Website wird schlechter<br />
<strong>Usability</strong>-Fehler stellt man mit <strong>Usability</strong>-Testing fest – besser<br />
vermeidet man sie aber von Anfang an<br />
Fehler<br />
hindern Nutzer beim Finden von Informationen<br />
erschweren oder beenden Eingabeprozesse und Kontaktaufnahme<br />
sorgen für negative Assoziationen gegenüber einer Website oder Marke<br />
PHP World<br />
10. November 2010<br />
03.07
04<br />
FUNKTIONALES<br />
WEBDESIGN<br />
PHP World<br />
10. November 2010
04<br />
DIE HERAUSFORDERUNG<br />
Gestaltung gut aussehender und gut<br />
funktionierender Websites<br />
Optimierung bestehender Websites<br />
Aussehen + Leistung =<br />
Funktion + Design (+ Emotion) =<br />
Nutzererfahrung<br />
PHP World<br />
10. November 2010<br />
04.01
04<br />
METHODEN<br />
Entwicklungsorientiert<br />
Anforderungsmanagement<br />
Screens – in einem Schritt<br />
Implementierung<br />
Design funktioniert nicht<br />
Designorientiert<br />
Workshop<br />
Kreative Phase<br />
Workshop 2<br />
Finale Illustration<br />
Implementierung<br />
Implementierung für das Design funktioniert nicht<br />
PHP World<br />
10. November 2010<br />
04.02
04<br />
FUNCTIONAL WEB DESIGN<br />
Das Hauptziel ist: eine interaktive Form erlauben<br />
dem Nutzer eine bestmögliche Erfahrung<br />
Um das zu erreichen, was wir integrieren müssen:<br />
Entwickler und Gestalter<br />
Optik und Screendesign mit funktionalen<br />
Entscheidungen und Prozessen<br />
Emotionen und Benutzerfreundlichkeit<br />
PHP World<br />
10. November 2010<br />
04.03
04<br />
FUNKTIONALES WEB DESIGN-<br />
ENTSTEHUNG<br />
Der Beginn ist die sichtbare Identität sowie die<br />
Nutzererfahrung, die eine Website bzw. ein<br />
Unternehmen im Web erreichen möchte<br />
Die visuelle Identität sowie die Nutzererfahrung<br />
werden durch folgende Punkte erreicht:<br />
Die Zielgruppe<br />
Kommunikation und Marketing-Ziele<br />
Andere Ziele wie z.B. Konversionsrate<br />
Corporate Identity<br />
Emotionen<br />
Ideen<br />
PHP World<br />
10. November 2010<br />
04.04
04<br />
FUNKTIONALES WEB DESIGN-<br />
ENTSTEHUNG<br />
PHP World<br />
10. November 2010<br />
Am Anfang sollten Sie jede Information beachten, die Sie<br />
bekommen können:<br />
Die potentiellen Nutzer<br />
Statistiken der „alten“ Webanwendungen (sofern es welche<br />
gibt)<br />
Benutzerfreundlichkeit und Nutzererfahrung<br />
Konkurrenzbeobachtung<br />
etc.<br />
Das Ergebnis auf einer Seite schriftlich fixieren:<br />
Zielgruppe (n)<br />
Kommunikationsziele<br />
Das Hauptaugenmerk der Website<br />
Jeder Projektteilnehmer sollte diese Punkte kennen:<br />
Führungskräfte<br />
Entscheider<br />
Gestalter<br />
Entwickler<br />
04.05
04<br />
FUNKTIONALES WEB DESIGN- TEILE<br />
PHP World<br />
10. November 2010<br />
04.06
04<br />
FUNKTIONALES WEB DESIGN- TEILE<br />
PHP World<br />
10. November 2010<br />
(Funktionale) Struktur<br />
Regeln, Richtlinien und Erfahrungen von Nutzern<br />
und Experten<br />
Vorgehensmodell und Werkzeuge<br />
(Funktionaler) Prozess<br />
Regeln, Richtlinien und Erfahrungen von Nutzern<br />
und Experten<br />
Vorgehensweise und Werkzeuge<br />
(Funktionales) Design<br />
Regeln, Richtlinien und Erfahrungen von Nutzern<br />
und Experten<br />
Vorgehensweise und Werkzeuge<br />
04.07
04<br />
(FUNKTIONALE) STRUKTUR- DIE WICHTIGSTEN<br />
PUNKTE<br />
Gestaltung der Seitenstruktur<br />
Strukturierung der Hierarchie<br />
Inhaltsstrukturierung<br />
PHP World<br />
10. November 2010<br />
04.08
04<br />
(FUNKTIONALE) STRUKTUR- SEITENSTRUKTUR-<br />
IDEEN<br />
PHP World<br />
10. November 2010<br />
04.09
04<br />
(FUNKTIONALE) STRUKTUR- MODULARE<br />
INHALTSSTRUKTUR<br />
PHP World<br />
10. November 2010<br />
04.10
04<br />
(FUNKTIONALE) STRUKTUR- STRUKTURIERUNG DER<br />
HIERARCHIE<br />
PHP World<br />
10. November 2010<br />
04.11
04<br />
(FUNKTIONALE) STRUKTUR- MODULARE<br />
INHALTSSTRUKTUR<br />
PHP World<br />
10. November 2010<br />
04.12
04<br />
(FUNKTIONALE) STRUKTUR- MODULARE<br />
INHALTSSTRUKTUR<br />
PHP World<br />
10. November 2010<br />
04.13
04<br />
(FUNKTIONALE) STRUKTUR- REGELN UND<br />
RICHTLINIEN<br />
Interne Regeln und Richtlinien:<br />
In manchen Fällen beinhaltet die Corporate<br />
Identity Regeln für die Positionierung des<br />
Logos/Navigation. Dies ist gewöhnlich nicht von<br />
Vorteil.<br />
In Anbetracht der Wichtigkeit unterscheiden sich<br />
der externe und der interne Blickwinkel – “Über<br />
das Unternehmen”<br />
Externe Regeln und Richtlinien:<br />
Die beste Position für die Hauptnavigation ist am<br />
Anfang oder auf der linken Seite<br />
PHP World<br />
10. November 2010<br />
04.14
04<br />
(FUNKTIONALE) STRUKTUR- VORGEHENSMODELL UND<br />
WERKZEUGE<br />
Vorgehensmodell:<br />
Ein interaktiver und interativer Prozess<br />
Interaktion von Entscheidern und Kunden?<br />
Werkzeuge:<br />
Inhalte zusammentragen und die Wichtigkeit einschätzen<br />
Skizzen<br />
Wichtig, um die ersten Fragen zu klären<br />
Wireframing (=“Drahtgitter“)<br />
PHP World<br />
10. November 2010<br />
04.15
04<br />
(FUNKTIONALE) STRUKTUR- SKIZZEN<br />
PHP World<br />
10. November 2010<br />
04.16
04<br />
(FUNKTIONALE) STRUKTUR- SKIZZEN-INTERAKTIVER<br />
PROZESS<br />
PHP World<br />
10. November 2010<br />
04.17
04<br />
(FUNKTIONALE) STRUKTUR- WIREFRAMES<br />
(„DRAHTGITTER“)<br />
PHP World<br />
10. November 2010<br />
04.18
04<br />
(FUNKTIONALE) STRUKTUR- WIREFRAMES –SCHRITT 2<br />
PHP World<br />
10. November 2010<br />
04.19
04<br />
(FUNKTIONALER) PROZESS<br />
Sie müssen über alle Prozesse mit einer Nutzer<br />
Interaktion nachdenken<br />
Die Navigation ist der Punkt, wo Prozess und<br />
Struktur aufeinandertreffen<br />
Sie müssen alle Prozesse und alle notwendigen<br />
Benutzerschnittstellen in die modulare Struktur<br />
integrieren<br />
PHP World<br />
10. November 2010<br />
04.20
04<br />
(FUNKTIONALE) STRUKTUR - PROZESSE<br />
PHP World<br />
10. November 2010<br />
04.21
04<br />
(FUNKTIONALER) PROZESS – REGELN UND<br />
RICHTLINIEN<br />
Interne Regeln und Richtlinien:<br />
Technische Grenzen – welche Prozesse sind<br />
möglich?<br />
Externe Regeln und Richtlinien:<br />
Ein Nutzer muss die Möglichkeit haben, den<br />
Prozess abzubrechen<br />
PHP World<br />
10. November 2010<br />
04.22
04<br />
(FUNKTIONALER) PROZESS – VORGEHENSMODELL UND<br />
WERKZEUGE<br />
Vorgehensmodell:<br />
Ein interaktiver und iterativer Prozess<br />
Prototyp und Nutzer-Tests helfen<br />
Entwickler und Gestalter müssen interagieren<br />
Werkzeuge:<br />
Flowcharts<br />
Prüfung in der Seitenstruktur<br />
Prozessbeschreibung in Skizzen<br />
PHP World<br />
10. November 2010<br />
04.23
04<br />
(FUNKTIONALE) STRUKTUR– PROZESSE UND STRUKTUR<br />
PHP World<br />
10. November 2010<br />
04.24
04<br />
(FUNKTIONALE) STRUKTUR– PROZESSE UND<br />
STRUKTUR<br />
PHP World<br />
10. November 2010<br />
04.25
04<br />
(FUNKTIONALE) GESTALTUNG<br />
Die Gestaltung ist für alle grafischen Entscheidungen<br />
verantwortlich<br />
Die Gestaltung sorgt für das finale Design<br />
PHP World<br />
10. November 2010<br />
04.26
04<br />
(FUNKTIONALE) GESTALTUNG<br />
PHP World<br />
10. November 2010<br />
04.27
04<br />
(FUNKTIONALE) GESTALTUNG<br />
PHP World<br />
10. November 2010<br />
04.28
04<br />
(FUNKTIONALE) GESTALTUNG – REGELN UND RICHTLINIEN<br />
Interne Regeln und Richtlinien:<br />
Corporate Identity<br />
Logo, Farben ... vertrauen Sie nicht jeder internen<br />
Regel<br />
Externe Regeln und Richtlinien:<br />
Vorgaben für Farben, Typographie, Kontrast etc.<br />
Trends<br />
Spezielles Aussehen<br />
Zugänglichkeit der Richtlinien<br />
PHP World<br />
10. November 2010<br />
04.29
04<br />
(FUNKTIONALE) GESTALTUNG – REGELN UND RICHTLINIEN -<br />
FARBEN<br />
Wie viele Farben sollen verwendet werden?<br />
Welche Art von Farbe?<br />
Farbe als Farbe<br />
Farbe als Funktion<br />
Farbe als Aktion<br />
Umfangreiches Farbsystem und<br />
Farbcodierung<br />
Trends<br />
Farbauswirkung in den verschiedenen<br />
Kulturen<br />
PHP World<br />
10. November 2010<br />
04.30
04<br />
(FUNKTIONALE) GESTALTUNG – REGELN UND RICHTLINIEN -<br />
TYPO<br />
Mit HTML/CSS können Sie nur Systemschriften<br />
benutzen<br />
Aber es gibt viele Möglichkeiten:<br />
Majuscule/Small Caps<br />
Größe<br />
Farbe<br />
Bold und italic<br />
Links<br />
PHP World<br />
10. November 2010<br />
04.31
04<br />
(FUNKTIONALE) GESTALTUNG – REGELN UND RICHTLINIEN -<br />
TYPO<br />
PHP World<br />
10. November 2010<br />
04.32
04<br />
(FUNKTIONALE) GESTALTUNG – VORGEHENSMODELL UND<br />
WERKZEUGE<br />
Vorgehensmodell:<br />
Bevor die Stuktur bereit ist, beginnen Sie mit<br />
„Mood Boards“ etc.<br />
Bestimmen Sie Farben und zentrale<br />
Designelemente<br />
Entscheiden Sie über die Stil von Bildern und<br />
graphischen Elementen (icons etc.)<br />
Nach der Festlegung von Struktur und Prozess,<br />
beginnen Sie mit dem Layout<br />
PHP World<br />
10. November 2010<br />
04.33
04<br />
(FUNKTIONALE) GESTALTUNG – VORGEHENSMODELL UND<br />
WERKZEUGE<br />
Gestalten Sie alle<br />
Botschaften für den<br />
Nutzer<br />
Benutzen Sie den<br />
Prozess der Analyse<br />
um die Vielfalt der<br />
Botschaften zu<br />
vermitteln<br />
PHP World<br />
10. November 2010<br />
04.34
04<br />
(FUNKTIONALE) GESTALTUNG – VORGEHENSMODELL UND<br />
WERKZEUGE<br />
Werkzeuge:<br />
„Mood Board“<br />
Gittersysteme<br />
Flexibel<br />
Ausdehnbar<br />
Mehr als Säulen<br />
Kontrastprüfer, Farbprüfer<br />
Accessibility Tests<br />
PHP World<br />
10. November 2010<br />
04.35
Moodboard<br />
<strong>Tobias</strong> <strong>Hauser</strong> | Web 2.0-Design<br />
8181<br />
81
04<br />
(FUNKTIONALE) GESTALTUNG –<br />
GITTERSYSTEME<br />
PHP World<br />
10. November 2010<br />
04.37
05<br />
USABILITY<br />
ENTSCHEIDENDE<br />
BEREICHE<br />
PHP World<br />
10. November 2010
05<br />
USABILITY – ENTSCHEIDENDE BEREICHE<br />
Die Navigation, da sie für die <strong>Usability</strong><br />
entscheidend ist<br />
Formulare, die die Schnittstelle zu den Nutzern<br />
bildet<br />
Texte, die wichtige Erläuterungen enthalten<br />
Fehlermeldungen<br />
Animationen, Laufschriften, Bilder und Effekte<br />
PHP World<br />
10. November 2010<br />
05.01
05<br />
USABILITY – NAVIGATION<br />
Klare Struktur, wenige<br />
Punkte und immer wissen,<br />
wo man ist ...<br />
Komplexe Seiten dürfen<br />
mehr als zehn<br />
Navigationspunkte haben<br />
Eine Navigation muss<br />
nicht mehr klassisch<br />
sein –<br />
Reduktion auf das<br />
Wesentliche<br />
PHP World<br />
10. November 2010<br />
05.02
05<br />
USABILITY – KOMPLEXE NAVIGATION<br />
Komplexe Inhalte<br />
erfordern Struktur<br />
Die 7 Chunks-Regel<br />
zieht nicht<br />
„Konzept der<br />
Wichtigkeit“<br />
Oft sind komplexe<br />
Inhalte nach Themen<br />
organisiert, die dem<br />
Firmendenken<br />
entsprechen<br />
PHP World<br />
10. November 2010<br />
05.03
05<br />
USABILITY – KOMPLEXE NAVIGATION<br />
Navigationshilfen<br />
helfen<br />
Breadcrump und<br />
Sitemap bieten<br />
PHP World<br />
10. November 2010<br />
05.04
05<br />
USABILITY – SUCHE<br />
Viele Nutzer sind weniger Klicker und mehr<br />
Sucher<br />
Suche sollte sinnvolle Ergebnisse liefern<br />
Suche ist aufwändig – auf manchen<br />
Websites erreicht sie nicht alle Bereiche<br />
PHP World<br />
10. November 2010<br />
05.05
05<br />
USABILITY – NAVIGATION<br />
Erklärungen in Navigationen sollten<br />
sinnvoll sein<br />
Gewagt, aber für den Einsatzzweck<br />
geeignet<br />
PHP World<br />
24./25.. Juni 2010<br />
05.06
05<br />
USABILITY – NAVIGATIONSBEISPIELE<br />
PHP World<br />
10. November 2010<br />
05.07
05<br />
USABILITY – NAVIGATIONSBEISPIELE<br />
PHP World<br />
10. November 2010<br />
05.08
05<br />
USABILITY – NAVIGATIONSBEISPIELE<br />
PHP World<br />
10. November 2010<br />
05.09
05<br />
USABILITY – NAVIGATIONSBEISPIELE<br />
PHP World<br />
10. November 2010<br />
05.10
05<br />
USABILITY – NAVIGATIONSBEISPIELE<br />
PHP World<br />
10. November 2010<br />
05.11
05<br />
USABILITY – NAVIGATIONSBEISPIELE<br />
PHP World<br />
10. November 2010<br />
05.12
05<br />
USABILITY – NAVIGATIONSBEISPIELE<br />
PHP World<br />
10. November 2010<br />
05.13
05<br />
USABILITY – BREADCRUMB<br />
Breadcrumbs dienen zum Verstehen von<br />
Hierarchie<br />
Allerdings ist sehr umstritten wie wichtig<br />
dieses Verständnis ist!<br />
Entscheidend für den Erfolg ist die Position<br />
der Breadcrumb<br />
Idealerweise bildet sie eine Einheit mit<br />
Hauptüberschrift und Navigation!<br />
PHP World<br />
10. November 2010<br />
05.14
05<br />
USABILITY – FORMULARE + SHOP<br />
Wichtig:<br />
Abstände zwischen Schaltflächen (Vorsicht bei Reset)<br />
Besser sichtbare Kontrollkästchen als komplexe Listen<br />
Mandatorische Felder ausfüllen<br />
Sinnvolle Vollständigkeitsüberprüfung<br />
Bei vielen Schritten Übersicht anzeigen<br />
Gute Seite, aber grau als aktiv<br />
ist nicht optimal:<br />
Speichern ist für einen<br />
Bestellprozess nicht optimal –<br />
Verlaufsgrafiken aber schon<br />
PHP World<br />
10. November 2010<br />
05.15
05<br />
USABILITY – FORMULARE + SHOP<br />
PHP World<br />
10. November 2010<br />
05.16
05<br />
USABILITY – FORMULARE + SHOP<br />
PHP World<br />
10. November 2010<br />
05.17
05<br />
USABILITY – FORMULARE + SHOP<br />
PHP World<br />
10. November 2010<br />
05.18
05<br />
USABILITY – RATESPIEL<br />
Welches Produkt<br />
kauft der (arme)<br />
Kunde?<br />
Zusatzfragen: wie<br />
viele Fragen<br />
musste er<br />
durchgehen?<br />
Wie könnte er<br />
das vermeiden?<br />
PHP World<br />
10. November 2010<br />
05.19
05<br />
USABILITY – FORMULARE UND SHOP<br />
PHP World<br />
10. November 2010<br />
05.20
05<br />
USABILITY – FORMULARE UND SHOP<br />
PHP World<br />
10. November 2010<br />
05.21
05<br />
USABILITY – TEXT<br />
Text muss vor allem gut lesbar sein:<br />
Farbkontrast<br />
Schriftgröße<br />
Schriftart (serifenlos)<br />
Vorsicht bei festen Schriftgrößen in CSS.<br />
sie lassen sich im Internet Explorer nicht<br />
vergrößern – evtl. selbst Vergrößerung anbieten<br />
Welches Produkt kauft der (arme) Kunde?<br />
In diesen Bereich fällt auch die Diskussion um fixes<br />
oder flexibles Layout<br />
Accessibility nicht vergessen!<br />
PHP World<br />
10. November 2010<br />
05.22
05<br />
USABILITY – TEXT<br />
PHP World<br />
10. November 2010<br />
05.23
05<br />
USABILITY – TEXT<br />
Text muss orthographisch korrekt sein<br />
Text darf nicht zu technisch sein<br />
Text muss informativ sein<br />
Text muss auf die Zielgruppe<br />
zugeschnitten sein<br />
Aus Kundensicht denken<br />
PHP World<br />
10. November 2010<br />
05.24
05<br />
USABILITY – TEXT<br />
PHP World<br />
10. November 2010<br />
05.25
05<br />
USABILITY – TEXT<br />
PHP World<br />
10. November 2010<br />
05.26
05<br />
USABILITY – TEXT<br />
Werbung ist schön und gut, aber sie sollte nicht<br />
den Text überlappen<br />
Und wenn, muss sie natürlich schließbar sein!<br />
PHP World<br />
10. November 2010<br />
05.27
05<br />
USABILITY – TEXT<br />
Fehler können passieren …<br />
Allerdings sollte man das ordentlich kommunizieren<br />
Sicherheit und <strong>Usability</strong>: Technische Fehlermeldungen sind<br />
zu meiden …<br />
PHP World<br />
10. November 2010<br />
05.28
05<br />
USABILITY - TEXT<br />
Text kann auch missverständlich sein …<br />
PHP World<br />
10. November 2010<br />
05.29
05<br />
USABILITY – RATESPIEL<br />
PHP World<br />
10. November 2010<br />
05.30
05<br />
USABILITY – FEHLERMELDUNGEN<br />
PHP World<br />
10. November 2010<br />
05.31
05<br />
USABILITY – FEHLERMELDUNGEN<br />
PHP World<br />
10. November 2010<br />
05.32
05<br />
USABILITY – FEHLERMELDUNGEN<br />
PHP World<br />
10. November 2010<br />
05.33
05<br />
USABILITY – ANIMATIONEN ETC.<br />
Laufschriften: Nein! Wirklich nicht? Nein!<br />
Banner: Vorsichtig und nicht so, dass sie der arme Nutzer<br />
nicht schließen kann.<br />
Kontextorientierte Werbung: Wenns nach uns geht, nein!<br />
Popups: Nur bei ganz sinnigen Sachen (Druckansicht)<br />
Animationen: Kontrolliert. Wir sind keine Flash-Gegner.<br />
PHP World<br />
10. November 2010<br />
05.34
05<br />
USABILITY – MODERNE ELEMENTE<br />
Ob Accordeon oder Suggest, moderne<br />
Elemente machen Websites übersichtlicher<br />
Aber: Es sollte auch ohne funktionieren!<br />
Der Teufel steckt im Detail!<br />
PHP World<br />
10. November 2010<br />
05.35
06<br />
USABILITY<br />
TESTING<br />
PHP World<br />
10. November 2010
06<br />
USABILITY – METHODEN<br />
Statistiken und Klickpfade<br />
Expertenbeurteilung<br />
Eyetracking<br />
a/b-Tests<br />
Tests mit Nutzern<br />
PHP World<br />
10. November 2010<br />
06.01
06<br />
USABILITY – STATISTIKEN UND KLICKPFADE<br />
Begehrte und nie erreichte Seiten<br />
Uhrzeiten<br />
Wochentage<br />
Browser<br />
Evtl. gar Klickpfade<br />
Klickhäufigkeiten<br />
Daten aus Online-Befragungen oder<br />
Kontaktformularen (Vorsicht ...)<br />
-> eigene Meinungen zählen nicht!!!<br />
PHP World<br />
10. November 2010<br />
06.02
06<br />
USABILITY – KLICKHÄUFIGKEITEN- BEISPIEL<br />
PHP World<br />
10. November 2010<br />
06.03
06<br />
USABILITY – KLICKHÄUFIGKEITEN- BEISPIEL<br />
PHP World<br />
10. November 2010<br />
06.04
06<br />
USABILITY – STATISTIKEN UND KLICKPFADE -<br />
FAZIT<br />
Pro:<br />
Sehr einfach auszuwerten, wenn Daten vorhanden<br />
Basisdaten oft einfach verfügbar<br />
Sollten auch bei <strong>Usability</strong>-Tests als Basisinformation<br />
vorliegen<br />
Contra:<br />
Teilweise sind Statistikergebnisse selbsterfüllende<br />
Prophezeiungen<br />
Abhängigkeit von Faktoren wie SEO sehr hoch<br />
Das Nutzerverhalten ist kaum ablesbar<br />
Implementierung in interaktive Anwendungen u.U.<br />
aufwändig<br />
PHP World<br />
10. November 2010<br />
06.05
06<br />
USABILITY – DER NUTZERTEST - TESTARTEN<br />
Testen "nur mal so" oder auch offiziell.<br />
Formelle Test<br />
Ziel: Wissen, wie der Proband denkt, das das Interface<br />
aufgebaut ist.<br />
sehr interaktiv<br />
soll Alternative aufzeigen<br />
Verstehen was passiert.<br />
Benchmark Test<br />
zum Optimieren von Prozessen<br />
Vergleichstest<br />
Mehrere Seiten werden verglichen, z.B. altes und neues<br />
Design<br />
PHP World<br />
10. November 2010<br />
06.06
06<br />
USABILITY – TESTZIEL<br />
Tests sollten nicht überfrachtet werden!<br />
Beispiel: Zentrale Navigation und<br />
Darstellung/Lesbarkeit des Inhalts erscheinen<br />
jeweils nicht optimal<br />
Erst eine der beiden Sachen testen und<br />
beheben<br />
Ziel schriftlich ausformulieren<br />
Nach jedem Test das Testziel überprüfen<br />
PHP World<br />
10. November 2010<br />
06.07
06<br />
USABILITY – BEIPSIEL – EIN ERSTER EINDRUCK<br />
PHP World<br />
10. November 2010<br />
06.08
06<br />
USABILITY – ORT<br />
Beim Probanden<br />
Pro:<br />
Gewohnte Umgebung für den Probanden<br />
Keine Anreisekosten für den Probanden<br />
Contra:<br />
Schwer zu beeinflussen<br />
Evtl. unruhig<br />
Aufbau unter unbekannten Bedingungen oft schwierig<br />
Zeitintensiv<br />
Im Labor<br />
Pro:<br />
Kontrollierte Umgebung, Aufbau einfach<br />
Zeitsparend bei kluger Terminvereinbarung<br />
Ziel schriftlich ausformulieren<br />
Contra:<br />
Oft zu steril, Probanden fühlen sich unwohl<br />
Anreisekosten<br />
PHP World<br />
10. November 2010<br />
06.09
06<br />
USABILITY – ORT<br />
Remote (Proxy –Test)<br />
Pro:<br />
Sehr wenig Aufwand<br />
Contra:<br />
Kein echtes Screenrecording<br />
Korrekturen durch Moderator nicht möglich<br />
Technisch evtl. Aufwändig<br />
Empfehlung:<br />
In den meisten Fällen ist ein Mittelweg zwischen “beim<br />
Probanden” und “Labor” optimal – ruhiger Raum,<br />
abgeschlossener Bereich, aber keine Arzt-Atmoshpäre<br />
PHP World<br />
10. November 2010<br />
06.10
06<br />
USABILITY – TESTABLAUF<br />
Wie läuft so ein Test ab:<br />
Begrüßung der Testpersonen<br />
Die Testpersonen sollten sich wohlfühlen.<br />
Keine angespannte Situation wie beim Arzt<br />
Erklärung des Testablaufs<br />
Führen des Probanden durch den Test<br />
Aufnahme der Testdaten<br />
Nachgespräch mit dem Probanden<br />
PHP World<br />
10. November 2010<br />
06.11
06<br />
USABILITY – TESTSITUATION<br />
PHP World<br />
10. November 2010<br />
06.12
06<br />
USABILITY – SETUP<br />
Die Ersteinrichtung erfordert ein wenig Zeit<br />
Was zu tun ist:<br />
Stuhl und Tisch<br />
Wichtig: Bequem!<br />
Computer herrichten<br />
Wichtig: Angenehme Maus! Evtl. Mehrere vorhalten<br />
Screenrecording-Software einrichten und testen<br />
Evtl. Beobachtungscomputer/-monitor einrichten und<br />
testen<br />
Moderator sollte Unterlagen/Fragebögen/Protokoll<br />
bereitlegen<br />
Kamera aufstellen und ausrichten (optional) – Wichtig:<br />
Genehmigung der Nutzer einholen, wenn sie gefilmt<br />
werden!<br />
PHP World<br />
10. November 2010<br />
06.13
06<br />
USABILITY - FRAGEBOGEN<br />
Grundsätzlich unterscheidet man Tests mit und<br />
ohne Aufgaben<br />
Abhängig ist das vom Reifegrad der Software<br />
(Entwurf, Prototyp, “fertige” Website)<br />
Bei stark interaktiver Software ist ein “freier” Teil<br />
sehr empfehlenswert<br />
Bei einer Website ohne Aufgaben muss nur der<br />
Moderator seine Fragen vorbereiten<br />
PHP World<br />
10. November 2010<br />
06.14
06<br />
USABILITY - FRAGEBOGEN – EIN BEISPIEL<br />
1. Betreff: Kursabfrage, Kurslisten<br />
Aufgaben zu 1:<br />
a. Suchen Sie für CARL ZEISS MEDITEC AG Aktien (WKN<br />
531370) den aktuellen Kurs Grundsätzlich unterscheidet<br />
man Tests mit und ohne Aufgaben<br />
b. Suchen Sie die EURO STOXX 50 Kurslisten.<br />
c. War es für Sie schwierig die Suche zu finden?<br />
o Ja. o Nein.<br />
Wenn ja, warum?<br />
PHP World<br />
10. November 2010<br />
06.15
06<br />
USABILITY - FRAGEBOGEN – EIN BEISPIEL MIT<br />
VIDEO<br />
PHP World<br />
10. November 2010<br />
06.16
06<br />
USABILITY - SOFTWARE ZUR UNTERSTÜTZUNG<br />
Sinnvoll ist es, den Screen aufzunehmen<br />
Dafür eignen sich Screenrecorder wie TechSmith Camtasia<br />
Wer mehr Eingriffsmöglichkeiten haben möchte, greift zu<br />
einer Spezialsoftware wie TechSmith Morae<br />
Pro:<br />
<strong>Usability</strong>-Test lässt sich live mitverfolgen – Moderator<br />
muss nicht im selben Raum sein<br />
<strong>Usability</strong>-Video lässt sich live mit Markierungen<br />
versehen – stark vereinfachte Auswertung<br />
Spezielle Auswertungssoftware für Screenvideo gleich<br />
mitgeliefert<br />
Contra:<br />
Kosten für wenige Tests zu hoch (ca. 1500 $)<br />
PHP World<br />
10. November 2010<br />
06.17
06<br />
USABILITY - TESTPROTOKOLL<br />
Der Moderator oder ein Beobachter erstellt das<br />
Testprotokoll<br />
Beliebt ist das Vorgehen des “lauten Denkens”<br />
Je nach eingesetzter Software kann auch darüber<br />
protokolliert werden<br />
-> ideal ist eine direkte Verbindung mit dem Video<br />
PHP World<br />
10. November 2010<br />
06.18
06<br />
USABILITY - ROLLEN<br />
Probanden<br />
Moderator<br />
Beobachter<br />
PHP World<br />
10. November 2010<br />
06.19
06<br />
USABILITY - PROBANDEN<br />
Der Proband ist ein Experte!<br />
Die meisten Probanden sind motiviert und<br />
neugierig<br />
Aber: Die selben Probanden sollten nicht allzu oft<br />
verwendet werden (außer bei Testreihen)<br />
PHP World<br />
10. November 2010<br />
06.20
06<br />
USABILITY - PROBANDEN WÄHLEN<br />
Vermeiden Sie Nutzertests mit Leuten aus der eigenen<br />
Firma!<br />
(außer bei schnellen Tests zwischendurch)<br />
Wählen Sie aus der Zielgruppe einige Nutzer – Basis ist eine<br />
(einfache) Zielgruppenanalyse<br />
Die Größe der Nutzergruppe richtet sich nach dem<br />
Geldbeutel<br />
Besser weniger Nutzer und mehr Tests<br />
Ab dem 3ten Nutzer gibt es Resultate<br />
4-5 Nutzer produzieren schon ordentliche Ergebnisse<br />
Ab dem 8ten Nutzer sinkt die Effizienz stark<br />
Ist die Zielgruppe eng begrenzt, bitten Sie zwei oder drei<br />
Referenzkunden und mischen Sie ansonsten ähnlich<br />
„denkende“ Nutzer dazu<br />
PHP World<br />
10. November 2010<br />
06.21
06<br />
USABILITY - DER MODERATOR<br />
Moderation und Leitung des Tests<br />
Die Meinung des Probanden ist wichtig!<br />
Interaktion des Moderators auf Grundlage des Tests sollte<br />
überlegt werden<br />
Moderator ist ein neutraler Beobachter<br />
Jeder Proband sollte gleiche Bedingungen vom Moderator<br />
bekommen<br />
Selbstreflektion<br />
Kontrollierte Informationsausgabe!<br />
PHP World<br />
10. November 2010<br />
06.22
06<br />
USABILITY - DER BEOBACHTER<br />
Im einfachsten Setup reicht es aus, wenn der<br />
Moderator auch Beobachter ist<br />
Beobachter können aber auch alle Mitglieder des<br />
Design- und Entwicklungsteams sein<br />
Auch Führungskräfte profitieren von der<br />
Beobachtung -> und weitere Tests lassen sich<br />
damit leichter argumentieren<br />
PHP World<br />
10. November 2010<br />
06.23
06<br />
USABILITY - NUTZERBEOBACHTUNG – ZENTRALE FRAGEN<br />
Scheitert der Nutzer bei der Nutzung der Website?<br />
Macht er bei der Bearbeitung Fehler?<br />
Tipp: sie sollten per Beobachtung festgehalten<br />
werden<br />
Wie lange benötigt der Nutzer für die Abarbeitung?<br />
Wenn Sie dem Nutzer Aufgaben stellen, sollten<br />
Sie die Zeit mitstoppen<br />
Benötigt er während der Nutzung Hilfe?<br />
In welcher Reihenfolge beobachtet er?<br />
Wie gefällt dem Nutzer die Seite?<br />
Tipp: Hier bietet sich eine Befragung des<br />
Nutzers an<br />
PHP World<br />
10. November 2010<br />
06.24
06<br />
USABILITY - NUTZERBEOBACHTUNG – AUFNAHME UND<br />
AUSWERTUNG<br />
Das wichtigste Vehikel ist das Testprotokoll<br />
Nachbearbeitung der aufgenommenen Videos ist<br />
aufwändig – hier vor allem “Highlights”<br />
herausgreifen<br />
Fragebögen müssen ausgewertet werden<br />
Generell: Je einfacher desto besser!<br />
PHP World<br />
10. November 2010<br />
06.25
06<br />
USABILITY - NUTZERBEOBACHTUNG – AUFNAHME UND<br />
AUSWERTUNG<br />
Nutzertest Boerse-Online Stand: 19.02.2007<br />
17.02.2007 10:30 17.02.2007 11:15 17.02.2007 12:30<br />
Probant 1 Probant 2 Probant 3<br />
Aufgabe/Frage Typ Antwort Bemerkung Antwort Bemerkung Antwort Bemerkung<br />
1<br />
1.1. A bestanden bestanden Kein Textfeld für WKN bestanden<br />
1.2. A bestanden bestanden Übersicht verschiedener Indices<br />
gefunden. Kursliste nicht anklickbar.<br />
bestanden<br />
1.3. F Nein nicht vertraut mit "Kurslisten",<br />
Seite ziemlich voll<br />
Ja siehe auch 1.2. Nein<br />
1.4. F ok ok ok<br />
1.5. F zu klein zu klein ok<br />
2<br />
2.1. A bestanden "Suchen" zu klein/zu unauffällig schwierig bestanden Return Taste funktioniert nicht<br />
nach Popup<br />
2.2. A bestanden nicht<br />
bestanden<br />
bestanden Untermenü schwer zu finden<br />
2.3. F gleichgeste<br />
llt<br />
weil gleiche Farbe gleichgestell<br />
t<br />
gleichgestell<br />
t<br />
gleiche Aufmachung: Farbe,<br />
Abmessung<br />
2.4. F Nein zwar gleiche Farbe, aber nicht Nein Ja. Aber erst nach anklicken des<br />
direkt dran<br />
Überpunktes<br />
2.5. F gut schlecht schlecht für Unerfahrene: finden kopfleiste<br />
später nicht mehr<br />
2.6. F Nein! Nein Nein zu klein<br />
3<br />
3.1. A teilw.<br />
Bestanden<br />
3.2. A nicht<br />
bestanden<br />
4<br />
4.1. A nicht<br />
bestanden<br />
Umsatz gefunden, keine<br />
Prozentangabe<br />
bestanden IR-Menüpunkt unklar<br />
bestanden es war nicht zu sehen, dass<br />
Interview aus 2 Seiten besteht<br />
bestanden unübersichtlich. Spiel kein<br />
visuelles Feedback ob Frage<br />
richtig oder falsch<br />
4.2. F b) (Werbung) – b), d) d) erfahrungsgemäß<br />
4.3. A/F 5 – 4 Bilder sollten auch verlinkt sein<br />
5<br />
5.1. F Nein zu viel/ zu unübersichtlich -> an<br />
wen richtet sich die Seite?<br />
5.2. F Nein Jein. Ich kann mich damit<br />
zurecht finden, aber sie ist mir<br />
zu voll.<br />
– Nein zu viele Funktionen auf einmal<br />
und Informationen<br />
– Nein s.5.1. Nervig und ablenkend sind<br />
vor allem das eingblendete<br />
Infoband (unterhalb der Indices)<br />
und die "Werbung" oben rechts<br />
mit Wechselbildern<br />
5.3. F zu klein angenehm angenehm allerdings Buttons mit Login, Go,<br />
Passwort usw. schlecht lesbar<br />
5.4. F gedrängt angenehm angenehm<br />
5.5. F schlecht zu viel Schrift -> wirkt<br />
abschreckend<br />
– schlecht overflow von Infos, wenn diese<br />
als Navigationshilfe dienen soll,<br />
dann sollten die Buttons<br />
selbsterklärend sein bzw. mit 1-3<br />
Worten treffend bez. Werden<br />
5.6. F Nein Manager Magazin<br />
Sonstiges Aktien Analyser: nur deutsche<br />
Titel<br />
Legende: F=Frage<br />
A=Aufgabe<br />
PHP World<br />
10. November 2010<br />
06.26
06<br />
USABILITY - NUTZERTESTS – EXPERTENBEURTEILUNG - FAZIT<br />
Pro:<br />
Umfangreiche Ergebnisse<br />
Das Innenleben des Nutzers wird transparent (vor allem<br />
beim lauten Denken)<br />
Detailfragen können über Aufgaben/Fragebogen sehr<br />
präzise abgefangen werden<br />
Expertenwissen ist zwar gut, aber nicht entscheidend<br />
Besser Tests alleine durchführen, auch wenn ein<br />
Experte zu teuer ist<br />
Contra:<br />
Aufwand und Bereitschaft muss vorhanden sein<br />
Späte Tests können einen Projektplan torpedieren und<br />
politische Lawinen erzeugen<br />
PHP World<br />
10. November 2010<br />
06.27
06<br />
USABILITY - NUTZERTESTS –<br />
EXPERTENBEURTEILUNG<br />
Ein Experte beurteilt Layout, Prototyp oder fertige<br />
Website/Anwendung und bewertet dank seiner Erfahrung und<br />
grafischen Vorbildung<br />
Beurteilungskriterien sind:<br />
Gängige Praxis und Abweichungen davon (z.B.<br />
Navigation rechts statt links)<br />
Farbwirkung<br />
Formensprache<br />
Formularschritte und Interaktivität<br />
Qualität von Suche und Suchergebnissen<br />
…<br />
Verbesserungsanalyse erfolgt z.B. mit Wireframes<br />
PHP World<br />
10. November 2010<br />
06.28
06<br />
USABILITY - NUTZERTESTS –<br />
EXPERTENBEURTEILUNG<br />
Beispiel:<br />
PHP World<br />
10. November 2010<br />
06.29
06<br />
USABILITY - NUTZERTESTS –<br />
EXPERTENBEURTEILUNG<br />
Beispiel:<br />
PHP World<br />
10. November 2010<br />
06.30
06<br />
USABILITY - NUTZERTESTS –<br />
EXPERTENBEURTEILUNG<br />
Beispiel:<br />
PHP World<br />
10. November 2010<br />
06.31
06<br />
USABILITY - NUTZERTESTS – BUDGET<br />
Materialaufwand:<br />
Rechner<br />
Kamera<br />
Software<br />
Raum<br />
Sonstiges:<br />
Entschädigung für Probanden (ca. 50 € pro Proband –<br />
kann variieren)<br />
Reisekosten (für Tester und/oder Probanden)<br />
Externe Unterstützung:<br />
Coaching/ Training<br />
Probandensuche<br />
Durchführung<br />
PHP World<br />
10. November 2010<br />
06.32
06<br />
USABILITY - NUTZERTESTS – FAZIT<br />
Pro:<br />
In frühen Projektphasen sehr einfach einsetzbar<br />
Als Basis für zweckgebundene <strong>Usability</strong>-Tests sinnvoll<br />
Zum Finden von Lösungen (z.B. für komplexe Navigation)<br />
Materialaufwand:<br />
Conrta:<br />
Der Experte ist nicht der typische Nutzer einer Website<br />
Betriebsblindheit stellt sich recht rasch ein<br />
Trotz aller Erfahrung sind einige Fragen nicht<br />
abschließend zu klären<br />
Der Experte übersieht einige Problemstellen<br />
PHP World<br />
10. November 2010<br />
06.33
06<br />
USABILITY - NUTZERTESTS – EYETRACKING<br />
Erfassung der Blickbewegungen des Nutzers<br />
Der “Scanpath” zeigt die Blickrichtung des Nutzers<br />
Die häufigste Art der Auswertung ist die “Attention<br />
Map” bzw. die “Attention Landscape”<br />
PHP World<br />
10. November 2010<br />
06.34
06<br />
USABILITY - NUTZERTESTS – EYETRACKING<br />
Beispiel:<br />
Quelle:<br />
http://www.useit.com/<br />
PHP World<br />
10. November 2010<br />
06.35
06<br />
USABILITY - NUTZERTESTS – EYETRACKING<br />
Pro:<br />
Sehr detaillierte Erkenntnisse über das Blickverhalten<br />
eines Designs<br />
Nutzerdetails wie das Koonzentrationsverhalten werden<br />
deutlich<br />
Contra:<br />
“Kleine” Änderungen auf der Website beeinflussen die<br />
Testergebnisse oft massiv<br />
Peripheres Sehen und evtl. Eingeschränkte<br />
Wahrnehmung beeinflussen Ergebnisse<br />
Aufwand recht hoch<br />
Tests meist nur unter Laborbedingungen möglich<br />
PHP World<br />
10. November 2010<br />
06.36
06<br />
USABILITY - NUTZERTESTS – a/b- TEST<br />
Ein Teil der Nutzer erhält Alternative A, ein anderer<br />
(oft kleinerer) Alternative B<br />
Hat verschiedene Namen: Split Tests oder Split<br />
Run Tests<br />
Auch komplexere Varianten mit mehr Alterntiven<br />
denkbar<br />
So genannte Multivariate Tests (auch Taguchi<br />
Method)<br />
Mehrere Variablen werden definiert und Nutzer<br />
erhalten dann Kombinationen aus diesen<br />
Variablen<br />
PHP World<br />
10. November 2010<br />
06.37
06<br />
USABILITY - NUTZERTESTS – a/b- TEST<br />
Beispiel:<br />
PHP World<br />
10. November 2010<br />
06.38
06<br />
USABILITY - NUTZERTESTS – a/b- TEST - FAZIT<br />
Pro:<br />
Einfach durchzuführen (z.B. Google Website Optimizer)<br />
Bei kleineren Änderungen mit sehr guten Ergebnissen<br />
(z.B. Anmelde-Aufforderung)<br />
Ein Teil der Nutzer erhält Alternative A, ein anderer (oft<br />
kleinerer) Alternative B<br />
Contra:<br />
Gibt keine Aufschlüsse über die Hintergründe des<br />
Nutzerverhaltens<br />
Für größere Änderungen bis hin zum Relaunch eher<br />
ungeeignet<br />
Nur im Live-Betrieb sinnvoll<br />
Abhängig von der technischen Implementierung<br />
PHP World<br />
10. November 2010<br />
06.39
06<br />
USABILITY - DAS GROßE GANZE<br />
Es muss nicht immer ein Relaunch sein<br />
Das „Relaunch-Fieber“ grassiert<br />
Relaunches sind <strong>Usability</strong>-technisch sogar<br />
schwierig<br />
Inkrementelle Verbesserungen sind oft besser<br />
Wichtig ist soweit irgend möglich, vorgenommenen<br />
Maßnahmen auch zu testen<br />
Nach dem Erstaufwand sollte eine Website nicht<br />
als Grab für Wartungskosten verstanden werden<br />
<strong>Usability</strong>-Optimierung wird am besten als stetiger<br />
Prozess eingesetzt<br />
PHP World<br />
10. November 2010<br />
06.40
06<br />
USABILITY<br />
PHP World<br />
10. November 2010<br />
06.41
Change language