-Anzeige-

Usability Tipps zur Optimierung mobiler Websites


In diesem Artikel erkläre ich, was der Begriff „Usability“ bedeutet und verrate hilfreiche Tipps zur Usability Optimierung, mit denen Du über mehr Benutzerfreundlichkeit den Umsatz Deiner Website steigern kannst.

PPC-Insight:
Da die „Nutzerfahrung mit der Zielseite“ einer der Hauptparameter für die Berechnung von Qualitätsfaktoren bei Google- und Facebook Ads darstellt, kannst Du mit den folgenden Optimierungtipps sogar Deinen CPC drücken. 😉


Info: Sollten Dir die folgenden Tipps gefallen, dann empfehle ich Dir zusätzlich dieses Buch (Provisions-Link) von Johannes!


Für die Demos in diesem Artikel rate ich Dir, diese Seite auf Deinem Smartphone aufzurufen. Los geht’s!


Definition: Was bedeutet Usability?

Definition: Was bedeutet Usability?

Das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.

So lautet die ISO-Norm 9241-11.

„Effektiv“ bezieht sich dabei auf die Vollständigkeit und Genauigkeit, mit der die Benutzer ein bestimmtes Ziel erreichen.

„Effizient“ steht für den geringstmöglichen Aufwand, mit dem die Benutzer ein bestimmtes Ziel vollständig und genau erreichen. Je weniger Aufwand betrieben werden muss, um das Ziel zu erreichen, umso effizienter ist die Nutzung des Produktes.

„Zufriedenstellend“ – hierbei lautet das Ziel, eine positive Einstellung der Benutzer gegenüber der Nutzung des Produktes zu erzeugen.

Was ist Usability Optimierung?

Was ist Usability Optimierung?

„Usability Optimierung“ bedeutet im Kontext des digitalen Marketings die Benutzung Deiner Website mit Hilfe von Tests immer wieder auf die Probe zu stellen und so weit zu verbessern, dass ein User das von Dir gesteckte Ziel (z.B: User soll Produkt oder Dienstleistung kaufen) so einfach wie möglich erreicht.

Tipps zur Usability Optimierung

Tipps zur Usability Optimierung

Dieser Artikel ist ein wachsendes Konstrukt. Sobald ich einen neuen Optimierungstipp ausfindig mache, wird dieser für Dich mit in die folgende Liste aufgenommen.

Tipp Nummer 1

Das schönste Webdesign bringt nichts, wenn die Ladezeit einer Website zu lang ist und der User daraufhin den Besuch der Seite abbricht, ohne auch nur einen Pixel davon angezeigt bekommen zu haben.

Seit Oktober 2016 leben wir laut StatCounter in einer Mobile-First Welt, da ab diesem Zeitpunkt erstmals Webseiten mehr mit mobilen Geräten besucht wurden als vom Desktop aus.

Aus diesem Grund zielen meine Empfehlungen vorrangig auf die Optimierung mobiler Websites ab.

In der Data Gallery von Google wird angegeben, dass bis 2020 insgesamt 70% der Mobilfunkverbindungen weltweit mit 3G erfolgen. Das „Schnarchladen per Handy“ hält also leider noch eine Weile an.

Um herauszufinden, wie schnell Deine Website lädt, kannst Du die hier die Leistung und Geschwindigkeit testen.

Wenn Du im Gesamten wissen möchtest, wie Google Deine Website einstuft, kannst Du auch Google’s Tool PageSpeed Insights nutzen.

So sehen beispielsweise die Werte für die aktuelle Seite, auf der Du hier surfst, aus.

Um Deine eigene Seite zu testen, ersetze meine Internetadresse durch Deine und klicke auf den Button [Analysieren].

Einer der Hauptgründe für eine lange Ladezeit ist die Einbindung von nicht-optimierten Bildern.

Sollte das bei Dir der Fall sein, nutze meine Anleitung zur Bildoptimierung.

Auch direkt ladende Videos können den Seitenaufbau extrem verlangsamen.

Wird ein externes Video (YouTube-Einbindung) schon beim Seitenaufruf geladen, kostet dieser Ablauf einiges an Ladezeit.

Auch in Anbetracht der DSGVO macht es daher Sinn, anstelle des Videos einen Platzhalter mit Datenschutzhinweis anzeigen zu lassen und das Video (asynchron) erst nach einem Klick auf diesen Hinweis nachzuladen.

Demo-Videoeinbindung ansehen

Ein weiterer Grund für eine Ladezeitverlängerung ist der Folgende.

Wenn Funktionen auf Schaltflächen verdeutlicht werden sollen, greifen einige Webdesigner gerne zu Symbolen und laden ganze Schriftarten wie Font Awesome über ein CDN (Content-Delivery-Network) in den Browsercache des Users.

Eine schnellere (und auch datenschutzpraktikabelere) Möglichkeit besteht darin, Icons direkt über einen HTML-ASCII Code ausgeben zu lassen.

Willst Du beispielsweise das bekannte Warenkorb-Symbol  🛒 auf Deiner Website anzeigen lassen, so schreibst Du an der Stelle einfach den Code 🛒 in den HTML-Quelltext.

Weitere Codes findest Du in dieser Referenzliste.


Tipp Nummer 2

Gerade weil das Smartphone draußen bei unterschiedlichen Lichtbedingungen genutzt wird, solltest Du besonderen Wert auf einen starken Schriftkontrast legen. Lesen soll Spaß machen.

Anstatt:

Du bist super!
Du bist großartig!
Du bist genial!

Besser:

Gut gemacht!
Gut gemacht!

2 Funfacts
Hässlichste Farbe der Welt:
Pantone 448c – #4a412a

#4a412a

Beliebteste Farbe der Welt:
Marrs Green – #008C8C

#008C8C

Tipp Nummer 3

Positioniere Schaltflächen und andere Interaktionselemente dort, wo sie der User erwartet, damit die Bedienung intuitiv erfolgen kann.

Hierfür kannst Du auch einen Blick in die meistgenutzten Smartphone-Apps werfen.

Gelerntes Verhalten (Verhaltensmuster) muss nicht immer das praktischste Verhalten sein und dennoch wird es anstandslos ausgeführt.

Ein Beispiel dafür ist die Positionierung des bekannten Burger-Menus auf einer mobilen Website.

Vom physischen Aufwand (Erreichbarkeit der Schaltfläche mit dem Daumen) würde die Wahl des kürzesten Weges bedeuten, dass das ☰-Icon am unteren Ende des Smartphonebildschirmes platziert werden müsste.

Dann könnte ein User dieses Element einhändig und ohne eine Streckung des Daumens erreichen und bedienen.

Darstellung Schwierigkeitsgrad – Daumen auf einem Smartphonebildschirm bei einhändiger Bedienung:

Schwer
Mittel
Leicht

Da sich die User jedoch daran gewöhnt haben, das Burgermenü-Icon im oberen Drittel des Bildschirmes zu finden, würde eine anderweitige Positionierung für Verwirrung (einen Pattern-Interrupt) sorgen.

Da es mehr Rechtshänder als Linkshänder in der Europäischen Bevölkerung gibt, empfehle ich das Burgermenu oben rechts anstatt oben links zu positionieren.

Hält jemand das Smartphone in der rechten Hand, so muss der Daumen für ein Erreichen der Bildschirmposition oben rechts weniger stark gestreckt werden, als oben links.

Der User fängt an, das Menü zu suchen und muss dafür mentale Energie aufwenden.

Merke: Je weniger mentale Anstrengung eine Handlung erfordert, umso leichter wird sie ausgeführt.


Tipp Nummer 4

Betritt ein User zum ersten Mal Deine Seite, soll er auf den ersten Blick erfassen, worum es auf der Seite geht und was ihm geboten wird.

Positioniere den Hauptnutzen in dem Bereich des Bildschirmes, der ohne zu scrollen (Above-The-Fold) wahrgenommen wird.

Gestaltest Du beispielsweise eine Landingpage, auf die der User über eine Werbeanzeige geleitet wird, so kannst Du den bekannten 5-Sekunden-Test machen, um die Kernbotschaft für den User noch eindringlicher zu formulieren.

5-Sekunden-Test:
Zeige einem themenfremden Menschen für 5-Sekunden Deine Website, auf dem Smartphone.

Dann verdecke seine Sicht auf den Bildschirm und stelle die Frage: „Worum geht es auf dieser Seite?“.

Je genauer Deine Testperson die Kernbotschaft wiedergeben kann, umso besser hast Du sie definiert und platziert.

Kann die Testperson die Botschaft nicht wiedergeben, solltest Du die Formulierung und/oder die Platzierung der Botschaft verändern.


Tipp Nummer 5

„Fachidiot schlägt Kunde tot.“ lautet hier der entscheidende Spruch.

Wenn Du in Deinen Texten Buzzwords oder Abkürzungen nutzt, biete Deinem Besucher eine schnelle Möglichkeit, die Bedeutung dieser Worte auf der aktuellen Seite zu erfassen.

Ansonsten läufst Du Gefahr, Deinen Besucher zu verlieren, weil er den Begriff woanders recherchiert, um den Text verstehen zu können.

Da reine AzGh-Tooltipps meist klein und daher schwierig wieder wegzuklicken sind, empfehle ich die Nutzung eines Modals.

AzGh-Tooltipps
Das Wort AzGh sollte Dich nur dazu verleiten, in dem vorherigen Text auf das -Zeichen zu klicken, damit Du hier landest und diese Version einer Infobox siehst. 😉

Tipp:
Zeige dem User eindeutig, wie er diese Infobox auch wieder schließen kann.


Tipp Nummer 6

Einer der wichtigsten Tipps, den ich bei meinen Optimierungsaudits immer wieder weitergebe, lautet: Vermeide Ablenkungen!

Um aus einem Fly-By (User ohne Kaufabsicht) einen Interessenten und dann einen Kunden zu machen, sind meist zahlreiche Schritte nötig, die Zeit und/oder Geld kosten.

Jeder Link, den Du auf Deiner Seite platzierst, der den User weg von Deinem Verkaufsziel leitet, ist ein Link zu viel und muss entfernt werden.

Gleiches gilt für andere Ablenkungen, wie Banner-Ads und Overlays.

Um die Störkraft von Ablenkungen (kurz: Bullshit) auf einer Website zu erleben, empfehle ich Dir, einen Blick auf deathtobullshit.com zu werfen und dort auf den Link „Turn bullshit on?“ zu klicken.

Bonustipp für YouTube-Video-Einbindungen
Wenn Du auf Deiner Seite ein YouTube Video einbindest, dann deaktiviere die Funktion „Nach Ende des Videos vorgeschlagene Videos anzeigen“.

Damit vermeidest Du, dass Dein Website-Besucher direkt auf den nächsten Videovorschlag klickt und aus Deinem Thema gezogen wird!


Tipp Nummer 7

Worum es bei diesem Tipp geht, wirst Du sehr schnell erkennen, wenn Du versuchst, auf das blaue Viereck zu touchen.

Wer jetzt sagt: „Aber das ist doch wohl sonnenklar, dass man keine zu kleinen Schaltflächen nutzen soll! Wer macht denn schon sowas?“, den lade ich herzlich dazu ein, eine Videobeschreibung unter einem Video in der Youtube-App über das winzig-kleine „▾“-Symbol aufzurufen.

Viel entspannter funktioniert die Bedienung jedoch, wenn die Schaltflächen so designed sind, oder?

Touch auf das blaue Viereck!

Wenn Du Schaltflächen designst, dann empfehle ich eine Höhe & Breite von mindestens 48 Pixeln. Der Abstand zum nächsten Touchelement sollte ebenfalls mindestens 20 Pixel betragen. Je höher die Pixelwerte, umso treffsicherer können die Schaltflächen bedient werden.


Tipp Nummer 8

Gerne werden Icons auf Schaltflächen genutzt, die bestimmte Funktionen auslösen.

Hierbei empfehle ich Dir für die Beschriftung folgende Regel, um dem Benutzer die Funktionalität deutlich zu machen.

Anstatt:


SCHERE

Besser:


AUSSCHNEIDEN

Merke: Beschreibe was es macht (die Funktion), nicht was es ist (den Gegenstand).

Nutzt Du einen Button für einen CTA, (Call To Action) ist folgendes Wording in GROSSBUCHSTABEN empfohlen.

In dem nachfolgenden Beispiel geht es um die Zusendung eines E-Books per E-Mail, sobald der User seine E-Mail-Adresse in einen E-Mail-Verteiler eingetragen hat.

Anstatt:

In E-Mail Liste eintragen

Besser:

JETZT E-BOOK ZUSCHICKEN

Merke: Beschreibe was der User bei einem Klick auf den Button bekommt (den Benefit), nicht was passiert (den Vorgang).


Tipp Nummer 9

Der folgende Optimierungstipp vermeidet Frustration durch Fehlklicks auf Deiner Website und ist ein präzises Beispiel dafür, dass Desktopdesigns nicht 1 zu 1 auf Mobiledesigns übertragen werden sollen.

Nur weil viele es so machen, heisst es noch lange nicht, dass es so auch gut ist!

Worum es geht?

Klick auf:

Problem einblenden
Problem ausblenden

Wo hier das Problem liegt?

Während der User beim Surfen am Desktop bewusst mit der Maus auf den Scroll-Up Button klickt, um automatisch zum Seitenanfang hoch zu scrollen, so kann es beim Scrollen auf einer mobilen Website immer wieder dazu kommen, dass man den Button ungewollt mit dem Daumen antippt.

Dann reisst einem diese Funktion den aktuellen Text vor der Nase weg und man muss mühsam wieder zu der gewollten Lesestelle im Text herunterscrollen.

Kein fixierter Scroll-Up Button auf mobilen Webseiten!

Stattdessen empfehle ich Dir die Nutzung eines Scroll-Up-Buttons:


unterhalb des Contents.


Tipp Nummer 10

Worum es an dieser Stelle geht, findest Du heraus, wenn dem Du nacheinander auf die beiden folgenden Buttons klickst.

Demo 1
Demo 2
Dieses Feedback zeigt Dir als User, dass Dein Klick etwas bewirkt hat!
Führt ein Besucher eine Aktion auf Deiner Website aus und erhält dazu kein direktes Feedback, so ist er unsicher ob diese Aktion erfolgreich ausgeführt wurde. Sorge bei Useraktionen, wie beispielsweise dem Speichern einer Einstellung oder Absenden von Formulardaten für direktes, offensichtliches Feedback!

Tipp Nummer 11

Auch wenn ich zu dem Thema Formulare noch wesentlich mehr schreiben werde, zeige ich Dir hier wieder einen besonderen Fall.

Eingabefelder haben ihren ganz eigenen Charme und können einen User auf die Palme bringen, wenn Vertipper auf Grund einer falschen Formatierung ermöglicht oder sogar gesteigert werden.

Dazu ein Experiment: Bitte trage einmal eine 11 stellige Zahl in den nachfolgenden Eingabefeldern ein.

Eingabefeld 1:

Eingabefeld 2:

Welches Eingabefeld konntest Du einfacher nutzen?

Damit sich für die Eingabe von Ziffern direkt eine Zahlentastatur auf dem Smartphone öffnet, setzt Du den type=“number“ anstatt type=“text“ in das <input>-Tag ein.

<input type="number">

Damit kannst Deinem Websitebesucher die Eingabe von Ziffern deutlich erleichtern.


Tipp Nummer 12

Einige Webentwickler nutzen für die Beschriftung von Eingabefeldern ausschließlich den sogenannten „Placeholder“ (Beschriftung im Eingabefeld) um Platz zu sparen.

Sobald der User den ersten Buchstaben eingegeben hat, verschwindet die Beschriftung.

Hat er sich dann nicht gemerkt, was in dem Feld eingegeben werden soll, müsste er seine Eingabe komplett löschen, um die Beschriftung wieder angezeigt zu bekommen.

Eine praktischere Option ist die Folgende.

Kurz: Sorge dafür, dass der User jederzeit vor Augen hat, was er in ein Feld eingeben soll.


Tipp Nummer 13

Gerade wenn auf einer Website erklärungsbedürftige Dienstleistungen angeboten werden, ist der telefonische Kontakt immer noch das beliebteste Mittel der Wahl.

Leider werden hier auch sehr viele mögliche Kundenkontakte verschenkt, da das Potential des mobilen Surfens nicht genutzt wird.

Folgendes Experiment zeigt Dir, was ich meine.

Versetze Dich in die Lage eines Kunden, der gerne einen telefonischen Kontakt aufbauen möchte und dafür 2 Optionen angeboten bekommt.

Option 1:

Jetzt anrufen unter:
0123 456789

Wird dem Interessenten die Telefonnummer auf seinem Smartphone so dargeboten, müsste er für einen Anruf mehrere Schritte ausführen.

  • Telefonnummer kopieren
  • Homescreen aufrufen
  • Telefon-App starten
  • Telefonnummer einfügen
  • [Anrufen]-Button touchen

Jeder dieser Schritte erhöht die Wahrscheinlichkeit, dass ein Interessent den Kontaktversuch abbricht und dadurch eine wertvolle Umsatzgelegenheit verschenkt wird.

Option 2:

Jetzt anrufen unter:
0123 4567890123 456789

Hierbei wird die Telefonnummer zu einem klickbaren Link gemacht.

Der Interessent braucht nur auf die Telefonnummer touchen und schon öffnet sich automatisch die Telefonapp des Smartphones mit bereits eingetragener Telefonnummer.

Für den Anruf braucht der User nur noch auf den [Anrufen]-Butten klicken.

Fehler vermeiden:
Achte beim Erstellen einer klickbaren Telefonnummer darauf, dass die Ziffer „0“ bei internationalen Nummern weggelassen wird.

+0049123456789
anstatt
+00490123456789

Ansonsten gibt es die Ansage: „Kein Anschluss unter dieser Nummer.“

So erstellst Du „Option 2“:
Um eine Telefonnummer klickbar zu machen, erstellst Du folgenden Link und trägst Deine Nummer ein.

<a href="tel:0123456789">0123 456789</a>

Wichtig:
Prüfe vor der Anzeige des Telefon-Links, ob Dein Websitebesucher Deine Seite mit dem Smartphone aufruft und zeige nur dann den Link an. Ansonsten öffnet sich beim Surfen mit dem Desktop-PC und dem Klick auf den Telefonlink ein neues, leeres Fenster Fail-Beispiel: 123456789 und der User wird irritiert.

Wenn Du nicht weisst wie das geht, frag einen CSS-Profi.


Tipp Nummer 14

Um das Kurzzeitgedächtnis Deines Websitebesuchers optimal zu nutzen, orientiere Dich bei der Anzahl der Worte pro Textzeile an der Millerschen Zahl.

Bei dieser Zahl handelt es sich um die Tatsache, dass ein Mensch gleichzeitig nur 7 +- 2 Informationseinheiten im Kurzzeitgedächtnis präsent halten kann.

Limitiere also die Anzahl der zu lesenden Worte pro Zeile auf diese besagten 7 +- 2 Worte. Dieses Limit kannst Du auch wunderbar für Infografiken nutzen.


Tipp Nummer 15

In diesem Tipp geht es um die nutzerfreundliche Darstellung von Listen.

Auch hierfür habe ich eine Demo vorbereitet und lasse Dich selbst einschätzen, welche Formatierung Dir die Suche erleichtert.

Die Aufgabe lautet:
Finde die „Regional-Niederlassung Südafrika“

Liste A:

  • Regional-Niederlassung Bielefeld
  • Regional-Niederlassung Neuseeland
  • Regional-Niederlassung Frankreich
  • Regional-Niederlassung Sauerland
  • Regional-Niederlassung Südafrika
  • Regional-Niederlassung Polen

Liste B:

  • Bielefeld Regional-Niederlassung
  • Neuseeland Regional-Niederlassung
  • Frankreich Regional-Niederlassung
  • Sauerland Regional-Niederlassung
  • Südafrika Regional-Niederlassung
  • Polen Regional-Niederlassung

Empfehlung:
Da wir in unseren Breitengeraden von Links nach Rechts lesen, schreibe die sich ändernden Worte stets so weit links wie möglich.

Gerade bei extrem langen Linklisten ist diese Vorgehensweise eine enorm praktische Anordnung, die Deinem Besucher das Scannen nach dem gesuchten Begriff erleichtert.


Tipp Nummer 16

Ein Bild sagt mehr als tausend Worte.

Willst Du die Emotionen Deines Seitenbesuchers jedoch noch weiter steigern, um seine eh schon kurze Aufmerksamkeitsspanne intensiver zu nutzen, empfehle ich Dir so viele Sinne (VAKOG-Modell) wie möglich anzusprechen und auf die Einbindung eines Videos zu setzen.

Problematisch wird es jedoch, wenn sich ein Videoplayer nicht automatisch der Bildschirmgröße anpasst, sondern so weit über den Bildschirmrand hinausragt, dass er nicht mal ordentlich bedient werden kann.

Für die richtige Einbindung habe ich diese Anleitung zur responsiven Videoeinbindung für Dich geschrieben.

Den Code darin darfst Du Dir einfach kopieren und anpassen.


Tipp Nummer 17

Geht es um Formulare, lautet meine oberste Grundregel: „So wenig Felder wie möglich und so viele wie nötig.“

In der Realität erzeugt dieser Grundsatz besonders heisse Diskussionen, da unterschiedliche Interessen aufeinander prallen.

Während der UX-Profi die Nutzersicht (Bequemlichkeit) vertritt und daher wenig Aufwand durch eine minimale Anzahl an Eingabefeldern fordert, will der Vertriebler so viele hochrelevante Nutzerdaten wie möglich im Erstkontakt einsammeln.

Und dann?

Naja, dann setze ich mich dazu und erkläre, dass der User oftmals vom ersten Eindruck (Viele Formularfelder auf einmal) abgeschreckt wird und empfehle ein dynamisches Formular.

Hierbei werden dem User immer nur 3 Eingabefelder des Formulares auf einmal angezeigt und sobald er diese Felder ausgefüllt hat, werden die nächsten 3 Felder nachgeladen.

Dem User wird sichtbar immer nur der kurze Arbeitsaufwand präsentiert.

Dadurch ist er eher geneigt ein längeres Formular auszufüllen.

Merke: Übertreibe diese Salami-Taktik nicht.


Tipp Nummer 18

Wenn Du auf Deiner Website besondere Funktionen anbietest, zeige Deinem User mit Hilfe eines „Walkthroughs“ (geführte Tour), wie er diese nutzen kann.

Über das ☰ →
findest Du
die Suche &
hilfreiche
Tools!
DEMO

Arrangiere eine solche Einführung einmalig, denn gelernt ist gelernt.


Tipp Nummer 19

„Zeigen ist besser als beschreiben.“

Vorallem bei Produktbildern empfehle ich Dir, Deinem Websitebesucher eine Zoomfunktion zu bieten, damit er wichtige Details noch besser erkennen kann.

Mache einen Doppelklick auf das folgende Demobild, um ein Beispiel für eine Zoomfunktion zu testen.

DEMOBILD LADEN

Tipp Nummer 20

Dieser Tipp ist typisch für die mobile Welt und beschreibt ein Detail, dass oft bei der Entwicklung responsiver Websites vergessen wird.

Bietest Du Deinem Besucher Schaltflächen auf Deiner Site an, so deaktiviere darauf die Textmarkierung, ansonsten wird der User beim längeren Touchen von der Funktion abgelenkt.

Teste selbst (Finger auf den Button legen):

mit Textmarkierung
ohne Textmarkierung

Das waren die ersten Tipps und der Nächste steht schon in den Startlöchern.

Usability Tipps zur Optimierung mobiler Websites
4.9 (97.46%) 126 votes

PS: Um den Link zu dieser Seite Freunden zu schicken, kannst Du Dir mit nur einem Klick die...
Artikel-URL kopieren
Hinweis: Sollte ich in diesem Artikel Provisions-Links – auch Affiliate-Links genannt – verwendet haben, sind diese durch „(Provisions-Link)" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält coach-hoffmann.de eine Provision vom Verkäufer, für den Besteller entstehen keine Mehrkosten. Als Amazon-Partner verdiene ich an qualifizierten Käufen.
Diese Website nutzt Cookies, um bestmögliche Funktionalität bieten zu können. Unter Datenschutz erfährst Du mehr dazu.
schließen