User-Ex­pe­ri­ence-Design – für ein perfektes Nut­zer­er­leb­nis

Wenn Sie schon einmal ver­zwei­felt den richtigen Menür­ei­ter auf einer Website gesucht haben, an den Ein­stel­lun­gen in einer App ge­schei­tert sind oder an einem Fahr­kar­ten­au­to­ma­ten mi­nu­ten­lang auf der Suche nach dem passenden Ticket waren, dann wissen Sie, wie das Gegenteil von gutem User-Ex­pe­ri­ence-Design (UX-Design) aussieht. Wie aber geht es besser? Was ist UX-Design überhaupt, warum ist es so wichtig und wie grenzen sich UX und UI (User-Interface) von­ein­an­der ab?

Unser Ratgeber liefert die Antworten, bietet grund­le­gen­de Infos zur User-Ex­pe­ri­ence und zeigt, wie gelungene Beispiele für ge­lun­ge­nes UX-Design aussehen.

Der Begriff „User-Ex­pe­ri­ence“ (dt. Nut­zer­er­leb­nis) ist seit geraumer Zeit ein we­sent­li­ches Thema unter Web­de­si­gnern. An einer griffigen De­fi­ni­ti­on mangelt es aber oft. Doch um Ihren Nutzern ein perfektes Erlebnis mit einer Software oder auf Ihrer Websites zu er­mög­li­chen, sollten Sie zunächst wissen, was gutes User-Ex­pe­ri­ence-Design ist, was eine User-Ex­pe­ri­ence (UX) ist und was diese ausmacht: UX be­schreibt den gesamten Komplex der emo­tio­na­len Erfahrung eines Anwenders im Umgang mit einer Website, App oder mit einem anderen be­lie­bi­gen Produkt. UX-Design zeichnet sich grund­sätz­lich durch die Kenntnis der Ziel­grup­pe einer Website/App bzw. eines Produktes und deren An­for­de­run­gen aus und be­zeich­net die Kom­bi­na­ti­on aus einer at­trak­ti­ven Be­nut­zer­ober­flä­che und einer ziel­grup­pen­ge­rech­ten und über­zeu­gen­den Funk­tio­na­li­tät der App oder Website.

Über welche Be­stand­tei­le ein Produkt verfügen muss, um eine gute User-Ex­pe­ri­ence zu ge­währ­leis­ten, wusste schon der römische Architekt Vitruv (Marcus Vitruvius Pollio) im ersten vor­christ­li­chen Jahr­hun­dert: Damals beschrieb er für Gebäude die drei Begriffe „Firmitas“ (Fes­tig­keit oder Stand­haf­tig­keit), „Utilitas“ (Nütz­lich­keit) und „Venustas“ (Schönheit) als grund­le­gen­de Ei­gen­schaf­ten eines guten User-Ex­pe­ri­ence-Designs – natürlich, ohne damals diesen Begriff selbst zu nutzen. Das von ihm ent­wi­ckel­te Prinzip gilt aber auch mehr als 2000 Jahre später – ganz gleich ob Sie eine Website launchen, eine App basteln oder ein Vi­deo­spiel pro­gram­mie­ren wollen.

Drei Faktoren für eine gute User-Ex­pe­ri­ence

1. An erster Stelle steht die „Fes­tig­keit“ bzw. „Stand­haf­tig­keit“ – moderner aus­ge­drückt: die Funk­tio­na­li­tät. Was schlicht­weg bedeutet, dass Ihr Produkt funk­tio­nie­ren muss. Abstürze, Downtimes und lange La­de­zei­ten sind ein No-Go für eine gute User-Ex­pe­ri­ence! Der Nutzer muss sich auf Ihr Produkt verlassen können. Wenn Sie das nicht ge­währ­leis­ten, wird er sich nach Al­ter­na­ti­ven umsehen. Besonders im Web­zeit­al­ter sind diese dank Such­ma­schi­nen binnen Sekunden auch gefunden. Für nahezu jede App, jeden ihrer Ein­satz­zwe­cke und jede Website gibt es zig Al­ter­na­ti­ven. Funk­tio­niert Ihr Produkt nicht oder zumindest nicht so, wie es sich die Ziel­grup­pe wünscht, werden sie keine Emp­feh­lun­gen oder Likes im App-Store bekommen und Ihre Website wird nicht geteilt oder verlinkt.
    
2. An nächster Stelle steht die Nütz­lich­keit: Ihre Website oder Ihre App muss dem Nutzer re­le­van­ten Mehrwert bieten. Das können etwa in einem On­line­shop die Produkte sein, die er oder sie unbedingt haben möchte. Auf anderen Websites sind gute Inhalte – ob in­for­ma­tiv oder un­ter­hal­tend – gefragt. Hierbei gelten die ge­ne­rel­len Regeln für guten Content. Wie Sie Seo-Content op­ti­mie­ren können, verraten wir Ihnen in unserem Ratgeber. Darüber hinaus ist hiermit auch die leichte Anwendung gemeint: Die Me­nü­füh­rung muss intuitiv und logisch sein. Sie muss eingängig und zugleich leicht ein­zu­prä­gen sein. Der Funk­ti­ons­um­fang muss den An­for­de­run­gen der Ziel­grup­pe ent­spre­chen, aktuell sein und im Idealfall vom User an seine Nut­zungs­ge­wohn­hei­ten anpassbar sein.
   Zwei einfache Beispiele wie es nicht geht: Ein Gra­fik­pro­gramm, das die Funktion für das Zu­recht­schnei­den eines Bildes in drei Un­ter­me­nüs versteckt und keine Shortcuts anbietet, ist für die Ziel­grup­pe un­brauch­bar. Auch ein Schreib­pro­gramm, bei dem bei­spiels­wei­se die Buttons für Fettung, Un­ter­strei­chun­gen oder Kur­si­vie­rung nicht auf den ersten Blick gefunden werden, bietet keine gute User-Ex­pe­ri­ence.
    
3. Nicht zu ver­nach­läs­si­gen für eine gute User-Ex­pe­ri­ence ist auch die Schönheit, also die Ästhetik Ihres Angebots: Was diesen Bereich betrifft, ist die Liste an po­ten­zi­el­len Fall­stri­cken am längsten. Denn äs­the­ti­sche Maßstäbe können je nach Kul­tur­kreis, Szene oder Ziel­grup­pe sehr un­ter­schied­lich ausfallen. Un­ein­heit­lich­keit oder Über­frach­tung schrecken ebenso ab wie ein Design, das an der Ziel­grup­pe vor­bei­schießt. Daher muss die Ge­stal­tung nicht nur funk­tio­nal, sondern auch ziel­grup­pen­re­le­vant sein.

UX vs. UI: Was ist der Un­ter­schied?

Ge­le­gent­lich wird User-Ex­pe­ri­ence (UX) mit User-Interface (UI) ver­wech­selt. Auch wenn beide Begriffe eng verwandt sind, bestehen si­gni­fi­kan­te Un­ter­schie­de, die man auf eine simple Faust­re­gel her­un­ter­bre­chen kann: Während die User-Ex­pe­ri­ence all das umfasst, was Nutzer empfinden, be­inhal­tet der Begriff User-Interface all das, was die Nutzer (vor allem visuell) wahr­neh­men. Dieser Begriff umfasst die Ober­flä­che, auf der Nutzer agieren bzw. auf der ein Austausch zwischen Mensch und Maschine statt­fin­det. Letzter Terminus ist der tech­ni­sche­re, UX hingegen der stra­te­gi­sche­re Begriff. Das User-Ex­pe­ri­ence-Design ist das Resultat eines guten User-In­ter­faces, umfasst aber darüber hinaus auch Bereiche wie die In­for­ma­ti­ons­ar­chi­tek­tur, Usability oder rein äs­the­ti­sche Ge­sichts­punk­te. Damit ist die User-Ex­pe­ri­ence ein über­ge­ord­ne­ter Begriff – User-Interface hingegen eine Teil­dis­zi­plin.

Soweit die Theorie – wie aber sieht gutes User-Ex­pe­ri­ence-Design in der Praxis aus? Fragen Sie sich zunächst, was Ihr Un­ter­neh­men oder Ihr Angebot ausmacht: Haben Sie bereits eine Corporate Identity oder wichtige Ge­stal­tungs­richt­li­ni­en in einem Sty­le­gui­de zu­sam­men­ge­fasst? Dann nehmen Sie diesen am besten als Grundlage für weitere Schritte. So pro­fi­tie­ren Sie von der bereits im Vorfeld ge­leis­te­ten Arbeit und sorgen auf all Ihren Kom­mu­ni­ka­ti­ons­ka­nä­len für einen ein­heit­li­chen und seriösen Auftritt. Damit werden Sie von Ihren Nutzern (wieder)erkannt und bannen die Gefahr späterer Design-Sünden. Als nächstes sollten Sie sich fragen, wen Sie mit Ihrer Website oder App erreichen wollen. Was sind die Wünsche und An­for­de­run­gen Ihrer Ziel­grup­pe? Was erwartet diese von Ihrem Angebot? Ein UX-Design ist immer auf eine spe­zi­fi­sche Ziel­grup­pe zu­ge­schnit­ten. Nur so haben Ihre Besucher oder Nutzer ein perfektes Erlebnis. Bei­spiels­wei­se muss die Website einer Gothic-Band in der Regel ganz anders gestaltet sein als der Web­auf­tritt einer Por­zel­lan­fa­brik. Dem­entspre­chend funk­tio­nie­ren User-Ex­pe­ri­ence-Designs nur für bestimmte Ziel­grup­pen, deren Geschmack man vorab kennen sollte. Dafür sind Tests, Umfragen oder sogar groß­an­ge­leg­te Ziel­grup­pen­stu­di­en notwendig, auf deren Basis sich bei­spiels­wei­se Personas erstellen lassen. Kon­zen­trie­ren Sie sich auf das We­sent­li­che: Ein über­frach­te­tes Design mit Ex­tra­va­gan­zen ist nicht ziel­füh­rend, lenkt ab und irritiert. Ein gutes User-Ex­pe­ri­ence-Design ist statt­des­sen reduziert, schlicht und klar: Auf einer Website muss es auch Leerräume geben, die dem Auge die Mög­lich­keit lassen, Inhalte zu ver­ar­bei­ten. Ist das Design statt­des­sen überladen, kommt es beim Nutzer schnell zu einer Über­for­de­rung. Auch aus­rei­chend Abstände zwischen Text-, Bild- und Na­vi­ga­ti­ons­ele­men­ten sollten ein­ge­plant werden – al­ler­dings sollte man deswegen nicht sinnlos Platz ver­schwen­den. Stimmen Sie Farben, Schrift­ar­ten und das Layout Ihrer Inhalte ab. Vermeiden Sie Stil­brü­che bei Ihrem UX-Design. Es kann die Nutzer schnell über­for­dern, wenn sie laufend mit neuen Farb­sche­ma­ta oder Schrift­ar­ten kon­fron­tiert werden. Zudem wirkt Un­ein­heit­lich­keit beim User-Ex­pe­ri­ence-Design immer auch unseriös. Maß­geb­lich ist auch in diesem Fall stets der Geschmack der Ziel­grup­pe. Sind alle äs­the­ti­schen Aspekte geklärt, geht es an die Op­ti­mie­rung der Ac­ces­si­bi­li­ty und der Usability – der Zu­gangs­mög­lich­kei­ten und der Be­nut­zer­freund­lich­keit: Ein gutes User-Ex­pe­ri­ence-Design kennt keine langen La­de­zei­ten, führt den Nutzer schnell an sein Ziel und gibt ihm die wich­tigs­ten Funk­tio­nen rasch und ohne Umwege an die Hand. Ver­schach­tel­te Me­nü­füh­run­gen sollten daher ein Tabu sein. Kon­zi­pie­ren Sie statt­des­sen einen in­tui­ti­ven und leicht nach­voll­zieh­ba­ren Pfad, der den Einstieg in Ihre Software oder Website so einfach wie möglich macht. Un­er­fah­re­ne Benutzer scheitern mitunter an grund­le­gen­den Fragen – trotz all Ihrer Op­ti­mie­rungs­be­mü­hun­gen für ein schickes UX-Design. Diese Nutzer müssen nicht nur die wich­tigs­ten Funk­tio­nen, sondern auch ver­ständ­li­che Hil­fe­stel­lun­gen schnell finden können. Zu diesem Zweck könnten Sie einen zentralen Hil­fe­but­ton be­reit­stel­len. Über diesen lassen sich Nutzer bei­spiels­wei­se Schritt für Schritt durch die Anwendung führen oder der Hil­fe­but­ton­lei­tet direkt weiter zu einer durch­such­ba­ren En­zy­klo­pä­die, in der alle wichtigen Begriffe und Funk­tio­nen erläutert werden. Auch ein Forum, ein Kon­takt­for­mu­lar oder ge­ge­be­nen­falls sogar eine Hotline für te­le­fo­ni­sche Nach­fra­gen tragen zu einer guten User-Ex­pe­ri­ence bei.

Ziel eines User-Ex­pe­ri­ence-Designs ist es, der Ziel­grup­pe die best­mög­li­che Erfahrung zu jedem Zeitpunkt zu er­mög­li­chen. Das bedeutet, dass man die Website oder Software kon­ti­nu­ier­lich ver­bes­sern muss, um mit den fort­schrei­ten­den An­for­de­run­gen der Ziel­grup­pe Schritt halten zu können. Ein einfaches Beispiel: Vor wenigen Jahren waren klas­si­sche Websites noch voll­kom­men aus­rei­chend. Wer hingegen heute kein re­spon­si­ves Design für mobile Endgeräte oder eine native App für iOS und Android anbietet, verliert wichtige Nutzer und letztlich auch Einnahmen wenn die User-Ex­pe­ri­ence bei der Kon­kur­renz besser ist. Wie Sie Ihre Website für mobile Geräte op­ti­mie­ren, erklären wir in unserem Ratgeber.

User-Feedback einholen und Ziel­grup­pen studieren

Um mit Ihrem UX-Design up to date zu sein und zu bleiben, ist re­gel­mä­ßi­ges User-Feedback notwendig. Zwar können Sie viele Un­ge­reimt­hei­ten auch durch eigene Tests aufdecken und beheben, doch bergen interne Prüf­ver­fah­ren immer das Risiko einer Be­triebs­blind­heit gegenüber eigenen Fehlern. Holen Sie daher über User-Umfragen oder -Tests lieber un­ab­hän­gi­ge Meinungen ein. Verlosen Sie bei­spiels­wei­se ziel­grup­pen­re­le­van­te Sach­prei­se, kos­ten­lo­se Test­ver­sio­nen Ihres Premium-Angebots oder In-Game-Items unter allen Teil­neh­mern oder schaffen Sie andere Anreize, um (po­ten­zi­el­le) Nutzer zu einem Feedback zu bewegen.

Ist Ihre App im Google Play-Store oder Apple App-Store zu finden, ist der Austausch mit Nutzern nicht immer ganz einfach: Un­zu­frie­de­ne User geben schneller Feedback ab als zu­frie­de­ne und lassen es Sie sofort wissen, wenn etwas mit Ihrem Angebot nicht stimmt – das kann Fluch und Segen zugleich sein. Ei­ner­seits ist das Feedback wichtig für die fort­lau­fen­de Op­ti­mie­rung der User-Ex­pe­ri­ence, an­de­rer­seits können viele negative Re­ak­tio­nen schnell Ihren Ruf schädigen. Reagieren Sie nach Mög­lich­keit schnell auf die Kritik und bieten Sie Hil­fe­stel­lung an. Noch besser: Sie haben bereits im Vorfeld des Launches um­fang­rei­che (und un­ab­hän­gi­ge) UX-Tests vor­ge­nom­men und das Risiko so minimiert. Auch öf­fent­li­che Meldungen, dass etwaige Bugs behoben wurden, be­sänf­ti­gen viele User.

Wenn Sie über ein Forum und/oder Social-Media-Accounts für Ihr Angebot verfügen, können Sie Nutzer und In­ter­es­sen­ten leicht auf dem Laufenden halten. News­mel­dun­gen zu Updates in der Ent­wick­lung, behobenen Bugs oder einer Op­ti­mie­rung Ihres User-Ex­pe­ri­ence-Designs werden gerne gelesen, binden die Nutzer an Ihr Angebot und geben diesen zugleich die Mög­lich­keit, auf die Ver­än­de­run­gen zu reagieren. Nicht zuletzt fördert eine gute und trans­pa­ren­te In­for­ma­ti­ons­po­li­tik dauerhaft die User-Ex­pe­ri­ence.

UX-Design: Messungen via Eye-Tracking

Kost­spie­lig, aber in manchen Fällen sehr er­folg­ver­spre­chend sind auf­wän­di­ge UX-Messungen bei­spiels­wei­se via Heatmap-Analyse – einer Wär­me­kar­te zur Vi­sua­li­sie­rung der Usability einer Website. Eine bewährte Technik, um eine Heatmap zu erstellen, ist das Eye-Tracking. Mittels spe­zi­el­ler Brillen, Webcams oder externen Remote-Eye-Trackern werden Blick­dau­er- und Häu­fig­keit der Nutzer auf­ge­zeich­net. Die ge­won­ne­nen Daten können schließ­lich zur Op­ti­mie­rung des User-Ex­pe­ri­ence-Designs genutzt werden: Stellen Sie bei­spiels­wei­se fest, dass die Nutzer vermehrt auf der Suche nach einer Funktion in einem Menü den Überblick verlieren, haben Sie wichtige Indizien gewonnen, anhand derer Sie die User-Ex­pe­ri­ence op­ti­mie­ren und das Design anpassen können.

Stellt sich die Frage, wofür man den ganzen Aufwand betreiben und die Kosten für eine Op­ti­mie­rung der User-Ex­pe­ri­ence überhaupt tragen sollte? Schließ­lich können vor dem Launch einer Software oder Website um­fang­rei­che, kosten- und zeit­in­ten­si­ve Test­pha­sen notwendig sein. Die Gründe, Zeit und Mühe in ein ge­lun­ge­nes User-Ex­pe­ri­ence-Design zu in­ves­tie­ren, sind viel­fäl­tig und liegen doch auf der Hand:

• UX-Design stellt den Nutzer in den Vor­der­grund.

• Dadurch bekommt die Ge­stal­tung der Website/App eine objektiv messbare Grundlage: Die Zu­frie­den­heit der Nutzer.

• Willkür und Launen spielen im kreativen Prozess keine Rolle mehr.

• Das fördert das ziel­ori­en­tier­te Arbeiten im Team.

• Wer direkt auf ein funk­tio­nie­ren­des und zeit­ge­mä­ßes User-Ex­pe­ri­ence-Design setzt, spart später Ent­wick­lungs­kos­ten für Kor­rek­tu­ren, Support und Customer-Service.

• Ein fort­lau­fen­des Testen und Op­ti­mie­ren der User-Ex­pe­ri­ence führt zu In­no­va­tio­nen und zeit­ge­mä­ße Designs. Das hebt Ihr Angebot von dem der Kon­kur­renz ab.

• Äs­the­tisch an­spre­chen­de Designs erzeugen Auf­merk­sam­keit und ermutigen Nutzer, sich weiter mit Ihrer Website oder Ihrer App zu befassen.

• Wenn Nutzer ein Erlebnis bei der Anwendung haben, bleibt Ihr Angebot länger im Ge­dächt­nis – das stärkt Ihre Brand.

• Eine hohe Kunden- und Nut­zer­zu­frie­den­heit bindet Nutzer, generiert Likes und/oder Emp­feh­lun­gen und erhöht letztlich auch die Con­ver­si­on-Rate.

Um Nutzern ein echtes Erlebnis auf einer Website oder mit einer Software zu er­mög­li­chen, ist neben gutem Handwerk (Stichwort: Funk­tio­na­li­tät) vor allem Krea­ti­vi­tät (Stich­wor­te Ästhetik und Be­nut­zer­freund­lich­keit) gefragt: An­dern­falls droht Ihr Projekt in der Ver­sen­kung zu ver­schwin­den. Wenn La­de­zei­ten bei einer App oder einer auf­wen­di­gen Website un­ver­meid­lich sind, warum diese nicht Teil des User-Ex­pe­ri­ence-Designs werden lassen? Selbst wenn man nur die zu ladenden Elemente erklärt, ver­bes­sert sich die User-Ex­pe­ri­ence: Nutzer wissen, was gerade passiert und wann es losgeht. Die folgenden Beispiele zeigen, wie man mit In­no­va­tio­nen und Krea­ti­vi­tät echte Er­leb­nis­se schaffen kann.

Auf der Ori­gi­nal­sei­te von Wikipedia taucht das gleiche Bild erst weiter unten und deutlich ver­klei­nert auf. Die Aus­sa­ge­kraft der Abbildung droht an dieser Stelle un­ter­zu­ge­hen, während es als Hin­ter­grund sofort das Interesse des Lesers weckt und Lust auf den Artikel macht. Nicht zu vergessen der päd­ago­gi­sche Mehrwert dieser Dar­stel­lungs­va­ri­an­te: Schon beim Über­flie­gen des bei­spiel­haf­ten Beauty-Artikels wird über das Gemälde das bis heute gängige abend­län­di­sche Schön­heits­ide­al ver­mit­telt – und das auf den ersten Blick.

Alles nur dank eines anders – nämlich als Hin­ter­grund – plat­zier­ten Bildes. Das gilt natürlich auch für andere Bei­spiel­ar­ti­kel: Ganz gleich, ob in einem Artikel zum „weißen Tiger“ ein Foto des Tieres als Hin­ter­grund fungiert oder der Artikel zum Thema „Ozean“ mit einem ent­spre­chen­den Foto bebildert wird: Sofort ist den Besuchern der Seite er­sicht­lich, worum es geht. Ganz nach dem ab­ge­dro­sche­nen, aber immer noch tref­fen­den Motto: „Ein Bild sagt mehr als tausend Worte“.