Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 23. Mai 2019

Design: Du hast nur acht Sekunden!

Nicht zuletzt Smartphones haben wir es zu ver­dan­ken, dass sich unse­re Aufmerksamkeitsspanne ste­tig ver­kürzt. Mittlerweile machen uns angeb­lich schon Goldfische Konkurrenz. Wie gehst du als Webdesigner damit um, dass dei­ne Besucher im Moment der Ankunft schon fast ver­ges­sen haben, dass sie über­haupt da sind?

Generation Smartphone und die sinkende Aufmerksamkeitsspanne:

Die durch­schnitt­li­che Aufmerksamkeitsspanne eines Menschen beträgt … Oh, schau mal, ein Vogel.

Einer von Microsoft finan­zier­ten Studie zufol­ge, ist die Aufmerksamkeitsspanne des Durchschnittsmenschen, der im Falle der Studie kana­di­scher Staatsbürger war, von 12 Sekunden auf nur noch acht Sekunden gefal­len. Der Abstieg erfolg­te ver­gleichs­wei­se rasant, näm­lich inner­halb von etwas mehr als zehn Jahren. Maßgeblich dafür scheint das zwi­schen­zeit­lich zum Massenphänomen auf­ge­stie­ge­ne Smartphone zu sein.

Stimmt die Annahme, dass die Aufmerksamkeitsspanne eines Menschen nur noch acht Sekunden beträgt, so läge der Mensch damit hin­ter dem Goldfisch, des­sen Aufmerksamkeitsspanne angeb­lich bei neun Sekunden liegt. Im Grunde ist der Vergleich für unser Thema schon des­halb irrele­vant, weil Goldfische für gewöhn­lich nicht im Internet sur­fen. Außerdem ist nicht klar, ob die behaup­te­te Annahme zur Aufmerksamkeitsspanne eines Goldfisches über­haupt stimmt. Tina Bauer von Onlinemarketing.de hat da genau­er hin­ge­schaut.

Wer beäugt hier wen? (Foto: Depositphotos)

Sei es drum. Mit dem Goldfisch-Vergleich habe ich mir jeden­falls dei­ne Aufmerksamkeit gesi­chert. So ganz aus der Luft gegrif­fen ist die These ja über­dies nicht. Dass der Mensch immer weni­ger kon­zen­tra­ti­ons­fä­hig über immer kür­zer wer­den­de Zeitspannen ist, dürf­te dir im täg­li­chen Umgang mit dei­nen Mitmenschen schon auf­ge­fal­len sein. Und dass das Smartphone dar­an einen ganz erheb­li­chen Anteil hat, wird wohl eben­so kei­ner ernst­haft bestrei­ten wol­len.

Zur Ehrenrettung des Smartphones will ich nicht ver­schwei­gen, dass es einen wei­te­ren, deut­lich posi­ti­ve­ren Effekt zu bestau­nen gibt. Denn es wird zwar die Aufmerksamkeitsspanne kür­zer, gleich­zei­tig steigt aber die Verarbeitungsgeschwindigkeit. Der Mensch kann also schnel­ler iden­ti­fi­zie­ren, womit er sich beschäf­ti­gen will und womit nicht. Außerdem gelingt es ihm schnel­ler, Wissen in sei­ne Speicher zu trans­fe­rie­ren, um es mal tech­ni­kaf­fin aus­zu­drü­cken.

Nicht nur die Aufmerksamkeitsspanne sinkt, auch die Nutzungsdauer

Um jetzt den Bogen zum Design zuschla­gen, müs­sen wir uns noch kurz vor Augen hal­ten, dass die Internetnutzung immer mobi­ler wird. Analysen von Comscore für die USA zei­gen, dass schon im Februar 2015 die Zahl der aus­schließ­lich mobi­len Internetnutzer jene der klas­si­schen Desktopnutzer über­stie­gen hat. Waren im Mai 2014 die aus­schließ­lich am Desktop sur­fen­den Nutzer noch mit 19,1 Prozent in der Überzahl gegen­über den 10,8 Prozent aus­schließ­lich am mobi­len Gerät Surfenden, ent­wi­ckelt sich die Schere jetzt in die ande­re Richtung.

Mit wem war ich noch­mal hier? Guck mal. Lustig! (Foto Depositphotos)

Hinzu kommt, dass auch am mobi­len Gerät längst nicht alles Gold ist, was glänzt. Informationen des Mobile-Tracking-Anbieters Jampp besa­gen, dass sich auch hier die durch­schnitt­li­che Nutzungsdauer in einem dra­ma­ti­schen Sinkflug befin­det. Danach sinkt die durch­schnitt­li­che Nutzungsdauer um knapp 90 Prozent im Jahr. Untersucht wur­den übri­gens E-Commerce-Apps.

So reagiert dein Design auf sinkende Aufmerksamkeitsspannen

Jetzt kom­men wir aber wirk­lich zum Design. Der Ausgangspunkt unse­rer Überlegungen muss doch nun der sein, dass die poten­zi­el­len Nutzer unse­rer Website mitt­ler­wei­le fast genau­so wenig Beachtung zu schen­ken bereit sind, wie der durch­schnitt­li­chen Werbeanzeige. Wir haben dem­nach nur mini­mals­te Zeitspannen, unse­re Besucher davon zu über­zeu­gen, dass sie bei uns das fin­den, was sie unbe­dingt nicht ver­pas­sen wol­len.

Design-Aspekt #1: Performance

Deshalb begin­nen wir nicht mit Überlegungen zu Inhalten und Gestaltung, son­dern wir begin­nen damit, unse­re Seiten auf Performance zu opti­mie­ren. Natürlich hat das auch mit Inhalten und Gestaltung zu tun; aller­dings betrach­ten wir das Gespann von der ande­ren Seite. Wir gestal­ten nicht erst und opti­mie­ren dann, son­dern gestal­ten direkt auf der Basis von Performancezielen.

Wenn du WordPress nutzt, wird dich unse­re gro­ße Serie zur Geschwindigkeitssteigerung sicher­lich inter­es­sie­ren. Wenn du schnell einen Eindruck davon bekom­men willst, wie groß dei­ne Seiten unter der Annahme ver­schie­de­ner Netzgeschwindigkeit maxi­mal sein dür­fen, dürf­te das Tool Performance Budget was für dich sein.

Design-Aspekt #2: Feedback

Auch wenn du Performance zu einem dei­ner Hauptanliegen machst, wird es nicht bei allen Prozessen dei­ner Website mög­lich sein, Antwortzeiten im Sekundenbereich zu erzie­len. An die­sen Stellen soll­test du beson­ders dar­auf ach­ten, dass du Status-Rückmeldungen vor­siehst.

Wenn schon gewar­tet wer­den muss, dann doch wenigs­tens mit einer Perspektive. Du mel­dest also dem Benutzer zurück, an wel­cher Stelle er sich im Prozess befin­det und wie lan­ge die Aktion vor­aus­sicht­lich noch dau­ern wird. Setze aber nicht die gene­ri­schen Ladekreise ein, die zwar so aus­se­hen, als wür­den sie ein Feedback geben, in Wirklichkeit aber nur Bewegung auf den Screen brin­gen. Das merkt der Benutzer, sobald er einen die­ser unsäg­li­chen Spinner sieht.

Design-Aspekt #3: Background Loading

Bei Apps, die mit Uploads arbei­ten, gilt Instagram als Paradebeispiel. Denn Instagram beginnt mit dem Upload des von dir auf­ge­nom­me­nen Fotos unmit­tel­bar nach der Anwendung eines der Filter. Während du also noch die Informationen und Hashtags zum Foto ein­tippst, lädt dein Bild schon auf den Service hoch. Im Regelfall ist der Upload schon erle­digt, wenn du mit den Zusatzinformationen fer­tig bist. Wenn es in dein Anwendungsszenario passt, ver­su­che eben­falls, von der Technik des Background Loading Gebrauch zu machen.

Design-Aspekt #4: Lazy Load

Etwas zwei­schnei­dig wird das Schwert, wenn es um das Thema Lazy Load geht. Lazy Loading bezeich­net das Nachladen von Inhalten, sobald die­se in den Viewport gera­ten. Das Konzept ist eigent­lich nicht schlecht. Du lädst Inhalte erst dann nach, wenn die­se Inhalte tat­säch­lich gebraucht, weil gese­hen wer­den.

Wenn du die­se Technik ganz unse­lek­tiv etwa auf alle Bilder anwen­dest, kann sie aller­dings ziem­lich nach hin­ten los gehen. Zwar sparst du beim initia­len Aufruf einen Schwung Daten, dafür weißt du nicht sicher, ob die Internetverbindung fort­lau­fend schnell genug sein wird, um die jeweils erfor­der­li­chen Daten nach­zu­la­den.

Intelligenter ist es daher, wirk­lich nur sol­che Inhalte nach­zu­la­den, die für die Nutzererfahrung nicht unbe­dingt sofort erfor­der­lich sind. Und das wer­den bei einem Bildbetrachter eher sel­te­ner die Bilder selbst sein. Wenn es aber nicht pri­mär um das Betrachten von Bildern im Stream geht, kann Lazy Load durch­aus Sinn erge­ben.

Design-Aspekt #5: Reduktion auf das Wesentliche

Das Web ist ja groß genug. Da schrei­be ich mal alles zu mei­nem Produkt rein, was mir so ein­fällt. Platz ist schließ­lich kein Faktor.

Kennst du die­se Einstellung? Sie ist ver­ständ­lich, aber falsch. Denn dabei fehlt es klar am Benutzerfokus. Im Rahmen einer durch­dach­ten Kommunikationsstrategie muss im Vorfeld der Seitenerstellung genau defi­niert wer­den, was dem poten­zi­el­len und tat­säch­li­chen Kunden näher gebracht wer­den soll und inwie­fern er wie inter­agie­ren kann.

Alle Elemente, die der fest­ge­leg­ten Strategie nicht ent­spre­chen, wer­den radi­kal weg gelas­sen. Dadurch, dass Dinge, die nicht da sind, auch nicht beim Betrachten aus­sor­tiert wer­den müs­sen, reagie­ren wir auf die redu­zier­te Aufmerksamkeitsspanne unse­res Besuchers und erhö­hen die Wahrscheinlichkeit, dass sich sein Blick an den wich­ti­gen Informationen unse­res Auftritts ver­fängt.

Wenn dich die­ses Thema näher inter­es­siert, und das soll­te, dann lies hir­zu auch unse­ren Artikel “Minimal Webdesign macht glück­lich”.

Fazit: Bau deine Seiten so, dass sie weniger Aufmerksamkeit erfordern

Was nicht da ist, kann nicht wahr­ge­nom­men wer­den, kann also auch nicht die Aufmerksamkeitsspanne tan­gie­ren. Das klingt sim­pel und das ist es auch. Im Grunde soll­te die Konzentration auf das Wesentliche nicht unbe­dingt eine neue Strategie sein. Tatsächlich bedurf­te es aber erst sol­cher Erkenntnisse, wie jener aus die­sem Beitrag, um das Thema ernst­haft in den Fokus zu rücken. Das Smartphone-Zeitalter ist aus der Sicht der Markenkommunikation ein ech­ter Segen.

(Der Beitrag erschien im Original im Januar 2018 und wird seit­dem aktu­ell gehal­ten. Das letz­te Update erfolg­te im Mai 2019.)

(Bildnachweis Artikelbild: Depositphotos)

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

5 Kommentare

  1. Ein “gefühl­ter” Aspekt dabei ist aber auch, dass dank Bootstrap alle Seiten gleich aus­se­hen. Ich habe zwar nie die Zeit gestoppt, aber ich bin mir ziem­lich sicher, dass ich sol­chen gene­ri­schen Seiten weni­ger Zeit ein­räu­me, mich zu über­zeu­gen. Ich bin zwar kein Fan von unnö­ti­gen Eskapaden, aber das Design ist auch wich­tig, um Aufmerksamkeit zu bekom­men. Diese Gleichförmigkeit ist ein­fach ermü­dend für Auge und Hirn.

  2. Dies ist wirk­lich ein sehr inter­es­san­ter Artikel. Die Aufmerksamkeitsspanne von vie­len Menschen sinkt tat­säch­lich stark ab. Aber auch von Mitmenschen die nicht oder nur wenig im Internet unter­wegs sind, son­dern mehr vor dem Fernseher sit­zen. Das hat anschei­nend den glei­chen Effekt.

  3. Was woll­te ich noch gleich?

  4. Von der Seite habe ich es noch gar nicht betrach­tet… sehr erfri­schend die­se Betrachtungsweise. Danke Dieter

  5. Ein inter­es­san­ter Art… oh, das Telefon klin­gelt …

Schreibe einen Kommentar

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