UX im Web – wie wird meine Website nutzungsfreundlich?

UX im Web – wie wird meine Website nutzungsfreundlich?

Du kennst das doch sicherlich auch – du bist gerade unterwegs, hast nur dein Handy zur Hand, suchst nach wichtigen Informationen auf einer Website und dann das – dir wird nur die Desktop-Version der Seite angezeigt. Das Verklicken (Falsch klicken), Vergrößern und Verschieben geht dir dabei ziemlich schnell auf die Nerven.

Der richtige Webauftritt eines jeden Unternehmens ist heute wichtiger denn je. Eine Website sollte gleichermaßen emotional und rational gestaltet sein und den Nutzer ästhetisch ansprechen. Das Kennzeichen der Mobilfreundlichkeit – die Website auf den verschiedenen mobilen Endgeräten nutzungsfreundlich und praktikabel zu gestalten – ist nur eines von vielen der User Experience (kurz UX), die das Anwendungserlebnis des Nutzers mit einem bestimmten Produkt beschreibt. User Experience zielt nicht nur auf die einfache Bedienbarkeit einer Website oder App ab, sondern möchte dem Kunden ein übergreifend positives Nutzungserlebnis bieten. So spielen verschiedene Aspekte aus Psychologie, Grafikdesign und IT zusammen.

UX – Alter Wein in neuen Schläuchen

Die Frage nach einem möglichst angenehmen Nutzungserlebnis des Kunden mit dem Produkt ist jedoch nicht nur im Online Bereich zu finden, UX spielt auch eine große Rolle bei der generellen Produkt- und Service-Entwicklung. Die Kriterien Stabilität, Nützlichkeit und Schönheit konnten sogar schon vor knapp 2000 Jahren bei dem römischen Architekten Vitruv gefunden werden, der damit jedoch keine Websites, sondern Häuser konstruierte. Ebenso vermittelt eine gute User Experience dem User schnell das Konzept, den Sinn und Zweck des Produkts / der Website und erfüllt gleichzeitig in ausreichendem Maße die Erwartungen des Benutzers.

7 Tipps für das perfekte Nutzererlebnis

Klingt erstmal kompliziert und nach viel Arbeit? Don’t worry.
Wir haben euch hier die sieben wichtigsten Tipps für gutes UX einer Website zusammengefasst

1. Orientierungssinn

Der wichtigste Punkt ist, dass der User sich auf der Website zurechtfindet. Diese muss von oben bis unten strukturiert und gleichzeitig einfach zu bedienen sein. Laut einer Google Studie verlassen 61 % der Benutzer eine Seite, wenn sie nicht zeitnah das finden, was sie suchen. Um das zu verhindern, muss die Website leicht zu navigieren sein, etwa durch eine Menüleiste, die mit den Inhalten herunterscrollt.

2. Mobile friendly

Wie oben schon angemerkt, nervt es, wenn die Website nur auf eine bestimmte Version angepasst ist und bei den unterschiedlichen mobilen Endgeräten (sei es Smartphone, Tablet oder Notebook) unvollständig und verzerrt dargestellt wird.
Die gleiche Google Studie fand heraus, dass 75 % der Befragten Seiten bevorzugen, die zur mobilen Verwendung gestaltet sind und sogar jeder Zweite würden, obwohl er das Unternehmen mag, deren Website weniger benutzen, wenn diese nicht mobil verwendbar ist.

3. Das richtige Design

Das passende Design für eine Website muss auf das Unternehmen abgestimmt sein. So sind ästhetische Komponenten, wie etwa eine große Farbpalette oder zahlreiche hochauflösende Bilder, bei einem Modeunternehmen notwendiger als bei der Website eines Steuerberaters. Aktuellster Trend ist das Flat Design, welches für einen flachen, minimalistischen Stil steht. Viel weißer Platz beispielsweise setzt den Fokus auf die Inhalte und macht diese leserlicher. Zudem wirkt die Website dadurch offen, frisch und modern. Als Urheber dieser „Weniger ist mehr“ Devise gilt Windows 8 mit der Kacheloptik. Gleichzeitig sollten die Farben und Beschreibungen prägnant und eingängig sein, damit die richtige Botschaft des Unternehmens vermittelt wird.

4. Schnelle Ladezeiten

Was frustriert mehr als Inhalte auf einer Website, die ewig laden? Richtig, Inhalte, die noch länger laden. Dementsprechend sollte die Geschwindigkeit, mit der die Inhalte auf der Website geladen werden, relativ hoch sein. Wie man dort hinkommt? Erstmal die Geschwindigkeit testen. Internet Titan Google bietet zum Beispiel einen Service an, bei dem anschließend Vorschläge gemacht werden, wie die Ladezeiten der Website beschleunigt werden können.

5. Original content

Selbstverständlich ist der Inhalt essenziell für den Erfolg einer Website. Die Inhalte müssen nützlich, vertrauenswürdig und original sein. So sollten Bilder unter besonderer Berücksichtigung verwendet werden. Klar ist es einfacher und ansehnlicher, Bilder aus dem Internet herunter zu laden und auf der Website zu platzieren, jedoch können eigene Bilder den Sympathiewert des Unternehmens erhöhen, das Vertrauen in eben jenes steigern und eine Beziehung zum Kunden aufbauen.

6. Betrachten, befragen, berechnen

Ebenso relevant für den Erfolg einer Website ist die Analyse hinterher. Wie kamen die Inhalte an? Was wurde wann wie oft geklickt? Welche Komponenten fallen dem Benutzer zuerst ins Auge? Das Betrachten der Statistiken der Website Besuche stellt dabei nur den Anfang dar. Spezifische und detaillierte Benutzerbefragungen sowie die Eye Tracking Methode zum Beispiel weitere zwei weitere Möglichkeiten, um das Verhalten der Nutzer auf der Seite zu analysieren.

7. Error 404 – Keine Mängel gefunden

Last but not least, 404 Fehler (Page not found) können beim Programmieren immer wieder mal passieren, haben aber negative Auswirkungen auf Gunst des Nutzers. Die Nutzer sind genervt und die Wahrscheinlichkeit steigt, dass sie auf eine andere Seite wechseln. Um dies zu verhindern, kann die Website auf 404 Fehler durchsucht werden oder sichergehen, dass der Nutzer sofort wieder auf die Website zurückgelangt.

Interesse an gutem UX geweckt? we {code} it entwickelt maßgeschneiderte Websites, die für den Kunden zum ultimativen Nutzererlebnis werden. Sei es Flat Design, mobile friendly oder ein strukturierter Aufbau der Website – wir setzen das für Sie um!

 

Accelerated Mobile Pages

Accelerated Mobile Pages

Heute stellen wir euch eine der aktuellsten Entwicklungen im Bereich mobiler Internetnutzung vor:

Accelerated Mobile Pages (AMPs) sind auf mobile Nutzung spezialisierte Websites, die sich durch stark verringerte Ladezeiten auszeichnen. Es handelt sich dabei um ein von Google unterstütztes Open Source Projekt, das die Benutzerfreundlichkeit von mobilen Websites deutlich steigern soll. Sie sollen außerdem unabhängig von der Art des verwendeten Smartphones, Tablets, etc. sein.

Deutlicher Trend zur Nutzung mobiler Websites
In den letzten Jahren zeichnet sich ein deutlicher Trend zur Nutzung von Websites über mobile Endgeräte ab. Vor allem zum Lesen von Nachrichten oder für Online-Shopping werden vermehrt Smartphones oder Tablets verwendet. Durch lange Ladezeiten von Websites erhöht sich jedoch die Absprungrate der Nutzer – je länger eine Seite lädt, desto mehr Nutzer und potentielle Kunden brechen den Ladevorgang ab. Dadurch verringert sich zum Beispiel für Publisher die Anzahl ihrer Leser und die Höhe der Werbeeinahmen. Da die Zukunft des Internets in vielen Bereichen mobil ist, muss sich also an die veränderte Nutzung des Internets angepasst werden.

Aufruf von Websites in Sekundenbruchteilen
AMPs ermöglichen dies, indem sie die Gesamtgröße einer Website größtmöglich reduzieren. Da die Ladegeschwindigkeit von der Größe der Website abhängt, können AMPs Inhalte in einem Bruchteil der Ladezeit gegenüber herkömmlichen mobiloptimierten Websites darstellen. Die Darstellung von AMPs soll bis zu vier Mal schneller bei einem Zehntel des Datenvolumens erfolgen. Dies wird zum einen dadurch ermöglicht, dass zunächst nur die Inhalte geladen werden, die unmittelbar nach Öffnen der Seite sichtbar sein müssen. Die restlichen Inhalte werden dann nachgeladen. Dadurch ist das Lesen der Website bereits während des Ladevorgangs möglich.

Anpassung des Codes zur schnelleren Darstellung
Realisiert werden AMPs zum einen durch eine speziell angepasste Form von HTML – AMP-HTML genannt.  Zudem wird ein Content Delivery Network genutzt. Außerdem kommt eine Reduktion von CSS und Javascript zur Anwendung. Da Letzteres den Nachteil hat, dass es den Aufbau einer Seite stark verlangsamen kann, darf nur asynchrones Javascript verwendet werden. Auch CSS darf nur inline und mit maximal 50 Kilobytes implementiert werden.

Unterstützung durch Google Cache Server
Um schnelle Ladezeiten zu ermöglichen stellt Google außerdem Cache Server zur Verfügung. Validierte AMPs werden im Cache Server von Google gespeichert, auf einem Proxyserver bereitgestellt und über ein Content Delivery Network an den Nutzer ausgeliefert. Der Quellcode von AMPs kann von allen Servern interpretiert werden. Die AMP sollte idealerweise unter einer URL gehostet werden, die für den Nutzer nachvollziehbar ist, also zum Beispiel: amp.websiteurl.de/inhalt oder websiteurl.de/inhalt/amp.

Implementierung auf immer mehr Plattformen
Unterstützt werden AMPs mittlerweile durch viele Plattformen, wie zum Beispiel Twitter, Pinterest, und natürlich Google. So können Mobilgerätenutzer beispielsweise von Google zu einer im Cache gespeicherten AMP weitergeleitet werden, sofern in den Suchergebnissen eine Website mit einer gültigen AMP-Version vorhanden ist. Diese wird dann oberhalb der regulären Suchergebnisse angezeigt. Außerdem haben auch viele Medienhäuser mittlerweile AMPs implementiert und damit auf den Trend zum Nachrichtenkonsum über mobile Endgeräte reagiert. Dem ein oder anderen ist vielleicht schon aufgefallen, dass AMPs zum Beispiel in der Google News App integriert wurden und man dadurch bequem in Sekundenschnelle durch die Artikel swipen kann. Das schnellere Laden der Seiten betrifft übrigens auch Werbeanzeigen, sodass Schaltung von Werbung sich im Gegensatz zu herkömmlichen Websites nicht negativ auf die Nutzererfahrung und auswirkt. AMPs stellen also eine äußerst zukunftsorientierte Entwicklung dar, die Nutzerfreundlichkeit in den Vordergrund stellt.

Wer noch mehr über AMPs erfahren will und an Beispielen des AMP-HTML-Codes interessiert ist, sollte sich diesen Wiki-Eintrag ansehen.