Optimierung des Zeix‐Unibe‐Prototyps

Page 1

Optimierung des Zeix‐Unibe‐Prototyps mit Animation auf http://usability.unibe.ch/uba/

Addendum zum Usability‐Bericht

Dieses Dokument und der Usability‐Bericht sind erhältlich unter http://usability.unibe.ch/ub (u/b)

Stefan Minder

Adrian Michel

Universität Bern

Axel Hahn

Institut für Medizinische Lehre (IML)

Felix Schmitz

Ufive Usability

Dr. sc. Philippe Zimmermann

3010 Bern

Prof. Dr. Sissel Guttormsen

www.ufive.unibe.ch


Optimierung des Zeix‐Unibe‐Prototyps Foreword A university’s website serves many different groups of visitors and has many different stakeholders. For each user-group different needs are prominent: What is the most relevant information for students, what is the most salient information from the university’s point of view, and last but not least, what are the needs of the faculties and the many institutes with regard to their inner and outer presentation and public relations? It is a challenge to bring all the different expectations, needs and interest into one format. If a design succeeds in capturing the individuality of different stakeholders and combining it with the university's affiliation an essential basis for success is given.

University of Bern Institute of Medical Education Prof. Dr. phil. Sissel Guttormsen Director

Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps

1


Optimierung des Zeix‐Unibe‐Prototyps 1

Ausgangslage

Im Bericht „Prototyp zur Neuauflage des Uni Bern Webauftritts, Report1 UsabilityTests 2013“ wird aufgezeigt, dass der sogenannte Zeix-Prototyp (siehe Bild links) von den Testpersonen mehrheitlich gut bedient werden konnte. Als Schwachstellen des Zeix-Prototyps werden im erwähnten Bericht folgende Punkte angeführt: 1. Die Navigation zwischen Instituten und ihrer Fakultät ist überkomplex, dies manifestierte sich in erhöhtem Navigationsaufwand während der Tests und Unsicherheit bei den Probanden.

2. Die Usability-Experten des IML sind der Meinung, dass die Institutsseiten zu ausgeprägt den Charakter einer Unterseite des Ganzen haben, also zu wenig eigenständig wirken (weniger eigenständig als die Institutshomepages im aktuellen Unibe-Layout) und somit subattraktiv für die Institute sind.

Die Korrektur der beiden Schwachstellen wird im vorliegenden Dokument „Optimierung des Zeix-Unibe-Prototyps“ anhand von neu gezeichneten Prototypen vorgeschlagen, welche des Weiteren die Benutzerführung beim Wechsel zwischen „Portal“ und „Fakultäten & Institute“ optimiert und eine bessere visuelle Trennung der beiden Informationsräume erzielt. Usability, eine Übersetzungsmöglichkeit ist der Begriff „Gebrauchstauglichkeit“, ist immer für bestimmte Benutzergruppen erfüllt. Der Begriff ist also umfassender als Konstrukte wie „Benutzerfreundlichkeit“ oder „Ease-of-Use“, denn Usability beinhaltet auch Kriterien wie Erwünschtheit, Sinnhaftigkeit, Glaubwürdigkeit und Attraktivität. Sind diese Kriterien nicht erfüllt, sinkt die Usability, also die Gebrauchstauglichkeit, aber nicht zwingend die Benutzerfreundlichkeit. Die ISONorm 9241 teilt der Usability deshalb nicht nur die Grosskriterien Effectiveness Screenshots des Zeix‐Prototyps

und Efficiency zu, sondern drittens und paritätisch Satisfaction. 1siehe http://usability.unibe.ch/ub (u/b)

Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps

2


Optimierung des Zeix‐Unibe‐Prototyps Eine zentrale Benutzergruppe, die mit dem neuen Webauftritt zufrieden gestellt werden muss, sind die universitären Institute, sprich deren Kader und anderen Mitarbeiter. Die Institutshomepage ist ein wesentliches Public-Relations-Werkzeug und richtet sich in diesem Kontext vornehmlich an Forschungs-, Finanz- und Politikpartner. Im Fokus eines Public-Relations-Werkzeugs treten die Studiengänge und die informationsarchitektonische Einbettung im Gesamtauftritt der Universität in den Hintergrund, ja, diese Elemente können sogar stören, wenn das Institut visuell zu wenig zur Geltung kommt, denn im Forschungs- und Fundingkontext gibt es immer zwei Qualitätslabels, die Universität und das Institut. Die Institute brauchen also die Möglichkeit eines attraktiven „Brandings“ auf ihrer Homepage im neuen Uni-Bern-Web-Auftritt. Ist diese Attraktivität nicht gegeben, sinkt die Wahrscheinlichkeit der Partizipation am neuen Auftritt, und wenn in der Uni-Bern-Weblandschaft zu viele Sonderzüge gefahren werden, wird das Informationskonzept des Zeix-Prototyps derart kompromittiert, dass die Gebrauchstauglichkeit in Frage gestellt werden muss. In andern Worten: Die duale Informationsarchitektur im Zeix-Prototyp ist bestechend gut und hat in den Usability-Tests reüssiert, aber sie ist nur sinnvoll, wenn alle, oder um realistisch zu bleiben, fast alle Institute ihre Inhalte darin publizieren. Um diesen Zuspruch bei den Instituten zu erlangen, empfehlen wir für die Ausgestaltung der Institutshomepage-Templates die Formel „mehr Institut, weniger Uni“. Diese Formel wurde in den im vorliegenden Dokument abgebildeten IML-Prototyp-Screens, welche eine Weiterentwicklung des Zeix-Prototyps sind, umgesetzt.

Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps

3


Optimierung des Zeix‐Unibe‐Prototyps 2

Redesignvorschläge

Auf den Folgeseiten sind die Redesignvorschläge abgebildet, welche vom Institut für Medizinische Lehre im Sinne einer Weiterentwicklung des Zeix-Prototyps erstellt wurden. Für den Informationsraum „Fakultäten & Institute“ wird ein Farbkonzept vorgeschlagen, nämlich Selbstwahl durch die Institute so wie die Führung eines dekorativen Headerbildes (beides in Beratung mit dem Weboffice). Basisfarbe für die Fakultäten ist Grau. Die Farbe Grau ist für die Institute ausgeschlossen, womit der Wechsel zwischen Institut und Fakultät in der Informationsarchitektur gut visualisiert wird. Auch jede Fakultät hat ein eigenes Headerbild.

Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps

4


Optimierung des Zeix‐Unibe‐Prototyps

Abbildung 1: Redesignte Site eines Instituts, Position Startseite. Der Institutsname ist höher (prominenter) platziert als im Zeix‐Prototyp. Die Uni Bern‐Navigationselemente sind dezenter platziert und „erdrücken“ das Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps 5 Institut nicht. Branding: Das Institut setzt ein Hintergrundbild im Kopfbereich ein und wählt eine Basisfarbe (hier Gelb), beides in Beratung mit dem Weboffice (keine systematische Farben‐Zuordnung).Funktionsweise der OE‐Breadcrumbnavigation: Klick auf Textfläche bewirkt Aufruf dieser OE, Klick auf Pfeil zwischen den Textflächen bewirkt Ausklappen einer Auswahlliste der möglichen Zielseiten.


Optimierung des Zeix‐Unibe‐Prototyps Exkurs Visualisierung des Navigationselementes, welches vom Infor‐ mationsraum „Fakultäten & Institute“ zurück in den Informati‐ onsraum „Portal der Universität“ führt. Im Informationsraum der Gesamtuniversität ist das Unibe -Logo rechts aligniert, im Informationsraum der Fakultäten und Institute links. Damit kombiniert wird das Navigationselement, welches den Wechsel des Informatioinsraums zulässt. Dieses Navigationselement wird im Informationsraum der Fakultäten und Institute via Animation vom Unibe-Logo überdeckt. Somit wird diese Navigationsstelle einerseits visuell hervorgehoben, andererseits sinkt das visuelle Rauschen, weil die Beschriftung des Navigationselementes unsichtbar wird.

Nach dem Aufruf einer Seite im F&I-Bereich sind Pfeil und Uni-Logo zuerst während 1 Sekunde nebeneinander, das Uni-Logo schiebt sich dann über den Pfeil. OnMouseover schiebt sich das Uni-Logo wieder weg. Unabhängig davon, ob das Uni-Logo der der Pfeil geklickt wird, erfolgt der Swipe in das Portal.

Diese Animation findet für den Besucher nicht immer statt, sondern nur beim ersten Direktaufruf einer Fakultäts- oder Institutsseite pro Internetsitzung aber immer beim Einstieg oder Wiedereinstieg auf eine OE-Seite über das Portal. Wird der Mauszeiger über das Logo gehalten, wird das Navigationselement, welches zurück zum Uni-Portal führt, immer freigelegt. Auch ein Klick auf das Logo selbst führt zurück ins Portal. Auf Touchdevices wie z. B. dem iPad gibt es kein MouseOver, somit führt das Berühren des Logos sofort zurück ins Portal, ohne Freilegung des Pfeils. Dieses Verhalten ist als Animation unter http://usability.unibe.ch/uba/ einsehbar.

Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps

6


Optimierung des Zeix‐Unibe‐Prototyps

Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps Abbildung 2: Redesignte Site eines Instituts, Position „Seite mit Inhalt“. Einfach verständliche Institutsnavigation, klassisch LINKS ausgerichtet, enthaltend bis zu drei Hierarchiestufen. Empfehlung: Link „nach oben“ auf kurzen Seiten entfernen.

7


Optimierung des Zeix‐Unibe‐Prototyps

Gleiche Web-Page wie auf der vorangehenden Seite, aber mit alternativem (zu) dominantem Branding-Bild im Kopfbereich. Empfehlungen für die Branding-Bilder pro Institut und Fakultät: 1. Genau ein Branding-Bild, kein Wechsel über die Seiten des Instituts / der Fakultät 2. Thematisch passende, ästhetisch ansprechende, politisch unproblematische, visuell dezente BrandingBilder 3. Keine freie Wahl durch die Institute und Fakultäten, sondern Elaboration zusammen mit dem Weboffice. Diese Zusammenarbeit gewährleistet die rechtlich und ästhetisch korrekte Anwendung

Abbildung 3: Variante der Abbildung 2. Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps

8


Optimierung des Zeix‐Unibe‐Prototyps

Abbildung 4: Redesignte Fakultätshomepage, ebenfalls mit Branding‐Bild; Basisfarbe Grau für alle Fakultäten. Mit RECHTS alignierter Institute‐Navigation. Regel: Navigationen, die den gerade offenen Bereich verlassen Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps 9 (Absprungnavigation), sind RECHTS aligniert. Navigationen, die im gerade offenen Bereich navigieren (Tiefennavigation), sind LINKS aligniert. Empfehlung: Link „nach oben“ auf kurzen Seiten entfernen.


Optimierung des Zeix‐Unibe‐Prototyps

Abbildung 5: Redesignte Seite eines Instituts, Position „Seite mit Inhalt“. Einfach verständliche Institutsnavigation, klassisch LINKS ausgerichtet, enthaltend bis zu drei Hierarchiestufen. Empfehlung: Link „nach oben“ Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps auf kurzen Seiten entfernen.

10


Optimierung des Zeix‐Unibe‐Prototyps Wichtige Optimierung in der Informationsarchitektur Der Inhalt des Fakultäts-Tabs „Studium“ wird mit einer hierarchischen Navigation erschlossen. Somit können alle FactSheets zu den Studiengängen korrekt eingeordnet werden und die Verwirrung, die bezüglich der FactSheets während der Usability-Tests entstand, wird vermieden (im Zeix-Prototyp ist jeweils genau ein ganzes FactSheet, gemäss Anwahl z. B. auf der Portal(!)-Seite, im Studium-Tab der Fakultät, ohne jegliche Einordnung in den Gesamtkontext aller möglichen Inhalte dieses Tabs). Detailoptimierung: Das Homesymbol der Fakultät unterscheidet sich vom Homesymbol der Institute.

Abbildung 5b, Ausschnitt von Abbildung 5.

Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps

11


Optimierung des Zeix‐Unibe‐Prototyps

Abbildung 6: Auf das Redesign der Instituts‐ und Fakultätsseiten abgestimmte Portalseite. Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps

12


Varianten mit expliziter Benutzerführung Optimierung des Zeix‐Unibe‐Prototyps

In den Usability‐Tests wurde das persistierende Verhalten der Navigationspositionen in den beiden Informationsräumen „Portal“ und „Fakultäten & Institute“ mehr‐ heitlich nicht bewusst wahrgenommen und eingesetzt (trotzdem konnten die Aufgaben grösstenteils gelöst werden; einzelne Probanden waren aber überrascht, wenn beim Portalwiedereintritt aus dem Informationsraum „Fakultäten & Institute“ nicht die Portalstartseite erschien, sondern die zuletzt aufgerufene). Es wird empfohlen, eine explizite Anzeige der Persistenz zu prüfen. Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps

13


Schlussvergleich Fakultät Optimierung des Zeix‐Unibe‐Prototyps

vorher

nachher

Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps

14


Schlussvergleich Institut Optimierung des Zeix‐Unibe‐Prototyps

vorher

nachher

Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps

15


Optimierung des Zeix‐Unibe‐Prototyps 3

Verdankung

Wir danken herzlich für den geschätzten Auftrag sowie die professionelle und zielführende Zusammenarbeit mit der Firma Zeix und dem Weboffice der Universität Bern. Wir sind überzeugt, dass der Web-Relaunch der Universität Bern intern wie extern begeistern wird. Wir freuen uns darauf!

Cartoon: Hans Holzherr, IML

Universität Bern, Institut für Medizinische Lehre (IML), Ufive Usability, © 2013; Optimierung des Zeix‐Unibe‐Prototyps

16


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.