Ovatko kelluvat etiketit todella ongelmallisia?

Tämä on vastaus Adam Silverin 25. toukokuuta 2017 julkaistulle teokselle Kelluvat etiketit ovat ongelmallisia.

Koska kaveri, joka teki alkuperäisen suunnittelun, johon suurin osa Float Label -hullu perustui, tunnen olevani jonkin verran velvollinen jakamaan näkökulmani asiaan.

Alkuperäinen kelluva etiketti, jonka postitin Dribbblelle vuonna 2013

Minun on puhuttava tästä sanomalla, etten ole koskaan tavannut Aadamia, mutta olen lukenut joitain hänen muista artikkeleistaan ​​ja arvostan ja ihailen hänen ajattelutapaansa hänen artikkeleidensa pienistä yksityiskohdista

Adam tuo artikkelissaan paljon hienoja kohtia, ja olisin samaa mieltä tietyistä yhteyksistä.

Uskon kuitenkin, että on tärkeää kutsua artikkelissa esiin joitain hienoisia absoluuttisia lausumia ja tuoda esiin niiden suhteellisuussuhteet, jotka perustuvat kokonaisuuteen suunnitteluun kuin kelluvan etiketin yksilölliseen malliin.

Haluan myös suojata kaikki tämä sanomalla, että en usko, että kelluvia etikettejä tulisi käyttää kaikissa koskaan tehdyissä muodoissa. Jos et usko, että he lisäävät arvoa lomakkeeseesi, älä käytä niitä. Ok?

Jos olet testannut yhtä tapaa toiseen, käytä tehokkaampaa menetelmää. Kuka ei halua korkeampia muuntokursseja?

Mutta muista vain, että lomake yksin ei aio nostaa muuntokursseja katon kautta. Sinun on luotava tarpeeksi arvoa ja ratkaista tarpeeksi suuri ongelma sisällölläsi, jotta käyttäjää todella motivoidaan käyttämään lomaketta ensin.

En itse ole tehnyt mitään virallista kelluvien tarrojen jakotestiä, enkä voi luottavaisesti suositella mallia tavallisen etiketin yli pelkästään pelkän tutkimuksen perusteella.

Mutta voin sanoa, että olen äskettäin käyttänyt kelluvia etikettejä Intro to Icon Design -kurssilomakkeellani ja nähnyt muuntoprosentin yli 30%. Pikaisen tutkimukseni mukaan se on 10 kertaa korkeampi kuin keskimäärin opt-muoto, joka tuottaa vain 3% tuloksia.

Ilmaisesta Intro Icons -videokurssista

Olisiko muuntokurssit korkeammat, jos en olisi käyttänyt kelluvia etikettejä? Suolistani sanoo “ei”, mutta minulla ei ole tietoja tämän varmuuskopioimiseksi.

Kaikkien näiden poissa ollessa tutkitaan kommenttini. Seuraavat numeroidut otsikot ja lainaukset alla on otettu suoraan artikkelista.

1. Vihjeessä ei ole tilaa

Artikkelissa todetaan:

Kelluvat etiketit alkavat tekstikentän sisällä, jättämättä tilaa lisävihjeelle.
Kuva otettu viiteartikkelista

Ok, joten jos aiot laittaa vihjeen tai huomautuksen syöttökentän yläpuolelle ja suoraan tarran alle, niin kyllä, kelluva tarra estää kykyäsi tehdä niin.

Jos kuitenkin todella halusi huomautuksen tai vihjeen, voit siirtää sen syöttökentän alle ja painaa toista kenttää vain vähän alas.

Keskustelu vihjeiden sijoittamisesta on turhaa, ellei sinulla ole erittäin selkeää kuvaa tarkalta ongelmalta, joka yritetään ratkaista ensin lomakkeella.

Joissain tapauksissa vinkit tai etiketit ovat uskomattoman hyödyllisiä, ja toisissa tapauksissa ne ovat bandaidi huonosti suunnitellussa muodossa. Se ei yksinkertaisesti voi olla ehdoton standardi kontekstin ulkopuolella.

2. Niitä on vaikea lukea

Artikkelissa todetaan:

Kelluvissa tarroissa on tyypillisesti pieni teksti, joten kelluessaan ne vievät vähän tilaa. Mutta pieni teksti on vaikea lukea.
Kuva otettu viiteartikkelista

Se riippuu todella tekstin koosta. Ja ”vaikea lukea” on muuttuja, ei vakio, käyttäjän näkökykyyn perustuen.

Lisäksi tekstin koko on suhteessa malliin yleensä - ei itse kelluvia etikettejä. On täysin mahdollista, että kelluvat tarrat ovat samankokoisia kuin tavalliset tarrat.

Jos teksti näytetään vakiokoolla 16–18 kuvapistettä, se on yleensä hyväksyttävä luettavana. Ehkä enemmän kuin sanoa 12–14px koko.

Joten sovitaan hetkeksi, että 18 pikseliä on itse asiassa helpompi lukea kuin 12 pikseliä ...

Onko liian käsittämätöntä olettaa, että helposti luettava 16–18 pikseli, joka asteikolla asteikolla 12–14 pikseliä, kun käyttäjä alkaa kirjoittaa, olisi yhtäkkiä liian pieni lukemiseen?

En kiistä sitä, että 12 pikseliä voi olla vaikeampi lukea kuin 18 pikseliä, mutta pidän kelluvaa etikettiä menneisyyden esineenä eikä vihjeenä tulevaisuudelle.

Se on pikemminkin jäljellä oleva ohje kuin ohje siitä, mitä tehdä.

3. He tarvitsevat tilaa siirtyäkseen

Artikkelissa todetaan:

Kelluvat tarrat tarvitsevat tilaa siirtyäkseen. Jos tarrateksti on ystävällistä (katso edellinen kohta), silti ei tallenneta tilaa - vain enemmän valkoista tilaa.
Kuva otettu viiteartikkelista

Tämä on totta, ehdottomasti.

Kelluvat etiketit tarvitsevat tilaa liikkuaksi ja tämä on yksi vaikeimmista ongelmista naulata kuviota varten.

Chris Coyier jopa kirjoitti ajatuksensa myös tästä aiheesta ja päätteli kelluvien etikettien avulla, että ne eivät säästä pystykorkeutta ollenkaan.

MUTTA…

Jos hyväksyt sen, että kelluva etiketti on pikemminkin artefakti kuin käsky, saatat myös hyväksyä, että on oikein mennä hieman tekstiä pienemmäksi kuin tavallisessa tarrassa.

Ja pienemmällä tekstikokolla, esimerkiksi 12 pikseliä 16 pikselin sijasta, säästät tehokkaasti vähintään 4 pikseliä tilaa. Mahdollisesti jopa 8 pikseliä, koska sinun ei tarvitse lisätä ylimääräistä marginaalia tarran alle perinteisessä merkityksessä.

Olemme todella menossa tänne rikkaruohoihin pikselivaiheisesti, mutta loistava käyttöliittymäsuunnittelija on tuskallinen tietoinen 4xx-eroista ja vaikutuksista, joita sillä voi olla koko malliin, jos sitä käytetään oikein tai väärin.

Joten jos tallennat 8 pikselin 5 syöttökenttään muodossa, olet tallentanut yhteensä 40 pikseliä. Se on suunnilleen sama painikkeen korkeus mobiilinäytöllä.

Olisiko siitä hyötyä projektillesi? Minä en tiedä. Sinun, suunnittelijana, on päätettävä, että jokaisessa käyttötapauksessa olet törmännyt.

Annan teille reaalimaailman esimerkin jättiläisestä monimutkaisesta muodosta, jota työskentelin muutama vuosi sitten.

Projekti sisälsi hullua määrää tietoa kaupallisesta merenkulusta ja kuljetuslogistiikasta. Yritimme todella tehdä monimutkaisesta, yksinkertaisesta.

Alla olevat lomakkeet ovat kuvakaappauksia ”keskeneräiset” -malleista, jotka vedin arkistosta.

Vasemmassa muodossa käytetään yhdistelmää ylhäällä kohdistettuja etikettejä ja vasemmalle kohdistettuja tarroja. Kokeilimme - yritimme laskeutua täydelliseen ratkaisuun.

Sitten suunnittelin oikealla olevan muodon vaihtoehtona muodossa tapahtuvalle leikkausmäärälle hulluudelle. Olemme kaikki yhtä mieltä siitä, että se tuntui puhtaammalta, vähemmän ylivoimaiselta ja kaiken kaikkiaan paremmalta.

Kuva otettu Shiplify-projektista, jossa työskentelin vuonna 2014

Voit nähdä, että vaikka vain puolet kentistä oli kohdistettu ylhäällä, se kuitenkin tuotti yli 420 kuvapisteen pystysuoran korkeuden.

Meillä oli jopa muutama ekspromptikoe, joissa kysyimme ihmisiltä: ”mikä näistä muodoista näyttää vähemmän ylivoimaiselta?” Ja he sopivat, että oikealla oleva muoto näytti paremmalta.

Tiedän, että tämä ei ole 100% kelvollista ja tilastollisesti vakuuttavaa testausta, mutta silti se on alku.

Rakastan saada jotain tällaista oikein testattua yhtenä päivänä, mutta siihen asti se on intuitio, ei tosiasia.

On niin monia muuttujia, kuten sisältötyyppi, aiemmin olemassa oleva käyttäjän tieto ja paljon muuta, jotka tekevät yhdestä lomakketestistä yksinkertaisesti vain 100% sovellettavissa kaikkiin tuleviin muotoihin.

4. Animaatio on ongelmallista

Artikkelissa todetaan:

Animaatio, vaikka se olisi tehty hyvin, voisi olla häiritsevä ja häiritsevä, etenkin heikon luottamuksen tai näkövammaisten käyttäjien kannalta. Ja tarkennettaessa tarra voi kadota näytöstä.

Odota hetki. Jos animaatio tehdään hyvin, niin se on määritelmänsä mukaan "hyvin", "hyvä", "tyydyttävä", "toivottava" jne.

Siksi ilmaus ”häiritsevä ja häiritsevä” ei voi esiintyä samanaikaisesti ”hyvin tehdyn” kanssa.

Muodosta animaatio ilmaisista oppimistaux.com-tapaustutkimuksista

Tiedän olevani uskomattoman puolueellinen, mutta kun täytän lomakkeen, joka todella naulaa Float Label -animaatiota, minusta tulee teini-ikäinen pieni dopamiinihäiriö, kun animaatio ratkaisee ja siirryn seuraavaan kenttään. Pieni valmistumisen tunne, jota ei ollut aikaisemmin siellä.

Se muistuttaa minua pelistä, jossa jotain visuaalisesti tapahtuu hahmosi polun seurauksena. Kuten jalanjälki.

Minusta tuntuu, että en kuitenkaan osaa puhua tästä tarpeeksi. Jos kelluvat etiketit eivät ole järkeviä projektillesi ja lisäävät tarpeettomasti monimutkaisuutta, älä missään tapauksessa käytä sitä.

Käytän silti onnellisina lomaketta, jos lomakkeen toinen pää ratkaisee ongelmani.

5. Heidän kontrasti on huono

Artikkelissa todetaan:

Kuten paikkamerkkiteksti, myös kelluvilla tarroilla on pieni kontrasti sen erottamiseksi, mutta matalan kontrastin teksti on vaikea lukea.
Suunnitelmasta riippuen, kun etiketti kelluu kentän ulkopuolelle, sen värin on muututtava. Muuten teksti häviää taustaväriä vasten.
Kuva otettu viiteartikkelista

Matalalla kontrastilla ei ole mitään tekemistä kelluvan etiketin kanssa, ja sillä on kaikki tekemistä koon ja värin kanssa.

WCAG 2.0: n (Web-sisällön saavutettavuusohjeet) vähimmäisvaatimuksissa todetaan, että värikontrastisuhde 4,5: 1 on välttämätön AA-ohjeiden siirtämiseksi normaalille tekstin kokolle alle 18 ~ px.

Kevyin harmaanvärinen heksadesimaalikoodi, joka tuottaa hyväksyttävän AA-kontrastisuhteen, on # 767676 tai # 757777 #ffffff (valkoinen) taustalla. Tämä on, jos käytät tavallista fontin painoa alle 18 kuvapistettä. Jos käytät lihavoitua kirjasinkokoa 14 kuvapistettä, voit lykätä WCAG: n tarjoamaa suurta kontrastisuhdetta, joka on 3,5: 1 ja lopulta # 898989 sivulle #ffffff. Sivuhuomautus: tämä on suosikkikontrastintarkistajani.

Sidenote: Olen suunnitellut projekteja pankeille, jotka vaativat digitaalituotteelleen vähintään AA-kontrastin. En ole henkilökohtaisesti törmännyt asiakkaaseen, joka vaati enemmän kuin AA: ta, mutta asetimme AAA: n tavoitteeksi (ja osui siihen) suunnitellessamme Exxonin Unity Design System -järjestelmää.

Ok, minusta on poistettu aihe, mutta minun huomautukseni on, että tämä on väri- ja suunnitteluongelma, ei kelluva etiketti.

6. Ne voivat olla erehtyneet arvoon

Artikkelissa todetaan:

Ihmiset voivat ohittaa kentän ajattelemalla, että se on jo valmis. Lähettäessään he näkevät virheen, joka on korjattava. Tämä on turhauttavaa ja aikaa vievää.

Tämä on erittäin pätevä kohta, ja myös väri ja hierarkia ovat äärimmäisen tärkeitä rajapintojen suunnittelussa.

Tyhjien syöttökenttien yläpuolella olevia tummempia tarroja on melko vaikea erehtyä jo kentässä jo olevaan asiaan.

Jos asetat ennakkotapauksen käyttäjälle asettamalla kelluvat etiketit aktivoitumaan käyttäjän syötteeseen JA käyttäjän syöttämän tekstin väri on paljon tummempi kuin paikkamerkin väri - sano # 767676 vs. # 222222 -, sekaannusmahdollisuus voi olla paljon alhaisempi.

En voi tosiasiallisesti sanoa, että tästä ei tule kysymys. En usko, että niin olisi monissa tapauksissa, mutta minun on tietämätöntä tehdä tämä oletus ilman vaikeita tietoja.

Suunnittele paikkamerkit ja tarrat viisaasti. Jos käytät oikeaa kontrastia paikkamerkin värin ja käyttäjän syöttämän värin välillä, tämän pitäisi ratkaista mahdolliset ongelmat.

7. Ne sijaitsevat epäjohdonmukaisesti

Artikkelissa todetaan:

Radiopainikkeilla, valintaruuduilla ja valintalaatikoilla on staattiset tarrat ja selitteet. Missä tekstikenttissä on kelluvat etiketit. Tämä luo epäjohdonmukaisen kokemuksen.
Esimerkiksi tekstikenttää tarkastellessaan käyttäjän on katsottava ohjaimen sisäpuolelle. Valintalaatikkoa varten heidän täytyy etsiä sen ulkopuolelta.
Kuva otettu viiteartikkelista

Tämä on suunnitteluongelma, ei kelluva etiketti -ongelma. Shopify tekee uskomattoman työn, kun kelluvat etiketit ovat niiden syöttökentissä ja valintalaatikoissa.

8. Etiketti voi tulla rajattu

Artikkelissa todetaan:

Jos kelluva etiketti on pidempi kuin kentän koko, se leikkaa sen. Meidän pitäisi suunnitella sisältöä, emme saa tehdä sisältöä sopivaksi muotoiluun.
Kuva otettu viiteartikkelista

Tämä ei sinänsä ole kelluva etiketti, tämä on huonon muotoilun ongelma.

Kukaan ei saa koskaan olla varustettu paikannimerkinnällä niin kauan.

Ja jos sinun on todellakin kysyttävä kaksirivinen kysymys syöttötarrana, suosittelen 100-prosenttisesti EI kelluvan etiketin käyttöä.

Sellaisella käyttötapauksella ei vain ole mitään järkeä.

9. He ohittavat standardit

Artikkelissa todetaan:

Tiedämme, että paikkamerkit ovat joka tapauksessa ongelmallisia. Jos aiomme kuitenkin laittaa tekstiä tekstikenttään, sen tulisi olla vihje, ei tarra.

Tämä on standardi, johon artikkelissa viitataan. Se kuuluu seuraavasti:

Paikkamerkkien ominaisuus edustaa lyhyttä vihjettä (sana tai lyhyt lause), jonka tarkoituksena on auttaa käyttäjää tietojen syöttämisessä. Vihje voi olla näytearvo tai lyhyt kuvaus odotetusta muodosta.

Hmmm, "Sana tai lyhyt lause, joka on tarkoitettu käyttäjän avuksi" kuulostaa siltä, ​​että se voisi kuvata tarraa!

Nyt myös vakioasiakirjoissa sanotaan:

Paikkamerkkitunnistetta ei tulisi käyttää vaihtoehtona etikettiin.

Olen täysin tietoinen siitä, että joissakin olosuhteissa tarvitaan ulkoinen etiketti ja lisätiedot paikkamerkkitiedoista, jotta voidaan todella auttaa tiettyjen kentän syöttötyyppien selvittämisessä. Joskus joudut vetämään kaikki rajoitukset suunnitellessasi lomakkeita, jotta ne kattaisivat kaikki alustat.

Olen täysin samaa mieltä siitä, ettei merkinnän ja vain paikkatietojen käyttäminen ole huono idea. Siksi kelluva etiketti on olemassa!

Kelluva etiketti luotiin tämän standardin kirjoittamisen jälkeen. Eikö ole syytä haastaa vanhojen asiakirjojen alkuperäisiä oletuksia uusien ideoiden syntymisen jälkeen? Varsinkin sellaiset, jotka hyväksytään niin nopeasti.

Onko järkevää saada tästä utelias mieluummin kuin hylkäävä?

Siellä on oltava jokin pätevä syy, miksi Google otti tämän mallin käyttöön standardina materiaalisuunnitteluohjeissa.

Seuraavat yritykset ovat käyttäneet Googlen lisäksi sovelluksissaan kelluvia tarrakuvioita.

  1. Shopify
  2. löysä
  3. Digitaalinen valtameri
  4. Delta
  5. Invision
  6. Paljon enemmän en muista ...

Yhteenveto

Artikkelissa todetaan:

Lomakkeet eivät ole viihdelähde. Kelluva etiketti ei saa käyttäjiä nauttimaan lomakkeiden käytöstä. Käyttäjät eivät välitä. He haluavat vain lopputuloksen.

Olen samaa mieltä siitä, että käyttäjät haluavat lopputuloksen, mutta olen eri mieltä siitä, että lomakkeet eivät saisi olla viihdyttäviä. Viihdytetty käyttäjä muistaa paljon todennäköisemmin kokemuksen tuotteestasi.

Lisään kuitenkin huomautuksen, että sinun ei pitäisi asettaa viihdettä toiminnallisuuden ja selkeyden yläpuolelle.

Muotojen parantamiseksi on parempia ja tuottavampia tekniikoita. Vietetään aikaa ja energiaa niille.

Olen ehdottomasti samaa mieltä ensimmäisen virkkeen kanssa, ja joskus lomakkeen suunnittelun parantaminen poistaa kenttiä tai ajatella uudelleen, jos lomake on edes tarpeen.

Mutta eikö meidän pitäisi viettää aikaa KAIKKI muotosuunnittelun parantamisen näkökohtiin?

Tämä artikkeli julkaistiin alun perin mds.is, koska ilmeisesti nyt joudut lähettämään viestejä omaan blogiisi JA Mediumiin, koska kuka haluaa alustaa vain yhden blogiviestin?

Katso lisätietoja kelluvien tarrakuvioiden alkuperästä.