Studie: Was gehört auf einer Startseite wohin?
Zum dritten Mal nach 2003 und 2005 hat in diesem Sommer die eResult GmbH ihre Studie zur Nutzergerechte Startseiten-Gestaltung von Internetauftritten und Online-Shops namens Imagery III durchgeführt und jetzt deren Ergebnisse veröffentlicht. Die Studie als PDF-Dokument kann für für 99.- Euro zzgl. MwSt. online bestellt werden. Ein kostenlose Kurzversion ohne die Interpretationen und Schlussfolgerungen von eResult kann man in deren Download-Bereich herunterladen.
Wie in der Grafik oben am Beispiel der Werbe-Elemente zu sehen ist, gibt es immer wieder Verschiebungen in den Erwartungen der Nutzer, welche zentralen Elemente auf einer Website wo zu platzieren sind. Das und ob die Nutzer ein Element überhaupt auf einer Website erwarten, lässt sich aus dieser Studie recht gut ablesen.
Besonders interessant ist die aktuellste Ausgabe dieser Studie, da diesmal zwischen Online-Shops und anderen Internet-Auftritten unterschieden wurde. So erwarten zum Beispiel immerhin 86,4% bei einem Online-Shop einen Link zu einer Hilfe-Seite, aber nur 63,1% bei einer anderen Website.
Ich empfinde diese Art von Erhebungen als sehr hilfreich. So lassen sich schon früh im Entstehungsprozess einer Website, grundlegende Missverständnisse vermeiden, indem zentralen Elemente im Zweifelsfall eher erwartungsgemäß positioniert werden. Vielleicht kann man sich auch die Umsetzung teurer Funktionalitäten ganz ersparen, da die Nutzer sie sowieso nicht erwarten.
von Matthias Zellmer
waswaehlstdu.de – KISS-Prinzip at it’s best
Ich bin gerade ganz begeistert von der Website waswaehlstdu.de. Sie schafft es, das von mir hoch geschätzte KISS-Prinzip … Keep it simple and stupid … perfekt anzuwenden. Großes Lob.
Auch wenn Einige inhaltlich zum Beispiel das Fehlen der Piratenpartei bemängeln werden, so spricht es doch für die konsequente Anwendung des KISS-Prinzips, wenn sich hier auf die im Bundestag vertretenen Fraktionen plus einem Feld für Sonstige beschränkt wird.
von Matthias Zellmer
Und los geht die GreenAction
Greenpeace gehört zu den Organisationen, die die Sache mit dem Web wirklich verstanden hat. Greenpeace twittert nicht nur schon vergleichsweise lange, sondern auch ziemlich aktiv und informativ. Zudem hat Greenpeace nun auch am vergangenen Freitag GreenAction gestartet … oder in Webdeutsch gesagt: GreenAction von Greenpeace jetzt in der ‘open beta’.
GreenAction ist eine Community zur Organisation von gemeinsamen und selbst initiierten Umwelt-Kampagnen. Da gibt es jetzt schon so nette Sachen wie die Kampagne zur Ergänzung des innerstädtischen Transportwesens, Wechselwelle – 100.000 neue Ökostrom-Haushalte bis zur Bundestagswahl oder ganz Konkretes Gen-Milch bei Allgäuland – Ohne mich!.
Über den Sinn einer solchen Community-Plattform mag man geteilter Meinung sein. Ich finde sie jedenfalls sinnvoll. Greenpeace hat meiner Ansicht nach den Namen und den Background um eine solche Community am Leben zu halten.
Optisch finde ich die GreenAction-Site ansprechend gestaltet. Etwas gewöhnungsbedürftig ist allerdings ihr Aufbau. Die Navigation, unterhalb eines Bühnenbereichs angesiedelt, trennt im Prinzip zusammengehörende Inhalte von einander. Man muss relativ oft suche, ob die gewünschte Info oder Funktion nun im Bereich über oder unter der Navigation angesiedelt ist.
Mein Problem dabei ist, dass ich mich immer wieder zwingen muss, über der Navigation nach Inhalten und Funktionen zu suchen. Es ist einfach anders gelernt und wenn über der Navigation noch etwa platziert ist, dann sind es zumeist vom konkreten Inhalt unabhängige Schmuckelemente oder einfach nur Logo, Meta-Navigation, etc.
Die Anmelde-Prozedur fand ich auch etwas hackelig. Mal angesehen, dass ich da gerne eine openID-Anmeldung gesehen hätte, vergibt man sein Passwort nicht von vorneherein selbst, sondern bekommt eines per Mail zugesandt. Statt einen aber nach ersten Anmeldung bei GreenAction direkt zur Passwort-Ändern-Seite zu lotsen, muss man diese selbst suchen. Schön wäre zudem, wenn man noch irgendwo administrieren könnte, über welche Aktion in der Community man per E-Mail informiert werden möchte.
Doch alles andere finde ich schon recht gelungen. Die inzwischen nicht mehr unübliche Integration der Verbreitung via Twitter und Facebook ist ebenso integriert, wie die gängigen Community-Features. Auch kann man pro Kampagne direkt einen Widget-Code bekommen, um dieses dann als Mash-up auf der eigenen Site zu positionieren.
Mein Fazit: Gute Idee mit den richtigen Features, doch leider folgt die Funktion all zu oft der Form … hier dem Design. Das macht die Site leider ein bisschen schlecht bedienbar. Aber es ist ja der Inhalt bzw. die Wirkung, die zählt …
von Matthias Zellmer
UXcamp – Klassentreffen der Informationsarchitekten
Morgen geht es für mich mal wieder nach Berlin, wo am Samstag und Sonntag das UXcamp stattfindet. UX steht dabei für User Experience. Dieses von mir etwas lax als “Klassentreffen der Informationsarchitekten” betitelte Themen-Barcamp wird sich außer mit den Fragen der Informationsarchitektur (IA) auch mit den anderen Feldern der User Experience beschäftige und … genau so wichtig … eine sicher hervorragende Networking-Plattform für in diesem Feld tätige Menschen bieten. Denn immerhin haben sich für die beiden Tag jeweils 300 Leute angemeldet.
Ich freu mich auf jeden Fall schon sehr und bin extrem gespannt. Denn ich erwarte, dass ich mit einen Kopf randvoll mit neuen Erkenntnissen, Gesichtern und Ideen zurückkommen werde. In jedem Fall werde ich berichten …
von Matthias Zellmer
Conversational Design Pattern
Design Pattern sind mustergültige Standard-Lösungen für wiederkehrende Entwurfsaufgaben bei der Gestaltung von Benutzeroberflächen wie zum Beispiel Webseiten. Ein einfaches Beispiel ist das Login zu einem zugangsbeschränkten Bereich … hier dem WordPress-Backend:
In diesem Beispiel für ein Design Pattern sind alles nötigen Elemente für einen solches Login vorhanden: Eine Nutzer-Kennung (oft Benutzername oder Mail-Adresse), das Passwort, die Option dich an seinem Rechner nicht immer wieder anmelden zu müssen, das Auslösen der Login-Aktion und zudem noch eine Möglichkeit, an das vergessene Passwort ranzukommen. So ist es beispielhaft und bildet die Grundstruktur für unzählige Login-Bereiche auf zahlreichen Websites, und damit ein Design Pattern. Wenn man sich … bewusst oder unbewusst … an solche etablierten Strukturen hält, dann erspart man sich oftmals einiges an konzeptioneller Arbeit und reduziert die Wahrscheinlichkeit etwas vergessen zu haben.
Wie es nun mal gelernte Praxis ist, haben diverse Experten einzelne Design Pattern immer wieder zu Design Pattern Kategorien eingeordnet. Eine recht neue Design Pattern Kategorie sind dabei die Conversational Design Pattern (CDP). In dieser Kategorie finden sich die Pattern der aktuellen Interaktions- und Kommunikationstools … quasi die Pattern2.0.
Zu diesen Conversational Design Pattern zählt der Grafik-Designer und Creative Director Markus Angermeier u.a. Schnell-Registrationen, Nutzer-Profile und -Galerien, sowie Listen seiner Kontakte und auch Gruppen auf Social Network Sites. Zudem gibt es auch die CDP Social Bookmarking oder den oben in der Artikel-Header-Grafik angedeutete “neuer Star” unter den CDPs Tweet this, der inzwischen nicht nur auf zahlreichen Weblogs … wie auch bei uns … zu finden ist sondern auch bei Xing oder Youtube. Das Tweet-it-CDP ist sehr simple und ein Paradebeispiel für die aktuellen Vorgänge im Web.
Conversational Design Pattern sollten also genauso zum arbeitsalltäglichen Repertoire eines jeden website-konzeptionell tätigen und -gestaltetet Menschen gehören. Leider ist das wohl noch nicht der Fall, denn es gibt noch nicht einmal einen Wikipedia-Artikel dazu. Leider …
von Matthias Zellmer
Twitter more
Wie wir es inzwischen von vielen ZweiPunktDiensten mit ihrem ewigen Beta-Status gewohnt sind, hat Twitter gestern eine kleine, aber interessante Änderung in der Handhabung des Web-Interface online gestellt. Die Vor- bzw. Zurück-Buttons am unteren Ende jeder Seite wurden durch einen More-Button ersetzt. Dadurch blättert man sich nicht mehr durch die Seiten, sondern man erweitert die jeweilige Seite durch eine bestimmte Anzahl an Tweets (Updates).
Twitter ist nicht die erste Website, die statt einer Blättern-Funktion eine solche Inhaltserweiterung anbietet. Im Allgemeinen finde ich diesen erweiternden Ansatz oft den Besseren. Er entspricht dem Gebot des nicht zu viel Inhalt auf einer Seite Darstellens und entkoppelt die nun mal hypertext-basierten Webseiten von der Buchlogik des Blätterns. Neues Medium = neue Handhabungslogik. Ohne dabei aber bewährte Lehren im Bezug auf die menschlichen Wahrnehmungsgewohnheiten von Inhalten zu ignorieren. Ein gutes Beispiel für den Themenkomplex User Experience … wie ich finde.
More davon bitte …
von Matthias Zellmer
Usability-Praxis: Buttons sind keine Links
Usability fällt vor allem dann auf, wenn sie fehlt
Dieser Merkspruch gehört zu meinem Standardrepertoire, wenn es in Gesprächen um das Thema Usability geht. Und bei der oben in der Grafik dargestellten Umfrage auf tagesschau.de zum Thema “Atomkraft: Sind Sie für den Ausstieg aus dem Ausstieg?” ist mir die fehlende Usability aufgefallen.
Was war passiert?
Ich wurde via Twitter auf die Umfrage aufmerksam gemacht und wollte durch meine Stimme kundtun, dass ich den Ausstieg aus dem Atomausstieg nicht gut heiße. Ich klickte also auf “Nein”. Am Rande bemerkt: Die richtige Antwortmöglichkeit zu finden, war auch nicht so leicht, da die Fragestellung etwas verklausuliert formuliert wurde. Aber das gehört eher in den Bereich Barrierefreiheit, Stichwort “Einfache Sprache“. Also, ich wählte “Nein” aus. Dann wollte ich meine Auswahl abschicken und klickte auf den nächstgelegenen Button. Wie oben in der Grafik zu sehen ist, führte mich dieser “Zur Auswertung”.
Klar kann man jetzt sagen, “hättest du mal besser aufgepasst”. Ich finde aber, dass bei der Gestaltung von solchen Interaktionen solche “vorprogrammierten” Fehlerquellen, wenn möglich, von vorne herein vermieden werden sollten. Und warum muss bei der Darstellung von Auswertungsergebnissen, die sicher in einer Datenbank gespeichert sind, das HTML-Element “Button” verwendet werden? Das ist dafür da, dass Daten mittels eines Formular entgegengenommen werden. Einfach einen Link unter die Umfrage packen und dieses Nutzungsfallstrick wäre umgangen gewesen.
Natürlich gelangte ich dann über den Zurück-Button meines Browsers zur Umfrage zurück und konnte meiner Meinung danach noch zum Ausdruck bringen, doch ist dieses kleine und überschaubare Beispiel doch vielleicht ganz lehrreich, wenn es dann man um komplexere Interaktionen geht.
von Matthias Zellmer
Metaphern-Design
Gerne wird das Web als ein Spiegel der Realität bezeichnet. Wenn man dieser Metapher folgen will, dann haben wir es aber mit einem ganz fiesen Spiegel zu tun. Da wo sich eine echter Spiegel darauf beschränkt, die Realität einfach nur spiegelverkehrt darzustellen, da reflektiert das Web wohl eher ihre Quintessenz. Um da etwas Halt und Orientierung zu liefern, setzen viel Website-Designer gerne Metaphern ein.
Ein Beispiel
Gerade im frühen Web gab es viele Versuche einen Web-Shop als ein Ladengeschäft in einer 3D-Welt darzustellen. Gerne wurde das als toll empfunden. Aber leider scheiterten diese 3D-Shops in aller Regel an Problemen mit der Bedienung. Somit wurden diese Metaphern zwar gut verstanden, durch sie ist jedoch meist auch ein massives Usability-Problem entstanden.
Ähnliche Probleme haben viele Metaphern im Web. Andere haben sich wiederum etabliert. Aber eher in den Details. So ist zum Beispiel der Warenkorb in Web-Shops ja kein echter Korb, sondern nur eine Metapher für einen solchen.
Auch haben sich Karteikartenreiter zu einem gerne genutzten Navigationselement entwickelt. Oder man findet hier und da auch mal die Optik einer Haftnotiz, um zum Beispiel an einen Termin zu erinnern. Das Abspielen von Musik wird gerne mit der Optik eines CD-Spielers veranschaulicht und so weiter und so fort.
Metaphern-Typen
Im Kern unterscheidet man drei Typen von Metaphern:
- Visuelle Metaphern: Sieht aus wie …
- Funktionale Metaphern: Macht das gleiche wie …
- Strukturelle Metaphern: Ist aufgebaut wie …
Die oben beschriebene Haftnotiz ist somit in erster Linie eine visuelle Metapher. Jedoch sollte darauf geachtet werden, dass sie auch ihrer gelernte Funktion gemäß eingesetzt wird, um nicht missverstanden zu werden. Dann kann sie, wie jede andere Metapher auch, zu einem Problem werden. Denn die Nutzer einer Website handeln vorzugsweise intuitiv und folgen gelernten Mustern. So werden wohl Nutzer davon ausgehen, dass ein Dreieck bei dem eine Spitze nach rechts zeigt und das in einem Audio-Video-Kontext steht, etwas startet, das abgespielt wird. Öffnet sich nach einem Klick auf ein solches Symbol zum Beispiel das Einstellungen-Menü, so wird der Nutzer im besten Fall irritiert sein. Somit ist auch klar, dass der Kontext in dem eine Metapher eingesetzt wird, in sich stimmig sein muss.
Daraus folgt
Metaphern sind meiner Meinung nach ein mächtiges Web-Design-Instrument. Jedoch nur, wenn sie erwartungskonform im richtigen Kontext und ihrer Funktion in der realen Welt entsprechend eingesetzt werden. Darum rate ich gerade beim Einsatz von Metaphern zu besonderen Vorsicht: Eine falsch oder missverständlich eingesetzte Metapher kann schnell zu Problemen mit der Usability führen und die Nutzer abschrecken.
von Matthias Zellmer
UXcamp Berlin 09 – User Experience zum Anfassen
Seit heute ist der Termin fix: Am 23./24. Mai 2009 findet in Berlin das erste UXcamp statt.
UX steht für User Experience und beim UXcamp werden sich im Stile der Barcamps Menschen austauschen, die im Kern mit den folgenden Themen zu tun haben:
- Information Architecture
- Interaction Design
- Usability Engineering
- Visual Design
- Prototype Engineering
Alle weiteren Informationen zum UXcamp sind auf der zugehörigen Site bei mixxt zu finden. Vielleicht sieht man sich ja dann in Berlin im Mai …
von Matthias Zellmer
Relaunch bahn.de
Lange erwartet, ist sie endlich da: Die überarbeitete Website der Bahn. Am Wochenende, also im Gleichklang mit dem jährlichen Fahrplan-Wechsel und der obligatorischen Preiserhöhung, hat die Bahn ihre Website relauncht.
Auch wenn Achim Schaffrinna vom Design Tagebuch nach seinem ersten Besuch einen guten Eindruck hat, finde ich, dass wir da mal wieder einen typischen Relaunch wie aus dem letzen Jahrhundert vorgesetzt bekommen haben.
Gut, man setzt jetzt AJAX ein und etwas besser zu bedienen ist die Website immerhin doch. Aber im Großen und Ganzen muss ich eher Christian Menschel recht geben. Wirklich gestaltet wirkt die Website nicht. Sie wirkt zusammengestückelt. Wie ein typischer Kompromiss bei dem die Marketing-Abteilung zu viel Mitspracherecht hatte.
Warum muss ich mich eigentlich bei einer Site wie der der Bahn, bei der wohl die große Mehrheit der Nutzer vor allem eins will, Verbindungen suchen und ggf. daraufhin ein Ticket kaufen, so übergebührlich von netten Damen angrinsen lassen? Auf der Startseite von bahn.de sollte meiner Meinung nach mitten drauf ein großzügiges Abfrage-Formular sein. Dann sollte drumherum noch genug Platz für weiterführende Teaser sein.
Ein kleiner Trost hingegen ist, dass man auf den Unterseiten immer an der gleichen Stelle die Symbole für die vier zentralen Abfrage findet und somit immer schnell eine Suchanfrage stellen kann. Auch wenn bis auf die Hauptnavigationspunkte die Formularfelder, wie die meisten Elemente der Website, zu klein dimensioniert sind. Ebenso zu klein wie die Formularfelder ist allgemeine Text-Schrift. Und wenn man den Text über die im Kopfbereich angebotene Funktion vergrößert, dann geht die Bahn wohl davon aus, dass meine Augen sich nach dem nächsten Klick auf wundersame Weise verbessert haben. Denn dann hat man wieder die Original-Schriftgröße vor Augen.
Mein Fazit nach den ersten Minuten auf bahn.de: Die Website wurde verbessert, aber sie wirkt gerade im Bezug auf die User Experience alles andere als bewusst gestaltet. Für ein Unternehmen, welches am liebsten seinen gesamten Ticket-Verkauf vom Schalter an den Bahnhöfen weg haben möchte, hätte ich mir mehr Know-How in Sachen User-Interface-Gestaltung erwartet.
von Matthias Zellmer
