user experience

Häufig werden Neulinge bei der Erforschung von Analytic-Tools einfach vom schieren Umfang der Liste erschlagen, insbesondere wenn sie in die Inhaltsanalyse in einem Analytics-Tool einsteigen möchten. Auch wirklich weiterführende Erkenntnisse abseits der Standardmetriken zu ziehen, fällt vielen  schwer.

In diesem Beispiel hätte die Liste über 1.900 Einträge.

Eine Lösung hierzu schafft eine logische Zusammenfassung von einzelnen Seiten mit Inhalten, die ein ähnliches Thema behandeln. Diese Zusammenfassungen werden Content- oder Inhaltsgruppen genannt. In einem Online-Shop wären dies zum Beispiel alle Seiten zu einer bestimmten Marke. Allgemein macht eine Aggregation nach folgenden Kriterien Sinn:

• Zusammenfassung nach Produktkategorien (z.B. Schuhe, Hemden etc.)
• Zusammenfassung nach Inhaltstypen (z.B. Homepage, Bestellprozess etc.)
• Zusammenfassung nach Themen (z.B. Jobs, Medien etc.)
• Zusammenfassung nach Funktionen (z.B. Landingpage, Verteilerseite etc.)
• Zusammenfassung nach Nutzerbedürfnissen (z.B. Supportanfrage, Preisvergleich etc.)

Viele kostenpflichtige Analytic-Tools wie eTracker oder Omniture bieten eine komfortable Funktion für die Erstellung solcher Contentgruppen. Bei Google Analytics muss hierfür leider (noch) einen kleinen Umweg über die Profilfilter nehmen. Hier ein kurzes Beispiel für die Zusammenfassung nach Produktkategorien:

1. Zuerst werden die einzelnen URLs der Produktkategorien betrachtet. Dies wären z.B. http://www.domain.de/boss/Shirts/blaues-boss-shirt.html oder für eine andere Marke http://www.domain.de/diesel/Shirts/gelbes-diesel-shirt.html
2. Über die erweiterte Filterfunktion in Google Analytics werden anschließend alle URLs die den Begriff “Shirts” enthalten in /shirts.html umbenannt.

Erweiterte Filter in Google Analytics

Dieser Vorgang wird einfach analog für die restlichen Produktkategorien wiederholt, bis alle gewünschten Inhaltsgruppen erfasst wurden.. Tadaaa :-) Jetzt kann die weiterführende Analyse beginnen.
Es bleibt noch anzumerken, dass für diese Vorgehensweise die Verwendung sprechender URLs erforderlich ist.

Für den Spaß zwischendurch: “Runfield” – ein HTML5 Game mit einem flinken und überaus fröhlich dreinschauenden Fux. Ist doch klar, dass wir das mehr als ausgefuxt finden! Try it now!

Kürzlich hat mein Kollege in die Runde geworfen, dass die Website www.bundeskanzlerin.de gelauncht wurde. Aha, dachte ich, dass ist spannend. Denn wer könnte ein besseres (Online-)Vorbild sein, als die Regierungs-Oberhäupter? In Deutschland vor allem interessant, weil der neuaufgelegte Blog  von SPD-Kanzlerkandidat Per Steinbrück knapp eine Woche vor dem Relaunch von Frau Merkels Website offline gestellt wurde.

Aber zurück zum Thema Vorbild. Denn die Vorbildfunktion bezieht sich nicht nur auf rechtliche Bedingungen wie die Einbindung des Impressums, sondern auch auf die Barrierefreiheit und Nutzerfreundlichkeit. Aber das spannende an den Websites der „Offiziellen“ ist jedoch, dass ihre Berater und Beraterinnen ganz genau wissen, was zu tun ist: Die Bürger und Bürgerinnen im Netz abholen. Und bei jungen Leuten können sie das am besten mit Zeitgeist und damit mit User Experience.

Heute im Kurz-Check: Bundeskanzlerin Merkel (Relaunch im Februar 2013) vs. Prince Charles (Relaunch im November 2012).

Deutschland

www.bundeskanzlerin.de

Funktionale Auffälligkeit: Liegt der Cursor auf dem Slider und der User beginnt, mit dem Mouse Rad zu scrollen, so scrollt der Slider und nicht die Webseite.

Touch is top: Die großflächigen Elemente zur Content-Einbindung zeigen, dass die mobile Handhabung mit Touchscreens berücksichtigt worden ist.

Social Media lebt: Die Link-Elemente, die zu Twitter und Co verlinken, sind unverkennbar. Aber wo ist denn bitte facebook abgeblieben?

Highlight: Auch wenn es irgendwie an Twitter erinnert. Aber was soll`s – der Terminkalender ist schick aufbereitet.

Fehler passieren: Wird die „Leichte Sprache“ gewählt, gibt es keine Möglichkeit, die Einstellung rückgängig zu machen (das Wording für das Acronym „Leichte Sprache“ ist aber auch wirklich knifflig). Gut, dass der Browser da ist!

Großbritannien

http://www.princeofwales.gov.uk/

Funktionale Auffälligkeit: Hier heißt es: “Welcome to the world of Windows 8″. Insbesondere im Bereich “For Children” – aber das ist nicht nur für Kinder interessant.

Touch is top: Ich kann mich nur wiederholen: Die großflächigen Elemente zur Content-Einbindung zeigen, dass die mobile Handhabung mit Touchscreens berücksichtigt worden ist.

Social Media lebt: Der hat einfach alles. Aber versteckt (rechts unten im Footer) als seriös-schick verkleidete Schwarzweiß-Kacheln.

Highlight: Charles macht`s Responsive! Sehr vorbildlich!

Fehler passieren: Schade, dass dem User ausschließlich auf der Startseite nicht angezeigt wird, dass er sich auf „Home“ befindet. Aber was nicht ist, das kann ja noch werden.

Nächstes Mal

Bei unserem nächsten “Government-Check” reisen wir in die USA und zu unserem Nachbarn Frankreich.

Ein Beispiel, dass uns zeigt, dass manche Usability-Fehler einfach nicht selbsterklärend sind.

Wie kann man die Anwendung eines Usability Testing-Porgamms simple und verständlich erklären? Man nehme den Zeichenstil der “Simpsons” und den Erklärungsstil sowie die Musik von der “Sendung mit der Maus”. Hinzu kommen typische Charaktere, die im Usability Testing-Prozess mitwirken und schließlich wird chronologisch erzählt, warum und wie ein solches Programm eingesetzt werden kann.

Stell dir einmal Folgendes vor: Vier Wochen lang auf einer einsamen Insel gestrandet, gerettet und, kaum zurück in der Zivilisation, vor einen Internetfähigen PC gezerrt. Du fühlst dich plötzlich wie Oma Erna, die unmittelbar nach ihrem zweiten getätigten Klick im Netz ganz erschrocken konstatiert: “Da steht, dass ich eine Waschmaschine gekauft habe!“ Zugegeben, wie du einen Browser startest, wirst du so schnell nicht verlernen. Aber danach wird’s eng. Die Halbwertszeit im Webdesign scheint sich dramatisch zu verkürzen, so dass man Mühe hat, als Konsument und Designer noch schrittzuhalten. Wir halten dich auf dem Laufenden und sagen dir, was du im vergangenen Jahr alles verpasst haben könntest.

Bei einer solchen schneeballartigen Beschleunigung ständig neuer Trends  im Web ist es nicht verwunderlich, dass beim Look der Seiten im vergangenen Jahr ein eher reduzierender Trend zu erkennen war. Ein „Reduce to the max“ beschreibt es in diesem Fall am Besten, was meist beim Aufruf einer Website zu sehen war. Doch wehe, man betätigt dieses ominöse Rädchen in der Mitte seiner Maus – es folgt der erste Trend 2012: „Parallax scrolling“. Gäbe es ein Wort des Jahres für Webdesign – ich hätte da einen Favoriten. Was zunächst klingt wie das neue Kind von „Brangelina“, stellt tatsächlich eine gänzlich neue Erfahrung auf Webseiten dar. Eine interessante und passende Idee vorausgesetzt, verhilft diese Technik zu einer zielführenden Visualisierung, die nicht immer nur Spielerei sein muss.

À propos „Scrolling“: Wenn du der glückliche Eigentümer eines Smartphones bist (das, was Oma Erna vielleicht noch unter dem Wort „Handy“ kennt), muss du dich hiermit immer seltener herumplagen. Das Aufblühen des „Responsive Webdesigns“ – Trend Nr. 2 -  macht das Surfen via Tablet-PC oder Smartphone nicht nur erträglicher als es noch zu Zeiten des horizontalen Scrollens war, es ist mittlerweile gar eine gänzlich eigene Erfahrung.

Der dritte große Trend des vergangenen Jahres lässt sich wiederum der Rückkehr zur Schlichtheit in der Erscheinung einer Website zuordnen. Mit Fullscreen Hintergrundbildern auf der Startseite wird versucht, eine passende Grundatmosphäre oder Emotion für das jeweilige Produkt, Projekt oder Thema der Seite zu entwickeln. Fullscreen Videos erzeugen ein stärkeres „Mittendrin-Gefühl“ und geben dem Besucher mehr Entscheidungsfreiheit als bei Fernsehwerbung oder ähnlichem.

Im Folgenden wollen wir dir eine kleine Auswahl an Seiten vorstellen, die diese Innovationen aus 2012 aus unserer Sicht am Besten repräsentieren.

Parallax

Es folgt ein wunderbares Beispiel für ein Konzept, welches speziell auf Parallax Scrolling ausgerichtet ist. Es informiert und veranschaulicht den beschrieben Prozess sehr klar und deutlich. Man stelle sich das Ganze in einem Fließtext beschrieben vor…

Fazit: Mehr Spielerei als wirklich nützlich. Das Beispiel zeigt jedoch die Möglichkeiten, die man mit Parallaxen erreichen kann.
Auf dieser Seite hat man eher das Gefühl, man bewegt sich beim Scrollen auf einer unbegrenzten Fläche, als dass man mit Scheuklappen auf den Augen lediglich den vertikalen Fahrstuhl fährt:

Ungewohnte horizontale Scrollrichtung:

Teilweise interaktiv mit Animationen:

Fullscreen Hintergrundbilder / Videos

Eine ausnahmsweise mal nicht angestaubte, langweilige Geschichtsseite mit einer mehr als aufgeräumten Startseite. Nur die nötigsten Infos sind enthalten. Eine zum Inhalt stimmige Atmosphäre wird erzeugt, das Ganze von passender Musik untermalt. Es bündelt die Aufmerksamkeit des Besuchers lediglich auf die per Video vorgetragenen Inhalte:

Eine an sich schlichte, wenn auch nicht ganz unauffällige Portfolio-Seite, die aber im Endeffekt nichts anderes tut, als zu informieren:

Schöne Produktpräsentation. Erinnert sehr an die Erfahrung des Katalogdurchblätterns:

Produktvorstellung mit Fullscreen Video. Wie Fernsehwerbung, jedoch interaktiv:

Responsive Webdesign

Je nach Auflösung anders komponierter Content-Bereich:

Perfekte horizontale Anordnung der Bilder, komplett unabhängig von der Fensterbreite:

Das fux-Team wünscht allen UX-lern Frohe Weihnachten und einen Guten Rutsch ins Jahr 2013!

Unter dem [Halo-]Effekt wird die Tendenz verstanden, faktisch unabhängige oder nur mäßig korrelierte Eigenschaften von Personen oder Sachen fälschlicherweise als zusammenhängend wahrzunehmen. Einzelne Eigenschaften einer Person (z. B. Attraktivität, Behinderung, sozialer Status) erzeugen einen positiven oder negativen Eindruck, der die weitere Wahrnehmung der Person „überstrahlt“ und so den Gesamteindruck unverhältnismäßig beeinflusst. [...]

Der Halo-Effekt kann auch in einem Fragenkatalog auftreten. Einzelne Fragen können andere „überstrahlen“. Wenn beispielsweise die vorhergehende Frage bestimmte Gedanken oder Gefühle auslöst, kann dies Auswirkungen auf die Antwort der nächsten Frage haben. Der Halo-Effekt muss daher bei der Konstruktion eines Fragebogens beachtet werden.