-Anzeige-

Usability Optimierung: Mit diesen Tipps zur besseren mobilen Website


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.


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.

Zum Inhaltsverzeichnis ↑

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.

Zum Inhaltsverzeichnis ↑

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 Coach-Hoffmann.de 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.

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 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
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 3
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 4
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
Keine Youtube-Videos auf Salespages einbinden, da der User beim Klick auf das eingeblendete Youtube-Watermark Deine Seite verlässt und auf Youtube geleitet wird. Binde stattdessen Videos direkt über den HTML-Videotag <video> ein.


Tipp Nummer 5
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 6

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 7
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 8
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 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>

Tipp Nummer 9
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.

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

Zum Inhaltsverzeichnis ↑
PS: Um den Link zu dieser Seite Freunden zu schicken, kannst Du Dir mit nur einem Klick die...
Artikel-URL kopieren
Teilen per
Facebook
WhatsApp
Hinweis: Sollten wir 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.
Diese Website nutzt Cookies, um bestmögliche Funktionalität bieten zu können.
Alles klar!