Er float-etiketter virkelig så problematiske?

Dette er et svar på Adam Silver's stykke 25. maj 2017 med titlen Flydende etiketter er problematiske.

Som den fyr, der lavede det originale design, som størstedelen af ​​Float Label-dille var baseret på, føler jeg mig noget forpligtet til at dele mit perspektiv på sagen.

Det originale float label design, jeg sendte til Dribbble i 2013

Jeg er nødt til at forudse dette ved at sige, jeg har aldrig mødt Adam, men har læst nogle af hans andre artikler, og jeg værdsætter og beundrer hans betænksomhed over de små detaljer i hans artikler

Adam gør en masse gode punkter i sin artikel og i visse sammenhænge er jeg enig.

Jeg tror dog, at det er vigtigt at udråbe nogle subtile absolutte udsagn i artiklen og påpege deres relativitet baseret på design stort set snarere end det individuelle mønster af en flydende etiket.

Jeg vil også afdække alt dette ved at sige, at jeg ikke mener, at flydende etiketter skal bruges til enhver form, der nogensinde er lavet. Hvis du ikke tror, ​​at de tilføjer værdi til din form, skal du ikke bruge dem. Okay?

Hvis du har testet den ene måde mod den anden, skal du bruge metoden med højere resultater. Hvem ønsker ikke højere konverteringsfrekvens?

Men husk bare, en form alene vil ikke øge konverteringsfrekvensen gennem taget. Du skal skabe nok værdi og løse et stort nok problem med dit indhold, så en bruger faktisk er motiveret til at bruge din form i første omgang.

Jeg har selv ikke udført nogen officiel float label split-test og kan ikke med tillid anbefale mønsteret over en standard label, baseret på ren forskning alene.

Men jeg kan sige, at jeg for nylig har brugt float labels på min Intro to Icon Design kursusform og så en konverteringsfrekvens på over 30%. I henhold til min hurtige undersøgelse er det 10 gange højere end den gennemsnitlige opt-form, der kun genererer 3% konverteringer.

Fra det gratis Intro til ikoner videokursus

Ville omregningskurserne været højere, hvis jeg ikke havde brugt float labels? Min tarm siger ”nej”, men jeg har ingen data til at sikkerhedskopiere det.

Med alt det ude af vejen, lad os grave i min kommentar. Følgende nummererede overskrifter og citater nedenfor er taget direkte fra artiklen.

1. Der er ikke plads til et tip

I artiklen hedder det:

Flydende etiketter starter inde i tekstfeltet og giver ikke plads til et ekstra tip.
Billede taget fra referenceartiklen

Okay, så hvis du har til hensigt at sætte et tip eller en note over inputfeltet og direkte under etiketten, så ja, vil en float-label forhindre din evne til at gøre det.

Hvis du virkelig ønskede en note eller et tip, kan du flytte den under inputfeltet og blot skubbe det andet felt lidt ned.

Debattering om antydning af placering er nytteløst, medmindre du har et ekstremt klart billede af det nøjagtige problem, der prøver at blive løst med en formular i første omgang.

I nogle tilfælde er tip eller etiketter utroligt nyttige, og i andre tilfælde er de en bandaid på en dårligt designet form. Det kan simpelthen ikke være en absolut standard uden for kontekst.

2. De er svære at læse

I artiklen hedder det:

Flydende etiketter har typisk en lille tekst, så når den flyder, optager den en lille mængde plads. Men lille tekst er vanskelig at læse.
Billede taget fra referenceartiklen

Det afhænger virkelig af størrelsen på teksten. Og "svært at læse" er en variabel, ikke en konstant, baseret på brugerens syn.

Desuden er tekststørrelse relativt til et design generelt - ikke selv flydende etiketter. Det er meget muligt at have float labels med samme størrelse som en standard label.

Hvis tekst vises i en standardstørrelse på 16-18px, er det generelt acceptabelt som læsbart. Måske mere end sige en størrelse 12–14px.

Så lad os være enige om et øjeblik, at 18px faktisk er lettere at læse end 12px ...

Er det for urimeligt at antage, at en let læst 16-18px, kontekstvis skaleret til 12-14 px, efter at en bruger begynder at skrive, pludselig ville være for lille til at læse?

Jeg benægter ikke, at 12px kan være sværere at læse end 18px, men jeg ser en float-etiket som en artefakt fra fortiden snarere end en ledetråd til fremtiden.

Det er en overskudsindikation snarere end en instruktion om, hvad man skal gøre.

3. De har brug for plads til at bevæge sig ind

I artiklen hedder det:

Flydende etiketter har brug for plads til at flytte ind. Hvis etiketteksten er venlig (se forrige punkt), ville der alligevel ikke være nogen gemt plads - bare mere hvidt rum.
Billede taget fra referenceartiklen

Dette er sandt, absolut.

Float-etiketterne har brug for plads til at bevæge sig ind i, og dette er et af de vanskeligste problemer at sømme for mønsteret.

Chris Coyier skrev endda også sine tanker om dette særlige emne og konkluderede, at float labels ikke sparer nogen lodret højde overhovedet.

MEN…

Hvis du er enig i, at Float Label er en artefakt snarere end en instruktion, er du muligvis også enig i, at det er ok at gå lidt mindre i tekststørrelse end en standardetiket.

Og med en mindre tekststørrelse, f.eks. 12px i stedet for 16px, vil du effektivt spare 4 eller flere pixels plads. Eventuelt endda 8 px, da du ikke behøver at tilføje ekstra margen under etiketten i traditionel forstand.

Vi kommer virkelig ned i ukrudtet her, pixelmæssigt, men en stor interface-designer vil være smerteligt opmærksom på en 4px-afvigelse og de påvirkninger, det kan have på hele designet, hvis de bruges korrekt eller forkert.

Så hvis du gemmer 8px på 5 inputfelter i en form, har du gemt i alt 40px. Det er omtrent den samme højde af en knap på mobilskærmen.

Ville det hjælpe med dit projekt? Jeg ved ikke. Du som designer bliver nødt til at beslutte, at for enhver brugssag, du støder på.

Lad mig give dig et ægte verdenseksempel på en kæmpe kompleks form, jeg arbejdede med for et par år tilbage.

Projektet involverede en vanvittig mængde data til kommerciel skibsfart og transportlogistik. Vi prøvede virkelig at gøre det komplekse, enkelt.

Formerne herunder er skærmbilleder af “arbejde i gang” -design, som jeg trak op fra arkivet.

Venstre formular bruger en kombination af etiketter med øverste linie og venstrejusterede etiketter. Vi eksperimenterede - prøvede at lande på den perfekte løsning.

Derefter designede jeg formen til højre som et alternativ til forskydningsmængden af ​​galskab, der foregår i formen. Vi var alle enige om, at det føltes mere rent, mindre overvældende og generelt set bedre.

Billede taget fra Shiplify-projektet, jeg arbejdede på i 2014

Du kan se, at selvom kun halvdelen af ​​felterne var topjusteret, resulterede det stadig i, at der blev gemt over 420 px lodret højde.

Vi havde endda et par improviserede prøver, hvor vi spurgte folk, ”hvilken af ​​disse former ser mindre overvældende ud?” Og de blev enige om, at formen til højre syntes bedre.

Jeg ved, at dette ikke er 100% gyldig og statistisk afsluttende test, men alligevel er det en start.

Jeg ville ELSKER at få sådan noget korrekt testet en dag, men indtil da er det en intuition, ikke et faktum.

Der er så mange variabler som indholdstype, eksisterende brugerviden og mere, der gør enhver enkelt formtest simpelthen ikke 100% gældende for alle fremtidige former.

4. Animationen er problematisk

I artiklen hedder det:

Selv om det er gjort godt, kan animation være distraherende og desorienterende, især for lav selvtillid eller synshæmmede brugere. Og når du zoomer ind, forsvinder etiketten muligvis fra skærmen.

Hold på et sekund. Hvis en animation udføres godt, er den per definition "godt", "god", "tilfredsstillende", "at ønske," osv.

Derfor kan udtrykket "distraherende og desorienterende" ikke eksistere sammen med "gjort godt."

Form animation fra de gratis learnaiux.com casestudier

Jeg ved, at jeg er utroligt partisk, men når jeg udfylder en formular, der virkelig negler Float Label-animationen, får jeg et teensy lille, lille dopaminrush, når animationen løses, og jeg går videre til det næste felt. En lille følelse af færdiggørelse, der ikke var helt der før.

Det minder mig om et spil, hvor der visuelt sker noget i kølvandet på din karakters sti. Som et fodaftryk.

Jeg føler dog, at jeg ikke kan forordne dette nok. Hvis float labels ikke giver mening for dit projekt og tilføjer for meget unødvendig kompleksitet, skal du under alle omstændigheder ikke bruge det.

Jeg vil stadig med glæde bruge din formular, hvis den anden ende af din form løser mit problem.

5. De har dårlig kontrast

I artiklen hedder det:

Som placeringstekst har flydende etiketter lav kontrast for at skelne mellem dem, men tekst med lav kontrast er vanskelig at læse.
Afhængigt af designet, når etiketten flyder uden for marken, skal dens farve ændres. Ellers vil teksten gå tabt i baggrunden.
Billede taget fra referenceartiklen

Lav kontrast har intet at gøre med en float label og har alt at gøre med størrelse og farve.

Minimum WCAG 2.0 (Retningslinjer for webindholdstilgængelighed) angiver, at et farvekontrastforhold på 4,5: 1 er nødvendigt for at godkende AA-retningslinjer for almindelig tekststørrelse under 18 ~ px.

Den lyseste grå farve hex-kode, der producerer et acceptabelt AA-kontrastforhold, er # 767676 eller # 757777 på #ffffff (hvid) baggrund. Dette er, hvis du bruger en almindelig fontvægt under 18px. Hvis du bruger en fed skriftvægt i 14px-størrelse, kan du udskyde det store kontrastforhold, som WCAG leverer, som er 3,5: 1 og ender med at blive # 898989 på #ffffff. Side note: dette er min yndlings kontrastkontrol.

Sidenote: Jeg har designet projekter til banker, der kræver en minimum AA kontrastvurdering for deres digitale produkt. Jeg har ikke personlig fundet en klient, der krævede mere end AA, men vi satte AAA som et mål (og ramte det), da vi designede Exxons Unity Design System.

Okay, jeg har fået waaaaaay fra emnet, men min pointe er, at dette er et farve- og designproblem, ikke et float label-problem.

6. De kan forveksles med en værdi

I artiklen hedder det:

Folk springer måske over feltet og tror, ​​at det allerede er afsluttet. Når de indsender, vil de se en fejl, der skal rettes. Dette er frustrerende og tidskrævende.

Dette er et meget gyldigt punkt, og også hvorfor farve og hierarki er meget vigtigt, når man designer grænseflader.

Mørkere etiketter over tomme inputfelter er temmelig svære at forveksle med noget der allerede findes i feltet.

Hvis du indstiller en præcedens for brugeren ved at få flydende etiketter til at aktivere på brugerinput OG brugerindgangstekstfarven er meget mørkere end pladsholderfarven - siger # 767676 versus # 222222 - så kan muligheden for forvirring være meget lavere.

Jeg kan ikke sige, at det ikke vil være et spørgsmål. Jeg tror ikke, det ville være i mange tilfælde, men at tage den antagelse uden hårde data ville være uvidende fra min side.

Design pladsholdere og etiketter med omhu. Hvis du bruger korrekt kontrast mellem pladsholderfarve og brugerinputfarve, skal dette løse eventuelle problemer, du måtte støde på.

7. De er inkonsekvent placeret

I artiklen hedder det:

Radioknapper, afkrydsningsfelter og valgfelter har statiske etiketter og legender. Hvor som tekstbokse har flydende etiketter. Dette skaber en inkonsekvent oplevelse.
Når man f.eks. Ser på en tekstboks, skal brugeren kigge inde i kontrollen. For en markering skal de se uden for det.
Billede taget fra referenceartiklen

Dette er et designproblem, ikke et float label-problem. Shopify gør et utroligt stykke arbejde med float-etiketten på deres inputfelter og markeringsbokse.

8. Etiketten kan beskæres

I artiklen hedder det:

Hvis den flydende etiket er længere end størrelsen på feltet, afskæres den af ​​feltet. Vi skulle designe til indhold, vi skulle ikke få indhold til at passe til designet.
Billede taget fra referenceartiklen

Dette er ikke et float label-problem i sig selv, dette er et problem med dårlig formdesign.

Ingen skal nogensinde have en pladsholdermærke så længe.

Og hvis du virkelig har brug for at stille et to linjespørgsmål som en input label, så anbefaler jeg 100% IKKE at bruge en float label.

Det giver bare ikke mening for denne brugssag.

9. De ignorerer standarderne

I artiklen hedder det:

Vi ved, at pladsholdere alligevel er problematiske. Hvis vi imidlertid lægger tekst i en tekstboks, skal det være et tip, ikke en etiket.

Dette er standarden, som artiklen refererer til. Den lyder:

Stedholderattributten repræsenterer et kort tip (et ord eller en kort sætning) beregnet til at hjælpe brugeren med dataindtastning. Et tip kan være en prøveværdi eller en kort beskrivelse af det forventede format.

Hmmm, "Et ord eller en kort sætning der er beregnet til at hjælpe brugeren" lyder som om det kunne beskrive en etiket!

Nu siger standarddokumenterne også:

Stedholderattributten skal ikke bruges som et alternativ til en etiket.

Jeg er fuldt ud klar over, at der er forhold, der kræver en ekstern etiket og yderligere pladsholderdata for virkelig at hjælpe med visse feltinputtyper. Nogle gange er du nødt til at trække alle stop, når du designer formularer til virkelig at dække alle baser.

Jeg er 100% enig i, at ingen mærkning og kun pladsholderdata er en dårlig idé. Derfor findes float-etiketten!

Float-etiketten blev oprettet EFTER denne standard blev skrevet. Er det ikke værd at udfordre originale antagelser i gamle dokumenter, når nye ideer opstår? Især dem, der bliver vedtaget så hurtigt.

Er det rimeligt at blive nysgerrig om dette snarere end afvisende?

Der skal være en gyldig grund til, at Google vedtog dette mønster som en standard i Retningslinjer for materialedesign.

Ud over Google har de følgende virksomheder brugt float label mønstre i deres apps.

  1. Shopify
  2. slack
  3. Digital Ocean
  4. Delta
  5. invision
  6. Meget mere kan jeg ikke huske ...

Resumé

I artiklen hedder det:

Formularer er ikke en kilde til underholdning. Den flydende etiket får ikke brugere til at nyde at bruge formularer. Brugere er ligeglad. De vil bare have resultatet.

Jeg er enig i, at brugerne vil have resultatet, men er uenig i, at formularer ikke burde være underholdende. En bruger, der bliver underholdt, husker meget mere deres oplevelse med dit produkt.

Jeg vil dog tilføje en advarsel om, at du ikke bør lægge underholdning over funktionalitet og klarhed.

Der er bedre og mere produktive teknikker til forbedring af formdesign. Lad os bruge tid og energi på dem i stedet.

Jeg er bestemt enig i den første sætning, og nogle gange forbedrer formdesign fjernelse af felter eller nytænkning, hvis en formular endda er nødvendig.

Men bør vi ikke bruge tid på ALLE facetter af forbedring af formdesign?

Denne artikel blev oprindeligt offentliggjort på mds.is, fordi du tilsyneladende nu skal skrive på din egen blog OG Medium, for hvem vil kun formatere et blogindlæg?

For flere ressourcer om oprindelsen af ​​float label mønsteret se dette indlæg.