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)

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


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


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


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


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


Seite

Nächstes Kapitel

Ablauf des Projekts

Unsere Leistungen: so arbeiten wir.


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


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


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


Seite

Aufbereitung im Ergebnisband

Ablauf des Projekts


● 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


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.


Ausgewählte Ergebnisse

Seite

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

1515


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.


1616


Auszug

Fallstudie Usability-Test Fachhochschule Münster16

Seite

Kontaktwahrscheinlichkeit & Time to Contact (ausgewählte Elemente) – Einstieg über Google


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



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.



Seite

Erste Orientierung und Kontakt


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.“


Seite

Orientierung: Unterstützende Farbgestaltung


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.


Seite

Linke Navigation


21

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


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.


22

B

B


Seite

Unsere Empfehlungen - visualisiert


23

Content

Footer

Sprache & Pfadanzeige

Header

1. Überschrift


Seite

Linke Navigation – Darstellung der Ebenen


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.


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.


25

A

A

A

A


Seite

Zugang zum Sprachwechsel


26

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


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.


27

A


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.


28

B

C


Seite

Unsere Empfehlungen - visualisiert


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


Seite

Nächstes Kapitel

Fazit

Was hat der Tests der FH Münster gebracht?


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


Seite

Nächstes Kapitel

Referenzen


Seite

Ein erfolgreiches Projekt!

Referenzen


„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


Seite

Ihre Ansprechpartner: eResult GmbH

Thorsten Wilhelm

Geschäftsführender Gesellschafter & Gründer

+49 5515177 426

[email protected]

Martin Beschnitt

Managing Director

+49 40 36166 7981

[email protected]

Kontakt


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

Fallstudie Usability-Test FH Münster

Documents

Transcript of Fallstudie Usability-Test FH Münster