Interaktiv statt staubig und trocken – Good Practices für die Darstellung von Daten und Fakten auf Corporate Websites

Einstiegsbild

Zu einer Corporate Website gehört in den meisten Fällen auch eine „Über uns“-Rubrik, in der das Unternehmen, seine Geschichte oder auch Bilanzen dargestellt werden. Diese Informationen helfen, das Unternehmen besser kennenzulernen und können mögliche Unsicherheiten beim Nutzer abbauen. Deshalb sind diese Informationen oft auch sehr umfangreich und werden mit viel Mühe zusammengetragen. Leider ist das Ergebnis dann meist wenig nutzerfreundlich: Textwüsten, Tabellen oder ein langweiliger Zeitstrahl nehmen dem interessierten Besucher schnell wieder die Lust, sich in dieser Rubrik länger aufzuhalten.

Dass es auch anders gehen kann, zeigen folgende Beispiele. Interaktive Diagramme oder animierte „Meilenstein“-Darstellungen führen den Nutzer nicht nur schnell zum Ziel, sondern machen auch noch Spaß.

Diagramme selbst gestaltet und befüllt

Zunächst ein Beispiel aus dem Bereich „Investoren“, welche die Besucher einer Corporate Website unter Umständen auch nutzen, um sich über aktuelle Kurse zu informieren. Eine interaktive Darstellung von Aktienkursen bietet eon.com an: Innerhalb des Tools kann der Nutzer nicht nur den Zeitraum zu wählen, sondern auch Vergleichswerte hinzuzufügen oder die Art des Diagramms zu ändern. Dies ermöglicht nicht nur einen tagesgenauen Abruf der Kurse, sondern auch eine starke Individualisierung der Ansicht. Daher wären derartige Diagramme auch gut geeignet, um Bilanzen oder andere Entwicklungen im Zeitverlauf darzustellen.

e.on-Aktien-Tool

Im e.on-Aktien-Tool können durch Ziehen der Markierung mit der Maus Angaben zu einem bestimmten Tag abgerufen werden.

e.on-Aktien-Tool

Der gewünschte Zeitraum kann mit Hilfe der Dropdown-Menüs oder durch das Verschieben des eingerahmten Bereichs darunter (Cursor) gewählt werden.

e.on-Aktien-Tool

e.on-Aktien-Tool: Auch der Diagrammtyp kann individuell verändert werden.

Geschichte muss nicht langweilig sein: Der interaktive Zeitstrahl

Gerade Chroniken und Historien verlangen oft viel Durchhaltevermögen vom Nutzer. Auch wenn es viele spannende Entwicklungen in der Unternehmensgeschichte gab, muss viel gelesen werden, was am Bildschirm nicht immer leicht fällt. Eine etwas andere Darstellung hat zum Beispiel yellostrom.de gewählt: Die zwölfjährige Geschichte wird in einer Matrix dargestellt, wobei die Monate, zu denen es Einträge gibt, schwarz gedruckt sind. Per Mouse-Over erfährt der Nutzer etwas über das Thema und bei Klick öffnet sich ein kurzer Text dazu.

yellowstrom Zeitstrahl

yellowstrom Zeitstrahl Detail

yellostrom.de: Die Unternehmensgeschichte als interaktive Matrix. Das Jahr kann per Klick jederzeit verändert werden.

Auch die Postbank hat ihre Geschichte modern aufbereitet: Auf einem Zeitstrahl kann durch Ziehen mit der Maus ein Jahr ausgewählt werden. Alternativ kann der Nutzer durch Klick auf die seitlichen Pfeile Schritt für Schritt navigieren. Das Ereignis ist kurz benannt und kann per Klick geöffnet werden.

Postbank Zeitstrahl

Postbank Zeitstrahl Detail

Zeitstrahl bei der Postbank: Erkunden der Geschichte durch „chronologisches Navigieren“

Eine weitere Möglichkeit für die Präsentation eines Zeitstrahls zeigt die Commerzbank. Der Zeitstrahl bewegt sich bereits dann, wenn die Maus in die Fläche bewegt wird. Je weiter rechts die Maus liegt, desto schneller läuft die Animation. Anfangs fällt es jedoch etwas schwer, die Stelle zu finden, an der der Strahl stehen bleibt. Interessant ist, dass im unteren Bereich die Daten der Dresdner Bank aufgerufen werden können und im oberen Bereich die der Commerzbank. Nach der „Bankenehe“ von 2008 bzw. der Filialumstellung von 2010 gehen die beiden Leisten dann in eine gemeinsame über.

User Experience von Zahlen und Fakten

Chroniken oder Daten müssen also nicht mehr als schlichte Texte oder Tabellen angeboten werden. Auch solche Websites, die viel Wert auf einen seriösen und vertrauenswürdigen Auftritt legen, können mit einfachen Mitteln die User Experience in diesem Bereich steigern.

.

  • Verzichten Sie auf lange, zu scrollende Seiten bzw. auf zu viel Text/Zahlen auf einmal. Bieten Sie die Informationen lieber „häppchenweise“ an, unterteilen Sie sie also in sinnvolle Abschnitte. Berücksichtigen Sie dabei das Medium und den Kontext des Lesens.
  • Integrieren Sie Bilder, die die Inhalte sinnvoll unterstützen oder auch als Navigationselement dienen können.
  • Bieten Sie stets alternative Möglichkeiten zur Navigation, so dass in jedem Fall immer ein Weg erkannt wird. Sonst erschließt sich im schlimmsten Fall der ganze Nutzen der Anwendung nicht.
  • Falls Ihre Website auch auf Touchpad-Oberflächen bedienbar sein soll, dürfen Mouseover-Mechanismen nicht zu viel Bedeutung erhalten. Testen Sie die Anwendung daher vorher zur Sicherheit auf den entsprechenden Geräten.


Haben Sie Interesse an weiteren „Good Practices“? Auch zu anderen Themen und Anwendungen?

Mit den eResult Themenjournalen und Trendnewslettern bekommen Sie jeden Monat Inspiration für Ihre eigene Arbeit.

4 Gedanken zu „Interaktiv statt staubig und trocken – Good Practices für die Darstellung von Daten und Fakten auf Corporate Websites

  1. Martin

    Besten Dank für diese „Best Practices“ um langweilige „Über uns“-Rubriken für den interessierten User „aufzupeppen“. Die Aufbereitung der Daten benötigt halt entsprechende zeitliche und personelle Ressourcen, die entweder in kleinen Unternehmen nicht vorhanden sind oder lieber in andere Projekte gesteckt werden.

    Antworten
  2. Elske Ludewig

    Hallo Martin, vielen Dank für Ihren Kommentar. Ja, ich kann gut verstehen, dass in kleinen Unternehmen für diesen Bereich oft wenig Ressourcen zur Verfügung stehen. Dennoch hoffe ich, dass unsere Beispiele ein bisschen inspirieren – es muss ja nicht immer eine aufwändige Animation sein. Eine ansprechende Gestaltung und vielleicht eine funktionale bzw. interaktive Elemente können schon viel bewirken.

    Folgendes Beispiel ist mir kürzlich noch aufgefallen und ich möchte es gern ergänzen: http://www.bmg.bund.de/ministerium/aufgaben-und-organisation/zeitstrahl.html

    Antworten
  3. Pingback: User Experience von Firmenhistorien – Innovative Darstellungsformen mit hoher Usability kombinieren | Usabilityblog.de

  4. Pingback: Timelines – wie lassen sich chronologische Daten im Web sinnvoll darstellen? | Usabilityblog.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *