Anzeige
Anzeige
Ratgeber
Artikel merken

UX-Design: Auf diese Elemente solltest du nicht verzichten

Der Erfolg in jedem Geschäft liegt in einer positiven User-Experience. Wir zeigen euch warum das so wichtig ist und wie ihr es am besten umsetzt.

Von Jessy Kösterke
3 Min. Lesezeit
Anzeige
Anzeige

(Foto: baranq / Adobe Stock)

Erst vor kurzem haben wir euch einige UX-Elemente vorgestellt, die jeder Nutzer hasst. Hier zeigen wir Elemente, die auf keiner Website fehlen sollten und die für eine gute UX unerlässlich sind.

UX: Was ist das eigentlich?

Anzeige
Anzeige

User-Experience (UX) kann man mit dem Nutzererlebnis oder der Nutzerfahrung übersetzen, insbesondere im Bereich der digitalen Medien. Ein gutes Nutzererlebnis ist einer der wesentlichen Erfolgsfaktoren für digitale Geschäftsmodelle: Erkundet der User die Website oder Applikation? Verlässt oder löscht er sie? Nutzt er sie regelmäßig oder empfiehlt er sie sogar? Das Nutzererlebnis hängt vor allem vom User-Interface ab (UI). Denn umso einfacher und intuitiver die Anwendung oder Website zu bedienen ist, desto besser ist die UX.

Mit UX-Elementen schlagen wir uns täglich herum, sie sind fester Bestandteil in unserem Alltag. Das muss nicht immer im Internet sein: Das Freizeichen beim Anrufen, das Geräusch beim Versenden einer E-Mail oder der pfeifende Twitter-Vogel, all das sind Rückmeldungen und Bestätigungen an den Anwender.

Anzeige
Anzeige

Natürlich kann man das Ganze auch noch extremer auf die Realität übertragen. Manche Töne sind so selbstverständlich, dass sie uns gar nicht mehr bewusst sind. Wie zum Beispiel das Schließen einer Autotür oder das Geräusch eines vorbeifahrenden Autos. Ein gutes Bespiel sind E-Autos: Besonders blinde Menschen, die auf ihren Gehörsinn angewiesen sind, gehen bei nicht vorhanden Geräuschen zum Beispiel von einer freien Straße aus. Dasselbe lässt sich auf Websites oder Apps übertragen: Bekommt ein Nutzer kein Feedback oder eine Bestätigung über seine Handlung, fühlt er sich verloren oder kann sich nicht identifizieren und verlässt eventuell die Anwendung.

Anzeige
Anzeige

Feedback-Beispiele: So macht ihr’s richtig

Ihr wollt eure Nutzer nicht im Stich lassen? Prima! Dann zeigen wir hier vier Beispiele, mit denen ihr eure Nutzer richtig abholt. Bevor wir zu den Beispielen kommen, wollen wir noch auf zwei wichtige Punkte hinweisen: Erstens, die Implementierung an der richtigen Stelle. Was bringen Fehlermeldungen am Ende eines Formulars? Und zweitens, die emotionale Botschaft: Das Erstellen von Content kann manchmal eine emotionale Achterbahn sein – achtet auf die richtigen Farben, Töne und Wortwahl.

Hover-Effekt

Vor zehn Jahren waren Links und Buttons eindeutig zu erkennen. Sobald etwas blau unterstrichen war, war klar: das ist ein Link – der Link war ein Standartsymbol. Auch Buttons waren eindeutig erkennbar.

Anzeige
Anzeige

Inzwischen haben uns die modernen Webtrends eingeholt und ein Link muss – ein Glück – nicht mehr blau unterstrichen sein. Der Nachteil: Oft sind Links und Buttons nicht mehr als Solche erkennbar. Es fehlen die Effekte! Tut euren Nutzern den Gefallen und markiert einen Link eindeutig – zum Beispiel mit einem Farbkontrast beim Hovern. Und auch Buttons, besonders im Flat-Design, lassen sich mit Farben oder Animationen als solche erkennbar gestalten. Du brauchst Inspiration?

Progess-Bar und Preloaders

Für den Fall, dass der Upload einer Datei etwas länger dauert, ist eine Progress-Bar der beste Weg dem Anwender den Status zu visualisieren. Je nach Browserunterstützung lassen sich Progress-Bars wunderbar schmücken – zum Beispiel mit Thumbnails.

Ein Preloader gehört zu den typischen Elementen, die ein Website-Nutzer nicht sehen will. Dennoch lassen sie sich nicht immer vermeiden. Wenn das der Fall ist, lasst euch vorher ein bisschen inspirieren und implementiert keinen 08/15-Spinner, der sich einfach nur im Kreis dreht.

Anzeige
Anzeige

Fehlermeldungen

Fehlermeldungen gehören nicht zu den UX-Elementen, die sich ein Anwender wünscht. Aber es kann immer mal passieren, dass eine Kreditkarte nicht akzeptiert wird oder ein Upload fehlgeschlagen ist. Für solche Vorgänge sollten Websites vorbereitet sein und nicht einfach eine leere Seite ausgeben.

Um den Nutzer trotz Fehlermeldung nicht zu verlieren, spielen besonders hier die richtigen Worte und Farben eine wichtige Rolle. Hier findet ihr kreative Fehlerseiten, die ihr gesehen haben müsst.

Formulare

Die meisten Formulare sind gut beschriftet, sodass jeder weiß, wo was eingetragen wird. Auch hier gibt es Ausnahmen: Oft findet man Websites, bei denen die Beschriftung in den Formularfeldern steht. Der Nutzer fängt also an zu schreiben und… Moment, nur die Straße oder auch die Hausnummer? Mist! Alles wieder löschen und nochmal genau lesen, bevor spätestens beim Absenden eine Fehlermeldung ausgegeben wird.

Anzeige
Anzeige

Es gibt ausreichend Möglichkeiten genau solche Schritte zu vermeiden. Die Kennzeichnung kann dabei auch im Formularfeld stehen, sollte aber spätestens beim Tippen an eine andere Stelle rutschen – zum Beispiel über das Feld.

Fazit

Frustration ist ein echter Killer des guten Benutzererlebnis, und so oft vermeidbar. Das richtige Feedback durch UX-Elemente kann nicht nur dabei helfen, die Konversationsrate nach oben zu bringen, sondern auch das Vertrauen der Kunden zu gewinnen und dazu verhelfen, dass sie sich mehr mit der Marke identifizieren.

In der Galerie findet ihr weitere Beispiele:

So kreativ kann eine 404er-Fehlermeldung sein. (Screenshot: Kitkat)

1 von 4

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
6 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Jan

Standart also…

Der Standard ist leider spürbar gesunken bei euch, dass finde ich sehr schade.

Antworten
Bernd Birnd

Ahh…! Preloader und Fehlermeldungen. Danke für diese wahnsinns Geheim-Tipps.

Antworten
Karsten Peters

Fakt ist für mich, daß es zum Thema UI nun auch wirklich nicht mehr viel Neues zu schreiben gibt. Da kommt bei einer Sammlung von Allgemeinplätzen (wie hier, sorry!) tatsächlich ’n bischen Langeweile suf.

Aber man kann’s auch nicht immer jedem recht machen …

Antworten
Augenrollen

T3N mutiert ein bisschen zur Digitalen-Bild.

Antworten
Ruslan Julbarissow

UX Elemente, die alle lieben und die Pageviews verdoppeln: Artikel auf zwei Seiten verteilt

Antworten
Lisa

Vielen Dank für den Artikel. Jedoch gibt es noch so viel wichtigere UX-Elemente, über die man schreiben könnte. Das ist nur ein kleiner Teil von der großen Anzahl UX freundliche features.

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige