Transcript
Fallstudie Usability-Test
Test & Optimierung des Internetauftritts der
Fachhochschule Münster
© eResult GmbH – Ihr User Experience-Partner(www.eresult.de)
Seite
Inhalt der Fallstudie
Eckdaten 03
Ablauf des Projekts / unsere Leistungen
08
Ausgewählter Studienergebnisse
13
Fazit
30
Referenzen
32
Kontakt eResult GmbH
35
Inhaltsverzeichnis
2 Fallstudie Usability-Test Fachhochschule Münster
Seite
Nächstes Kapitel
Eckdaten
des Usability-Tests für die FH Münster
3 Fallstudie Usability-Test Fachhochschule Münster
Seite
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
4 Fallstudie Usability-Test Fachhochschule Münster
Seite
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
5 Fallstudie Usability-Test Fachhochschule Münster
Seite
360°-Multimethoden-Ansatz
● Verwendete Methoden:
– Verhaltensbeobachtung
– Fokussierte Interviews
– Protokolle lauten Denkens
– Blickverlaufsmessung
● Erhebungsort:– Mobiles Usability-Labor
– Münster
● Stichprobengröße:– 10 Testpersonen
● Erhebungszeit:– 75 Minuten je Testperson
Eckdaten
6 Fallstudie Usability-Test Fachhochschule Münster
Testraum: Testperson mit Interviewer / Projektmanager
Beobachtungs-raum: Videoübertragung Test-PC und Aufnahme der Testperson.
Bild der Testperson,
Ton und Bildschirminhalt
des Test-PC
Beispiel eines Testaufbaus
Seite
● (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 InterviewFokus: Handlungs-/Interaktionsprozesse
Realistische Kontaktsituationen
Eckdaten
7 Fallstudie Usability-Test Fachhochschule Münster
Seite
Nächstes Kapitel
Ablauf des Projekts
Unsere Leistungen: so arbeiten wir.
8 Fallstudie Usability-Test Fachhochschule Münster
Seite
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
9 Fallstudie Usability-Test Fachhochschule Münster
Seite
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 identifiziertenProbleme 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
10 Fallstudie Usability-Test Fachhochschule Münster
Seite
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
11 Fallstudie Usability-Test Fachhochschule Münster
Seite
Aufbereitung im Ergebnisband
Ablauf des Projekts
12 Fallstudie Usability-Test Fachhochschule Münster
● Beleg durch Videosequenzenaus Interviews, Blickdaten (Eyetracking) undProtokolle Lauten Denkens
Aufzeigen der identifizierten Probleme Unterbreitung von Lösungsvorschlägen
● Durch Usability- und Online-Marketing-Experten im Konsens erarbeitet und nach Ihrer Schwere/ dem nötigen Handlungsbedarf gewichtet (A, B, C)
verbale Empfehlungen Empfehlungen visualisiert
Detailierte Problembeschreibung
Seite
Nächstes Kapitel
Ausgewählte Ergebnisse zur Navigation auf fh-muenster.de
zur Veranschaulichung unserer Berichte im Rahmen von Usability-Tests
13 Fallstudie Usability-Test Fachhochschule Münster
Seite
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.
14 Fallstudie Usability-Test Fachhochschule Münster
Ausgewählte Ergebnisse
Seite
Aufmerksamkeitsverteilung in der Orientierungsphase (0-5 Sekunden) – Einstieg über Google
1515
Ausgewählte Ergebnisse
Auszug
Fallstudie Usability-Test Fachhochschule Münster
Anmerkung: Je kräftiger der Seitenbereich gefärbt ist, desto intensiver wurde dieser betrachtet.
Aufgabe: Informieren über Ermäßigungen
15
Seite
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
1616
Ausgewählte Ergebnisse
Auszug
Fallstudie Usability-Test Fachhochschule Münster16
Seite
Kontaktwahrscheinlichkeit & Time to Contact (ausgewählte Elemente) – Einstieg über Google
Ausgewählte Ergebnisse
17
1. Wert = Kontaktwahr-scheinlichkeit: Von wie vielen TPen (Prozent) wurde das farbig markierte Element wahrgenommen?
2. Wert = Time to Contact: Wie lange hat es gedauert, bis das Element wahrgenommen wurde?
...
80 %28,1 s
80 %62,3 s 40 %
30,3 s
40 %69,3 s
60 %47,8 s
80 %17,9 s
Fallstudie Usability-Test Fachhochschule Münster
Aufgabe: Informieren über Ermäßigungen
Seite
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.
Ausgewählte Ergebnisse
18 Fallstudie Usability-Test Fachhochschule Münster
Seite
Erste Orientierung und Kontakt
Ausgewählte Ergebnisse
19
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.“
Fallstudie Usability-Test Fachhochschule Münster
Seite
Orientierung: Unterstützende Farbgestaltung
Ausgewählte Ergebnisse
20
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.
Fallstudie Usability-Test Fachhochschule Münster
Seite
Linke Navigation
Ausgewählte Ergebnisse
21
Unruhe durch variable Höhe:Aufgrund der dynamischen Höhe der farblichen Hinterlegung der linken Navigation wirkten einige Seiten unruhig.
Fallstudie Usability-Test Fachhochschule Münster
Seite
Empfehlungen zur linken Navigation
Farbliche Hinterlegung für vollständige Höhe: Die linke Navigation 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 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.
Ausgewählte Ergebnisse
22
B
B
Fallstudie Usability-Test Fachhochschule Münster
Seite
Unsere Empfehlungen - visualisiert
Ausgewählte Ergebnisse
23
Content
Footer
Sprache & Pfadanzeige
Header
1. Überschrift
Fallstudie Usability-Test Fachhochschule Münster
Seite
Linke Navigation – Darstellung der Ebenen
Ausgewählte Ergebnisse
24
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.
Fallstudie Usability-Test Fachhochschule Münster
Seite
Empfehlungen zu Linke Navigation – Darstellung der Ebenen
Dritte Ebene farblich hinterlegen: Bereits die aktive dritte Ebene sollte 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 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 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 gesetzt werden. Die aktive Seite sollte zusätzlich farblich hinterlegt werden, so erkennt der Nutzer noch leichter, wo er sich befindet.
Ausgewählte Ergebnisse
25
A
A
A
A
Fallstudie Usability-Test Fachhochschule Münster
Seite
Zugang zum Sprachwechsel
Ausgewählte Ergebnisse
26
Sprachwechsel nicht erwartungskonform:Die Positionierung des Sprachwechsels entspricht nicht den allgemeinen Erwartungen der Internetnutzer. Oberhalb der Navigation wird sie daher kaum wahrgenommen.
Fallstudie Usability-Test Fachhochschule Münster
Seite
Empfehlungen zum Sprachwechsel (1/2)
Sprachwechsel nach rechts umpositionieren: Der angebotene 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.
Ausgewählte Ergebnisse
27
A
Fallstudie Usability-Test Fachhochschule Münster
11 - 20 %
21 - 30 %
41 - 50 %
31 - 40 %
über 50 %
Seite
Empfehlungen zum Sprachwechsel (2/2)
Hinterlegung mit Breadcrumb beginnen: Die farbliche Hinterlegung 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 Münster, vor der Startseite im Surfpfad positioniert, erhöht nochmals die Aufmerksamkeit auf das Navigationselement und kann die Orientierung auf der Seite verbessern.
Ausgewählte Ergebnisse
28
B
C
Fallstudie Usability-Test Fachhochschule Münster
Seite
Unsere Empfehlungen - visualisiert
Ausgewählte Ergebnisse
29
Studium
Studieninteressierte & Studienbewerber
Internationale Studienbewerber
Studierende
Studienbeiträge
Befreiungen & Ermäßigungen
Beratungsangebote
Studienbeitragsbroschüre
Studienbeitragsdarlehen
Kappungsgrenze
Verwendung der Studienbeiträge
Sozial- und Studierendenschaftbeitrag
FAQ
Studienfinanzierung
Leben und Studieren
Service & Formulare
+
+
-
+
-
+
+
+
Content
1. Überschrift
Navigation 1. Ebene
Startseite > Studium > Studierende > Studienbeiträge > Befreiungen & Ermäßigungen English
Suche
Fallstudie Usability-Test Fachhochschule Münster
Seite
Nächstes Kapitel
Fazit
Was hat der Tests der FH Münster gebracht?
30 Fallstudie Usability-Test Fachhochschule Münster
Seite
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
Fazit der Studie
31 Fallstudie Usability-Test Fachhochschule Münster
Seite
Nächstes Kapitel
Referenzen
32 Fallstudie Usability-Test Fachhochschule Münster
Seite
Ein erfolgreiches Projekt!
Referenzen
33 Fallstudie Usability-Test Fachhochschule Münster
„Die Fachhochschule Münster ist bestrebt, ihre Zielgruppen mit dennotwendigen Informationen im Internet zu versorgen und diesebenutzerfreundlich und leicht auffindbar zur Verfügung zu stellen. Mitder Firma eResult haben wir einen kompetenten und professionellenPartner für eine Usability‐Studie gefunden, in der das Nutzerverhaltenund die Bedürfnisse unserer Zielgruppen "Studieninteressierte" und"Studierende" ermittelt wurden. Die Ergebnisse undOptimierungsvorschläge von eResult haben unseren Internetauftrittnutzerfreundlicher und wertvoller gemacht.“
Karsten Schäpermeier
(Fachhochschule Münster, Leiter der Online‐Redaktion)
Seite
Ausgewählte Kundenmit denen wir Usability-Tests durchgeführt haben!
Referenzen
34
Seite
Nächstes Kapitel
Kontakt
Ansprechpartner eResult GmbH
35 Fallstudie Usability-Test Fachhochschule Münster
Seite
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
Kontakt
36 Fallstudie Usability-Test Fachhochschule Münster
Standort Hamburg
Ludwig-Erhard-Straße 18
20459 Hamburg
+49 40 36166 7980
Themenblog: www.usabilityblog.de
Büro Göttingen
Planckstr. 23
37073 Göttingen
+49 551 49569 331
+49 551 49569 330
Website: www.eresult.de
Standort Frankfurt
Uhlandstraße 58
60314 Frankfurt / Main
+49 69 133965 24
top related