UX и UI: защо доволният потребител е в основата на успешния сайт

Красив сайт, в който клиентът не намира бутона за поръчка, губи пари. Грозноват сайт, в който всичко се намира за секунди, често печели. Тази разлика е в сърцето на двете съкращения, които всеки начинаещ дизайнер и front-end разработчик чува още първата седмица: UX и UI.

UX и UI не са едно и също

UI (user interface, потребителски интерфейс) е това, което виждате и докосвате: бутони, полета, менюта, шрифтове, цветове, иконки, разстояния. Добрият UI е ясен, последователен и подреден.

UX (user experience, потребителско преживяване) е по-широко. Изследователската фирма Nielsen Norman Group (NN/g) го определя като всички аспекти на взаимодействието на крайния потребител с компанията, нейните услуги и продукти. Това включва интерфейса, но и скоростта на доставката, яснотата на цените, отговора на поддръжката.

NN/g дава пример: сайт за филмови ревюта може да има отлично търсене, но ако базата му съдържа само заглавия на големите студия, човекът, който търси малък независим филм, пак ще остане разочарован. Интерфейсът е безупречен, преживяването е лошо. Използваемостта (usability) пък е качество на интерфейса: колко лесно се научава, колко бързо се работи с него и колко приятно е.

Десетте евристики на Нилсен

Евристиките са общи правила, по които опитен човек преглежда интерфейс и намира проблеми, без още да е тествал с потребители. Най-известните са десетте на Якоб Нилсен, създадени с Ролф Молих през 1990 г. и прецизирани през 1994 г.:

1. Видимо състояние на системата. Потребителят знае какво става: зарежда ли се, записа ли се, на коя стъпка е.
2. Съответствие със света. Думите и понятията са на потребителя, не на програмиста.
3. Контрол и свобода. Има ясен изход: „Отказ“, „Назад“, „Отмени“.
4. Последователност и стандарти. Едно и също нещо изглежда и се казва еднакво навсякъде.
5. Предотвратяване на грешки. По-добре да не може да се сгреши, отколкото да има хубаво съобщение за грешка.
6. Разпознаване вместо припомняне. Опциите се виждат, не трябва да се помнят.
7. Гъвкавост и ефективност. Начинаещият има лесен път, напредналият има бързи клавиши.
8. Естетичен и минималистичен дизайн. Всеки излишен елемент се бори за внимание с важните.
9. Помощ при грешки. Съобщението казва на разбираем език какво е станало и как да се поправи.
10. Помощ и документация. Когато все пак трябва обяснение, то е лесно за намиране и кратко.

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

Защо стигат петима потребители

Мнението на дизайнера не замества наблюдението на истински хора. Изненадата за мнозина е, че не е нужна голяма извадка. В класическия си анализ Якоб Нилсен изчислява, че средно всеки участник разкрива около 31% от проблемите с използваемостта, така че първите петима откриват около 85%. За почти всички проблеми биха били нужни около 15 души, но съветът на NN/g е друг: три малки теста по петима, с поправки между тях, дават повече от един голям тест с петнайсет.

Условията са важни. Правилото важи за сходни потребители; ако продуктът има две доста различни групи (например купувачи и продавачи), NN/g препоръчва по трима-четирима от всяка. И след всяка поправка трябва нов тест, защото няма гаранция, че новият дизайн наистина решава проблема.

Самият тест е прост: давате на човек реалистична задача („намерете и поръчайте зарядно за този телефон“), молите го да мисли на глас и мълчите. Записвате къде се колебае, къде греши и какво казва. Не помагате, дори когато ви се иска.

Достъпността е част от UX

Сайт, който не може да се ползва с екранен четец или само с клавиатура, има лошо преживяване за много хора. Международният стандарт за това са Насоките за достъпност на уеб съдържанието (WCAG) на W3C. Те са организирани около четири принципа: съдържанието да е възприемаемо, оперативно, разбираемо и стабилно. Всеки критерий има едно от три нива на съответствие: A, AA и AAA.

Последната версия е WCAG 2.2, публикувана на 5 октомври 2023 г. Според W3C съдържание, което отговаря на 2.2, отговаря и на 2.1 и 2.0, а консорциумът препоръчва да се ползва най-новата версия. Добро начало за всеки проект: достатъчен контраст на текста, описание на всяка смислена снимка, етикет на всяко поле във форма и навигация, която работи само с клавиатура.

Откъде да започнете

UX дизайнът е мост между хората и технологията, затова се учи от двете страни: наблюдение на потребители и разбиране как се строи интерфейс. Ако ви тегли визуалната част, вижте кой вид дизайнер да станете и как протича един дизайнерски проект. Ако предпочитате да го изградите сами, следващата стъпка е front-end разработката. А ако ви харесва да намирате проблеми преди потребителите, близка професия е QA специалистът.