Die Top 5 UX Trends

Lese­dau­er: ca. 8–9 Minuten

Neue Soft­ware und Hard­ware ver­än­dern kon­ti­nu­ier­lich unse­re Mög­lich­kei­ten und Ver­hal­tens­wei­sen in der digi­ta­len Welt. Glück­li­cher­wei­se haben sich die Gestal­tung und Bedien­bar­keit von digi­ta­len Benut­zer­ober­flä­chen auch von Jahr zu Jahr wei­ter­ent­wi­ckelt — durch das soge­nann­te UX-Design. Dar­un­ter fal­len gestal­te­ri­sche Prin­zi­pi­en, Tools und tech­ni­sche Fea­tures, die im bes­ten Fall für eine gute User Expe­ri­ence (UX) sor­gen. In die­sem Arti­kel stel­len wir unse­re Top 5 UX Trends vor — von den schon län­ger bekann­ten Design-Sys­te­men und Micro Inter­ac­tions bis hin zu künst­li­cher Intel­li­genz und Neumorphismus. 

1. Design-Systeme und Code-based Design

Die Grund­idee eines Design-Sys­tems ist, wie der Name bereits ver­mu­ten lässt, die Sys­te­ma­ti­sie­rung von Design-Pro­duk­ten, um diese schnel­ler und bes­ser erstel­len zu kön­nen. Ein Design-Sys­tem ist im Prin­zip ein Bau­kas­ten mit ver­schie­de­nen wie­der­ver­wend­ba­ren Kom­po­nen­ten wie z.B. UI-Ele­men­ten (But­tons, For­mu­la­re, etc.), Styl­es oder Code-Bau­stei­nen. Dane­ben gibt es auto­ma­tisch klare Regeln, Prin­zi­pi­en und Ein­schrän­kun­gen für die Design­ent­wick­lung eines Unter­neh­mens vor. Mit einem Design-Sys­tem kann so eine ein­heit­li­che Design­spra­che über alle Pro­duk­te hin­weg sicher­ge­stellt werden und Pro­jek­te kön­nen effi­zi­en­ter von Designern umge­setzt werden. Da das UX-Design im Hin­ter­grund immer kom­ple­xer wird, um im “Vor­der­grund” für die User immer ein­fa­cher und intui­ti­ver zu werden, werden Design-Sys­te­me immer häu­fi­ger von Designern und Ent­wick­lern genutzt. Daher gehen wir davon aus, dass Design-Sys­te­me auch im Jahr 2023 noch zu den UX-Trends gehö­ren werden. 

Wer noch mehr über Design-Sys­te­me erfah­ren möch­te, fin­det wei­te­re Infor­ma­tio­nen in unse­rem Blog­artikel über Ato­mic Design (Link). 

Code-based Design ist eben­falls eine Wei­ter­ent­wick­lung des klas­si­schen, indi­vi­du­el­len bild­ba­sier­ten Designs von digi­ta­len Pro­duk­ten. Dabei geht es darum, Designern mit bestimm­ten Tools zu ermög­li­chen, ihre Designs direkt in Code zu über­tra­gen, ohne dass sie dafür Pro­gram­mier­kennt­nis­se bräuch­ten. Immer wenn sie etwas zeich­nen, erstellt das Tool das ent­spre­chen­de HTML, CSS oder Java­script und ruft den Brow­ser auf, um das Ergeb­nis visu­ell dar­zu­stel­len. Ein gro­ßer Vor­teil die­ses Vor­ge­hens ist, dass inter­ak­ti­ve Ele­men­te (die z.B. einen Groß­teil des Web­site-Designs aus­ma­chen) nicht auf unüber­schau­ba­re Weise sta­tisch dar­ge­stellt werden müs­sen (z.B. eine Drop­down-Funk­ti­on) und somit alle Inhal­te direkt ein­be­zo­gen werden können. 

Selbst wenn Desi­gner z.B. einen Sty­le­gui­de oder ein Design-Sys­tem ver­wen­den, sind bild­ba­sier­te Design­tools völ­lig unab­hän­gig von den Ent­wick­lungs­pro­zes­sen. Sie sind eher abs­trakt und kön­nen — im Gegen­satz zu den von Ent­wick­lern ver­wen­de­ten Tech­no­lo­gien — von den Benut­zern nicht als End­pro­dukt erlebt werden. Code-based Design hat also das Poten­zi­al, den gesam­ten Soft­ware­ent­wick­lungs­pro­zess völ­lig umzu­krem­peln, was ihn effi­zi­en­ter und für alle Betei­lig­ten vor­teil­haf­ter machen kann. Defi­ni­tiv ein Trend, der sich in den nächs­ten Jah­ren eta­blie­ren könnte. 

2. UX-Writing

UX-Wri­ting steht für die Erstel­lung nut­zer­freund­li­cher Texte für digi­ta­le Pro­duk­te. Zur Cus­to­mer Expe­ri­ence auf einer Web­sei­te oder bei einer digi­ta­len Anwen­dung tra­gen ins­be­son­de­re auch die Texte bei. Dabei geht es wie beim UX-Design darum, den User mit sei­nen Bedürf­nis­sen in den Mit­tel­punkt zu stel­len, um seine Auf­merk­sam­keit zu gewin­nen und letzt­end­lich zu über­zeu­gen. Dass gut for­mu­lier­te Texte eine hohe Bedeu­tung für das Such­ma­schi­nen-Ran­king haben, ist schon län­ger bekannt. Mitt­ler­wei­le gibt es aber auch immer mehr Erkennt­nis­se dar­über, wie sich bestimm­te For­mu­lie­run­gen auf das Nut­zer­ver­hal­ten aus­wir­ken kön­nen. So hat laut Goog­le bei­spiels­wei­se die For­mu­lie­rung “Check avai­la­bi­li­ty” bei der Hotel­su­che gegen­über den Wor­ten “Book a room” eine Enga­ge­ment-Stei­ge­rung um 17% erzielt — da “Book a room” den Usern in die­sem Schritt der Cus­to­mer Jour­ney schon zu ver­bind­lich erschien. Damit hat die Wort­wahl nicht nur Aus­wir­kun­gen auf die User Expe­ri­ence KPIs, son­dern auch auf Con­ver­si­on-Rate, Enga­ge­ment und Umsatz. UX-Wri­ting ist dem­nach beson­ders an den ent­schei­den­den Touch­points für Con­ver­si­ons ent­lang der Cus­to­mer Jour­ney von hoher Bedeu­tung. Hin­weis-Texte oder die Wort­wahl auf Call-to-Actions und But­tons kön­nen dabei schon den Unter­schied machen. UX-Wri­ting und das damit ein­her­ge­hen­de Con­tent-Test­ing und User Rese­arch werden sich 2023 sicher wei­ter etablieren. 

3. Micro Interactions und Animations 

Micro Inter­ac­tions sind nicht neu, aber für UX Desi­gner nicht mehr weg­zu­den­ken —  und daher blei­ben sie sicher auch im nächs­ten Jahr aktu­ell. Micro Inter­ac­tions sind klei­ne inter­ak­ti­ve Details im Design von digi­ta­len Pro­duk­ten, die einen gro­ßen Unter­schied machen. Sie hel­fen dem Benut­zer zum Bei­spiel zu erken­nen, dass eine Ein­ga­be erkannt, ver­ar­bei­tet und aus­ge­führt wurde. Micro Inter­ac­tions sind meist klei­ne Ani­ma­tio­nen oder akus­ti­sche Signa­le und hel­fen dem User, Feh­ler zu ver­mei­den, zei­gen einen Sta­tus oder machen auf etwas aufmerksam. 

Micro Inter­ac­tions wir­ken sich meist posi­tiv auf die User Expe­ri­ence aus, weil sie eine emo­tio­na­le Bin­dung zum User unter­stüt­zen. Digi­ta­le Anwen­dun­gen erschei­nen durch die Inter­ac­tions “natür­li­cher”, lassen sich intui­ti­ver vom User bedie­nen und gewin­nen dadurch die Auf­merk­sam­keit des Users. Eine Micro Inter­ac­tion ist zum Bei­spiel die Betä­ti­gung eines Ein/Aus Knop­fes wie wir sie aus unse­rem All­tag bei einer Lampe oder unse­rem Wecker ken­nen, das Auf­dre­hen der Musik­laut­stär­ke oder das Öff­nen des Kühlschranks. 

Ein gutes Bei­spiel für eine digi­ta­le Micro Inter­ac­tion: der Upload Bal­ken. Er zeigt den Sta­tus und den Fort­schritt des Uploads und gibt dem User damit ein kla­res Feed­back. Es wird deut­lich, ob die gewünsch­te Hand­lung (der Upload) in Gang getre­ten ist, wie lange der Upload ver­mut­lich noch dau­ert und wann er erfolg­reich abge­schlos­sen wurde. Micro Inter­ac­tions tra­gen so zu einer ver­bes­ser­ten Nut­zer­füh­rung, Ver­ständ­lich­keit und Indi­vi­dua­li­tät bei — ein Plus für die User Experience. 

Nicht zu ver­wech­seln mit Micro Inter­ac­tions sind Micro Ani­ma­ti­ons. Wie der Name schon sagt, han­delt es sich um klei­ne Ani­ma­tio­nen. Vor­zugs­wei­se sind sie funk­tio­nal und die­nen als visu­el­ler Indi­ka­tor für User, dass sie eine Akti­on aus­füh­ren kön­nen, werden oder gera­de aus­ge­führt haben. Typi­scher­wei­se zieht zum Bei­spiel jede Micro Inter­ac­tion eine Micro Ani­ma­ti­on nach sich. Die Ani­ma­ti­on bie­tet ein unmit­tel­ba­res visu­el­les Feed­back und belohnt mit einer klei­nen Bewe­gung. Micro Ani­ma­ti­ons sind oft der Ein­stieg in neue Inhalts­blö­cke (wie hier im Bei­spiel bei dimo.zone) oder lei­ten zu wei­te­ren Aktio­nen auf einer Web­site an. Durch Kli­cken oder Maus­be­we­gun­gen werden Micro Ani­ma­ti­ons in Bewe­gung gesetzt.

Sol­che inter­ak­ti­ven und ani­mier­ten Ele­men­te sind für Web­sei­ten und digi­ta­le Anwen­dun­gen heut­zu­ta­ge ein Muss, um sich von der Masse abzu­he­ben. Micro Ani­ma­ti­ons bezie­hen User in die Inhal­te ein und kön­nen dazu bei­tra­gen, eine Viel­zahl von Inhalts­for­men auf­zu­wer­ten, von visu­el­len Sto­rytel­ling-Inhal­ten bis hin zu Landing Pages für Marketingkampagnen.

Micro Ani­ma­ti­ons sind bereits weit ver­brei­tet und werden in Zukunft wohl noch öfter zu sehen sein. Ein wesent­li­cher Grund dafür ist, dass viele Ani­ma­tio­nen mitt­ler­wei­le viel ein­fa­cher zu imple­men­tie­ren sind als noch vor ein paar Jah­ren. Desi­gner kön­nen heute viele vor­co­dier­te Ani­ma­tio­nen von ver­schie­de­nen Platt­for­men ver­wen­den, ohne dass extra ein Ent­wick­ler mit ein­be­zo­gen werden muss. Ganz gleich, ob es sich um einen ani­mier­ten Text-Inhalt oder einen Hover-Effekt für eine Schalt­flä­che han­delt, es sind keine Pro­gram­mier­kennt­nis­se mehr erfor­der­lich, um diese anspruchs­vol­len Ergän­zun­gen zu imple­men­tie­ren. Micro Inter­ac­tions und Ani­ma­ti­ons soll­ten daher in den nächs­ten Jah­ren defi­ni­tiv bei der Konzep­tion von Web­sei­ten und digi­ta­len Anwen­dun­gen berück­sich­tigt werden. 

4. Künstliche Intelligenz für die User Experience 

Künst­li­che Intel­li­genz oder KI (engl. Arti­fi­ci­al Intel­li­gence oder AI) gibt es schon seit vie­len Jahr­zehn­ten — zumin­dest in der Theo­rie. Die not­wen­di­ge Hard­ware für die Umset­zung gibt es jedoch erst seit ein paar Jah­ren, was die zuletzt zuneh­men­de Nut­zung und Wei­ter­ent­wick­lung von künst­li­cher Intel­li­genz erklärt. Die Grund­idee von KI ist, dass Algo­rith­men ver­su­chen, mensch­li­che Ent­schei­dungs­we­ge nach­zu­bil­den, um ein defi­nier­tes Ziel zu errei­chen. Dabei werden soge­nann­te neu­ro­na­le Netze gebil­det, die auf Grund­la­ge umfang­rei­cher Ein- und Aus­gangs­da­ten selbst­stän­dig Zusam­men­hän­ge her­stel­len. So trifft die KI auf Basis ver­schie­de­ner Ein­gangs­me­tri­ken eine Ent­schei­dung. KI oder auch “maschi­nel­les Ler­nen” (engl. Machi­ne Lear­ning) wird bereits in vie­len Gebie­ten wie z.B. der Medi­zin, Indus­trie oder dem Hand­werk eingesetzt. 

So ist KI auch bei Benut­zer­inter­ak­tio­nen im Rah­men von Web­an­wen­dun­gen hilf­reich und wird bereits häu­fig für Auto­ma­ti­sie­run­gen ver­wen­det. Auto­ma­ti­sier­te Ver­fah­ren kön­nen das Nutzer-Erleb­nis ver­bes­sern und gezielt auf User-Bedürf­nis­se ein­ge­hen. Ent­lang der Cus­to­mer Jour­ney kom­men dabei ver­schie­de­ne KI-Tools zum Ein­satz. In der Awa­re­ness-Phase kann die Auf­merk­sam­keit poten­zi­el­ler Kun­den zum Bei­spiel mit auto­ma­ti­sier­ten Pro­dukt­emp­feh­lun­gen oder gezielt für den User auf­be­rei­te­ten Bewer­tun­gen gewon­nen werden. Man spricht dabei auch von “Anti­ci­pa­to­ry Design”. Das Wort anti­zi­pa­to­risch kommt vom latei­ni­schen anti­cipa­re, was so viel bedeu­tet wie “sich im Vor­aus um etwas küm­mern”. Dem User sol­len dabei Pro­dukt­su­che, Ent­schei­dun­gen oder die Ori­en­tie­rung von vorn­her­ein leich­ter gemacht werden. In der Con­side­ra­ti­on-Phase kön­nen dyna­mi­sche Preis­mo­del­le, d.h. eine auto­ma­ti­sier­te Anpas­sung von Prei­sen (z.B. an die gegen­wär­ti­ge Markt­si­tua­ti­on), den aus­schlag­ge­ben­den Impuls zum Kauf geben. Auch wäh­rend des Kaufs selbst kommt KI zum Ein­satz, z.B. beim Betrugs­schutz durch zusätz­li­che Veri­fi­ka­ti­ons-Schrit­te beim Erken­nen von mög­li­cher­wei­se betrü­ge­ri­schen Ein­ga­be-Mus­tern. Ver­lässt ein Kunde den Online-Shop mit einem vol­len Waren­korb, ohne den Kauf abzu­schlie­ßen, wird in man­chen Fäl­len auto­ma­tisch eine E‑Mail zur Erin­ne­rung gesen­det — durch die KI. Auch nach dem Kauf­ab­schluss sorgt KI für intel­li­gen­te Kun­den­bin­dungs­an­ge­bo­te im Rah­men von Loyal­ty- und Ser­vice-Pro­gram­men. Ein wei­te­res häu­fig genann­tes Bei­spiel für künst­li­che Intel­li­genz bei Web­an­wen­dun­gen sind Chat­bots. Sie sol­len einen per­sön­li­chen Ansprech­part­ner wäh­rend der gesam­ten Cus­to­mer Jour­ney abbil­den und für Fra­gen zur Ver­fü­gung ste­hen. Auf vie­len Web­sei­ten sind sie bereits Stan­dard und ent­wi­ckeln sich ste­tig weiter. 

Im KI-Bereich gibt es stän­dig Neue­run­gen. Für die User Expe­ri­ence der nächs­ten Jahre wird künst­li­che Intel­li­genz auf jeden Fall eine Rolle spie­len, da sind sich Exper­ten einig. Es gibt jedoch auch eini­ge Her­aus­for­de­run­gen in Bezug auf KI. Die Inte­gra­ti­on von KI in kom­ple­xen Web­an­wen­dun­gen ist nicht immer ein­fach und auch die Daten­schutz-Frage macht die Imple­men­tie­rung von Auto­ma­ti­sie­run­gen oft kom­pli­ziert.  Hier bleibt abzu­war­ten, wie sich der Umgang mit Big Data und bestimm­te Geset­ze in Zukunft ver­än­dern werden. 

5. 3D und Neumorphismus

Wie wird sich Design im digi­ta­len Raum künf­tig anfüh­len? Dafür spielt der Neu­mor­phis­mus-Design­stil bereits seit ein paar Jah­ren eine Rolle. Neu­mor­phis­mus beschreibt einen visu­el­len Stil, der mit Far­ben, For­men, Ver­läu­fen und Schat­ten arbei­tet, um z.B. einen 3D-Effekt und eine gra­fi­sche Inten­si­tät zu schaf­fen. Der meist weich wir­ken­de Look soll dabei ein ange­neh­mes Nutzer-Erleb­nis erzeu­gen und das Design erleb­ba­rer machen. 

Ob sich Neu­mor­phis­mus jedoch lang­fris­tig durch­setzt, ist frag­lich. Man könn­te den Stil als eine Mischung aus dem schon lange aus der Mode gekom­me­nen 3D-Design und dem heut­zu­ta­ge viel ver­wen­de­ten Flat Design bezeich­nen. Zunächst wirkt Neu­mor­phis­mus gegen­über Flat Design ästhe­ti­scher, da der star­ke Kon­trast geschwächt wird. Ande­rer­seits kann die Nut­zer­freund­lich­keit dadurch auch sin­ken, da die Zugäng­lich­keit ein­ge­schränkt werden kann und z.B. Men­schen mit Seh­schwä­che weni­ger gut zurechtkommen.

Neu­mor­phis­mus wirkt im Ver­gleich zum kla­ren Flat Design futu­ris­tisch und inter­es­sant. Wir werden sehen, ob die­ser Design-Stil in Zukunft mehr Beach­tung erfährt und wie er sich auf die User Expe­ri­ence auswirkt. 

Ausblick 

Es bleibt span­nend, wel­che neuen Tech­no­lo­gien und Anwen­dun­gen die User Expe­ri­ence in den nächs­ten Jah­ren wei­ter ver­än­dern und ver­bes­sern, und wel­che neuen Ideen der UX-Desi­gner sich durch­set­zen werden. Klar ist, dass die Benut­zer­freund­lich­keit auch wei­ter­hin im Fokus ste­hen wird. Das aktu­el­le Rede­sign der Video-Platt­form You­tube zeigt dies z.B. durch ver­bes­ser­te Far­ben, die Ein­füh­rung des “Ambi­ent Mode” — ein Licht­ef­fekt, der das Anse­hen von Vide­os im dunk­len Design ein­drucks­vol­ler macht — und die Mög­lich­keit, in Vide­os rein zu zoo­men. Auch mit einer ver­bes­ser­ten Navi­ga­ti­on und über­ar­bei­te­ten But­tons und Ele­men­te-Anord­nun­gen reagiert You­tube auf Nutzer-Bedürf­nis­se. Wie bei You­tube stel­len auch wir bei Lichtblick bei jedem Design stets den User in den Vor­der­grund und schaf­fen so moder­ne, intui­ti­ve Web­sei­ten, die Unter­neh­men dabei hel­fen, ihre Ziele zu errei­chen. Warum Nutzer-Ori­en­tie­rung so wich­tig ist, erklä­ren wir unter ande­rem in die­sem Blog­artikel über User Cen­te­red Design (​​Link).

Quel­len:

• https://userlutions.com/blog/ux-design/ux-trends/ 
• https://userlutions.com/blog/ux-design/micro-interactions/ 
• https://www.adesso.de/de/news/blog/erfolgsfaktor-design-systeme.jsp 
• https://www.hosteurope.de/blog/was-sind-design-systeme-und-wie-arbeitet-man-damit/ 
• https://www.uxpin.com/studio/blog/its-time-for-designers-to-switch-from-image-based-to-code-based-design/ 
• https://userlutions.com/blog/ux-design/ux-writing-8-guidelines/
• https://www.youtube.com/watch?v=DIGfwUt53nI&t=305s 
• https://www.netz98.de/blog/ux-usability/unterstuetzung-der-user-experience-durch-ki/ 
• https://t3n.de/news/redesign-youtube-stellt-neues-design-und-nuetzliche-features-vor-1508072/
• https://blog.youtube/news-and-events/an-updated-look-and-feel-for-youtube/