Изложени са наблюденията, мненията и съветите на популярния уеб дизайнер, консултант и IT специалист Брад Фрост (Brad Frost). Той преподава системен уеб дизайн, помага за реализирането на мащабни уеб проекти.

 

Последно време твърде много започнаха да ме дразнят начините за автентикация в различните уеб сайтове. Тъй като мениджърите на пароли, като например 1Password (който аз използвам) и вградения мениджър на пароли в Chrome (който също използвам), станаха много популярни, няма да е зле уеб сайтовете да отчитат този факт.

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

Какво не трябва да се прави

Ето няколко примера, които аз бих избегнал.

Не поставяте автентикацията в модални форми

Hertz например, както и редица други сайтове поместват формата за логване в модален прозорец. Този подход има два проблема:

  • Излишни допълнителни действия за потребителя. „1) кликнете върху иконката за менюто, 2) изберете си име и парола, 3) попълнете формуляра“. И всичко това вместо просто преход към страницата с автентикацията, която може да бъде достигната чрез търсачката, чрез чата за клиентите, чрез мениджъра на пароли и т.н.
  • Няма директен линк към тази страница, което предизвиква истинско главоболие на техническата поддръжка, понеже им се налага да дават един куп инструкции и не могат просто да дадат на потребителя линка към страницата за влизане в сайта. Този метод пречи и на мениджърите на пароли, понеже модалният прозорец по принцип е скрит. 1Password разполага с много удобната функция „Отвори и запълни“, която при отварянето на даден сайт може да запълни формата за логване със необходимите потребителски данни. Но тази функция не работи с модалните прозорци
Не скривайте полетата

Сайтът Delta скрива полето „Фамилия“. Разбирам, че чрез въвеждането на елементи от най-съвременния и прогресивен дизайн, интерфейсът става по-чист. Проблемът е, че това поле е задължително, а по този начин мениджърите на пароли не могат да го запълнят. Потребителите трябва първо да запълнят видимото поле, за да може да се появи скритото. Това е едно допълнително препятствие по пътя за логване в системата.

Екранът за автентикация в MacOS по подобен начин скрива полето на паролата, за да „изчисти“ потребителския интерфейс (но аз си мисля, че за да накара хората да влизат чрез TouchID). Според мен, тази чистота отблъсква хората.

Не се шегувайте със специалните линкове

Изглежда че това започна със Slack, но сега и други програми, като например Notion (която, между другото аз харесвам). При този метод, на електронната поща на потребителя се изпраща временна парола за влизане в системата. Това е наистина хитро, понеже спестява страданията на нещастните потребители, които им е трудно да запомнят още една парола и не е необходимо създаването на инфраструктура за възстановяване на забравена парола. Но.

  • Тази схема е невероятно уморителна. 1) въвеждане на имейл адреса във формата за логване. 2) отваряне на нов раздел или преминаване към друго приложение. 3) Отваряне на електронната поща. 4) намиране на съобщението, изпратено от услугата. 5) отваряне на съобщението. 6) копиране на паролата-абракадабра. 7) Връщане в сайта с формата за автентикация. 8. поставяне на абракадабрата в необходимото поле. 9) Логване. Ама че работа
  • Това въобще не работи с мениджърите на пароли, което неимоверно много дразни. В съвременната общност на уеб дизайнерите много се говори за унификацията на тези подходи в дадена екосистема, но по дяволите, така и трябва да бъде в целия интернет.
  • Това принуждава потребителите да усвояват ново поведение. Всички потребители вече са се научили на определени шаблони – логване, проверка, навигация и т.н., които многократно използват в продължение на много години. Не казвам, че никога не трябва да се въвеждат нови неща. Но е важно да се разбере, че потребителят идва във вашия сайт с вече изградени навици и свой товар от познания за използването на интернет. Когато се правим на прекалено умни, принуждаваме потребителите да си създават нови шаблони, което ги забавя и дразни (поне в началото).
Не разтягайте формата за логване на няколко страници
1 от 3

Shopify (още една моя любима услуга) много дразни с това, че разтяга логването на три отделни екрана. Разбирам какви са мотивите: уеб дизайнерите не са искали да претоварват хората с голямо количество информация. Съгласен съм с този подход, например в случаите, когато това е интернет магазин, където се налага на няколко етапа да се въвеждат платежната информация, начинът на доставка, адреса, информацията от кредитната карта и т.н. Но защо това трябва да се прави за формуляр от само три полета?

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

Какво да се прави

Как все пак трябва да постъпят уеб-дизайнерите? Лично аз мисля, че старата скучна форма за логване в системата е просто прекрасна. Вижте Harvest:


А ето как изглежда екранът за логване на WordPress:


Опростен, лаконичен и предсказуем дизайн. Съвместим с мениджърите на пароли. Всичко си има и всичко е на мястото си. Ето някои мои съображения и съвети:

  • Направете си отделна уеб страница за влизане в системата. Хората от техническата поддръжка ще могат да изпращат клиентите на точно определен URL адрес (domain.com/login), а не да засипват хората с тонове инструкции, къде точно трябва да намерят тази форма за автентикация в сайта. Мениджърите на пароли ще запомнят този URL и с един клик ще запълнят всички полета
  • Показвайте всички задължителни полета: ако за логването е необходима фамилия, оставете това задължително поле да се вижда
  • Оставете всички полета на една и съща страница: логването трябва да е бързо, а не ненужно разтегнато на няколко страници. В днешния информационен век това забавяне струва много
  • Не си фантазирайте: разбира се, има нещо в тези вълшебни препратки с имейли и различните други изобретателни шаблони за автентикация в системата. Но трябва да се имат предвид вече изградените навици на потребителите в използването на Глобалната мрежа. По-добре използвайте вече утвърдената, може би скучна, но бърза и предсказуема практика

Изброените дотук примери съвсем не са изчерпващи. Тук не се спрях върху логването през социалните мрежи и двуфакторната автентикация. Споделете и вашите наблюдения за подобни неправилни и дразнещи смартфони. По този начин интернет може да стане малко по-удобен и приятен.

–don’t get clever with login forms

 

Разбира се, има и други мнения, различни от изброените дотук тези. Да си припомним, че през 2014 година група изследователи от Университета на Калифорния, Бъркли анализираха пет популярни мениджъри на пароли, откривайки уязвимости, които биха позволили на атакуваща страна да научи идентификационните данни на даден потребител за произволно избрани сайтове. За щастие, след доклада на специалистите, към офисите на почти всички (без една) от тези компании, откритите уязвимости бяха запушени от отговарящите за поддръжката на въпросните мениджъри на пароли. Анализирани бяха мениджърите на пароли LastPass, RoboForm, My1Login, PasswordBox и NeedMyPassword. Разкритите уязвимости и пропуски веднагха бяха оправени и към днешен ден софтуерът от този вид е много надежден и спестява много време и нерви. Мненията на потребителите са разделени. Някои са настроени параноично и не доверяват своите пароли на каквито и да били мениджъри от подобен тип. Други считат, че вграденият в Chrome мениджър на пароли е достатъчен за всичко. Но трябва да признаем, че различните нови форми за логване в интернет сайтовете не са се появили просто така, и всеки шаблон е направен с определена цел. А вие какво мислите?