Kas ujukimärgid on tõepoolest nii problemaatilised?

See on vastus Adam Silveri 25. mai 2017. aasta teosele „Ujuvad sildid on problemaatilised”.

Kuna kutt, kes tegi originaalse kujunduse, millel põhiosa hõljumismärgistusega põhines, tunnen end mõnevõrra kohustatud jagama oma vaatenurka selles küsimuses.

Algne ujukmärgise kujundus, mille postitasin Dribbble'i 2013. aastal

Ma pean seda eessõnas ütlema, et ma pole Aadamaga kunagi kohtunud, kuid olen lugenud mõnda tema teist artiklit ja hindan väga ning imetlen tema mõttekäiku tema artiklite pisikeste detailide osas

Adam toob oma artiklis välja palju häid külgi ja teatavates kontekstides oleksin nõus.

Usun siiski, et on oluline välja tuua mõned peent absoluutsed väited artiklis ja juhtida tähelepanu nende suhtelisusele, mis põhineb pigem laiemal kujundusel kui ujuva sildi individuaalsel mustril.

Samuti tahan ma seda kõike maandada, öeldes, et ma ei usu, et hõljumismärgiseid tuleks kasutada kõigi tehtud vormide jaoks. Kui te arvate, et need ei lisa teie vormile lisaväärtust, siis ärge kasutage neid. Okei?

Kui olete testinud üht viisi teisega, kasutage suurema jõudlusega meetodit. Kes ei taha kõrgemaid konversioonimäärasid?

Kuid pidage meeles, ainult vorm ei tõsta konversioonimäärasid katuse kaudu. Peate looma piisavalt väärtust ja lahendama oma sisuga piisavalt suure probleemi, et kasutaja oleks tegelikult motiveeritud teie vormi kasutama.

Ma ei ole teinud ühtegi ametlikku hõljumismärgistuse jagamise testimist ega saa kindlalt soovitada mustrit tavalise sildi kohal, põhinedes pelgalt teadusuuringutel.

Kuid võin öelda, et kasutasin hiljuti kursusevormis Intro to Icon Design kursuse hõljumismärgiseid ja nägin konversioonimäära üle 30%. Minu kiire uurimistöö kohaselt on see kümme korda suurem kui keskmine opt-form, mis loob ainult 3% konversioone.

Alates tasuta videokonkursist Intro kuni Ikoonid

Kas konversioonimäärad oleksid kõrgemad, kui ma poleks kasutanud hõljumismärgiseid? Mu soolestik ütleb „ei”, kuid mul pole selle varundamiseks andmeid.

Vaatamata sellele, et see kõik pole, süvenegem minu kommentaaridesse. Järgnevad nummerdatud pealkirjad ja tsitaadid on võetud otse artiklist.

1. Vihje jaoks pole ruumi

Artiklis öeldakse:

Ujuvad sildid algavad tekstikasti sees, jätmata ruumi täiendavaks vihjeks.
Pilt on võetud võrdlusartiklist

Ok, nii et kui kavatsete sisestada vihje või märkuse sisestusvälja kohale ja otse sildi alla, siis jah, hõljumismärk takistab teie võimalust seda teha.

Kui aga soovite tõesti märkust või vihjet, võite selle sisestusvälja alla liigutada ja teist välja lihtsalt natuke alla lükata.

Vihje paigutamise üle arutlemine on mõttetu, kui teil pole eriti selget pilti täpsest probleemist, mida üritatakse kõigepealt vormi abil lahendada.

Mõnel juhul on vihjetest või siltidest uskumatult palju abi ja muudel juhtudel on need halvasti konstrueeritud vormil bandaidiks. See lihtsalt ei saa olla kontekstist väljas absoluutne standard.

2. Neid on raske lugeda

Artiklis öeldakse:

Ujuvatel siltidel on tavaliselt väike tekst, nii et hõljudes võtab see vähe ruumi. Kuid väikest teksti on raske lugeda.
Pilt on võetud võrdlusartiklist

See sõltub tõesti teksti suurusest. Ja „raskesti loetav” on muutuja, mitte konstant, mis põhineb kasutaja nägemisel.

Lisaks on teksti suurus üldise kujundusega võrreldes - mitte ise hõljuvaid silte. On täiesti võimalik, et hõljumissildid on standardsuurusega sama suured.

Kui teksti kuvatakse standardsuuruses 16–18 pikslit, on see üldiselt loetav. Võib-olla rohkem, kui öelda 12–14 pikslit.

Lepime hetkeks kokku, et 18 pikslit on tegelikult lihtsamini loetav kui 12 pikslit ...

Kas on liiga mõeldamatu eeldada, et hõlpsasti loetav 16–18 pikslit, mis on kontekstiliselt korrigeeritud 12–14 pikslile pärast seda, kui kasutaja hakkab kirjutama, oleks äkki liiga väike lugemiseks?

Ma ei eita, et 12 pikslit on raskem lugeda kui 18 pikslit, kuid ma näen hõljumismärgist pigem mineviku esemena kui tuleviku aimdusena.

See on pigem allesjäänud teave kui juhis, mida teha.

3. Nad vajavad ruumi, kuhu sisse kolida

Artiklis öeldakse:

Ujuvad sildid vajavad liikumiseks ruumi. Kui sildi tekst on sõbralik (vt eelmist punkti), siis niikuinii ruumi ei salvestata - lihtsalt rohkem tühikut.
Pilt on võetud võrdlusartiklist

See on tõsi, absoluutselt.

Ujuki sildid vajavad liikumiseks ruumi ja see on üks keerulisemaid probleeme mustri naelutamiseks.

Chris Coyier kirjutas isegi oma mõtted selles küsimuses üles ja jõudis järeldusele, et ujukimärgid ei salvesta üldse vertikaalset kõrgust.

AGA…

Kui nõustute, et hõljumismärk on pigem juhend kui artefakt, siis võite ka nõustuda, et on tavaline etikett teksti suuruselt pisut väiksem.

Ja väiksema teksti suurusega, näiteks 16 piksli asemel 12 pikslit, säästaksite tegelikult 4 või enam pikslit ruumi. Võimalik, et isegi 8 pikslit, kuna te ei peaks traditsioonilises tähenduses sildi alla lisavarustust lisama.

Oleme siin tõesti pikslites umbrohu alla sattunud, kuid suurepärane liidesekujundaja on valusalt teadlik 4-pikselisest erinevusest ja mõjudest, mis sellel õigesti või valesti kasutamisel kogu kujundusele võivad olla.

Nii et kui salvestasite vormingus 5 sisestusväljale 8 pikslit, olete kokku säästnud 40 pikslit. See on umbes sama nupu kõrgus mobiiliekraanil.

Kas see oleks teie projekti jaoks kasulik? Ma ei tea. Teie kui disainer peate otsustama, et iga kasutusjuhu korral, millega kokku puutute.

Lubage mul tuua teile reaalse maailma näide hiiglaslikust keerulisest vormist, mille kallal töötasin paar aastat tagasi.

Projekt hõlmas tarbetu hulga andmeid kaubanduslikuks laevanduseks ja transpordilogistikaks. Püüdsime tõeliselt muuta keerukaks, lihtsaks.

Allolevad vormid on ekraanipildid “pooleliolevate tööde” kavanditest, mille ma arhiivist üles tõstsin.

Vasakul kujul kasutatakse ülalt joondatud siltide ja vasakule joondatud siltide kombinatsiooni. Me eksperimenteerisime - püüdes maanduda ideaalse lahenduse poole.

Seejärel kujundasin paremal oleva vormi alternatiivina vormil toimuva hulluse nihkejõule. Me olime kõik ühel meelel, et see tundub puhtam, vähem ülepaisutatud ja üldiselt parem.

Pilt on tehtud Shiplify projektist, mille kallal töötasin 2014. aastal

Näete, et kuigi ainult pooled väljad olid ülajoondatud, päästis ikkagi vertikaalse kõrguse üle 420 piksli.

Meil oli isegi paar eksprompt testi, kus me küsisime inimestelt: „milline neist vormidest näeb vähem üle jõu?” Ja nad leppisid kokku, et paremal olev vorm näib olevat parem.

Ma tean, et see pole 100% kehtiv ja statistiliselt veenev testimine, kuid siiski on see algus.

Ma ARMASTAN, et saaksin ühel päeval midagi sellist korralikult proovile panna, kuid seni on see intuitsioon, mitte fakt.

Seal on nii palju muutujaid, nagu sisutüüp, olemasolevad teadmised kasutaja kohta ja palju muud, mis muudavad ühe vormi testi lihtsalt mitte kõigi tulevaste vormide jaoks 100% -liseks.

4. Animatsioon on problemaatiline

Artiklis öeldakse:

Animatsioon, isegi kui see on hästi tehtud, võib olla häiriv ja häiriv, eriti madala usalduse või nägemispuudega kasutajate jaoks. Ja suumimisel võib silt sildilt ekraanilt kaduda.

Oota sekundit. Kui animatsioon on hästi tehtud, siis on see definitsiooni järgi „hästi“, „hea“, „rahuldav“, „soovitav“ jne.

Seetõttu ei saa fraas „häiriv ja häiriv” eksisteerida koos mõistega „hästi tehtud”.

Vormige animatsioone tasuta õppeaiuxux.com juhtumianalüüside kaudu

Ma tean, et olen uskumatult erapoolik, kuid kui täidan vormi, mis tõesti naelutab Float Labeli animatsiooni, tekib mul animatsiooni lahenedes teismelise pisike väike dopamiinilaks ja liigun järgmisele väljale. Väike valmimistunne, mida varem polnud.

See tuletab mulle meelde mängu, kus teie tegelase tee järel toimub midagi visuaalselt. Nagu jalajälg.

Mul on tunne, et ma ei suuda seda siiski piisavalt eessõnaliselt öelda. Kui hõljumismärgistel pole teie projekti jaoks mõtet ja see suurendab liiga palju tarbetut keerukust, siis ärge seda igal juhul kasutage.

Kasutan endiselt teie vormi rõõmsalt, kui vormi teine ​​ots minu probleemi lahendab.

5. Neil on halb kontrast

Artiklis öeldakse:

Nagu kohahoidja tekst, on ka hõljuvate siltide kontrastsus selle eristamiseks madal, kuid madala kontrastsusega teksti on raske lugeda.
Sõltuvalt kujundusest peab etiketi väljal hõljudes selle värv muutuma. Muidu kaob tekst taustvärvi taustal.
Pilt on võetud võrdlusartiklist

Madal kontrastsus pole midagi ühist ujukimärgisega ning sellel on kõik pistmist suuruse ja värviga.

Minimaalse WCAG 2.0 (veebisisu juurdepääsetavuse juhised) kohaselt on tavalise teksti suuruse alla 18 ~ pikseli AA suuniste läbimiseks vajalik värvide kontrastsuse suhe 4,5: 1.

Kergeim halli värvi heksekood, mis tekitab vastuvõetava AA kontrastsuse suhte, on #ffffff (valge) taustal # 767676 või # 757777. See tähendab, et kui kasutate tavalist fondi kaalu alla 18 piksli. Kui kasutate paksus kirjastiilis suurust 14 pikslit, võite edasi lükata WCAG-i pakutava suure kontrastsuse suhte, mis on 3,5: 1 ja lõpuks #ffffff on 898989. Kõrvalmärkus: see on minu lemmik kontrastsusekontroll.

Sidenote: Olen kavandanud projekte pankadele, mille digitaalse toote jaoks on vaja minimaalset AA kontrastsuse reitingut. Ma ei ole isiklikult kohanud klienti, kes nõuaks rohkemat kui AA, kuid seadisime Exxoni Unity Design Systemi kujundamisel AAA eesmärgi (ja tabasime seda).

Ok, ma olen teema lahti saanud, aga minu mõte on see, et tegemist on värvi- ja kujundusküsimusega, mitte ujukkleebisega.

6. Nad võivad väärtuse vastu eksida

Artiklis öeldakse:

Inimesed võivad välja vahele jätta, mõeldes, et see on juba täidetud. Esitamisel näevad nad viga, mis tuleb parandada. See on pettumust valmistav ja aeganõudev.

See on väga õige punkt ja ka põhjus, miks värv ja hierarhia on liideste kujundamisel ülimalt olulised.

Tühjade sisestusväljade kohal olevaid tumedamaid silte on selles valdkonnas juba raske eksida.

Kui loote kasutajale pretsedendi, lastes aktiveerida ujuvad sildid kasutaja sisendis ja kasutaja sisestusteksti värv on palju tumedam kui kohahoidja värv - näiteks # 767676 versus # 222222 -, võib segiajamise võimalus olla palju väiksem.

Ma ei saa öelda, et see pole probleem. Ma ei usu, et see nii oleks paljudel juhtudel, kuid minu arvates oleks sellise oletuse tegemine ilma raskete andmeteta.

Kujundage kohahoidjad ja sildid targalt. Kui kasutate kohahoidja värvi ja kasutaja sisestatud värvi vahel õiget kontrasti, peaks see lahendama kõik probleemid, mis võivad ilmneda.

7. Need asuvad ebajärjekindlalt

Artiklis öeldakse:

Raadionuppudel, märkeruutudel ja valikuväljadel on staatilised sildid ja legendid. Kui tekstikastides on ujuvad sildid. See loob ebajärjekindla kogemuse.
Näiteks tekstikasti vaadates peab kasutaja vaatama juhtnuppu. Valikuvälja jaoks peavad nad otsima sellest väljapoole.
Pilt on võetud võrdlusartiklist

See on disainiprobleem, mitte hõljumismärgistuse probleem. Shopify teeb uskumatut tööd, kui nende sisestusväljadel on ujuki silt ja märkeruudud.

8. Silt võib kärpida

Artiklis öeldakse:

Kui ujuv silt on pikem kui põllu suurus, katkestab see väli. Peaksime kujundama sisu, me ei tohiks seda sisu kujundusele sobivaks muuta.
Pilt on võetud võrdlusartiklist

See ei ole iseenesest ujukimärgi probleem, see on halva vormi kujundamise probleem.

Kellelgi ei tohiks kunagi nii pikka kohahoidja silti olla.

Ja kui peate tõesti küsima sisesildina kaherealist küsimust, siis ma soovitan 100% EI kasutada ujukmärgist.

Sellel kasutamisjuhtumil pole lihtsalt mõtet.

9. Nad eiravad norme

Artiklis öeldakse:

Teame, et kohahoidjad on niikuinii probleemsed. Kui me aga kavatseme teksti tekstivälja panna, peaks see olema vihje, mitte silt.

See on standard, millele artiklis viidatakse. See on järgmine:

Kohatäite atribuut tähistab lühikest vihjet (sõna või lühike fraas), mille eesmärk on abistada kasutajat andmete sisestamisel. Vihjeks võib olla näidisväärtus või eeldatava formaadi lühikirjeldus.

Hmmm, „Sõna või lühike fraas, mis on mõeldud kasutaja abistamiseks“ kõlab nagu võiks kirjeldada silti!

Nüüd öeldakse ka tüüpdokumentides:

Kohatäite atribuuti ei tohiks sildi alternatiivina kasutada.

Olen täiesti teadlik, et teatud olukordades on teatud välja sisestustüüpide aitamiseks vaja välist silti ja täiendavaid kohahoidjate andmeid. Mõnikord peate vormide kavandamisel tõmbama kõik peatused, et need kõik alused kataks.

Olen 100% nõus, et sildi puudumine ja ainult kohahoidjate andmed on halb mõte. Sellepärast on ujuki silt olemas!

Ujukimärk loodi pärast seda, kui see standard kirjutati. Kas pärast uute ideede tekkimist pole mõtet vanade dokumentide originaalseid oletusi vaidlustada? Eriti sellised, mis võetakse nii kiiresti vastu.

Kas on mõistlik selle asemel uudishimulik olla, mitte halvustav?

Peab olema mõjuv põhjus, miks Google võttis selle mustri materjalide kujundamise juhendites standardina kasutusele.

Lisaks Google'ile on järgmised ettevõtted oma rakendustes kasutusele hõljumismärgistuse mustrid.

  1. Shopify
  2. Lõtv
  3. Digitaalne ookean
  4. Delta
  5. Nägemine
  6. Veel palju ma ei mäleta ...

Kokkuvõte

Artiklis öeldakse:

Vormid ei ole meelelahutuse allikad. Ujuv silt ei pane kasutajaid vormide kasutamisest rõõmu tundma. Kasutajad ei hooli sellest. Nad tahavad lihtsalt tulemust.

Olen nõus, et kasutajad tahavad tulemust, kuid ei nõustu sellega, et vormid ei tohiks olla meelelahutuslikud. Meelelahutatud kasutaja mäletab palju tõenäolisemalt oma kogemust teie tootega.

Lisan siiski hoiatuse, et te ei peaks meelelahutust seadma funktsionaalsuse ja selguse piiresse.

Vormi kujunduse parendamiseks on paremaid ja produktiivsemaid tehnikaid. Kulutagem selle asemel aega ja energiat.

Olen kindlasti esimese lausega nõus ja mõnikord on vormikujunduse parandamine väljade eemaldamine või ümbermõtestamine, kui vorm on isegi vajalik.

Kuid kas me ei peaks kulutama aega vormikujunduse parendamise KÕIGILE tahkudele?

See artikkel avaldati algselt saidil mds.is, kuna ilmselt peate nüüd postitama oma ajaveebisse ja keskmisele, sest kes soovib vormindada ainult ühe ajaveebi postituse?

Lisateavet ujukmärgistuse päritolu kohta leiate sellest postitusest.