Optimale Nutzererlebnisse: Die Top 5 der UX-Elemente

    Haben Sie bei Ihrem Website-Design das Nutzererlebnis im Fokus und die wichtigsten UX-Elemente berücksichtigt? Hier ist Ihre essenzielle Checkliste!

    ABONNIEREN SIE UNSEREN BLOG

    Bei der Web-Entwicklung geht es nicht nur um Funktionalität – obwohl sie zweifelsohne ein wichtiger Baustein ist. Auch das Nutzererlebnis (UX, von User Experience) gilt es immer auf dem Schirm zu behalten: Sie müssen dafür sorgen, dass sich die Besucher auf der Website schnell und einfach zurechtfinden.

    Nehmen wir an, Sie sollen eine neue Website entwerfen: Voller Tatendrang setzen Sie sich an den Computer oder greifen erstmal zu einem Blatt Papier, um zu planen. Dabei ist die Versuchung groß, direkt neue kreative Elemente zu entwerfen, mit denen sich die Seite von der Konkurrenz abhebt. Das ist auch völlig in Ordnung ... solange es um Content geht. Bei den funktionalen UX-Elementen für das Nutzererlebnis sollten Sie vorsichtiger sein und sich auf eine einfache, klare Struktur beschränken.

    Fünf essenzielle UX-Elemente für ein besseres Nutzererlebnis

    Bevor Sie mit den neuesten Farbkombinationen oder Animationen experimentieren, bauen Sie erstmal lieber ein gutes Fundament. Die folgenden fünf UX-Elemente sind essenziell beim Aufbau jeder Seite – und der Website generell:

    Labels

    image-png-Apr-08-2021-08-10-29-98-PMBei Labels handelt es sich um Seitenelemente, über die Sie zusätzliche Informationen bereitstellen. Halten Sie die Namen für die Labels so einfach wie möglich. Stellen Sie sicher, dass sie für die Nutzer klar erkennbar sind. Vermeiden Sie technische Ausdrücke oder Fachchinesisch – schließlich sollen Ihre Labels Ihrer Zielgruppe dienen. Es ist also wichtig, dass Sie Ihre Nutzer kennen  und die Seiten entsprechend anpassen.

    Schaltflächen

    image-png-Apr-08-2021-08-09-05-25-PMSie können Schaltflächen zu verschiedenen Zwecken nutzen, doch eines bleibt immer gleich: Sie sollen Nutzer zum Handeln bewegen; die User sollen die Schaltflächen anklicken – weshalb jene auf der Seite hervorstechen müssen. Sie können dafür auffällige Farben, interessante Formen oder auch Animationen verwenden. Doch es gilt dasselbe wie bei den Labels: Eine Schaltfläche muss auch noch als solche erkennbar sein. In der Regel reicht es, wenn Sie sich auf die zwei gängigsten Typen beschränken: Mithilfe eines Schattens können Sie einen 3-D-Effekt einbauen – oder Sie unterstreichen Sie einfach den relevanten Begriff. Die letztgenannte Option ist nicht nur die einfachste, sondern für die meisten Nutzer auch am offensichtlichsten.

    Natürlich darf eine Seite auch mehrere Schaltflächen enthalten. Die wichtigste muss aber klar herausstechen. Wenn Sie alle für gleich wichtig halten, stimmt etwas nicht mit der Content-Struktur der Seite.

    Mit anderen Worten: Sind mehrere Schaltflächen vorhanden, müssen Sie die wichtigste hervorheben. In den meisten Fällen ist das der Button, der letztendlich zur Konversion Ihrer Besucher führt.

    Text

    Viele Tests zum Nutzerverhalten im Internet liefern immer dasselbe Ergebnis: Die User lesen Webseiten nicht komplett, sondern überfliegen sie nur. Sie haben nicht die Geduld, jedes einzelne Wort zu lesen. In den meisten Fällen suchen sie einfach Antworten oder Lösungen für ein Problem. Sie müssen also in Ihrem IT-Team und als Autoren dafür sorgen, dass sich der Content zum Überfliegen eignet.

    Bezüglich der Form hilft eine Unterteilung in Hauptüberschriften, Unter-Überschriften und so fort, sowie das Strukturieren mit Trennelementen. Einzelne Abschnitte müssen auch optisch voneinander getrennt sein. Der User kann dann die Seite einfacher scannen und schneller den Abschnitt mit der gewünschten Antwort finden.

    Seitenlayout

    Damit Ihre Seite angenehm zu lesen ist (ich meine natürlich: zu überfliegen! ;) ) braucht Ihr Content „Luft“, sogenannten Weißraum. Sie können noch so viele Überschriften und Trennelemente verwenden: Wenn die Seite vollgestopft ist, nimmt der User sie als einen einzigen Content-Block wahr.

    Das richtige Verhältnis aus Weißraum und Content macht Ihre Seite besser lesbar. Der Mut zur Lücke zahlt sich aus – solange die Elemente ein und desselben Abschnitts optisch ein Ganzes bilden.

    Eine kleine Randnotiz: Verwenden Sie auf allen Seiten Ihrer Website dasselbe klare Schema. Arbeiten Sie mit Trennelementen? Dann sollten Sie auf allen Seiten einheitlich nutzen. Wenn Sie auf jeder Seite eine andere Methode verwenden, wirkt Ihre Online-Präsenz sehr unaufgeräumt.

    Aufbau

    Nicht nur die einzelnen Seiten sollten übersichtlich aufgebaut sein, sondern vor allem auch die Struktur der gesamten Website. Das bedeutet eine klare Informations-„Architektur“: Wie sind die Seiten angeordnet – ergeben sie ein logisches Gesamtbild?

    Grundsätzlich gibt es bei Websites zwei unterschiedliche Optionen: flache und tiefe Seitenhierarchien. Welche der beiden Methoden für Ihr Projekt am besten geeignet ist, hängt davon ab, welche Inhalte Sie präsentieren und wie viel Content Sie unterbringen wollen.

    image-png-Apr-08-2021-08-11-49-08-PM

    Im Allgemeinen sind flache Hierarchien sinnvoller, besonders wenn der Web-Auftritt klar definierte Kategorien enthält. Sind Sie sich nicht sicher, ob Ihr Zielpublikum bestimmte Informationen erwartet oder nicht? Dann können Sie Ihre Struktur mithilfe von „Card Sorting“-Tests erstellen.

    image-png-Apr-08-2021-08-12-51-70-PM

    Hat sich herausgestellt, dass es einfach zu viele verschiedene Kategorien gibt oder die Kategorien zu spezifisch sind? Dann können Sie auf eine tiefe Hierarchie umschwenken. Hierbei ordnen Sie Ihre Seiten nach logischen Gruppen.

    Welche Hierarchie ganz individuell die beste ist, ergibt sich erst bei näherer Betrachtung. Beobachten Sie dafür zunächst das Verhalten Ihrer Besucher: Wie suchen sie nach welchen Informationen?

    Fazit

    Sparen Sie sich überbordende Kreativität für den Content und die nicht-funktionalen Elemente auf. Bei den funktionalen Elementen der User Experience sollten Sie vorsichtiger sein. Versuchen Sie nicht, das Rad neu zu erfinden, und halten Sie sich an diese grundlegenden Richlinien. Dadurch sind alle Elemente für die Besucher klar, gut erkennbar und nicht verwirrend – denn wer nicht direkt die gesuchten Informationen findet, springen leicht ab. Genau das verhindern Sie, indem Sie obige Tipps befolgen.

    Veröffentlicht auf    Zuletzt aktualisiert am 12/08/2021

    #Content Management, #Webentwicklung, #CMS

    Über den Autor

    Elke kümmert sich bei Amplexor seit 2018 um Funktionsanalysen. Dabei erweitert und nutzt sie ständig Ihre reichhaltige Erfahrung mit AEM-Projekten. Neben Funktionsanalysen interessiert sie sich auch für alle Fragen rund um UX, UI und CRO.

    SUBSCRIBE TO OUR BLOG