Usabilitytest und neues Redesign: Barcelona.de

Ein neues Redesign ist in Arbeit: das Reiseportal barcelona.de. Da wir schon ein paar Änderungen online haben, hier der Originalzustand der Seite:

Alte Startseite Barcelona.de

Welche Punkte nehmen wir beim Redesign in Angriff?

Design

Das Design der Seite ist schon ein paar Jährchen alt, deswegen werden wir es Schritt-für-Schritt modernisieren. Erster Schritt auf diesem Weg: das Redesign des Headers und erste Anpassungen in der Farbgebung. Hier zum Vergleich der alte und der neue Header:

Vergleich alter Header zu neuem Header

Folgende Änderungen haben wir bereits vorgenommen:

  • Headergrafik: Bisher war die Headergrafik recht dunkel und kleinteilig, einige der Bilder konnte nicht jedermann sofort als charakteristisch für Barcelona erkennen. Für die neue Grafik habe ich die Anzahl der Fotos auf 4 reduziert. Das zentrale Element, die Sagrada Familia, wird umrahmt von einer geschwungenen Linie, die zum einen eine Anlehnung an die Formsprache des Jugendstils ist und gleichzeitig das Meer symbolisiert. Der Verlauf der geschwungenen Linie führt die Blickrichtung auf das Suchelement und die Buchungsmenüpunkte. Das Logo überlappt jetzt nicht mehr mit der Hintergrundgrafik.
  • Farben: Den Blauton habe ich von einem eher gelblichen Blau in ein rötliches Blau geändert. Dieser Farbton symbolisiert mehr die Elemente, die man sich von einem Urlaub im Süden erwartet: Meer und blauer Himmel.
  • Hintergrundfarbe Navigation: Damit der Header ein geschlossenes Element bildet, hat die Utilitiesnavigation jetzt dieselbe Farbe, wie die Hauptnavigation. Der Hintergrund der Navigation zweiter Ebene ist jetzt weiß, was den Vorteil hat, dass auf der Startseite, wo bisher ein leerer grauer Balken zu sehen war, kein „leeres“ Element mehr erscheint und das Design insgesamt leichter wird.
  • Schriftfarbe: Die Schriftfarben habe ich auf weiß und blau reduziert.
  • Trennlinien: Die vertikalen Trennlinien zwischen den Hauptmenüpunkten habe ich entfernt
  • Icons: Die Icons der Utilities Navigation habe ich ebenfalls entfernt.

Noch offen ist die Frage der Menüpunkte oberhalb der Headergrafik. Meine Vermutung wäre, dass nur wenige Besucher diese Links verwenden. Das wollen wir aber noch mit einem Tracking verifizieren.

Usability

Ein erster Usabilitytest mit 5 Personen hat gezeigt, dass die Seiten und Elemente, die von barcelona.de bereitgestellt werden, weitest gehend gut zu bedienen sind. Bedien- und Qualitätsprobleme treten allerdings in den Elementen auf, die von externen Partnern bereit gestellt werden, wie z.B. die Hotel- und die Flugbuchung. Da dies zentrale Elemente der Webseite sind, versuchen wir momentan über Kontakt zu den Anbietern eine Verbesserung in diesem Bereich herbeizuführen.

Nächste Schritte

Als nächstes wollen wir die Struktur der Inhalte angehen. Aktuell gibt es sehr viele Einstiegspunkte in die Inhalte und wenig Gewichtung, was die Seite zum Teil etwas unübersichtlich macht. Ziel ist es, dass der Besucher auf den ersten Blick die wichtigen Informationen und Services im Überblick hat und sich das gesamte Angebot nach und nach erschließen kann.