UX De­sign: Gu­te But­tons, schlech­te But­tons

PAGE - - Inhalt -

Selbst bei so schein­bar sim­plen Be­dien­ele­men­ten lässt sich ei­ni­ges falsch ma­chen – hier die Dos & Don’ts!

On­li­ne-ser­vices, E-com­mer­ce, Cor­po­ra­te-sites, So­ci­al Me­dia – oh­ne an­spre­chen­de But­tons kommt kei­ne di­gi­ta­le An­wen­dung aus. Um­so wich­ti­ger ist es, die grund­le­gen­den Re­geln für ih­re Gestal­tung zu ken­nen. Wir ha­ben neu­es­te But­ton-trends, -Fi­gu­res und -Facts aus ers­ter Hand für Sie

Floa­ting Ac­tion But­tons (FABS) lei­ten sich von Googles Ma­te­ri­al De­sign (https:// ma­te­ri­al.io) ab und sind per­fekt für Funk­tio­nen wie »Tei­len«, »Kre­ieren«, »Pro­zess star­ten« oder »Zu Fa­vo­ri­ten hin­zu­fü­gen«. Ty­pi­scher­wei­se ver­sam­meln sie al­le Op­tio­nen hin­ter ei­nem Plus­sym­bol und be­schleu­ni­gen so die Na­vi­ga­ti­on. Der FAB des New Yor­ker UX De­si­gners Eric Aza­res ist sti­cky und klebt auf der Ober­flä­che, egal ob man scrollt oder wischt. Drückt man das Plus, pop­pen die Op­tio­nen da­hin­ter fä­cher­ar­tig auf und man kann Fo­tos, Vi­de­os und Nach­rich­ten hin­zu­fü­gen und Or­te tag­gen – pri­ma et­wa für ei­nen Rei­seB­log oder ei­ne Rei­se-app In der ios-welt hat ein Floa­ting Ac­tion But­ton aus Googles Ma­te­ri­al-de­si­gnÖ­ko­sys­tem nichts zu su­chen, denn es ist wich­tig, die von den Usern ge­lern­ten Mus­ter zu be­die­nen. Beim UX De­sign für IOS über­setzt die Münch­ner Di­gi­ta­l­agen­tur COBE Funk­tio­nen hin­ter dem Floa­ting Ac­tion But­ton da­her in Pat­terns, die App­le-user ken­nen – zum Bei­spiel über Na­vi­ga­ti­on-, Tab- oder Tool­bars ● So viel Auf­merk­sam­keit wie ein He­a­der, die gro­ße Büh­ne, die User emo­tio­nal auf Mar­ke und Pro­dukt ein­stim­men soll, be­kom­men But­tons vom User In­ter­face oder User Ex­pe­ri­ence De­si­gner meist nicht ge­schenkt. Im In­ter­ak­ti­ons­de­sign sind sie eben nur ein klei­nes De­tail. Und doch müs­sen sie be­deu­ten­de Auf­ga­ben er­fül­len. Egal ob Desk­top oder Mo­bi­le, Web­site oder App: But­tons len­ken den User durch die An­wen­dung und brin­gen ihn zum Ziel. Nur mit ih­rer Hil­fe kön­nen Nut­zer per Fin­ger­tip Ent­schei­dun­gen tref­fen, Käu­fe tä­ti­gen, In­fos ein­se­hen, sich re­gis­trie­ren, et­was tei­len oder her­un­ter­la­den. Zu­dem trans­por­tie­ren But­tons durch Form, Far­be und Auf­schrift die Mar­ken­wer­te von Pro­duk­ten und Un­ter­neh­men. Sie ent­schei­den über Funk­tio­na­li­tät, Con­ve­ni­ence und Con­ver­si­on ei­ner An­wen­dung. Ins­be­son­de­re als Call-to-ac­tions sind sie wich­tig. De­si­gner tun gut dar­an, ih­nen ih­re »One Se­cond of Fa­me« ein­zu­räu­men.

Nun ist es gar nicht so ein­fach, But­tons zu ent­wi­ckeln, die als sol­che zu er­ken­nen und gleich­zei­tig krea­tiv sind, hübsch aus­se­hen, ei­ne prä­gnan­te und ein­deu­ti­ge Auf­schrift mit ei­ner kon­trast­rei­chen Typo ha­ben, im­mer rich­tig plat­ziert sind und den Nut­zer in ele­gan­tem Flow durch die An­wen­dung schleu­sen. »Meist hat man un­end­lich vie­le Ide­en, wie man But­tons noch bes­ser ge­stal­ten könn­te, aber im Ta­ges­ge­schäft ge­hen sie dann meist doch aus Zeit­man­gel un­ter, und man ver­wen­det den But­ton, den man hat, weil er ge­tes­tet ist, läuft und sich be­währt hat«, sagt Pie­tro D’amo­re, Art Di­rec­tor beim Ham­bur­ger Ap­pEnt­wick­lungs­stu­dio Apps­fac­to­ry. Ex­akt das ver­sucht Malthe Lu­da, Crea­ti­ve Di­rec­tor bei der Di­gi­ta­l­agen­tur COBE in Mün­chen, zu ver­mei­den: »Es lohnt sich un­be­dingt, in die Fein­hei­ten ei­nes Pro­dukts zu in­ves­tie­ren, denn erst sie ma­chen ein di­gi­ta­les Pro­dukt wirk­lich po­si­tiv er­leb­bar.«

Um Gestal­tern be­hilf­lich zu sein und ei­ne ge­wis­se Kon­sis­tenz zu wah­ren, gibt es die ISO-NORM 9241-110 na­mens »Grund­sät­ze der Dia­log­ge­stal­tung« ( https:// is.gd/iso9241110 ), und auch Goog­le ( https://is.gd/ goog­le­but­tons ), App­le ( https://is.gd/app­le­but­tons ), Face­book (https://is.gd/face­book­but­tons) und an­de­re Big Play­er der Di­gi­talbran­che ha­ben ei­ge­ne De­si­gnGui­de­li­nes ent­wi­ckelt. Die Hoff­nung da­hin­ter: ei­nen Stan­dard zu set­zen, der den Er­war­tungs­ho­ri­zont der User be­dient. Und die wol­len kei­ne But­tons su­chen oder, wenn sie sie fin­den, ra­ten müs­sen, was sich hin­ter ih­nen ver­birgt. Viel­leicht gibt es kein Ga­ran­tie­re­zept für die Gestal­tung gut funk­tio­nie­ren­der But­tons – si­cher aber ein paar wich­ti­ge Eck­punk­te, an de­nen Krea­ti­ve sich ori­en­tie­ren kön­nen:

Form

But­tons sol­len als sol­che er­kenn­bar sein, das gilt für klas­si­sche But­tons wie für rei­ne Text­but­tons glei­cher­ma­ßen. Bei COBE et­wa müs­sen Bild­spra­che, Form und UX Wri­ting zu 100 Pro­zent zur Mar­ke pas­sen. Zwar ha­ben Usa­bi­li­ty-un­ter­su­chun­gen er­ge­ben, dass ab­ge­run­de­te Ecken die In­for­ma­ti­ons­ver­ar­bei­tung ver­bes­sern und un­se­re Au­gen auf das Zen­trum des Ele­ments len­ken – will man je­doch Dy­na­mik trans­por­tie­ren, soll­te der But­ton eher eckig sein. Aber egal, ob der But­ton rund oder eckig ist oder ei­ne an­de­re, be­nut­zer­de­fi­nier­te Form hat, gilt :» Be­hal­ten Sie die Kon­sis­tenz in al­len Ober­flä­chen steu­er ele­men­ten bei, da­mit der Nut­zer die­ses In­ter­face-ele­ment im­mer noch als But­ton er­kennt«, so COBE- CD Malthe Lu­da.

Grö­ße

Auch in mo­bi­len An­wen­dun­gen muss der But­ton so groß sein, dass auch nicht ganz so schlan­ke Fin­ger ihn er­wi­schen. »Es macht ei­nen Un­ter­schied, ob man den But­ton mit ei­nem Maus­zei­ger oder mit ei­ner Touch­ges­te drückt«, weiß Pie­tro D’amo­re. Die Er­geb­nis­se der Mit-touch-lab-stu­die aus 2003 ( https:// is.gd/mit­touch­lab2003 ) ha­ben im­mer noch ih­re Gül­tig­keit und zei­gen, dass die Mit­tel­wer­te für Fin­ger­kup­pen zwi­schen 10 und 14 Mil­li­me­tern lie­gen und die Fin­ger­spit­ze zwi­schen 8 und 10 Mil­li­me­tern groß ist. Mit ei­ner But­ton­grö­ße von 10 mal 10 Mil­li­me­tern liegt man al­so im­mer rich­tig.

Far­be

Ton in Ton oder auff äl­lig und grell – bei der Farb­ge­bung des But­tons kommt es auf den Ver­wen­dungs­zweck an. Es ist et­was an­de­res, ob man ei­nen But­ton für ei­ne Cor­po­ra­te-web­site oder für ei­ne E- Com­mer­ce-app ent­wi­ckelt. Auf ei­ner Un­ter­neh­mensWeb­site müs­sen But­tons sich farb­lich ins Cor­po­ra­te De­sign ein­fü­gen und soll­ten durch ih­re Far­be Se­rio­si­tät und Ver­läss­lich­keit aus­strah­len. Call-to-ac­tionBut­tons im E- Com­mer­ce dür­fen schon mal »laut« sein und farb­lich her­aus­ste­chen. Al­lein die Far­be Rot hat sich nicht be­währt, weil der User sie als Warn­far­be wahr­nimmt. »Grün lief in Usa­bi­li­ty Tests viel bes­ser, al­so ha­ben wir un­se­re But­tons um­ge­stellt«,

er­klärt Le­an­der Brasch, User Ex­pe­ri­ence De­si­gner bei REWE Di­gi­tal in Köln (sie­he rech­te Sei­te). Soll der But­ton rich­tig »knal­len«, könn­te es an­stel­le von Rot auch Oran­ge oder Pink sein.

Opa­zi­tät und Sät­ti­gung

But­tons mit Farb­fül­lung und Schat­tie­run­gen set­zen sich bes­ser ab und ha­ben meist mehr vi­su­el­les Ge­wicht. Die ehe­mals bei Start-ups so be­lieb­ten Ghos­tBut­tons, die trans­pa­rent, oh­ne Hin­ter­grund­far­be und mit ei­nem sehr dün­nen Rand auf ein Mi­ni­mum re­du­ziert sind, ha­ben mitt­ler­wei­le ih­ren Ab­schied ge­nom­men, denn Trans­pa­renz nimmt der User heu­te eher als ein Zei­chen für nicht so wich­ti­ge In­hal­te wahr. Mit­un­ter si­gna­li­sie­ren trans­pa­ren­te But­tons – genau­so wie aus­ge­grau­te Call-to-ac­tions – auch ei­nen Disa­b­led-but­ton, der bei­spiels­wei­se nicht mehr auf Kli­cken re­agiert, weil der mit ihm ver­bun­de­ne Ar­ti­kel nicht mehr im Shop ver­füg­bar ist.

Plat­zie­rung und An­ord­nung

Grund­sätz­lich soll­ten But­tons so plat­ziert sein, dass User sie nicht über­se­hen kön­nen. Auch kul­tur­tech­ni­sche Kon­ven­tio­nen soll­te man da­bei be­ach­ten. Die abend­län­di­sche Ge­sell­schaft liest bei­spiels­wei­se von oben links nach un­ten rechts, was be­deu­tet, dass wich­ti­ge But­tons mit­tig oder auf der rech­ten Sei­te plat­ziert sein soll­ten. Die Rei­hen­fol­ge ist be­son­ders wich­tig, wenn But­ton-paa­re wie »zu­rück« und »wei­ter« vor­han­den sind. De­si­gner soll­ten un­be­dingt si­cher­stel­len, dass die pri­mä­re oder wich­tigs­te Ak­ti­on nicht nur in Far­be und Kon­trast stär­ker ist als die an­de­ren Call-to-ac­tions, son­dern sich auch auf der rech­ten Sei­te des Dia­logs be­fin­det.

La­be­ling

Auf je­den But­ton ge­hört ein Text, der ge­nau ver­mit­telt, was pas­siert, wenn der User ihn drückt. Trans­por­tiert der Call-to-ac­tion ei­ne kla­re Nach­richt, ver­bes­sert dies die Usa­bi­li­ty – ganz nach der von dem ame­ri­ka­ni­schen In­for­ma­ti­ons­ar­chi­tek­ten Ste­ve Krug in sei­nem gleich­na­mi­gen Buch aus­ge­ru­fe­nen De­vi­se »Don’t ma­ke me think«. Doch sol­che Kurz­tex­te sind ei­ne Kunst, weil sie auch das Bran­ding be­rück­sich­ti­gen müs­sen. »Es ist ab­so­lut nicht das Glei­che, ob es heißt ›Kau­fen‹ oder ›Das will ich ha­ben‹«, sagt Dirk Schäch­ter, Crea­ti­ve/art Di­rec­tor beim De­sign­stu­dio DS null­drei in Bonn.

»Ma­xi­mal vier kur­ze Wör­ter dür­fen auf so ei­nem But­ton ste­hen«, hat Crea­ti­ve Di­rec­tor Malthe Lu­da ge­tes­tet. Wirk­lich über­zeu­gend macht es nach sei­nem Ver­ständ­nis Drop­box mit der sehr kon­kret und auf­for­dernd for­mu­lier­ten An­spra­che »Up­grade jetzt durch­füh­ren!« oder auch »30 Ta­ge kos­ten­los tes­ten«. Manch­mal sei es tat­säch­lich ei­ne Her­aus­for­de­rung, den rich­ti­gen Ton so­wie die rich­ti­gen Wor­te zu fin­den. »Aber wir schlei­fen so lan­ge, bis es passt«, ver­rät Malthe Lu­da. La­be­ling soll schließ­lich nicht nur den User füh­ren und da­mit die Ba­sis für ei­ne ho­he Con­ver­si­on Ra­te schaf­fen, son­dern muss auch

das Bran­ding un­ter­stüt­zen. »Um die­sen Aspek­ten op­ti­mal ge­recht zu wer­den, ge­ben un­se­re Mar­ken­ex­per­ten be­reits ei­ne To­na­li­tät vor«, so Lu­da.

Feed­back ist Pflicht

Auch to­te But­tons, die kei­nen Press Sta­te zei­gen, al­so auf Drü­cken nicht re­agie­ren, sind für Malthe Lu­da ein Graus. Oh­ne Feed­back füh­len sich User im Stich ge­las­sen, die gan­ze Ex­pe­ri­ence hakt. »Das be­rück­sich­ti­gen wir be­reits in un­se­ren Fl­in­to-pro­to­ty­pen«, sagt Lu­da. Feed­back kön­ne man bei mo­bi­len Apps bei­spiels­wei­se auch durch hap­ti­sche Si­gna­le wie Vi­bra­ti­on ein­bau­en. Der Münch­ner Crea­ti­ve Di­rec­tor ist über­zeugt: »Erst wenn der But­ton Feed­back gibt, fühlt sich das De­sign le­ben­dig und echt an.«

Ho­he Tür­me brau­chen star­ke Fun­da­men­te

Es gibt al­so ei­ne Men­ge zu be­ach­ten, um die­ses an­sich all­täg­li­che In­ter­ak­ti­ons­ele­ment zu ge­stal­ten. But­tons schei­nen vie­len De­si­gnern nicht se­xy ge­nug, denn es geht um Wie­der­er­kenn­bar­keit – und die bie­tet we­nig ge­stal­te­ri­schen Spiel­raum. »Gu­tes But­tonDe­sign lernt man am bes­ten im rea­len Le­ben«, lacht Dirk Schäch­ter. Schließ­lich be­dien­ten wir tag­täg­lich so vie­le Ge­rä­te, da liegt es qua­si auf der Hand, ge­nau­er hin­zu­se­hen, was gut und was schlecht ge­löst ist.

Da­mit man es selbst bes­ser macht, muss man sich die ori­gi­nä­re Auf­ga­be von But­tons im­mer wie­der ins Be­wusst­sein ho­len. Sie sol­len User mög­lichst rei­bungs­los durch die An­wen­dung di­ri­gie­ren und sie da­bei un­ter­stüt­zen, die ge­wünsch­te Ak­ti­on aus­zu­füh­ren. Der User soll in ei­nen Flow kom­men, in dem nichts hakt, und wo kei­ne Un­ter­bre­chun­gen und kei­ne Un­ein­deu­tig­kei­ten den Ablauf stö­ren. Stellt man sich als De­si­gner die Web­site oder App als Ge­sprächs­part­ner vor, mit dem man als viel be­schäf­tig­ter User ei­ne Un­ter­hal­tung füh­ren will, er­kennt man so­fort, wie wich­tig gu­te But­tons sind, um den Dia­log zu ei­nem glück­li­chen En­de zu füh­ren. ae [5361]

»30 Ta­ge kos­ten­los tes­ten« lau­tet die Kern­bot­schaft von Drop­box Bu­si­ness. Der But­ton ist da­her in ein sat­tes Blau ge­taucht, wäh­rend der Call-toAc­tion oben rechts sich mit sei­ner fei­nen Out­li­ne un­ter­ord­net. So­bald der User scrollt, füllt er sich mit blau­er Far­be und bleibt so im Fo­kus des Users

Ist ei­ner der Mar­ken­wer­te »Em­pa­thie«, muss die­ser Wert sich auch in je­dem Pi­xel zei­gen – vor al­lem aber in Call-to-ac­tion-but­tons. Ein em­pa­thi­scher But­ton hat ab­ge­run­de­te Ecken und ist meist pas­tell­far­ben. Es­sen­zi­ell ist auch das Wor­ding auf dem But­ton, das sehr freund­schaft­lich for­mu­liert sein soll­te

Ein ho­hes Maß an Em­pa­thie strahlt auch die in Lol­li­popFar­ben ge­hal­te­ne Web­site von Spo­ti­fy mit dem quietsch­grü­nen But­ton aus. Nur das lang­wei­li­ge Wor­ding »Mehr er­fah­ren« will nicht so recht ins Bild pas­sen. »Los geht’s« wä­re für die Com­mu­ni­ty glaub­haf­ter ge­we­sen

Im Ge­gen­satz da­zu wirkt die­ser But­ton durch sei­ne ab­ge­schräg­ten Sei­ten, den kräf­ti­gen Font und die glü­hen­de Um­ran­dung sehr dy­na­misch. Auch das Wor­ding ist hier viel di­rek­ter und auf­for­dern­der

Die bei­den But­tons auf der Start­sei­te von Ocu­lus sind gut sicht­bar und les­bar, aber in der Rang­fol­ge falsch plat­ziert. Der wich­ti­ge But­ton mit blau­em But­ton­kör­per ge­hört auf die rech­te Sei­te

Ghost-but­tons mit trans­pa­ren­tem Kör­per und dün­ner Out­li­ne wur­den vor rund zwei Jah­ren viel von Start-ups ein­ge­setzt. Die Mo­de ist vor­bei, nicht zu­letzt weil sie als But­ton nicht er­kannt wur­den

Mit On­li­ne-but­ton-ge­ne­ra­to­ren las­sen sich But­tons ruck­zuck selbst er­stel­len, und sie lie­fern auch noch Co­de-snip­pets in HTML, CSS oder Ja­va­script mit. Ei­ne Aus­wahl fin­den Sie un­ter ↗ www.page-on­li­ne.de/on­line­but­tonsBest-of der Mi­cro­in­ter­ak­tio­nen. In PAGE 06.18 kom­men­tie­ren Web­de­si­gner ih­re Fa­vo­ri­ten aus dem Be­reich Tran­si­ti­ons, Ani­ma­tio­nen und Co ↗ www.page-on­li­ne.de/pe­pa1806UX Wri­ting, so geht’s. Mehr über das For­mu­lie­ren kna­cki­ger Klein­tex­te für Web­sites, Newsletter und Apps le­sen Sie in PAGE 07.18 ↗ www.page-on­li­ne.de/pe­pa1807PAGE edos­sier »Mi­cro­in­ter­ac­tions: Ani­ma­tio­nen und Tran­si­ti­ons«. Mehr ge­ball­te In­fo zum The­ma gibt’s hier ↗ www.page-on­li­ne.de/pddp1091

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.