Praktische Tipps zur Reduzierung der Besucherlast und Steigerung der Conversions

Veröffentlicht: 2020-04-03

Praktische Tipps zur Reduzierung der Besucherlast und Steigerung der Conversions 1

[Anmerkung des Herausgebers: Dieser Beitrag wurde ursprünglich am 5. Mai 2014 veröffentlicht und wurde aktualisiert, um eine Diskussion über Kahnemans System 1 und System 2 sowie weitere Tipps zur Reduzierung der Website-Besucherlast aufzunehmen.]

Wir betonen oft, dass Websites vermeiden müssen, den Benutzern eine kognitive Belastung hinzuzufügen, um ihnen die Konvertierung zu erleichtern. In diesem Beitrag sprechen wir über die zwei Betriebsmodi des Gehirns nach Daniel Kahneman und die verschiedenen Arten der Benutzerlast (und wie man sie minimiert).

Um einen Punkt des Nobelpreisträgers Psychologen Daniel Kahneman zu stark zu vereinfachen: Alle unsere Gehirne haben zwei Betriebsmodi .

Da ist das System, das aktiv ist, wenn wir unsere Zähne putzen, unser Müsli essen oder in einen Zug steigen. Dieses System ist schnell, unbewusst und automatisch. Es ist sehr nützlich, und es ist einer der Gründe, warum wir als Spezies so lange überlebt haben, wie wir es haben. Es ist der Modus, der unseren Vorfahren sagte, sie sollten weglaufen oder sich verstecken, wenn sie verdächtige Geräusche hörten und dachten, ein Raubtier sei in der Nähe. Ein langsamer, sorgfältiger und absichtlicher Denkprozess hätte sie gefressen.

Das ist System 1 .

Es gibt auch das System, das aktiv ist, wenn wir versuchen, 328 durch 17 zu teilen, einen 10-seitigen Aufsatz über Moby Dick schreiben oder, um ein Online-Marketing-Beispiel zu verwenden, einen regulären Ausdruck schreiben, der interne Besuche von Google Analytics fernhält. Dieses System ist langsam, bewusst und stark auf Anstrengung angewiesen. Wie System 1 ist es auch sehr nützlich – wir können es nur nicht die ganze Zeit benutzen.

Das ist System 2 .

Unser Gehirn versagt oft, wenn es versucht, System 1 für komplexe Aufgaben oder System 2 für Dinge zu verwenden, die sofortiges Handeln erfordern.

Eine Eigenheit der Modi ist, dass unser Gehirn für alltägliche Aufgaben System 1 „bevorzugt“. Wenn Sie einem Gehirn die Wahl zwischen einer System 1-Aufgabe und einer System 2-Aufgabe für alltägliche Aktivitäten geben, wird es normalerweise voreingestellt System 1.

Für einen Online-Vermarkter ist System 2 der Tod . Besucher haben die Möglichkeit, zu einer anderen Website zu wechseln, anstatt mit Ihnen zu handeln. Wenn sich die Nutzung Ihrer Website eher wie eine Teilung von 328 durch 17 anfühlt als Müsli zu essen, werden Besucher wahrscheinlich zu einer Website wechseln, die sich eher wie Müsli anfühlt.

Dinge einfach zu bedienen ist kompliziert

Ihre Aufgabe als Vermarkter besteht darin, Ihren Benutzern bei der Erfüllung ihrer Aufgaben zu helfen. Sie müssen es Ihren Besuchern so schnell und einfach wie möglich machen, zu dem zu gelangen, was sie benötigen.

Das klingt nach einer einfachen Sache, aber in der Praxis kann es ziemlich kompliziert werden.

Sie können es sich einfacher machen, indem Sie die verschiedenen Arten von Dingen verstehen, die den Benutzer belasten können:

  • Die visuelle Belastung bezieht sich auf Ihr Design. Wie viel Aufwand belasten Sie den Benutzer damit, Ihre Seiten visuell zu verstehen?
  • Bei der Motorlast geht es um Bewegung. Wie stark belasten Sie Ihre Benutzer mit der Verwendung von Maus/Zeiger und Tastatur/Tastatur, um etwas zu erledigen?
  • Bei der kognitiven Belastung geht es um die Menge an mentaler Verarbeitung, die erforderlich ist, um eine Seite zu verstehen. Wie viel intellektuelle Belastung erlegen Sie Ihren Besuchern auf, um zu verstehen, was Sie zu sagen versuchen?
  • Die Speicherauslastung bezieht sich auf die Menge an Arbeit, die Benutzer ausführen müssen, wenn sie sich an etwas erinnern, um Ihre Website zu verwenden. Wie stark wird das Gedächtnis des Benutzers beansprucht, um Ihre Website zu verwenden?

Lassen Sie uns diese Lasttypen angehen.

Visuelle Belastung

Visuell ist die billigste aller Belastungsarten, da Menschen mehrere Maschinen für die visuelle Verarbeitung haben. Trotzdem müssen Sie sicherstellen, dass Sie Ihre Besucher nicht stressen. Um die visuelle Belastung zu minimieren, müssen Sie über ein paar Dinge nachdenken:

Erschwinglichkeit

Es sollte sofort ersichtlich sein, welche Elemente auf der Seite interaktiv sind und welche nicht. Daher sollten Schaltflächen so aussehen, als könnten sie angeklickt werden. Im Allgemeinen sollten interaktive Elemente herausspringen und Elemente, die nur gelesen werden können, gedämpft werden.

Lesbarkeit

Machen Sie Ihre Website leicht lesbar.

  • Richten Sie eine klare visuelle Hierarchie ein, indem Sie größere Schriftgrößen für Zwischenüberschriften und Überschriften verwenden.
  • Unterstützen Sie das Scanverhalten von Webbenutzern, indem Sie Informationen in Aufzählungszeichen statt in Absätzen präsentieren.
  • Stellen Sie sicher, dass die Schriftstile konsistent sind, und vermeiden Sie zu verschnörkelte. Zu kreative Schriftstile können die Lesbarkeit beeinträchtigen.
  • Stellen Sie die Schriftgrößen groß genug für Ihre Zielgruppe ein (dh verwenden Sie größere Schriftarten für ältere Zielgruppen).

Beispiel für zu viel visuelle Belastung

Die Homepage von NewYorkBarbells.com zum Beispiel wird die Benutzer optisch überwältigen (rote Pfeile zur Hervorhebung hinzugefügt):

minimize cognitive load: overwhelming visual load example - newyorkbarbells.com homepage lacks a clear system to convey interactive versus non-interactive elements. "product list", for instance, is a section heading but is inside a black rectangular box with a prominent border, making it look like a button. the page also seems to use colors randomly - there's white text against a green background, bright yellow text against a black background, bright yellow text against a maroon background, and a combination of white and bright yellow text against a green background. the page is also text-heavy with blocks of text all over

  • Die Seite muss bei der Verwendung von Farben und Schriftarten disziplinierter sein. Es verwendet unterschiedliche Farben und Schriftarten und schafft keine klare visuelle Hierarchie.
  • Es ist nicht sofort ersichtlich, welche Elemente interaktiv sind und welche nicht:
    • „Produktliste“, ein anklickbares Element, hat keine Erschwinglichkeitsbezeichner und sieht nicht wie eine Schaltfläche aus.
    • „Zum Weiterlesen klicken“ in blau unterstrichenem Text ist anklickbar, aber „Serving Fitness Industry …“, ebenfalls blau unterstrichener Text, ist nicht anklickbar.
  • Die Seite ist textlastig und unterstützt das Scanverhalten von Webbenutzern nicht.

Denken Sie daran, je einfacher es für Benutzer ist, Ihre Seite zu scannen und sofort zu verstehen, desto geringer ist die visuelle Belastung, die Sie den Besuchern auferlegen.

Motorlast

Wenn Sie darüber nachdenken, wie Sie die Motorlast minimieren können, denken Sie an das Gesetz von Fitts . Es besagt, dass die Zeit, die jemand braucht, um zu dem zu gelangen, mit dem er interagieren möchte, von der Größe des Ziels und der Entfernung zum Ziel abhängt .

Das Ziel könnte eine Schaltfläche sein, auf die der Benutzer zu klicken oder zu tippen versucht, ein Formularfeld, auf das er klicken möchte, oder ein Akkordeonmenü, das er erweitern möchte.

Die Entfernung hingegen bezieht sich darauf, wie weit das Ziel von der Stelle entfernt ist, an der der Benutzerzeiger (z. B. Mauszeiger, Finger) beginnt.

Große Ziele, die sich in der Nähe des Zeigers befinden, erfordern also den geringsten Aufwand, während kleine Ziele, die weit entfernt sind, eine größere Motorlast auferlegen.

Hier sind ein paar Dinge, die Sie tun können, um die körperliche Anstrengung der Benutzer zu reduzieren:

  • Gruppieren Sie zusammengehörige Aufgaben . Auf diese Weise ist es nicht viel Arbeit, zwischen den Dingen zu wechseln, die für einen Satz verwandter Aufgaben erforderlich sind.
  • Erhöhen Sie die Größe der Schaltflächen , die für wichtige Aufgaben erforderlich sind. Auf diese Weise wird die Distanz, die der Zeiger zurücklegen muss, durch die Größe des Call-to-Action (CTA) kompensiert.

Beispiel zur Erhaltung der Motorlast

Der Einkaufswagen von Shoes.com hebt die „Zur Kasse“-Schaltfläche optisch hervor und reduziert die Motorbelastung, indem die Schaltfläche wiederholt wird. Unabhängig davon, ob der Zeiger oben auf der Seite oder unten auf der Seite beginnt (vermutlich nachdem der Benutzer die Artikel im Warenkorb überprüft hat), ist der Zeiger nie zu weit von der CTA-Schaltfläche entfernt.

reducing motor load example - on the right side of shoes.com's shopping is an orange "checkout" button at the top beside a blue "continue shopping" button. below the "checkout" button is the order summary with the breakdwon of the total amount due. below the order summary is another orange "checkout" button

Denken Sie daran, dass die Entfernung, die Benutzer zum Ausführen ihrer Aufgaben benötigen, von der Aufgabenerfüllung abhält. Benutzer tolerieren nur eine bestimmte Menge Speicherplatz, bevor sie aufgeben. Minimieren Sie daher die Motorlast, wann immer dies möglich ist.

Machen Sie es Benutzern nicht schwer, auf Ihrer Website das zu finden, was sie brauchen.

Lesen Sie „5 Fehler bei der Webnavigation, die Sie Conversions kosten“

Kognitive Belastung

Die kognitive Belastung ist die Menge an mentaler Verarbeitung, die erforderlich ist, um eine Seite zu verstehen. Wenn Sie mehrere Ausrichtungspunkte oder inkonsistente Orte für interaktive Aufgaben haben, wird die kognitive Belastung beeinträchtigt. Grundsätzlich müssen Sie Folgendes beachten:

Verfügbarkeit

Dies bezieht sich auf die Auffindbarkeit von Informationen, wenn Benutzer sie benötigen. Die Idee ist, es den Besuchern leicht zu machen, auf einer Seite zu erkennen, was sie brauchen. Dies könnte bedeuten, dass Elementen, die häufiger von Besuchern verwendet werden, mehr Raum oder visuelle Betonung auf einer Seite gegeben wird.

Beispielsweise könnte es schwierig sein, die Telefonnummer auf SK-II.com zu finden. Der Benutzer muss ganz nach unten zur Fußzeile der Seite scrollen, auf „Kontakt“ klicken und dann auf das Symbol „Anrufen“ klicken (dem auch keine Erschwinglichkeitskennzeichen fehlen):

reduce cognitive load: availability example - on the left side is an image of SK-II.com's homepage with the "contact us" link on the footer. on the right side, at the top, is an image of SK-II.com's "contact us" page, with a subdued phone icon with a "call" label at the bottom left side of the page. the image on the bottom right side is still the "contact us" page but with the "call" section activated - the page has the customer service's availability hours and phone number

Ein weiteres Beispiel für ein Verfügbarkeits- oder Auffindbarkeitsproblem ist, wenn der Benutzer sich fragt, was er auf der Seite tun soll, weil der Call-to-Action unklar oder unauffällig ist. Stellen Sie daher sicher, dass Navigationselemente visuell hervorstechen. Denken Sie daran, wenn der Benutzer etwas nicht finden kann, kann es genauso gut nicht existieren.

Ausrichtungspunkte

Webseiten sehen einschüchternder aus, wenn es mehr Ausrichtungspunkte gibt, also bleiben Sie bei einigen. Dies ist besonders wichtig bei Formularen. Wenn zwei Formulare die gleiche Anzahl von Feldern haben, hat dasjenige mit mehr Ausrichtungspunkten die schwerere kognitive Belastung.

Das Checkout-Formular von SK-II.com hat beispielsweise mehrere Ausrichtungspunkte. Die Website vermeidet jedoch unnötige kognitive Belastung, indem andere Bereiche der Seite deaktiviert werden, bis der Benutzer den ersten Schritt abgeschlossen hat. Sonst würde die Seite zu umständlich erscheinen:

reduce cognitive load: alignment points example - SK-II.com's checkout page divided into the shipping, delivery & payment, and summary sections. the shipping section has 2 alignment points, the delivery & payment section has 2 alignment points, and the summary section has 1 alignment point. only the shipping section is active

Konsistenz und Organisation

Das Verschieben derselben Funktionen an verschiedene Orte lässt den Benutzer innehalten und nachdenken. Die Bereitstellung häufig genutzter Funktionen in undurchsichtigen, schwer einsehbaren Bereichen lässt den Benutzer innehalten und nachdenken. Sie können Webkonventionen befolgen und die Fallstricke vermeiden.

Beispiel für unnötige kognitive Belastung

Celine.com zum Beispiel fordert seine Besucher auf, ihr System zu lernen, indem sie stark von den Webkonventionen abweichen:

unnecessary cognitive load example: the image at the top shows the above-the-fold section of celine.com's category page - the website id and the navigation bar are at the bottom of the screen, making it difficult to notice that users can still scroll down. the image at the bottom shows the page scrolled down, exposing that there's more content below the fold

  • Der Firmenname/das Firmenlogo, das normalerweise in der oberen linken Ecke der Seite zu finden ist (oder in der Mitte oben auf der Seite für Modeseiten), befindet sich in der unteren linken Ecke.
  • Ganz unten befinden sich die Navigationspunkte. Diese unkonventionelle Platzierung der Navigationselemente verursacht auch ein Doppelbodenproblem. Es ist nicht sofort ersichtlich, dass Benutzer nach unten scrollen können, um mehr Inhalt unterhalb der Falte zu sehen.

Feedback

Wenn Benutzer mit etwas auf der Seite interagieren oder wenn ein Fehler auftritt, sollte die Seite Mechanismen bereitstellen, um anzuzeigen, was passiert ist.

Stellen Sie sicher, dass das Feedback visuell auffällig ist, damit der Benutzer nicht danach suchen und sich fragen muss, ob die Website die gerade durchgeführte Aktion erkannt hat.

Die Produktdetailseite von AntonsFloristNJ.com zum Beispiel gibt dem Benutzer kein wirkliches Feedback, wenn er eine Postleitzahl eingibt, die das Unternehmen nicht bedient. Nachdem der Benutzer auf „In den Warenkorb“ geklickt hat, erscheint die Meldung „Fehler: Unbekannte Postleitzahl“ über den Breadcrumbs. Dies wird von Benutzern zwangsläufig übersehen, da die Nachricht weit vom Aktionsblock entfernt ist – sie scheint nichts mit der Aktion zu tun zu haben, die der Benutzer gerade ausgeführt hat. Die Fehlermeldung sieht auch eher nach internen Skripten als nach öffentlich zugänglichen Inhalten aus:

reduce cognitive load: lack of feedback example - the image on the right side shows antonsfloristnj.com's pdp with the product image on left side and dropdown options, a zip code field, a delivery date selector, and an "add to cart" button on the right side of the page. the image on the left side shows what happens when the user puts in a zip code the company does not cater to and clicks "add to cart" - the pdp remains the same but shows the message "error: unknown zip code" in the upper left corner, above the breadcrumbs

Denken Sie bei der Gestaltung Ihrer Seiten an den Titel von Steve Krugs Buch: Don't Make Me Think. Gestalten Sie Ihre Seiten intuitiv und benutzerfreundlich, sodass Sie von den Benutzern den geringsten mentalen Aufwand verlangen.

Arbeitsspeicher laden

Die Gedächtnisbelastung ist eine Belastung, die dadurch verursacht wird, dass man sich an Dinge erinnern muss, damit etwas funktioniert.

Auf Websites kann vieles davon vermieden werden, indem Informationen verfügbar gemacht werden, wenn sie benötigt werden.

Wenn Besucher Anweisungen zum Ausfüllen eines Formulars befolgen müssen, sollten sich diese Anweisungen nicht auf einer anderen Seite befinden – sie sollten sich auf dem Formular selbst befinden. Wenn Sie einen Assistenten mit einer Reihe von Schritten haben, sollten diese Schritte so angezeigt werden, wie der Benutzer sie durchführt – der Besucher sollte sich keine Schritte von einer anderen Seite merken müssen.

Wenn Sie über die technischen Fähigkeiten verfügen, um das automatische Ausfüllen von Formularen zum Laufen zu bringen, können Sie den Benutzern etwas Speicherlast ersparen. Unterstützen Sie sie mit Formularfeldern, wenn sie beginnen, Informationen einzugeben, die sie normalerweise auf mehreren Websites verwenden. Achten Sie nur darauf, dies zu testen, damit Sie beim Versuch, die Speicherlast zu sparen, keine Gruselfaktorschwelle überschreiten.

Beispiel zum Einsparen von Speicherlast

Das Anzeigen des verfügbaren Promo-Codes auf der Seite, auf der der Benutzer ihn eingeben muss, ist eine Möglichkeit, online Speicherlast zu sparen. Kiehls.com zum Beispiel hält das Promo-Code-Banner von der Startseite bis zum Warenkorb. Auf diese Weise muss sich der Benutzer den Code nicht merken oder zurück zur Startseite gehen, wenn er die Warenkorbseite erreicht hat:

conserving memory load example - the top image is kiehls.com's homepage with a free shipping promotion banner with the code and end date running across at the top of the page, below the site id and navigation bar. the bottom image shows the site's shopping bag with the order summary and a promo code box . the shopping bag page retains the shipping promotion banner with the code and end date at the top

Das Ziel ist immer, die Arbeit, die der Benutzer auf Ihrer Website leisten muss, zu minimieren. Dazu gehört, sie nicht zu bitten, sich an zu viele Dinge zu erinnern, um mit Ihrer Benutzeroberfläche zu arbeiten.

Vermeiden Sie nach Möglichkeit System 2

Denken Sie daran: In System 2 sterben Ihre Conversions.

Wenn Sie Besucher dazu bringen, zu sehr nachzudenken, um Ihre Website zu verwenden, werden die Benutzer die Website verlassen und mit Websites arbeiten, die einfacher zu verwenden sind.

Oft kann schon die Reduzierung der Anzahl der Elemente auf Ihren Seiten Wunder für die vier Arten der Besucherlast bewirken. Versuchen Sie es und befolgen Sie diese Tipps:

  • Reduzieren Sie den Text auf der Seite so weit wie möglich.
  • Befreien Sie sich von visuellen Ablenkungen, insbesondere von Bewegung.
  • Minimieren Sie die Anzahl der verfügbaren Auswahlmöglichkeiten. Präsentieren Sie die 3 oder 4 einfachen Entscheidungen, die ein Besucher leicht verarbeiten kann.
  • Halten Sie sich an Webkonventionen und vermeiden Sie, dass Benutzer Ihr System lernen.

Um jedoch noch weiter zu gehen und sicherzustellen, dass die Besucherlast so gering wie möglich ist, müssen Sie Ihre am häufigsten verwendeten Seiten in Bezug auf visuelle, motorische, Gedächtnis- und kognitive Belastung bewerten. Sie können das Erlebnis nicht für alle vier Lasttypen reibungslos gestalten, aber Sie können sehr bewusste Entscheidungen treffen, wenn Sie die damit verbundenen Kompromisse verstehen.

Blog-Fußzeile Cta1