Наистина ли проблемните етикети са проблемни?

Това е отговор на парчето на Адам Силвър от 25 май 2017 г., озаглавено „Плаващи етикети са проблемни“.

Тъй като човекът, който направи оригиналния дизайн, на който се основава по-голямата част от манията Float Label, се чувствам някак задължен да споделя моята гледна точка по въпроса.

Оригиналният дизайн на плаващ етикет, който публикувах в Dribbble през 2013 г.

Трябва да го предговора, като кажа: Никога не съм срещал Адам, но съм чел някои други негови статии и аз наистина оценявам и се възхищавам на неговата замисленост на дребните подробности в неговите статии

Адам прави много страхотни точки в статията си и в определени контексти бих се съгласил.

Смятам обаче, че е важно да извикаме някои фини абсолютни твърдения в статията и да посочим тяхната относителност, основана на дизайна като цяло, а не на индивидуалния модел на плаващ етикет.

Също така искам да хеджирам всичко това, като казвам, че не вярвам, че флоат етикетите трябва да се използват за всяка форма, правена някога. Ако не мислите, че те добавят стойност към вашата форма, не ги използвайте. Добре?

Ако сте тествали единия начин срещу другия, използвайте по-високоефективния метод. Кой не иска по-високи проценти на реализация?

Но само не забравяйте, че формата сама по себе си няма да увеличи процента на конверсия през покрива. Трябва да създадете достатъчно стойност и да разрешите достатъчно голям проблем със съдържанието си, така че потребителят всъщност е мотивиран да използва формата ви на първо място.

Самият аз не съм направил официално тестване за разделяне на плаващ етикет и не мога да препоръчам уверено модела върху стандартен етикет, базиран само на чисто проучване.

Но мога да кажа, че наскоро използвах плаващите етикети във формуляра си за курс Intro to Icon Design и видях процент на конверсия над 30%. Според моите бързи проучвания това е 10 пъти по-високо от средната опция във форма, която генерира само 3% реализации.

От безплатния видео курс от Intro to Icons

Били ли са процентите на преобразуване по-високи, ако не използвах плаващи етикети? Червата ми казват „не“, но нямам данни, които да подкрепят това.

С всичко това отвън, нека разгледаме моя коментар. Следните номерирани заглавия и цитати по-долу са взети направо от статията.

1. Няма място за намек

В статията се посочва:

Плаващите етикети започват вътре в текстовото поле, като не оставят място за допълнителен намек.
Изображение, взето от референтната статия

Добре, така че ако възнамерявате да поставите подсказка или забележка над полето за въвеждане и директно под етикета, тогава да, поплавък етикет ще попречи на вашата способност да го направите.

Ако обаче наистина искате бележка или намек, можете да я преместите под полето за въвеждане и просто натиснете другото поле надолу.

Дебатът над поставянето на намеци е безполезен, освен ако нямате изключително ясна картина на точния проблем, който се опитва да бъде решен с форма на първо място.

В някои случаи намеците или етикетите са невероятно полезни, а в други случаи представляват превръзка на лошо проектирана форма. Това просто не може да бъде абсолютен стандарт извън контекста.

2. Те са трудни за четене

В статията се посочва:

Плаващите етикети обикновено имат малък текст, така че докато плава, той заема малко място. Но малкият текст е трудно за четене.
Изображение, взето от референтната статия

Това наистина зависи от размера на текста. И „трудно за четене“ е променлива, а не константа въз основа на зрението на потребителя.

Освен това размерът на текста е относително към дизайна като цяло - не са плаващи етикети. Напълно възможно е плаващите етикети да са със същия размер като стандартен етикет.

Ако текстът се показва със стандартен размер 16-18px, той по принцип е приемлив като четим. Може би повече от това да кажем размер 12-14 пиксела.

Затова нека се съгласим за момент, че 18px всъщност е по-лесно за четене от 12px ...

Твърде невъзможно е да се предположи, че лесно четеният 16-18px, контекстуално мащабиран до 12-14px след като потребителят започне да пише, изведнъж ще бъде твърде малък за четене?

Не отричам, че 12px може да бъде по-трудно за четене от 18px, но аз виждам плаващ етикет като артефакт на миналото, а не улика за бъдещето.

Това е остатъчна индикация, а не инструкция какво да правите.

3. Те се нуждаят от пространство, за да се преместят

В статията се посочва:

Плаващите етикети се нуждаят от място, за да се преместят. Ако текстът на етикета е приятелски настроен (виж предишната точка), така или иначе няма да има спестено място - просто повече бяло пространство.
Изображение, взето от референтната статия

Това е вярно, абсолютно.

Етикетите с поплавък се нуждаят от място, за да се преместят и това е един от най-трудните проблеми за ноктите за шарката.

Крис Койер дори написа мислите си по този конкретен въпрос и заключи, че плаващите етикети изобщо не спестяват вертикална височина.

НО…

Ако сте съгласни, че етикетът на поплавък е артефакт, а не инструкция, можете също така да се съгласите, че е добре да стигнете малко по-малък размер на текста от стандартния етикет.

А с по-малък размер на текста, да речем 12px вместо 16px, вие бихте спестили ефективно 4 или повече пиксела пространство. Вероятно дори 8 пиксела, тъй като не би трябвало да добавяте допълнителен марж под етикета в традиционния смисъл.

Наистина се спускаме в плевелите тук, пиксел-разумно, но страхотен дизайнер на интерфейси ще бъде болезнено запознат с 4px несъответствие и въздействията, които може да има върху целия дизайн, ако се използва правилно или неправилно.

Така че, ако запишете 8px в 5 полета за въвеждане във формуляр, вие сте спестили общо 40px. Това е приблизително същата височина на бутона на екрана на мобилния телефон.

Би било ли полезно за вашия проект? Не знам. Вие, като дизайнер, ще трябва да решите, че за всеки случай на използване, който попаднете.

Позволете ми да ви дам реален световен пример за гигантска сложна форма, върху която работех преди няколко години.

Проектът включваше безумно количество данни за търговска логистика и транспорт. Наистина се опитвахме да направим сложното, просто.

Формите по-долу са скрийншоти на проектите „незавършена работа“, които извадих от архива.

Левият формуляр използва комбинация от горни подравнени етикети и леви подравнени етикети. Експериментирахме - опитвахме се да кацнем на идеалното решение.

След това проектирах формата отдясно като алтернатива на срязаното количество лудост, което се случва във формата. Всички се съгласихме, че се чувства по-чист, по-малко преситен и по-добър като цяло.

Изображение, взето от проекта Shiplify, върху който работих през 2014 г.

Можете да видите, че макар само половината от полетата да бяха подравнени отгоре, това все още доведе до запазени над 420px вертикална височина.

Дори имахме няколко импровизирани теста, където попитахме хората „коя от тези форми изглежда по-малко преобладаваща?“ И те се съгласиха, че формата вдясно изглежда по-добра.

Знам, че това не е 100% валидно и статистически убедително тестване, но все пак това е начало.

Бих се ОБИЧАл да получа нещо подобно правилно тестван един ден, но дотогава това е интуиция, а не факт.

Има толкова много променливи като тип съдържание, предварително съществуващи потребителски знания и други, които правят всеки един тест за форма просто не е 100% приложим за всички бъдещи форми.

4. Анимацията е проблематична

В статията се посочва:

Анимацията, дори и да е добре, може да бъде разсейваща и дезориентираща, особено за потребители с ниска увереност или зрителни увреждания. И когато увеличите, етикетът може да изчезне извън екрана.

Закачете на секунда. Ако анимацията е направена добре, тогава тя е по дефиниция „добре“, „добро“, „задоволително“, „да се желае“ и т.н.

Следователно фразата „разсейваща и дезориентираща“ не може да съществува едновременно с „направено добре“.

Форма анимация от безплатните казуси на Learnaiux.com

Знам, че съм невероятно пристрастен, но когато попълня формуляр, който наистина ноктите анимация Float Label, получавам мъничко малко допамин, когато анимацията се разреши, и преминавам към следващото поле. Малко усещане за завършеност, което не беше там досега.

Напомня ми на игра, в която нещо визуално се случва след пътя на вашия герой. Като отпечатък.

Имам чувството, че не мога да го предложа достатъчно. Ако етикетите с поплавък нямат смисъл за вашия проект и добавят твърде много ненужни сложности, тогава, моля, по никакъв начин не го използвайте.

Все още ще използвам с удоволствие формуляра ви, ако другият край на вашата форма разреши проблема ми.

5. Те имат лош контраст

В статията се посочва:

Подобно на текста на запълващите плаващите етикети имат нисък контраст, за да го различават, но текстът с нисък контраст е трудно четим.
В зависимост от дизайна, когато етикетът плава извън полето, цветът му ще трябва да се промени. В противен случай текстът ще се загуби спрямо цвета на фона.
Изображение, взето от референтната статия

Ниският контраст няма нищо общо с флоат етикет и има всичко общо с размера и цвета.

Минималният WCAG 2.0 (Насоки за достъпност на уеб съдържанието) гласи, че съотношението на цветовия контраст от 4,5: 1 е необходимо за преминаване на указанията на АА за редовен размер на текста под 18 ~ px.

Най-лекият шестнадесетичен код на сивия цвят, който създава проходимо съотношение на контраст на АА, е # 767676 или # 757777 на #ffffff (бял) фон. Това е, ако използвате редовно тегло под 18px. Ако използвате удебелен шрифт с размер 14px, можете да отложите до голямото контрастно съотношение, което WCAG предоставя, което е 3,5: 1 и в крайна сметка е # 898989 в #ffffff. Странична бележка: това е любимата ми контрастна проверка.

Sidenote: Създадох проекти за банки, които изискват минимален рейтинг за контраст на АА за цифровия си продукт. Аз лично не се натъкнах на клиент, който изискваше повече от АА, но направихме AAA като цел (и я постигнахме), когато създадохме Unx Design System на Exxon.

Добре, че съм се отклонил от темата, но моята идея е, че това е проблем с цвета и дизайна, а не с проблем с поплавък етикет.

6. Те могат да бъдат сбъркани със стойност

В статията се посочва:

Хората може да прескачат полето, мислейки, че вече е завършено. Когато подадат, те ще видят грешка, която се нуждае от коригиране. Това е разочароващо и отнема много време.

Това е много валиден момент, а също така и цветът и йерархията са от изключително значение при проектирането на интерфейси.

По-тъмните надписи над празните полета за въвеждане са доста трудни за грешка за нещо, което вече е в полето.

Ако зададете прецедент за потребителя чрез активиране на плаващи етикети при въвеждането на потребителя, а цветът на текста за въвеждане от потребителя е много по-тъмен от цвета на заместителя - да речем # 767676 срещу # 222222 - тогава възможността за объркване може да бъде много по-малка.

Всъщност не мога да кажа, че това няма да е проблем. Не вярвам, че би било в много случаи, но да направя това предположение без твърди данни би било невежествено от моя страна.

Моля, проектирайте разумно заместители и етикети. Ако използвате правилния контраст между цвета на задържателя и цвета на въвеждането на потребителя, това би трябвало да реши всички проблеми, които може да срещнете.

7. Те са непоследователно разположени

В статията се посочва:

Радио бутоните, квадратчетата за отметки и полетата за избор имат статични етикети и легенди. Където като текстови полета има плаващи етикети. Това създава непоследователно преживяване.
Когато разглежда текстово поле например, потребителят трябва да погледне вътре в контрола. За да изберете полето, те трябва да гледат извън него.
Изображение, взето от референтната статия

Това е проблем с дизайна, а не проблем с поплавък етикет. Shopify върши невероятна работа с плаващия етикет на полетата за въвеждане и изберете полета.

8. Етикетът може да бъде изрязан

В статията се посочва:

Ако плаващият етикет е по-дълъг от размера на полето, той ще бъде отрязан от полето. Ние трябва да проектираме за съдържание, не трябва да правим съдържание, което да отговаря на дизайна.
Изображение, взето от референтната статия

Това само по себе си не е проблем с поплавък етикет, това е проблем с дизайн на лоша форма.

Никой никога не би трябвало да има толкова дълъг етикет за заместител.

И ако наистина трябва да зададете два реда въпрос като въвеждащ етикет, тогава аз 100% препоръчвам НЕ да използвате плаващ етикет.

Просто няма смисъл за този случай на употреба.

9. Те игнорират стандартите

В статията се посочва:

Знаем, че така или иначе заместителите са проблематични. Ако обаче ще поставим текст в текстово поле, това трябва да е намек, а не етикет.

Това е стандартът, в който се споменава статията. Той гласи:

Атрибутът за запазено място представлява кратък намек (дума или кратка фраза), предназначен да помогне на потребителя при въвеждане на данни. Подсказка може да бъде примерна стойност или кратко описание на очаквания формат.

Хмм, „Дума или кратка фраза, предназначена да помогне на потребителя“ звучи така, че може да опише етикет!

Сега стандартните документи също казват:

Атрибутът на заместителя не трябва да се използва като алтернатива на етикета.

Напълно осъзнавам, че има обстоятелства, които изискват външен етикет и допълнителни данни за заместители, за да помогнат наистина за определени типове въвеждане на полета. Понякога трябва да извадите всички стопове, когато проектирате формуляри, за да покриете наистина всички основи.

Съгласен съм на 100%, че нито един етикет и само данни за заместители са лоша идея. Ето защо флоат етикетът съществува!

Етикетът с поплавък е създаден СЛЕД този стандарт. Не си струва да оспорвате оригинални предположения в стари документи, след като възникнат нови идеи? Особено тези, които се приемат толкова бързо.

Разумно ли е да се интересувате от това, а не да отхвърляте?

Трябва да има някаква валидна причина, поради която Google прие този модел като стандарт в Насоките за дизайн на материали.

В допълнение към Google, следните компании приеха модели с плаващи етикети в своите приложения.

  1. Shopify
  2. застой
  3. Дигитален океан
  4. делта
  5. Invision
  6. Много повече не мога да си спомня ...

резюме

В статията се посочва:

Формите не са източник на забавление. Плаващият етикет няма да накара потребителите да се наслаждават на използването на формуляри. Потребителите не се интересуват. Те просто искат резултата.

Съгласен съм, че потребителите искат резултата, но не са съгласни, че формулярите не трябва да са забавни. Потребител, който се забавлява, е много по-вероятно да си спомни опита с вашия продукт.

Ще добавя предупреждение, че не трябва да поставяте развлеченията над функционалността и яснотата.

Има по-добри и по-продуктивни техники за подобряване на дизайна на формата. Нека вместо това да отделим време и енергия.

Определено съм съгласен с първото изречение и понякога подобряването на дизайна на формуляра е премахване на полета или преосмисляне, ако формуляр дори е необходим.

Но не трябва ли да отделяме време за ВСИЧКИ аспекти на подобряването на дизайна на формата?

Тази статия първоначално е публикувана на mds.is, защото очевидно сега трябва да публикувате в собствения си блог И среден, защото кой иска да форматира само една публикация в блога?

За повече ресурси относно произхода на флоат модела вижте тази публикация.