Die Vorlesung behandelt verschiedene Tools und Methoden zur Planung und Verbesserung der User Experience von Webseiten, darunter Card Sorting, Wireframing, Prototyping und Beobachtungsanalysen. Die Gestaltung einer Webseite beginnt mit einer Strategie, die sowohl die Bedürfnisse der Nutzer als auch die Ziele des Unternehmens berücksichtigt, gefolgt von der Erstellung von Informationsarchitektur und Design. Usability-Tests sollten über den gesamten Prozess integriert werden, während IT-Experten parallel Systemauswahl und Planung durchführen.

1. In der Vorlesung erwähnte Tools welche bei der Planung
einer Webseite und der durchgängigen User Experience
helfen:
 Card Sorting
Erstellung einer Informationsarchitektur, Aufbau der Navigation. Open Card Sorting: Proband
erstellt die Kategorien selbst. Closed Card Sorting: Proband sortiert die Karten in
vorgegebene Kategorien. Closed Card Sorting wird oft zur Überprüfung der bereits
festgelegten Kategorien verwendet.
o http://www.optimalworkshop.com/optimalsort.htm
Bis 10 Teilnehmer und 30 Kärtchen kostenlos
o http://www.websort.net
o Buch: Card Sorting. Donna Spencer, Rosenfeld Media, April 2009.
http://www.rosenfeldmedia.com/books/cardsorting/
 Wireframing, Mock-Ups, Prototyping
Vor dem Erstellen des wirklichen Webdesigns sollte möglichst ein Wireframe erstellt werden
um die Gestaltung aufgrund der Nutzerbedürfnisse und der Unternehmensbedürfnisse zu
ermöglichen. Also Fokus auf eine Ableitung der Informationsarchitektur und der Prozesse
von den Bedürfnissen anstatt Diskussion über Farben und Formen. „Form follows function“
(Louis Sullivan).
o Balsamiq Mockup (kostenpflichtig)
http://balsamiq.com
o Mockingbird (kostenpflichtig)
https://gomockingbird.com/
o Lumzy (auch kostenfreie Version, leider nicht Fehlerfrei – unbedingt Umlaute
vermeiden!)
http://www.lumzy.com
o Pencil (Firefox Addon)
http://pencil.evolus.vn/
o ProtoShare (kostenpflichtig, 30 Tage Trial Version)
http://www.protoshare.com
www.jboye.at | vg@jboye.com | Volker Grünauer 1/4

2.  Beobachtungsanalyse
Erstellung eines Szenarios und unterschiedlicher Tasks welche von einem Probanden auf der
Webseite durchgeführt werden. Auch Think-Aloud Methode genannt, da der Proband
animiert wird, seine Gedanken laut mitzusprechen.
o http://www.techsmith.com/morae.html - Kostenpflichtiges Softwareprodukt
welches viele Usability Testmethoden für Webseiten digital unterstützt. Vor allem
aber die Nutzeraktivitäten (Mausbewegungen) sowie Gesicht (Webcam) und Ton
gleichzeitig aufzeichnen kann.
o CamStudio (Open Source Applikation um ein Screencapture aufzuzeichnen)
http://camstudio.org
o WebEx (Natürlich kann auch jede Online-Konferenz Software welche Screencapturing
unterstützt für einen Remote User Test verwendet werden)
http://www.webex.com/
o Usertesting.com – übernimmt nicht nur die technische Lösung für einen Remote-Test
sondern stellt auch Probanden zur Verfügung. Ca. USD 30 pro Test.
http://www.usertesting.com
o Es kommt nicht auf die Tools an. Die Beobachtungsanalyse liefert auch wertvollen
Input wenn man einfach hinter der Testperson steht und Notizen aufschreibt.
o Sehr gutes Buch welches diese sowie weitere Methoden erklärt: Don’t make me
think. Steve Krug, New Riders, 2005 (2. Auflage).
http://www.sensible.com/dmmt.html
 Ergebnisse einfach protokollieren
Es gibt auch einige Tools, die eine einfache Protokollierung von Änderungswünschen an der
Webseite ermöglichen.
o http://www.protonotes.com/ - Notizen direkt auf der Webseite erfassen und mit
dem Entwicklungsteam teilen.
o http://www.webnotes.net/ - Browserplugin um Notizen direkt auf der Webseite zu
erfassen.
www.jboye.at | vg@jboye.com | Volker Grünauer 2/4

3. Website Konzeption – Überblick
Übersichts-Folie aus der Vorlesung: Die Gestaltung einer Webseite startet mit der Erstellung einer
Strategie bei der die Nutzerbedürfnisse ebenso wichtig sind wie die Ziele Ihres Unternehmens (z.B .
Kano-Modell, Elevator Pitch, Business Plan, Personas …). Aus dieser Strategie werden die benötigten
Funktionen und Inhalte abgeleitet (z.B. Scenarios, …). Daraus wird ein grobes Interaktionsdesign (z.B.
Storyboard,…) und eine Informationsarchitektur (z.B. Card-Sorting, …) erstellt. Aus diesen
Informationen lässt sich das Informationsdesign erstellen (z.B. Wireframing, Prototyping) und dann
das endgültige visuelle Erscheinungsbild (Webdesign) ableiten.
Usability Tests können von Anfang an parallel eingebaut werden. Zudem müssen Sie sich Gedanken
über die Online Marketing Maßnahmen machen, um potentielle Kunden auf Ihre Seite zu lenken.
www.jboye.at | vg@jboye.com | Volker Grünauer 3/4

4. Parallel dazu wird die Systemauswahl und Systemplanung durch IT Experten stattfinden.
www.jboye.at | vg@jboye.com | Volker Grünauer 4/4