Fallstudie Usability-Test FH Münster

Fallstudie Usability-Test

Test & Optimierung des
Internetauftritts der
Fachhochschule Münster

© eResult GmbH – Ihr User Experience-Partner
(www.eresult.de)

Inhaltsverzeichnis

Inhalt der Fallstudie

 Eckdaten 03
 Ablauf des Projekts / unsere Leistungen 08
 Ausgewählter Studienergebnisse 13
 Fazit 30
 Referenzen 32
 Kontakt eResult GmbH 35

Seite 2 Fallstudie Usability-Test Fachhochschule Münster

Nächstes Kapitel

Eckdaten

des Usability-Tests für die FH Münster


Eckdaten

Vorstellung des Kunden

Fachhochschule Münster:
●Was 1971 als Zusammenschluss von staatlichen und
privaten Bau- und Ingenieurschulen entstanden ist,
hat sich längst zu einer modernen, leistungsstarken
und kundenorientierten Hochschule entwickelt. Mit
rund 10 000 Studierenden zählt sie mittlerweile zu den
größten Fachhochschulen des Landes.
●Die 12 Fachbereiche und 65 Studiengänge verteilen sich auf die vier Bereiche
Ingenieurwesen, Soziales, Gestaltung und Wirtschaft. Unter dem Dach dieser
Kernbereiche bietet die Fachhochschule Münster eine enorme Breite an
fachspezifischen Arbeitsgebieten. Darüber hinaus wird zusammen mit Hochschulen
und Forschungseinrichtungen sowie mit Partnern aus aller Welt geforscht und
entwickelt.


Eckdaten

Zielsetzung des Tests:
•Optimierung der Bedienung (Usability) und Auffindbarkeit von Informationen für Studierende
und Studieninteressierte auf fh-muenster.de auf Basis gesicherter Erkentnisse
•Besseres und tieferes Verständnis von den Anforderungen und dem Nutzungsverhalten beider
Zielgruppen
•Identifikation und Analyse von Abbruchgründen auf der Website

Zentrale Fragestellungen, die allesamt beantwortet wurden:
•Wie wird das Angebot der FH Münster von den beiden Zielgruppen bewertet?
•Wie kommen die Nutzer mit dem Angebot zurecht (Bedienbarkeit)?
•Können sich die Nutzer gut auf den Seiten der FH Münster orientieren?
•Funktionieren die vorhandenen Navigationselemente? Welche werden wie genutzt?
•Werden die einzelnen Rubriken verstanden und unterstützen diese beim Auffinden von
Informationen?
•Wo gibt es Aufmerksamkeitslücken auf zentralen Seiten des Informationsangebotes?
•Werden die bereitgestellten Informationen auf den Seiten der Rubrik „Studium“ von den
Nutzern verstanden? Fühlen sich die Nutzer ausreichend informiert?


Eckdaten

360°-Multimethoden-Ansatz

Testraum:
● Verwendete Methoden: Testperson mit
Interviewer /
– Verhaltensbeobachtung Projektmanager

– Fokussierte Interviews
Bild der
– Protokolle lauten Denkens Testperson,
Ton und
– Blickverlaufsmessung Bildschirminhalt
des Test-PC

● Erhebungsort:
– Mobiles Usability-Labor
– Münster Beobachtungs-
raum:
Videoübertragung
● Stichprobengröße: Test-PC und
Aufnahme der
– 10 Testpersonen Testperson.

● Erhebungszeit:
– 75 Minuten je Testperson
Beispiel eines Testaufbaus


Eckdaten

Realistische Kontaktsituationen

● (freie) Erkundung
– Fokus: Erkennen und Verständlichkeit
von Inhalten & Funktionen,
Links und Buttons,
Erwartungskonformität,
Selbstbeschreibungsfähigkeit,
Auffindbarkeit, etc.

● Szenariobasierte Nutzung
(Vorgabe von Aufgabenstellungen)
– halbstrukturiertes Interview
Fokus: Handlungs-/
Interaktionsprozesse


Nächstes Kapitel

Ablauf des Projekts

Unsere Leistungen: so arbeiten wir.


Ablauf des Projekts

Zielorientierte Abstimmung von Anfang an

• Kick-Off mit dem Kunden: Gemeinsam mit den Verantwortlichen der
Fachhochschule Münster haben wir im Rahmen des Projektauftaktes die
Probleme und Fragestellungen ermittelt, die mit Hilfe des Usability-Tests
geklärt werden sollten. Hierfür unterbreiteten wir Vorschläge für
Fragestellungen, die auf der Basis einer expertenbasierten Voranalyse
des Internet-Auftrittes erarbeitet wurden. Außerdem definierten wir die
gewünschte Zielgruppe, die uns als Grundlage für die Rekrutierung der
Testpersonen diente.
• Erstellung des individuellen Studienkonzeptes: Im Anschluss an
den Kick-Off entwickelten wir ein Studienkonzept zur Durchführung des
Usability-Tests in enger Abstimmung den Verantwortlichen der FH
Münster abgestimmt wurde. Hierzu wurden u. a. Aufgabenstellungen
formuliert, die im Laufe des Nutzertests von den Probanden bearbeitet
werden sollten.


Ablauf des Projekts

Effiziente Auswertung mit hochwertigen Empfehlungen

• Erhebung & Problemsammlung: Während der Versuchsleiter die
Testpersonen im Testraum durch den Usability-Test führte, wurden im
Beobachtungsraum die identifizierten
Probleme auch in Form von Post-Its
(Klebezetteln) festgehalten und den
jeweiligen Seitenbereichen zugeordnet.
Dadurch entstand bereits während
der Tests eine erste Kategorisierung
der Probleme.
• Empfehlungsworkshop: Nach dem Usability-Test fand ein interner
Workshop statt. Hier wurden die im Test ermittelten Probleme gewichtet
und im Konsens konkrete Empfehlungen zur Lösung der Probleme
abgeleitet; auf Basis der Erkenntnisse aus dem Test aber auch aufgrund
der langjährigen Projekt- und Branchenerfahrung der Consultants.


Ablauf des Projekts

Anschaulicher Berichtsband & konstruktiver Workshop

• Ergebnisband: Auf der Grundlage der Ergebnisse des Workshops
verfassten wir einen Ergebnisband, der die Probleme aufzeigt und
konkrete Empfehlungen für die Behebung der Probleme bzw. zur
Optimierung der Webseite darstellt (Umfang: 120 Seiten inkl. 2seitigen
Management Summar). Anschaulich aufbereitet und mit Screenshots
und Videos untermalt, sind die Ergebnisse auch im Nachhinein jederzeit
nachvollziehbar. Unsere visualisierte Handlungsempfehlungen
(Wireframes) halfen bei einer schnellen Umsetzung der Erkenntnisse.
• Ergebnisworkshop vor Ort: In einem halbtägigen Workshop wurden
die Ergebnisse und unsere Empfehlungen mit dem Kunden diskutiert
und reflektiert; unterstützt durch ausgewählte, aussagekräftige
Videosequenzen (Highlight-Videos).
• Projektdauer insgesamt: 3,5 Wochen


Ablauf des Projekts

Aufbereitung im Ergebnisband

 Aufzeigen der identifizierten Probleme  Unterbreitung von Lösungsvorschlägen

verbale Empfehlungen Empfehlungen visualisiert

● Durch Usability- und Online-
Detailierte Problembeschreibung Marketing-Experten im Konsens
erarbeitet und nach Ihrer Schwere/
● Beleg durch Videosequenzen
dem nötigen Handlungsbedarf
aus Interviews,
gewichtet (A, B, C)
Blickdaten (Eyetracking) und
Protokolle Lauten Denkens


Nächstes Kapitel

Ausgewählte Ergebnisse zur Navigation
auf fh-muenster.de

zur Veranschaulichung unserer Berichte im Rahmen von
Usability-Tests


Ausgewählte Ergebnisse

Blickverlaufsmessung beim Einstieg

● Fragestellung:
– Wie verteilt sich die Aufmerksamkeit über die Navigationselemente? Kann
sich der Nutzer orientieren?

● Zur Beantwortung der Fragestellung wurde den TPen folgende
Aufgabe gestellt:
„Sie möchten sich darüber informieren, welche Befreiungen und
Ermäßigungen es für Sie als Studierende(r) an der FH Münster gibt. Sie
nutzen dazu die Suchmaschine Google und landen von dort aus auf
einer bestimmten Seite.
Wir zeigen Ihnen nun diese Seite; bitte verschaffen Sie sich zunächst
einen Überblick über mögliche Ermäßigungen.“
Dabei wurde der Blickverlauf gemessen.



Aufmerksamkeitsverteilung in der Orientierungsphase
(0-5 Sekunden) – Einstieg über Google

Anmerkung:
Je kräftiger der
Seitenbereich gefärbt ist,
desto intensiver wurde
dieser betrachtet.

Aufgabe: Informieren
Auszug
über Ermäßigungen



Aufmerksamkeitsverteilung über die gesamte
Betrachtungsdauer – Einstieg über Google

Anmerkung:
Je kräftiger der
Seitenbereich gefärbt ist,
desto intensiver wurde
dieser betrachtet.

Aufgabe: Informieren
über Ermäßigungen Auszug



Kontaktwahrscheinlichkeit & Time to Contact (ausgewählte
Elemente) – Einstieg über Google
80 % 1. Wert = Kontaktwahr-
17,9 s scheinlichkeit: Von wie
80 %
40 % vielen TPen (Prozent)
62,3 s 40 %
69,3 s wurde das farbig markierte
30,3 s
Element wahrgenommen?
2. Wert = Time to Contact:
Wie lange hat es gedauert,
60 %
bis das Element
47,8 s
wahrgenommen wurde?
80 %
28,1 s
Aufgabe: Informieren über
Ermäßigungen

...


Interpretation der Blickdaten

● Bei der Blickverteilung zur Aufgabenbearbeitung „Einstieg über Google“
fällt auf, dass nicht alle Navigationselemente von jedem Probanden
betrachtet wurden.
● Die meiste Aufmerksamkeit erhält die linke Navigation. In diesem
Bereich orientieren sich die TPen am intensivsten, wo sie sich auf den
Seiten der FH Münster befinden.
● Die Blickverteilung auf dem Content-Bereich der Seite ist sehr gut. Die
Broschüre dient innerhalb der ersten Sekunden als Eyecatcher und
lenkt die Aufmerksamkeit auf den Link „Studienbeitragsbroschüre“. Der
gut strukturierte Text (Absätze, Überschriften, Fettsetzung) unterstützt
im weiteren Zeitverlauf die Probanden beim Lesen der Texte.
● Trotzt vielen Inhalte auf der gesamten Seite, erhalten auch die
Kontakte und aktuellen Termine in der Marginalspalte genügend
Aufmerksamkeit. So gibt es kaum Aufmerksamkeitslücken auf der
Seite.


Erste Orientierung und Kontakt

 Orientierung:
Alle TPen konnten sich gut
orientieren. Nicht immer wurde
auf alle Ebenen der Navigation
eingegangen. Sowohl
Blickdaten als auch
Beobachtung zeigen, dass die
angebotenen
Navigationselemente
ausreichend sind, um sich im
Bereich Studium zu orientieren.

 Kontakt in Marginalspalte immer vorhanden:
Die Marginalspalte wurde von den Probanden besonders hervorgehoben. Für einen Nutzer der Seite werden
hier, immer erwartungskonform, Kontaktinformationen zur jeweiligen Seite angeboten, das wurde von den
TPen sehr gelobt. TP: „Das ist toll. Man hat immer einen Ansprechpartner, egal wo man ist auf der Seite.“



Orientierung: Unterstützende Farbgestaltung

 Farbgestaltung unterstützt die
Orientierung:
Das Design und Layout der Seite wurde von den
TPen als angenehm und passend für die
Fachhochschule bewertet.
Die Farbgestaltung unterstützt zudem die
Orientierung auf der Seite. Wichtige
Navigationselemente und Links sind farblich
hinterlegt.



Linke Navigation

 Unruhe durch variable Höhe:
Aufgrund der dynamischen Höhe der farblichen
Hinterlegung der linken Navigation wirkten
einige Seiten unruhig.



Empfehlungen zur linken Navigation

 Farbliche Hinterlegung für vollständige Höhe: Die linke Navigation B

sollte als Block in der vollständigen Höhe farblich hinterlegt sein. So
dient sie als Ruhepol und wird vom Nutzer als stetiges
Navigationselement für den linken Seitenbereich verstanden.
 Weißraum als Trennung hinzufügen: Um die visuelle „Schwere“ des B
linken Navigations-Blocks durch die vollständige Seitenhöhe ein wenig
zu relativieren, könnte oberhalb und unterhalb ein wenig Weißraum
eingefügt werden. Das hat den zusätzlichen Effekt, dass der horizontale
Balken (Sprachwechsel, Pfadanzeige) deutlicher hervorgehoben und als
eigenständiges Element wahrgenommen wird.



Unsere Empfehlungen - visualisiert

Header

Sprache & Pfadanzeige

1. Überschrift

Content

Footer



Linke Navigation – Darstellung der Ebenen

 Undeutliche
Abgrenzung:
Die Differenzierung
zwischen der 2., 3. und
4. Ebene ist aufgrund der
sparsamen
Hervorhebung nicht
immer deutlich gegeben.

 Ausprobieren
und erinnern:
Die aktuelle Darstellung
lässt nicht erkennen, ob
innerhalb einer Rubrik
weitere Unterrubriken
vorhanden sind. So muss
sich der Nutzer durch die
einzelnen Rubriken
klicken und diese
erkunden.



Empfehlungen zu Linke Navigation – Darstellung der
Ebenen
 Dritte Ebene farblich hinterlegen: Bereits die aktive dritte Ebene sollte A
farblich als Block hinterlegt sein. So muss sich der Nutzer nicht lange in der
Navigation orientieren. Zudem ist die Zusammengehörigkeit der einzelnen
Unterrubriken sofort erkennbar.
 Vierte Ebene einrücken: Die vierte Ebene muss ebenfalls eingerückt A
werden. So kann sich der Nutzer an visuellen Führungslinien schneller
orientieren und erkennt sofort, welche Unterrubriken der aktiven Ebene
oberhalb zuzuordnen sind.
 +/- Symbole einführen: Zur Kennzeichnung der Menüpunkte, die A

Unterrubriken enthalten, könnten dem Nutzer bekannte Symbole einer
Baumstruktur angeboten werden („+“ bedeutet Unterkategorien
vorhanden). Bei einer derart komplexen Struktur wird dadurch die
Orientierung vereinfacht.
 Fettsetzung und Highlighting: Die aktiven Ebenen sollten konsistent fett A

gesetzt werden. Die aktive Seite sollte zusätzlich farblich hinterlegt werden,
so erkennt der Nutzer noch leichter, wo er sich befindet.


Zugang zum Sprachwechsel

 Sprachwechsel nicht erwartungskonform:
Die Positionierung des Sprachwechsels entspricht nicht den
allgemeinen Erwartungen der Internetnutzer. Oberhalb der
Navigation wird sie daher kaum wahrgenommen.



Empfehlungen zum Sprachwechsel (1/2)

 Sprachwechsel nach rechts umpositionieren: Der angebotene A

Sprachwechsel muss im rechten oberen Seitenbereich positioniert werden.
So erwarten es die deutschen Internetnutzer 2010.
In unserer Längsschnittstudie Imagery IV (08/2010) geben 1200
Internetnutzer an, dass sie dieses Element rechts oben erwarten.

11 - 20 %

21 - 30 %

31 - 40 %

41 - 50 %

über 50 %



Empfehlungen zum Sprachwechsel (2/2)

 Hinterlegung mit Breadcrumb beginnen: Die farbliche Hinterlegung B

könnte, aufgrund der Umpositionierung des Sprachwechsels im linken
Seitenbereich, entfernt werden und erst mit dem Surfpfad beginnen. Das
hat zur Folge, dass der horizontale Balken mehr Aufmerksamkeit bekommt
und nicht nur als Designelement wahrgenommen wird.
 Symbol in der Breadcrumb anbieten: Ein Symbol, z. B. das der FH C

Münster, vor der Startseite im Surfpfad positioniert, erhöht nochmals die
Aufmerksamkeit auf das Navigationselement und kann die Orientierung auf
der Seite verbessern.



Unsere Empfehlungen - visualisiert

Navigation 1. Ebene

Suche

Startseite > Studium > Studierende > Studienbeiträge > Befreiungen & Ermäßigungen English

Studium 1. Überschrift
+
Studieninteressierte & Studienbewerber
+
Internationale Studienbewerber
-
Studierende
+
Beratungsangebote
-
Studienbeiträge
Befreiungen & Ermäßigungen
Studienbeitragsbroschüre
Studienbeitragsdarlehen
Kappungsgrenze
Content
Verwendung der Studienbeiträge
Sozial- und Studierendenschaftbeitrag
FAQ
+
Studienfinanzierung
+
Leben und Studieren
+
Service & Formulare


Nächstes Kapitel

Fazit

Was hat der Tests der FH Münster gebracht?


Fazit der Studie

Zentrale Ergebnisse

● Umfang des PPT-Ergebnisberichtes: 160 Folien
● Die Studie ergab 61 identifizierte Probleme inkl. konkreten
Handlungsempfehlungen, besonders in den Bereichen
– Gestaltung der Navigation und Suchfunktion
– Aufbereitung des Contents und Positionierung von zentralen Elemente
– Wording

● Alle 25 als „sehr wichtig (A)“ eingestuften Probleme, wurden zeitnah behoben.
Mithilfe der Highlight-Videos und der Beobachtungsmöglichkeit der Tests konnten
alle Beteiligten von der Wichtigkeit der Umsetzung überzeugt werden.
● Die durchschnittliche Bounce Rate auf den zentralen Seiten konnte um 20%
reduziert werden. Die durchschnittliche Verweildauer stieg um 50%.
● Das zuständige Amt für Studien- und Prüfungsangelegenheiten konnte zudem
einen positiver Rückgang von Fragen/Beschwerden per Telefon und Email zum
Internetauftritt feststellen


Nächstes Kapitel

Referenzen


Referenzen

Ein erfolgreiches Projekt!

„Die Fachhochschule Münster ist bestrebt, ihre Zielgruppen mit den
notwendigen Informationen im Internet zu versorgen und diese
benutzerfreundlich und leicht auffindbar zur Verfügung zu stellen. Mit
der Firma eResult haben wir einen kompetenten und professionellen
Partner für eine Usability‐Studie gefunden, in der das Nutzerverhalten
und die Bedürfnisse unserer Zielgruppen "Studieninteressierte" und
"Studierende" ermittelt wurden. Die Ergebnisse und
Optimierungsvorschläge von eResult haben unseren Internetauftritt
nutzerfreundlicher und wertvoller gemacht.“

Karsten Schäpermeier
(Fachhochschule Münster, Leiter der Online ‐Redaktion)


Referenzen

Ausgewählte Kunden
mit denen wir Usability-Tests durchgeführt haben!

Seite 34

Nächstes Kapitel

Kontakt

Ansprechpartner eResult GmbH


Kontakt

Ihre Ansprechpartner: eResult GmbH

Thorsten Wilhelm
Geschäftsführender Gesellschafter & Gründer
 +49 5515177 426
 thorsten.wilhelm@eresult.de

Martin Beschnitt
Managing Director
 +49 40 36166 7981
 martin.beschnitt@eresult.de

Büro Göttingen Standort Hamburg Standort Frankfurt
Planckstr. 23 Ludwig-Erhard-Straße 18 Uhlandstraße 58
37073 Göttingen 20459 Hamburg 60314 Frankfurt / Main
 +49 551 49569 331  +49 40 36166 7980  +49 69 133965 24
 +49 551 49569 330

Website: www.eresult.de Themenblog: www.usabilityblog.de


Fallstudie Usability-Test FH Münster

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Fallstudie Usability-Test FH Münster

Ähnlich wie Fallstudie Usability-Test FH Münster (20)

Mehr von eResult_GmbH

Mehr von eResult_GmbH (20)

Fallstudie Usability-Test FH Münster

Hinweis der Redaktion