uxzentrisch erörtert:
FadeIn und FadeOut werden zum neuen Aufmerksamkeits-Lenker. 5 Beispiele.

Google macht es, Twitter macht es, ein Shop und ein Blog machen es. Quasi alle coolen Jungs vom Block. OK, und Windows 7 auch.

Es geht um das Einblenden und Ausblenden von Teilen des Interface, um die Aufmerksamkeit der Nutzer noch gezielter zu lenken.

Am einfachsten erkennt man das Potential dieser Technik am Beispiel:

Beispiel 1: Twitter und seine Suchbox



(Video bei Screenr)

Ich kann mir die Diskussionen beim Designen der neuen Twitter-Homepage gut vorstellen: Auf einer Startseite wie Twitter hat man viele und sehr unterschiedliche Zielgruppen. Alle wollen abgeholt werden und für viele muss man eigene kleine Funktionen integrieren. Das sicher zentrale Anwendungsszenario ist der Einstieg in die Registrierung. Besucht man das neue Twitter.com, fällt der gelb-orange Button direkt ins Auge. Erst auf den zweiten oder dritten Blick fällt die neben dem Logo groß und prominent platzierte Suchfunktion auf. Das funktioniert nur, weil die Suche erstmal halbtransparent ist und erst bei Bedarf, wenn der Nutzer das Feld überfährt oder ihm den Fokus gibt, wird die Suche voll sichtbar. Dann wiederum wird sie zu einem schönen, großen Element das sich schön ins Design einpasst und die Wichtigkeit der Suche für Twitter widerspiegelt.

Beispiel 2: Google zeigt nurnoch das Suchfeld


(Video bei Screenr)

Google geht auf seiner Startseite einen ähnlichen, aber noch radikaleren Weg: zuerst wird der volle Fokus auf das Suchfeld gelegt. Hieran kann niemand vorbeisehen, denn alles andere ist ausgeblendet. Erst wenn man das Suchfeld verlässt (Tab-Taste) oder die Maus bewegt, werden die Randinformationen sichtbar. Eine tolle Lösung.

Beispiel 3: Die Navigation bei Ticketportal.ch


(Video bei Vimeo)

Dieses Beispiel stamm von UXSUX und wird auch dort schön erklärt:

»Beim Ticketportal.ch wird eine grosse Flyout-Navigation eingesetzt. Damit die Benutzer bei deren Bedienung nicht durch den darunterliegenden Content abgelenkt werden, wird der Hintergrund automatisch abgedunkelt. Maximaler Fokus auf Bedienung des jeweils ausgewählten Bereichs.«

Beispiel 4: afekenholm.se blendet seine Spalten aus


(Video bei Screenr)

In diesem Beispiel aus der Welt der Blogs bin ich unsicher, ob nicht doch die Begeisterung für die Möglichkeiten von jQuery die Überhand gewonnen hat und das ganze nicht etwas zu viel des Guten ist. Aber auch hier funktioniert der Effekt: Der Fokus wird bewusst gelenkt. Und ist der »Lightbox-Effekt« noch nicht eingetreten und ich nehme die Idee noch als interessant und neu statt abgedroschen und nervig wahr.

Beispiel 5: Windows 7 Ordnerbaum

Zwei Screenshots aus Windows 7: Erst wenn die Maus im rechten Screenshot über dem Ordner-Baum ist, werden die Auf-/Zuklapp-Pfeile angezeigt. Microsoft hat hier einen langen Weg hinter sich seit den Zeiten von Windows 95 als jeder Ordner mit einer gepunkteten Linie und quadratischen Plus-Minus-Icon versehen war.

Fazit

Wenn selbst Microsoft gelernt und umgesetzt hat, dass nicht alle Informationen zu jeder Zeit gleich präsent sein müssen, warum setzten wir diese Methodik dann so selten im Webdesign unserer Projekte ein? Ich werde jedenfalls versuchen, bei kommenden Projekten darüber nachzudenken, wie wir durch verstecken oder transparent setzten von Elementen, die dann nur bei Bedarf (vollständig) sichtbar werden, die Aufmerksamkeit noch gezielter lenken können.

PS: Weitere Beispiele? Wenn ihr weitere Beispiel kennt, packt sie bitte in die Kommentare! Danke!

4 Kommentare

Michael vor 5 Jahren

Es stellt sich dann nur die Frage, inwieweit man dadurch das »Scannen« einer Seite unterbindet oder erschwert. Einen Überblick zu verschaffen geht deutlich schwerer, wenn Inhalte z.B. Halbtransparent sind. Dann ist es besser, sie sind klar angedeutet, klappen sich dann auf. Aber gut zu wissen, dass wir nun ein weiteres Mittel zur Verfügung haben.

Tobias Jordans Autor vor 5 Jahren

@Michael: Ja, das ist einer der Gründe, warum ich Beispiel 4 (das Blog) so kritisch sehe.
Aber die anderen Beispiele haben dieses Problem des Scannens ja nicht – im Gegenteil, sie erleichtern das scannen eher durch bewusst gelenkte Aufmerksamkeit.

Trotzdem bin ich sicher, dass wir auch bei diesem Gestaltungsmittel bald noch einige schlechte Beispiele sehen werden :-).

Tobias Jordans Autor vor 5 Jahren

Update: Auch Soundcloud.com verwendet auf seiner (neuen) Startseite die Fadein-Technik von Google:

NB: Kann es sein, dass Google diesen Effekt inzwischen schon wieder entfernt hat?

Trackbacks und Pingbacks