Jesu li Float naljepnice zaista problematične nakon svega?

Ovo je odgovor na komad Adama Silver-a od 25. svibnja 2017. pod nazivom Plutajuće naljepnice su problematični.

Kako je momak koji je napravio originalni dizajn na kojem se temelji većina psovki Float Label, osjećam se pomalo obvezan dijeliti svoju perspektivu na to.

Izvorni dizajn plovnih naljepnica objavio sam u Dribbbleu 2013. godine

Moram to predgovoriti govoreći: Nikad nisam upoznao Adama, ali pročitao sam neke druge njegove članke i stvarno cijenim i divim se njegovoj pažljivosti sitnih detalja u njegovim člancima

Adam u svom članku donosi puno sjajnih stavova i u određenim kontekstima bih se složio.

Međutim, vjerujem da je važno u članku navesti neke suptilne apsolutne izjave i istaknuti njihovu relativnost koja se temelji na dizajnu u cjelini, a ne na pojedinačnom obrascu plutajuće etikete.

Također želim sve to zaštititi govoreći da ne vjerujem da se etikete s plovkom trebaju koristiti za svaki izrađeni obrazac. Ako mislite da ne dodaju vrijednost vašem obliku, nemojte ih koristiti. U redu?

Ako ste testirali jedan način naspram drugog, koristite metodu s boljom izvedbom. Tko ne želi više stope pretvorbe?

Ali samo zapamtite, sam oblik neće povećati stopu konverzije kroz krov. Morate stvoriti dovoljno vrijednosti i riješiti dovoljno veliki problem sa svojim sadržajem, tako da je korisnik zapravo motiviran da prvo koristi vaš obrazac.

Osobno nisam izvršio službeno testiranje dijeljenja etiketa na plovak i ne mogu vam pouzdano preporučiti uzorak preko standardne etikete, zasnovane samo na čistom istraživanju.

Ali mogu reći da sam nedavno koristio plivajuće naljepnice na obrascu za tečaj Intro to Icon Design i vidio stopu konverzije preko 30%. Prema mom brzom istraživanju, to je 10 puta više od prosječnog odabira u obliku koji ostvaruje samo 3% konverzije.

Od besplatnog video tečaja Intro do Icons

Da li bi stope konverzije bile veće da nisam koristio float naljepnice? Moje crijevo kaže „ne“, ali nemam podataka za to.

Uz sve to pomalo, istražite u mom komentaru. Sljedeći numerirani naslovi i citati u nastavku preuzeti su izravno iz članka.

1. Nema mjesta za nagovještaj

U članku se navodi:

Plutajuće naljepnice započinju unutar tekstnog okvira ne ostavljajući prostora za dodatni savjet.
Slika preuzeta iz referentnog članka

U redu, pa ako namjeravate staviti nagovještaj ili bilješku iznad polja za unos i izravno ispod oznake, da, float oznaka će vam ometati sposobnost.

Međutim, ako ste zaista željeli bilješku ili nagovještaj, možete je premjestiti ispod polja za unos i jednostavno pritisnuti drugo polje prema dolje.

Rasprava o postavljanju nagovještaja uzaludna je, osim ako nemate krajnje jasnu sliku točnog problema koji se pokušava riješiti u prvom redu pomoću obrasca.

U nekim slučajevima savjeti ili etikete nevjerojatno su korisni, a u drugim su tragovi lošeg dizajna. To jednostavno ne može biti apsolutni standard izvan konteksta.

2. Teško ih je čitati

U članku se navodi:

Plutajuće naljepnice obično imaju mali tekst, tako da dok pluta, zauzima malu količinu prostora. No, mali je tekst teško pročitati.
Slika preuzeta iz referentnog članka

To stvarno ovisi o veličini teksta. A "teško čitati" je varijabla, a ne konstanta, temeljena na korisnikovom pogledu.

Nadalje, veličina teksta je u odnosu na dizajn općenito - ne plutaju same etikete. Sasvim je moguće da plutajuće naljepnice budu iste veličine kao standardne naljepnice.

Ako se tekst prikazuje u standardnoj veličini 16-18px, uglavnom je prihvatljiv kao čitljiv. Možda i više nego recimo veličina od 12-14 piksela.

Dakle, dogovorimo se na trenutak da je 18 px zapravo lakše čitati nego 12px ...

Je li previše neprihvatljivo pretpostaviti da bi odjednom mali čitljiv 16-18px, kontekstualno skaliran na 12-14px nakon što korisnik počne tipkati, iznenada premalen za čitanje?

Ne poričem da 12px može biti teže za čitanje od 18px, ali plovnu naljepnicu vidim kao artefakt prošlosti, a ne trag budućnosti.

To je preostali pokazatelj, a ne upute što učiniti.

3. Potreban im je prostor da se usele

U članku se navodi:

Plutajućim naljepnicama treba prostor za kretanje. Ako je tekst naljepnice prijateljski (vidi prethodnu točku), ionako ne bi bilo spremljenog prostora - samo više bijelog prostora.
Slika preuzeta iz referentnog članka

To je istina, apsolutno.

Oznake za plovke trebaju prostor za kretanje, a ovo je jedan od najtežih problema na noktima.

Chris Coyier je čak napisao svoje mišljenje o ovom određenom pitanju i zaključio da plovne naljepnice uopće ne štede okomitu visinu.

ALI…

Ako se slažete da je Float Label artefakt, a ne upute, možete se također složiti da je u redu tekst manje veličine od standardne etikete.

A s manjom veličinom teksta, recimo 12 px umjesto 16px, učinkovito biste uštedjeli 4 ili više piksela prostora. Možda čak i 8 piksela jer u tradicionalnom smislu ne biste trebali dodavati dodatnu maržu ispod oznake.

Ovdje se stvarno uvlačimo u korov, u pikselima, ali sjajni dizajner sučelja bit će bolno svjestan odstupanja od 4 px i njegovih utjecaja na čitav dizajn ako se koristi pravilno ili nepravilno.

Ako spremite 8px na 5 polja unosa u obrazac, uštedjeli ste ukupno 40px. To je otprilike ista visina gumba na zaslonu mobilnih uređaja.

Bi li to moglo biti korisno za vaš projekt? Ne znam Vi kao dizajner morat ćete se odlučiti za svaki slučaj upotrebe na koji naiđete.

Dopustite mi da vam dam stvarni svjetski primjer divovske složene forme na kojoj sam radio prije nekoliko godina.

Projekt je uključivao suludu količinu podataka za komercijalnu logistiku i transport. Mi smo se uistinu trudili da složeni, jednostavni.

Donji obrasci snimke su zaslona dizajna „u tijeku“ koji sam povukao iz arhive.

Lijevi obrazac koristi kombinaciju naljepnica s gornje strane i lijevo poravnanih naljepnica. Eksperimentirali smo - pokušavali smo svladati savršeno rješenje.

Zatim sam dizajnirao obrazac s desne strane kao alternativu neprimjerenoj količini ludosti koja se događa u obrascu. Svi smo se složili da se osjećala čisto, manje neodoljivo i bolje u cjelini.

Slika snimljena iz projekta Shiplify na kojem sam radio 2014. godine

Možete vidjeti da je iako je samo polovica polja bila poravnana odozgo rezultiralo uštedom okomite visine od 420 px.

Čak smo imali nekoliko improviziranih testova gdje smo pitali ljude „koji od ovih oblika izgleda manje neodoljivo?“ I složili su se da im se obrazac na desnoj strani čini bolji.

Znam da to nije 100% validno i statistički uvjerljivo testiranje, ali ipak, to je početak.

Volio bih jednog dana nabaviti ovako nešto ispravno testirano, ali do tada je to intuicija, a ne činjenica.

Postoji toliko mnogo varijabli poput vrste sadržaja, postojećeg korisničkog znanja i više što bilo koji test pojedinačnog oblika jednostavno nije 100% primjenjiv za sve buduće obrasce.

4. Animacija je problematična

U članku se navodi:

Animacija, čak i ako bude dobro, može smetati i dezorijentirati, posebno za korisnike s niskim samopouzdanjem ili slabovidnima. A kad zumirate naljepnica može nestati sa zaslona.

Čekaj malo. Ako je animacija dobro izvedena, onda je to po definiciji "dobro", "dobro", "zadovoljavajuće", "biti poželjno" itd.

Stoga fraza "ometajuća i dezorijentirajuća" ne može postojati zajedno s "učinjeno dobro".

Animacija obrasca iz besplatnih studija slučaja Learnaiux.com

Znam da sam nevjerojatno pristrana, ali kad ispunim obrazac koji stvarno nanosi Float Label animaciju, dobijem maleni maleni dopamin u žurbi kad se animacija razriješi i prelazim na sljedeće polje. Mali osjećaj završetka koji prije nije bio prisutan.

Podsjeća me na igru ​​u kojoj se nešto vizualno događa uslijed putanje vašeg lika. Kao otisak stopala.

No, osjećam kao da to ne mogu dovoljno predgovoriti. Ako plutajuće naljepnice nemaju smisla za vaš projekt i dodaju previše nepotrebne složenosti, nemojte ga, nikako, koristiti.

I dalje ću rado koristiti vaš obrazac ako drugi kraj vašeg obrasca riješi moj problem.

5. Imaju slab kontrast

U članku se navodi:

Kao i tekst rezerviranog mjesta, plutajuće naljepnice imaju slab kontrast da bi ga razlikovale, ali tekst s niskim kontrastom je teško pročitati.
Ovisno o dizajnu, kada naljepnica lebdi izvan polja, njezina će se boja trebati mijenjati. Inače će se tekst izgubiti prema boji pozadine.
Slika preuzeta iz referentnog članka

Niski kontrast nema nikakve veze s float etiketom i ima sve veze s veličinom i bojom.

Najmanji WCAG 2.0 (Smjernice o pristupačnosti web sadržaja) kaže da je omjer kontrasta boja od 4,5: 1 potreban da bi se prenijele smjernice AA za regularnu veličinu teksta ispod 18 ~ px.

Najlakši šesterokutni kôd sive boje koji stvara prolazni kontrast AA je # 767676 ili # 757777 na #ffffff (bijeloj) pozadini. Ovo je slučaj ako koristite uobičajenu masu slova ispod 18 px. Ako koristite podebljanu masu fonta u veličini od 14 px, možete odgoditi veliki omjer kontrasta koji pruža WCAG, a to je 3,5: 1 i završava # 898989 na #ffffff. Bočna napomena: ovo je moj omiljeni kontrastni alat.

Sidenote: Dizajnirao sam projekte za banke kojima je za digitalni proizvod potreban minimalni AA kontrast. Osobno nisam naišao na klijenta koji je zahtijevao više od AA-a, ali AA smo postavili kao cilj (i pogodili ga) kad smo dizajnirali Exxon-ov Unity Design System.

U redu, skinuo sam se s teme, ali poanta mi je da je to pitanje boja i dizajna, a ne izdatak s plovkom.

6. Oni mogu pogrešno shvatiti vrijednost

U članku se navodi:

Ljudi mogu preskočiti teren misleći da je to već dovršeno. Nakon slanja, vidjet će pogrešku koja treba ispraviti. To je frustrirajuće i dugotrajno.

To je vrlo valjana točka i zašto su boja i hijerarhija od najveće važnosti pri dizajniranju sučelja.

Tamnije oznake iznad praznih unosnih polja prilično su teško pogrešiti zbog nečega što se već nalazi u polju.

Ako korisniku postavite presedan aktiviranjem plutajućih naljepnica na korisnikovom unosu, a boja teksta korisničkog unosa mnogo je tamnija od boje rezerviranog mjesta - recimo # 767676 nasuprot # 222222 - tada bi mogućnost zbrke mogla biti mnogo manja.

Ne mogu u stvari reći da to neće biti problem. Ne vjerujem da bi to bilo u mnogim slučajevima, ali moja je pretpostavka bez teških podataka bila neznanka.

Zamislite pametno dizajniranje držača i naljepnica. Ako koristite odgovarajući kontrast između boje rezerviranog mjesta i boje unosa korisnika, to bi trebalo riješiti sve probleme na koje biste mogli naići.

7. Oni su nedosljedno smješteni

U članku se navodi:

Radio gumbi, potvrdni okviri i okviri za odabir sadrže statičke naljepnice i legende. Gdje kao tekstni okviri imaju plutajuće naljepnice. To stvara nedosljedno iskustvo.
Na primjer, kad pogledate tekstni okvir, korisnik mora pogledati unutar kontrole. Za odabrani okvir oni moraju gledati izvan njega.
Slika preuzeta iz referentnog članka

Ovo je problem dizajna, a ne problem s plovkom. Shopify radi nevjerojatan posao s plovnom naljepnicom na svojim unosnim poljima i odabirom okvira.

8. Naljepnica se može ošišati

U članku se navodi:

Ako je plutajuća naljepnica duža od veličine polja, polje će je presjeći. Trebali bismo dizajnirati sadržaj, ne bi trebali sadržaje prilagoditi dizajnu.
Slika preuzeta iz referentnog članka

Ovo po sebi nije problem s pločicama s pločicama, ovo je problem s dizajnom lošeg oblika.

Nitko ne bi trebao tako dugo imati oznaku rezerviranog mjesta.

A ako doista trebate postaviti pitanje u dva retka kao ulazna oznaka, onda 100% preporučujem NE koristiti float naljepnicu.

To jednostavno nema smisla za taj slučaj upotrebe.

9. Oni zanemaruju standarde

U članku se navodi:

Znamo da su rezerviranja mjesta ionako problematična. Međutim, ako ćemo tekst staviti u tekstni okvir, to bi trebao biti savjet, a ne naljepnica.

Ovo je standard koji se odnosi na članak. Piše:

Atribut rezerviranog mjesta predstavlja kratki savjet (riječ ili kratka fraza) namijenjen pomoći korisniku pri unosu podataka. Savjet može biti vrijednost uzorka ili kratak opis očekivanog formata.

Hmmm, "Riječ ili kratka fraza namijenjena pomoći korisniku" zvuči kao da može opisati oznaku!

Sada standardni dokumenti također kažu:

Atribut rezerviranog mjesta ne smije se koristiti kao alternativa oznaci.

Potpuno sam svjestan da postoje okolnosti koje zahtijevaju vanjsku oznaku i dodatne podatke rezerviranog mjesta da stvarno pomognu u određenim vrstama polja. Ponekad je potrebno dizajnirati obrasce kako biste stvarno pokrili sve baze.

Slažem se 100% da nijedna oznaka i samo podaci o rezerviranom mjestu nisu loša ideja. Zato float oznaka postoji!

Ploveća naljepnica stvorena je NAKON što je ovaj standard napisan. Nije li vrijedno osporavati izvorne pretpostavke u starim dokumentima nakon što se pojave nove ideje? Pogotovo oni koji se tako brzo usvajaju.

Je li razumno postati znatiželjan u vezi s tim, a ne odbacivati?

Mora postojati neki valjani razlog zašto je Google prihvatio ovaj obrazac kao standard u Smjernicama za dizajn materijala.

Pored Googlea, sljedeće su tvrtke prihvatile obrasce s plovnim oznakama u svojim aplikacijama.

  1. Shopify
  2. Zatišje
  3. Digitalni ocean
  4. Delta
  5. Perpetuum
  6. Mnogo više se ne mogu sjetiti ...

Sažetak

U članku se navodi:

Obrasci nisu izvor zabave. Plutajuća naljepnica neće učiniti da korisnici uživaju u obrascima. Korisnike nije briga. Oni samo žele ishod.

Slažem se da korisnici žele ishod, ali ne slažu se da obrasci ne bi trebali biti zabavni. Korisnik koji se zabavlja mnogo je vjerojatnije da će se sjetiti svog iskustva s vašim proizvodom.

Dodati ću upozorenje, iako ne biste trebali zabavu stavljati iznad funkcionalnosti i jasnoće.

Postoje bolje i produktivnije tehnike za poboljšanje dizajna oblika. Potrošimo vrijeme i energiju na njih.

Definitivno se slažem s prvom rečenicom, a ponekad poboljšavanje dizajna forme je uklanjanje polja ili ponovno razmišljanje ako je obrazac uopće potreban.

Ali ne bismo li trebali trošiti vrijeme na SVE aspekte poboljšanja dizajna oblika?

Ovaj je članak izvorno objavljen na mds.is, jer očigledno da sada morate objaviti na svom blogu AND Medium jer tko želi oblikovati samo jedan blog?

Za više resursa o podrijetlu obrasca plutajuće naljepnice pogledajte ovaj post.