http://www.youtube.com/watch?v=RpcFrrS-bms

ResearchGate verbindet Wissenschaftler aller Forschungsgebiete weltweit und sorgt für eine bessere Kommunikation unter ihnen. Außerdem macht dieses sog. »Facebook für Wissenschafler« die Arbeit von Forschern und Wissenschaftlern sichtbarer und transparenter. Worauf ich allerdings in diesem Artikel eingehen möchte, ist die besondere Startseite von ResearchGate.

Wie in der Abbildung unten zu sehen ist, verwendet ResearchGate eine interessante Grafik auf der Startseite. Es handelt sich dabei um einen sog. »visuellen Cluster«, der die Mitglieder und die bisherigen Publikationen auf researchgate.net ansprechend visualisiert. Die unterschiedlichen Farben stehen dabei für unterschiedliche Forschungsgebiete. Die jeweilige Breite eines Sektors in dem Cluster definiert dabei den prozentualen Anteil der Mitgliederzahl eines bestimmten Forschungsgebiets. Möchte der Betrachter dieser Grafik nun noch erfahren in welchem Forschungsgebiet die meisten Publikationen vorliegen, so muss er nur die Länge der Sektoren miteinander vergleichen. Die Länge eines Sektors wird nämlich aus der Anzahl der bisherigen Publikationen in einem Forschungsgebiet abgeleitet.

Stellt man sich nun vor, dies wäre mit einer normalen Liste oder einer langweiligen Tabelle mit Forschungsgebieten, Publikationen und Mitgliedern gelöst, würde man nicht auf die Idee kommen dies auf der Startseite zu platzieren. Man würde es nicht tun, da die meisten Nutzer schnell von A nach B kommen wollen und dabei immer versuchen kognitive Beanspruchung zu minimieren. Vorallem auf der Startseite, sollte das Aktuelle und Wesentliche in den Vordergrund gestaltet werden. Das Aktuelle bei ResearchGate ist momentan die Überwindung der 1 Million Grenze und somit erweißt sich der Einsatz dieses visuellen Elements als elegante Methode den Besuchern diese Nachricht zu kommunizieren.Einen weiterer Einsatz eines visuellen Clusters ist in dieser zweiten Abbildung zu sehen. ResearchGate visualisiert die Beziehungen unter ReasearchGate-Mitliedern mit Hilfe eines solchen Elements. Dabei steht das aktuelle Mitglied, das sich gerade die Beziehung zu anderen Mitgliedern anschauen möchte, in der Mitte der Grafik. Das besondere an diesem Cluster ist, dass er vollständig und interaktiv ist. Er repräsentiert nicht nur alle Beziehungen des aktuellen Mitglieds, sondern auch alle Beziehungen unter den Mitgliedern, die in direkter Beziehung zu dem aktuellen Mitglied stehen. Zusätzlich kann man sich einzelnd zu jedem Mitglied die Beziehungen visualisieren lassen und weitere nützliche Nutzerinformationen einblenden.

Wer nun Interesse an dem neuen »Facebook für Wissenschaftler« hat, kann sich hier direkt anmelden: www.reasearchgate.net

jetzt kaufen!

Abstract

This work introduces the topic user experience design of websites. In chapter one, the concept of user experience is first generally described by a recently published definition, which is elaborated in the second chapter with the focus on websites. The third chapter deepens the thought of this concept and applies it to the design of corporate web site navigations. Why is the website navigation so important for a great user experience? How users behave when navigating on websites? Chapter four points new models, navigation elements, as well as current design trends of web navigations out. In summary, the insights from the second and third chapter are presented in the fifth chapter as an checklist form for corporate website navigations. Then, this form is critically evaluated by experts on practicality in form of personal opinions. The work concludes with a summary of the individual opinions and a view of the potential purpose of the developed checklist form for corporate website navigations.

buy now!

Dieser Prozess der Produktreife bildet die Basis für das Hierarchische User Experience Modell von Stephen P. Anderson, in dem er vorschlägt das die meisten technologischen Produkte und Dienstleitungen sechs Reifestadien durchlaufen. Es beginnt unten mit „Hey, das Ding funktioniert tatsächlich!” und endet oben mit „Das bedeutet mir etwas in meinem Leben.”

Hierarchisches User Experience Modell nach Anderson

1. funktionsfähig Ideen beginnen meist mit der Lösung einer bestimmten Problemstellung, wie z.B. das Angebot gewisser Funktionalitäten oder die Vermittlung einer Corporate Identity durch gestalterische Mittel.
   
2. zuverlässig Die Dinge müssen verlässlich sein. Wenn ich eine Website betreibe, möchte ich gerne wissen ob meine Daten zu jeder Zeit erreichbar und gesichert sind. Wenn eine Website nicht zuverlässig ist, insbesondere wenn persönliche Daten involviert sind, ist dies nicht zu aktzeptieren.
   
3. benutzbar und bequem Es reicht nicht aus jemanden etwas nur zu ermöglichen. Man muss es auch mit wenig Aufwand benutzen können. Hier kommen die nächsten zwei Ebenen, benutzbar und bequem ins Spiel. Anderson unterscheidet dabei zwischen der Gebrauchstauglichkeit und Bequemlichkeit. Beide führen zu einer leichteren Nutzung einer Website. Allerdings beschäftigen sich die meisten Usability-Gruppen primär mit der Lösung von bekannten Problemen. Der Fokus der Bequemlichkeit fragt hingehen, „Gibt es keinen natürlicheren Weg dieses Problem zu lösen?” Touchscreen Interaktionen, solche wie das iPad bietet, zeigen besonders gut wie eine bequemere Interaktion ermöglich werden kann. Die Dinge funktionieren mehr und mehr so wie wir sie auch aus der realen Welt gewohnt sind. Dadurch wird alles intuitiver und erfordert weniger Einarbeitungszeit.
   
4. angenehm Wo sich die Bequemlichkeit auf die Kognition bezieht, ist der Fokus der nächsten Ebene – angenehm – auf dem Affekt und den Emotionen. Wie können wir Dinge emotional aufwerten (und einprägsamer machen)? Dies gelingt typischerweise durch die Verwendung von einer freundlichen Sprache, Ästhetik, Humor, Weckung von Neugier, Erzeugung von Flow, Nutzung von Spielmechanismen, und andere vergleichbare Taktiken.
   
5. bedeutungsvoll Um eins klarzustellen, man kann eine Sache nicht für jemanden bedeutungsvoll machen – Bedeutung ist persönlich und subjektiv. Allerdings kann man für eine gewisse Bedeutung gestalten, indem man den Fokus auf die anderen Ebenen setzt und die Interessensvertreter (Stakeholder) dabei nicht aus den Augen verliert. Großartige Unternehmen wissen wie sie eine „Geschichte” erfinden die die Menschen glauben können. Disney World ist mehr als ein paar Achterbahnfahrten. Apple steht für mehr als nur Elektronik. Diese Marken bedeuten den Leuten etwas und es geht dabei nicht nur noch um ein bestimmtes Produkt oder eine gewisse Dienstleistung.

Die Herausforderung dieses Modells ist: Wenn man wirklich ein revolutionäres Produkt entwickeln möchte, muss man die Denkweise von unten nach oben aufgeben (Aufgaben im Fokus). Man muss mit den Erfahrungen die die Nutzer erleben sollen beginnen. Bei der Verwendung dieser neuen Perspektive, erkennt man auch viele neue Ideen und Wege diese zu implementieren. [vgl. Anderson 2011]

• eine zu geringe Auflösung hat,
• die Qualität nicht ausreicht,
• nicht aktuell ist oder
• keinen Transparenten Hintergrund besitzt.

Das sog. Logo-Variants Menü verfolgt das Ziel, dem Websitebesucher das Website- oder Firmenlogo in einer Vielzahl von Varianten zur Verfügung zu stellen. Damit das Logo-Variants Menü seinen Zweck erfüllt, sollten mindestens diese drei Logo-Varianten mit transparentem Hintergrund zur Verfügung gestellt werden:

1. kleine WWW-Variante (geringe Auflösung, 72 dpi, png, max 100 kb)
2. große WWW-Variante (höhere Auflösung, 72 dpi, max 800 kb)
3. Druck-Variante (hohe Auflösung, 300 dpi)

Darüber hinaus können natürlich noch weitere Varianten angeboten werden:

1. Favicon WWW-Variante (16×16, 72 dpi, ico)
2. kleine Graustufen WWW-Variante (geringe Auflösung, 72 dpi, png, max 100 kb)
3. große Graustufen WWW-Variante (hohe Auflösung, 72 dpi, max 800 kb)
4. Graustufen Druck-Variante (hohe Auflösung, 300 dpi)
5. Vektor-Variante (eps,svg,etc.)

Scroll-Activated Menüs verfolgen das Ziel, abhängig von der aktuellen Scrollposition des Benutzers, alle wünschenswerten Navigationsoptionen dynamisch einzublenden. Dem Nutzer soll soviel Scrollen wie möglich erspart werden. In Abbildung unten ist zu sehen wie die Website von Gamepro Gebrauch von einem Scroll-Activated Menü macht. Der obere Teil der Abbildung zeigt die Kopfzeile der Website von Gamepro. Darunter kann man sehen, wie der obere Rand der Website aussieht, wenn ein Benutzer gescrollt hat. Die normale Hauptnavigation verschwindet, stattdessen wird dem Nutzer eine sog. „Docking Navigation Bar“ angeboten, damit er weiterhin alle Navigationsoptionen direkt zur Verfügung hat.

Scroll-Activated Menü auf www.gamepro.com

Diese Docking Navigation Bar sollte von der Gestaltung eindeutig als Repräsentant für die Hauptnavigation zu erkennen sein, um das intuitive Verständnis dieser Einblendung zu stärken. Zusätzlich sollte darauf geachtet werden, dass der Benutzer die Menüpunkte aus der Hauptnavigation auch in der Docking Navigation Bar wiederfindet. [vgl. Kalbach 2011a]

Solche dynamischen Menüs beziehen sich allerdings nicht ausschließlich auf Hauptnavigationen. Das dynamische Einblenden von Navigationsoptionen kann in den verschiedensten Situationen hilfreich sein. Auf der Website vom Harvard Business Review werden z.B. wie in der unteren Abbildung zu sehen ist, abhängig vom aktuellen Artikel automatisch weitere Artikel desselben Autors angeboten. Dies geschieht immer wenn der Websitebesucher an das Ende eines Artikels gescrollt hat.

Scroll-Activated Menü auf www.blogs.hbr.org

Diese Art von Menüs stellt keinen Ersatz für herkömmliche Navigationselemente dar, vielmehr dient es der Unterstützung und dem Versuch ein individuellen Navigationserlebnis zu gestalten. [vgl. Kalbach 2011b]

Sogenannte „Mega Drop-Down Menüs“ erweitern die Möglichkeiten von normalen Drop-Down Menüs, indem sie in der Lage sind, Beziehungen unter einzelnen Navigationsoptionen visuell hervorzuheben. Dies unterstützt die Nutzer bei ihrer Navigationsentscheidung zusätzlich. Üblicherweise sind Mega Drop-Down Menüs wesentlich breiter und stellen auch wesentlich mehr Optionen als herkömmliche Drop-Down Menüs zur Verfügung. Das hat zur Folge, dass tiefere Einsprungspunkte möglich sind und der Nutzer so schneller an sein Ziel kommt.

2009 galten solche Mega Drop-Down Menüs als neue und innovative Lösung für die Platzproblematik einer Navigation. Gerade weil auch der Web-Usability Experte Jakob Nielson diese Art von Navigationsmenü als sehr Gebrauchstauglich erklärte, obwohl er normalerweise dafür bekannt ist, dass er gegenüber den meisten neuen Websiteelementen sehr kritisch ist. Er ist der Meinung, dass sie eine gelungene Methode sind, das Navigieren auf Websites zu erleichtern. [vgl. Nielsen 2009]

Mega Drop-Down Menü auf www.usa.gov

Mit der Zeit haben sich diese Menüs im Internet sehr verbreitet und dies ist, womöglich auch zu einem gewissen Teil, auf die positive Beurteiltung dieses Trends von Jakob Nielson zurückzuführen. Wenn man allerdings genau hinsieht, ist zu beobachten, dass viele Webentwickler Jakob Nielsen scheinbar missverstanden haben. Einige Mega Drop- Down Menüs haben mehr verschlechtert als verbessert. Ein Beispiel für ein misslungenes Mega Drop-Down Menü ist in der Abbildung oben zu sehen. Dieses Menü erleichtert es dem Benutzer nicht, den gesuchten Navigationspunkt zu finden, sondern stellt lediglich eine große Box für eine Ansammlung von Links zur Verfügung. So waren Mega Drop- Down Menüs nicht gedacht und führen, bei einer solchen Verwendung, eher zu einer Verschlechterung.

Damit ein solches Menü nicht misslingt, für den Benutzer einen Mehrwert darstellt und den Richtlinien von Nielson gerecht wird, sollte man folgendes bei der Gestaltung eines Mega Drop-Down Menüs einhalten bzw. beachten:

1. Verwandte Navigationsoptionen in Gruppen zusammenfassen
2. Optionen mittels strukturiertem Layout, Typografie und evtl. Icons hervorheben
3. Keine Scrollbar innerhalb des Menüs
4. Menü als ausklappbar kenntlich machen
5. Mouseover führt zum Aufklappen des Menüs
   1. Beim Mouseover sollten zuerst 0,5 Sekunden vor der Einblendung der Box gewartet werden
   2. Wenn sich der Mauszeiger zum nächsten Überpunkt bewegt, sollten 0,1 Sekunden vor der Einblendung der nächsten Box gewartet werden
   3. Ist der Mauszeiger außerhalb des gesamten Navigationsmenüs, sollten 0,5 Sekunden gewartet werden, worauf anschließend das Menü innerhalb von weniger als 0,1 Sekunden ausgeblendet werden muss [vgl. Nielsen 2010]

Mega Drop-Down Menü auf www.sony.de

Schaut man sich beispielsweise das Menü von Sony an, ist gut zu erkennen, worauf es bei solchen Menüs ankommt. Da der Websitebesucher üblicherweise eine Navigation lediglich grob überfliegt und kein Interesse daran hat, sich jeden einzelnen Navigationpunkt durchzulesen, ist es die Aufgabe des Designs dafür zu sorgen, dass es dem Benutzer leicht fällt, sein Ziel zu finden. Sony lenkt das Auge des Benutzers beispielsweise durch den Einsatz eines vierspaltigen Layouts, Kategorieüberschriften und speziell entworfenen Icons für die jeweiligen Kategorien. Dem Benutzer fällt es bei einer solchen Gestaltung, trotz einer vielzahl von Navigationsoptionen, nicht schwer den gewünschten Navigationpunkt zu finden (falls vorhanden), da er die Seite visuell „scannen“ kann. Dieser Prozess verläuft wesentlich schneller, als jeden Navigationspunkt lesen zu müssen.

Mit der Zeit hat sich im Internet ein Trend entwickelt, der diese Startseitenproblematik elegant löst. Es handelt sich dabei um das sog. Logo-Integrated Menü, wo Unternehmenslogo und Hauptnavigation miteinander vereint sind. Das bedeutet nicht, dass das Logo einfach in die Hauptnavigation gesetzt wird, sondern es wird als eigenständiger Navigationspunkt integriert. Die Idee dabei ist, dass Unternehmenslogo innherhalb der Hauptnavigation so zu gestalten, dass der Benutzer intuitiv erkennt, dass es sich dabei um einen eigenständigen Navigationspunkt handelt. Apple gehörte zu den Ersten die von einem solchen Menü Gebrauch machten.

Logo-Integrated Menü auf www.apple.de

Apple löst mittels dieser Technik zwei Dinge auf Einmal. Zum Einen wird kein weiterer Navigationspunkt mit Linktext benötigt und zum Anderen, ersparen sie sich den Einsatz eines weiteren Navigationselementes, um einen Weg zur Startseite bereitzustellen. Darüber hinaus ist es eine effiziente, platzsparende und einheitliche Lösung, um das visuelle Branding über die ganze Website hinweg zu stärken. Außerdem befolgt dieser Trend auch die Konvention, dass das Unternehmenslogo grundsätzlich mit der Startseite verlinkt sein sollte.

Logo-Integrated Menü auf www.nike.de

Gerade auch für größere Websites scheint dieser Trend sehr nützlich zu sein. Nike beispielsweise nutzt dieses Menü, um die einzelnen Subsites, an einer sinnvollen Position erreichbar zu machen. Wichtig dabei ist, dass Nike das Unternehmenslogo, genau wie die anderen Navigationspunkte gestaltet hat, um den Eindruck eines eigenständigen Navigationspunktes zu stärken. Überdies besitzt die Schaltfläche mit dem Logo auch einen kleinen Pfeil an der unteren rechten Ecke, sodass der Benutzer schon ahnen kann, dass dort etwas auszuklappen ist.

Logo-Integrated Menü auf www.puma.de

Puma setzt ebenfalls auf das Logo-Integrated Menü, verwendet allerdings die Kontrastfarbe Rot für den Hintergrund des Logos. Ausmaße, Schrift und Abstände wurden auch hier von den normalen Navigationspunkten adaptiert, um den Eindruck einer mit Interaktivität belegten Schaltfläche zu wecken.

Es sollte grundsätzlich bei diesem Trend beachtet werden, dass sich nicht jedes Unternehmenslogo dafür gleich eignet, direkt in die Hauptnavigation integriert zu werden. Denn Logos, die aus komplexeren Formen bestehen, sind schwierig in eine ästhetische Navigation zu integrieren, weil sie verkleinert nicht mehr die selbe Wirkung haben. Auf der anderen Seite, sollte ein Logo leicht einprägsam und auch in kleineren Größen noch gut Wirken. Es hängt somit maßgeblich vom Unternehmenslogo ab, ob ein solches Menü geeignet ist oder eher nicht. [vgl. Kalbach 2008, Seite 102]

Welche einfachen Techniken kann man einsetzen, um das Engagement eines Nutzers mit ihrer Website zu steigern? Befindet sich überhaupt Raum für Freude auf einer Corporate Website? Kann man einige Ideen der Psychologie auf das Design anwenden?

Vor einiger Zeit, experimentierte LinkedIn mit einem neuen Feature: ein kleiner Zähler über Profilinformationen, der einem anzeigt um wieviel Prozent das Profil vollständig ausgefüllt ist. Plötzlich füllten viel mehr Nutzer ihre Profile aus. Dieses Feature setzt nicht auf eine besondere Oberfläche, eine anspruchsvolle Informationsarchitektur, oder technisches Können. Es ist der Einfluss auf die grundlegende menschliche Psycholgie.

»Seductive Interactions« führen uns zu einer neuen Designebene. Sie nutzen die letzten Weiterentwicklungen in Sozialwissenschaften, Psychologie und dem Wirtschaftsverhalten.

http://www.youtube.com/watch?v=U-SNVLGBh5o

Link zur Website vom Autor Stephen Anderson www.poetpainter.com

http://www.youtube.com/watch?v=fXIeFJCqsPs

http://www.youtube.com/watch?v=RlQEoJaLQRA