UX дизайнът помага на посетителя да разбере предложението, да намери правилната услуга и да изпрати запитване. UI дизайнът превръща този път във видими елементи като менюта, бутони, форми и съобщения. И двата са част от професионалния уеб дизайн. Този материал помага да оцените преживяването в бизнес сайт, но не разглежда цени, пакети или техническото изпълнение на изработка на сайт.
UX отговаря на въпроса дали човек може да постигне целта си лесно и без излишно объркване. UI отговаря на въпроса дали вижда, разпознава и разбира елементите, с които трябва да работи. Най-просто казано, UX определя какво трябва да се случи и в какъв ред, а UI показва на екрана как човек да го направи.
| UX дизайн | UI дизайн | |
|---|---|---|
| Основна задача | Подрежда информацията, изборите и стъпките | Прави стъпките видими и разбираеми |
| Пример | Посетителят намира подходящата услуга и разбира как да поиска оферта | Бутонът за запитване се забелязва, а полетата във формата са ясни |
| Типичен проблем | Липсва важна информация или следващата стъпка не е логична | Важният бутон се губи, текстът се чете трудно или грешката не е обяснена |
| Основен въпрос | „Мога ли да свърша това, за което съм дошъл?“ | „Разбирам ли как да използвам страницата?“ |
Представете си посетител, който иска нов фирмен сайт. Ако не може да разбере коя услуга е подходяща, как протича работата или какво трябва да подготви, проблемът е предимно в UX. Ако информацията е налична, но връзката към нея прилича на обикновен текст, бутонът е незабележим или формата не показва къде има грешка, проблемът е предимно в UI.
В реален сайт двата вида проблеми често се наслагват. Затова „да направим дизайна по-модерен“ не е достатъчна задача. Първо трябва да се установи къде се затруднява човекът. След това се проверява дали липсва важна информация или стъпка, дали необходимият елемент не се вижда ясно, или и двете.
UX, съкратено от User Experience, означава потребителско преживяване. При бизнес сайт UX дизайнът подрежда съдържанието и действията според нуждите на посетителя, а не според вътрешната структура на фирмата. Целта е човекът да разбере къде е попаднал, какво се предлага, дали е подходящо за него и каква е разумната следваща стъпка.
Потребителският път, наричан още user journey, започва с конкретна нужда. Например собственик на малка фирма търси кой може да изработи нов сайт. Той може първо да отвори началната страница, след това да разгледа услугата, да потърси доказателства за опит и накрая да изпрати запитване. UX дизайнът трябва да направи този път логичен, без да предполага, че посетителят познава термините и организацията на изпълнителя.
Ползваемостта, или usability, е важна част от UX. ISO 9241-11:2018 разглежда ползваемостта като резултат от използването на система в конкретен контекст. Това насочва оценката към реална задача и реални хора, а не към лично мнение дали дадена страница „изглежда добре“.
За да прецените UX на бизнес сайт, започнете с прости въпроси:
Добър UX не означава непременно кратка страница или малко стъпки. Понякога човек има нужда от повече информация, преди да вземе решение. Важното е всяка стъпка да има причина, а съдържанието да се появява тогава, когато помага за следващия избор.
UI, съкратено от User Interface, означава потребителски интерфейс. Това е видимата част на сайта, чрез която човек чете, избира и извършва действия. UI включва шрифтовете, цветовете, разстоянията, бутоните, връзките, полетата, иконите и начина, по който тези елементи се променят след действие.
Добре оформеният интерфейс не кара посетителя да гадае. Връзката изглежда като връзка, основният бутон се отличава от второстепенните действия, полето има разбираемо название, а съобщението за грешка обяснява какво трябва да се поправи. Това не е въпрос само на красота. Става дума за яснота при използване.
Сайтът трябва ясно да показва какво може да се направи и какво се случва след действие. Един бутон например може да е готов за натискане, временно недостъпен или да показва, че заявката се обработва. Полето може да е празно, избрано за писане, попълнено правилно или да съдържа грешка. Специалистите наричат тези различни варианти interface states, или състояния на интерфейса. Ако те изглеждат еднакво, човекът не знае дали действието му е прието.
След всяко важно действие сайтът трябва да даде разбираем отговор. Това може да бъде потвърждение, че формата е изпратена, ясно съобщение за проблем или видим знак, че страницата зарежда резултат. Този отговор се нарича feedback, или обратна връзка от интерфейса. Насоките на W3C за достъпен дизайн препоръчват интерактивните елементи да се разпознават лесно, навигацията да е последователна, полетата да имат ясни етикети и обратната връзка да се забелязва.
UX и UI работят върху една и съща задача от различни страни. UX определя какво трябва да разбере и направи посетителят. UI показва тази логика чрез текст, подредба и интерактивни елементи. Ако логиката е непълна, красивият интерфейс не може да я поправи. Ако логиката е добра, но е представена неясно, посетителят пак няма да я използва успешно.
При изпращане на запитване взаимодействието изглежда така:
Това разграничение помага и при поправка на проблем. Ако формата иска ненужна информация, промяната е в UX. Ако необходимото поле няма видимо название, промяната е в UI. Ако бутонът не изпраща данните, причината вече може да е техническа и трябва да се провери от разработчик.
Проверявайте пътищата, които водят до реален резултат за посетителя и за бизнеса. Не е важно само дали дадена страница се отваря. Важно е дали човекът разбира какво се предлага, намира правилната услуга, получава достатъчно основания да се довери и успява да се свърже. Не му подсказвайте къде да натисне. Сайтът сам трябва да го насочи.
От първото посещение до разбирането на предложението. Отворете страницата така, както би я видял човек, който не познава фирмата. След кратък преглед той трябва да може със свои думи да обясни какво предлага бизнесът, за кого е услугата и какъв проблем решава. Ако повтаря отделни фрази от страницата, но не може да обясни смисъла им, посланието още не е достатъчно ясно.
От общото предложение до правилната услуга. Дайте задача с реална нужда, например: „Фирмата ми има стар сайт и искам да разбера какви са вариантите.“ Наблюдавайте коя връзка избира човекът и защо. Имената в менюто и текста трябва да му помогнат да различи нова изработка, преработка на съществуващ сайт и друга близка услуга, без да познава начина, по който компанията е организирала дейността си.
От интереса до доверието. След като намери услугата, посетителят обикновено търси отговор на въпроса дали може да разчита на фирмата. Проверете дали лесно открива кой стои зад сайта, как протича работата, как може да се свърже и с какво са подкрепени важните твърдения. Лого, снимка или общо обещание не са достатъчни, ако липсва конкретна информация.
От решението до изпратеното запитване. Човекът трябва да вижда как да продължи, каква информация се очаква от него и какво ще стане след изпращането. Проследете целия процес, включително грешно попълнено поле и успешно изпращане в тестова среда. Ако се налага да търси бутона, да отгатва какво означава дадено поле или да се чуди дали съобщението е изпратено, пътят не е завършен добре.
Същата задача на телефон. Не измисляйте отделен „мобилен“ сценарий. Повторете същия път на реално мобилно устройство. Така ще видите дали менюто остава разбираемо, важната информация не изчезва, действията се натискат удобно и появата на клавиатурата не пречи на попълването на формата. Ръководството за респонсивен и адаптивен дизайн помага да прецените дали е достатъчно пренареждане или е нужен различен начин за изпълнение на задачата.
За проверката използвайте човек, който не познава сайта, и му дайте една задача без допълнителни обяснения. Записвайте какво действително се случва: къде спира, какво прочита повторно, коя връзка избира и какво очаква да се появи. „Не намери услугата“ е наблюдение. „Менюто е лошо“ е предположение за причината и трябва да бъде потвърдено, преди да се променя дизайнът.
Когато човек отвори страница, трябва бързо да разбере какво се предлага, за кого е и как да продължи. Информационната йерархия е редът, в който му даваме тези отговори. Визуалната йерархия използва заглавия, размер, разстояние, цвят и групиране, за да покаже кое е най-важно. Навигацията свързва страниците и дава път към следващата стъпка.
Представете си страница за услуга, която започва с дълга история на фирмата, а обяснението на самата услуга е скрито по-надолу. Информацията може да е вярна, но редът не отговаря на първия въпрос на посетителя. Ако основният бутон изглежда като останалите връзки или всяка секция привлича еднакво внимание, визуалната йерархия също не показва кое е важно.
На всяка ключова страница проверете дали:
Тук оценяваме как човек използва конкретна страница и преминава към следващата. Пълното планиране на раздели, типове страници и отношенията между тях е отделна задача, разгледана в материала за логична структура на сайт.
Формата трябва да позволи на посетителя да предаде необходимата информация без догадки. UX определя кои данни наистина са нужни и какво трябва да се обясни преди изпращането. UI показва полетата, названията, грешките и потвърждението. Ако едната част липсва, човекът може да се откаже или да изпрати непълно запитване.
Проверете формата в три ситуации: без попълнени данни, с допусната грешка и с правилно попълнени полета. При всяка ситуация човекът трябва да разбира какво се очаква и какво се е случило.
Ръководството на W3C за форми обяснява ролята на етикетите, инструкциите, проверката на въведеното и известяването на потребителя. GOV.UK Design System показва практичен подход при грешка: проблемът се обяснява ясно, човекът се насочва към правилното място и не е принуден да започва отначало.
Посетителят не познава вътрешните процеси на фирмата и съди по това, което вижда. Когато страниците използват еднакви наименования, контактните данни са лесни за намиране, действията дават предвидим резултат и твърденията са подкрепени с конкретна информация, сайтът изглежда по-надежден. Противоречията и неясните действия създават съмнение дори когато услугата е добра.
Потърсете следните признаци за яснота и последователност:
Последователност не означава всички страници да изглеждат еднакво. Означава еднаквите елементи да се държат по предвидим начин. Посетителят може да се съсредоточи върху решението си, вместо всеки път да разгадава как работи сайтът.
За тази проверка не е нужно да сте дизайнер. Изберете едно важно действие, например намиране на подходяща услуга и изпращане на запитване, и преминете през целия път като нов посетител. Следвайте само онова, което сайтът показва. Не си помагайте с вътрешното си знание за това къде се намира дадена страница или как би трябвало да работи. Ако е възможно, помолете и човек, който не познава сайта, да повтори същата задача.
Отворете началната страница или основната страница на услугата и я прегледайте, без да четете подробно всеки абзац. След това обяснете със свои думи какво предлага фирмата, за кого е услугата и какъв проблем решава. Ако можете само да повторите общи изрази от страницата, но не и да обясните предложението, то не е представено достатъчно ясно.
Започнете от началната страница с конкретен въпрос, например: „Имам стар фирмен сайт и искам да разбера какви са вариантите.“ Не използвайте търсачката на сайта и не си помагайте с предварително известен адрес. Имената в менюто и връзките трябва да ви насочат към правилната страница. Ако отваряте няколко неподходящи страници или се връщате многократно назад, пътят има нужда от преработване.
На всяка важна страница потърсете следващото действие. То може да бъде преглед на услуга, свързване с фирмата или изпращане на запитване. Текстът на връзката или бутона трябва да казва какво ще се случи след натискане. Ако виждате няколко еднакво силни призива, но не разбирате кой е подходящ за вашата цел, страницата не ви води достатъчно ясно.
Прегледайте названията на полетата и проверете дали е ясно какво се очаква във всяко от тях. Опитайте да продължите с празно задължително поле или с неправилно въведени данни. Сайтът трябва да посочи точно къде е проблемът и как да го поправите, без да изтрива останалата правилно въведена информация. За проверка на успешно изпращане използвайте тестово копие на сайта или предварително предупредете човека, който получава запитванията. Не изпращайте произволни тестови съобщения, които ще бъдат обработени като истински клиентски запитвания.
Използвайте менюто, връзките, бутоните и другите важни елементи по избрания път. Трябва да виждате дали нещо се зарежда, дали действието е прието и дали е възникнал проблем. При изпращане на форма трябва да има ясно потвърждение, а не просто празна форма или незабележима промяна. Ако се налага да натиснете втори път, защото не знаете какво става, сайтът не дава достатъчно ясна обратна връзка.
Повторете същата задача на реален телефон. Проверете дали менюто се отваря лесно, текстът се чете без увеличаване, бутоните се натискат без да уцелвате съседен елемент и клавиатурата не скрива полето или бутона за изпращане. Важна информация и действия не трябва да изчезват само защото екранът е по-тесен.
Проверете дали лесно се разбира кой стои зад сайта, как да се свържете с фирмата и какво ще стане след това. Важните твърдения за опит, начин на работа или резултати трябва да са подкрепени с конкретна информация. Сравнете контактите, фирмените данни, условията и описанието на услугата в различните страници. Противоречията карат посетителя да се съмнява дори когато са допуснати по невнимание.
Записвайте какво точно се е случило, къде и как е попречило на задачата. „Посетителят отвори три неподходящи страници, преди да намери услугата“ е полезно наблюдение. „Менюто е лошо“ е мнение, което не показва причината. Първо поправете проблемите, които спират задачата, след това тези, които създават колебание, и накрая дребните неудобства.
Когато специалист прави такава проверка по утвърдени принципи, тя често се нарича heuristic evaluation, или евристична оценка. Тя помага да се открият вероятни затруднения. Когато хора от целевата аудитория изпълняват задачите, докато екипът наблюдава, говорим за user testing, или проверка с потребители. Тя показва какво реално се случва, но резултатите трябва да се тълкуват спрямо избраните хора и задачи.
Когато човек се затрудни, причината невинаги е в подредбата или външния вид. Бавна страница, неработещ бутон, липсващо съдържание или технически проблем при изпращането могат да изглеждат като лош интерфейс, но изискват различна проверка. Добрата оценка не нарича всеки проблем „UX“, а установява коя част от сайта трябва действително да бъде поправена.
| Какво вижда посетителят | Каква друга причина е възможна | Какво да се провери |
|---|---|---|
| Страницата реагира бавно или елементите се местят | Проблем с производителността | Данните за Core Web Vitals и реалното усещане за бързина |
| Бутонът изглежда правилно, но не работи | Грешка в кода, връзката или сървъра | Технически тест и записаната грешка |
| Посетителят не разбира услугата | Неясно предложение или недостатъчно съдържание | Посланието, примерите, условията и аудиторията |
| Сайтът се използва трудно с клавиатура или помощна технология | Проблем с достъпността | Специализирана проверка спрямо WCAG 2.2 |
| На телефон липсва съдържание или важна функция | Неправилно адаптиране към различни екрани | Поведението на сайта при различни размери на екрана, съдържанието и техническото изпълнение |
UX и достъпността се пресичат, но не са едно и също. Тази статия посочва основни признаци за проблем, но не представлява пълен одит за съответствие с WCAG. По същия начин наблюдението, че страницата е бавна, не заменя измерването и техническата диагностика.
След проверката съберете еднаквите затруднения, дори когато се появяват на различни страници. Ако посетителите не разбират една и съща услуга на началната страница и в нейното подробно описание, вероятно има общ проблем в посланието. Ако се затрудняват само при един неработещ бутон, нужна е конкретна поправка. Не започвайте с цветове и шрифтове, когато хората не разбират самото предложение.
| Наблюдение | Започнете с | Желан резултат |
|---|---|---|
| Хората не разбират какво се предлага | UX и съдържание | Ясно предложение, аудитория и следваща стъпка |
| Не намират правилната услуга | UX, навигация и структура | Разбираеми имена и логичен път до страницата |
| Важното действие остава незабелязано | UI и визуална йерархия | Действието се разпознава без търсене |
| Формата създава грешки и въпроси | UX, UI и техническа проверка | Само нужните полета, ясни съобщения и надеждно изпращане |
| Целият сайт не отговаря на начина, по който бизнесът работи днес | Стратегия, съдържание и изпълнение | Нова структура и интерфейс, съобразени с реалните цели |
Когато проблемът засяга цялата структура, съдържанието и начина на работа на съществуващ сайт, следващата стъпка е да се определи обхватът на редизайна и какво трябва да се запази при промяната. За нов проект вижте какво включва изработката на бизнес сайт. Отделен проблем с бутон, форма или текст може да бъде решен с конкретна поправка.
Твърденията и практическите проверки в материала са съобразени с официални стандарти, насоки за достъпност и утвърдени методи за оценка. Източниците по-долу дават допълнителна техническа дълбочина, без да са необходими за разбирането на основния текст. Те са разделени на официални и професионални, за да бъде ясна ролята им.
В текста са запазени международно използвани термини, защото с тях ще се срещнете в задания, анализи и разговори с дизайнери и разработчици. Всеки термин по-долу е обяснен на български, включително какво означава в практиката и какво не бива автоматично да се заключава само от неговото използване.
UX е съкращение от User Experience, или потребителско преживяване. То обхваща целия опит на човека при използването на сайт: какво очаква, какво разбира, какви стъпки предприема и дали постига целта си. UX не е само подредбата на една страница и не се изчерпва с това сайтът да бъде „лесен“.
UI е съкращение от User Interface, или потребителски интерфейс. Това са видимите и интерактивните части, чрез които човек използва сайта: текст, менюта, връзки, бутони, полета, икони и съобщения. UI не означава само цветове и украса, защото включва и яснотата на всяко действие.
Типография е начинът, по който текстът е оформен и подреден. Тя включва избора на шрифт, размерите, дебелината, разстоянието между редовете и разграничаването на заглавията от основния текст. Добрата типография улеснява четенето и показва кое е важно, без сама да променя смисъла на съдържанието.
Контраст е видимата разлика между два елемента, например между текст и фон или между основен и второстепенен бутон. Достатъчният контраст помага съдържанието да се чете и действията да се разпознават. Цветът не трябва да бъде единственият начин за показване на грешка, избор или задължително поле.
Интерактивен контрол е общо название за елемент, чрез който човек извършва действие или въвежда информация. Такива са бутоните, връзките, полетата, отметките и падащите списъци. Контролът трябва да показва какво може да се направи и какво се е случило след действието.
User journey означава потребителски път. Това е последователността от стъпки, през които човек преминава, за да постигне цел, например от първото търсене до изпращането на запитване. Пътят не е само списък от посетени URL адреси, защото включва въпросите, решенията и колебанията между отделните стъпки.
Usability означава ползваемост. Терминът описва доколко определени хора могат да използват продукт или сайт успешно, с разумно усилие и удовлетворение в конкретна ситуация. Ползваемостта е част от по-широкото потребителско преживяване и се оценява чрез задачи, а не само чрез мнение за външния вид.
Feedback означава обратна връзка от интерфейса. Това е видимият или звуков отговор след действие: потвърждение, предупреждение, съобщение за грешка или знак, че заявката се обработва. Без обратна връзка човекът не знае дали сайтът е приел действието и често го повтаря.
Interface state означава състояние на интерфейса. Един и същ елемент може да е готов за действие, избран, временно недостъпен, в процес на обработка, успешен или проблемен. Всяко важно състояние трябва да бъде различимо, за да не се налага посетителят да гадае какво става.
Информационната йерархия определя реда и важността на съдържанието. Визуалната йерархия показва този ред на екрана чрез размер, позиция, разстояние, цвят и групиране. Ако двете не съвпадат, важната информация може да изглежда второстепенна, а маловажен елемент да привлича прекалено много внимание.
Навигация е системата, чрез която човек се движи между страниците и секциите на сайта. Тя включва главното меню, вътрешните връзки, връзките в края на страницата, трохите и други ориентири. Добрата навигация използва разбираеми наименования и показва къде се намира посетителят.
Етикетът на поле е постоянно видимото название, което обяснява каква информация трябва да се въведе. Например „Телефон за контакт“ е етикет. Подсказката вътре в празното поле не е надежден заместител, защото изчезва при писане и човекът може да забрави какво се очаква.
Валидация е проверката дали въведената информация отговаря на необходимите условия. Тя може да установи липсващо задължително поле, неправилен формат или несъвместима стойност. Добрата валидация не показва само, че има грешка, а посочва къде е тя и как може да бъде поправена.
Heuristic evaluation означава евристична оценка. Това е експертен преглед, при който интерфейсът се сравнява с утвърдени принципи за ползваемост и с конкретните задачи на сайта. Методът открива вероятни проблеми, но не замества наблюдението на реални потребители и не доказва колко често възниква всеки проблем.
User testing означава проверка с потребители. Представители на целевата аудитория изпълняват конкретни задачи, докато екипът наблюдава къде се затрудняват и как разбират интерфейса. Целта не е участниците да кажат дали дизайнът им харесва, а да се види дали могат да го използват успешно.
Accessibility означава достъпност. При уеб сайт това е възможността хора с различни способности да възприемат съдържанието, да се ориентират и да извършват действия, включително с клавиатура или помощни технологии. Достъпността се пресича с UX и UI, но включва и технически изисквания, които не могат да се оценят само визуално.
WCAG е съкращение от Web Content Accessibility Guidelines, или Насоки за достъпност на уеб съдържанието. Това е стандарт на W3C с проверими критерии за достъпност. WCAG не е обща оценка дали сайтът „изглежда достъпен“, а рамка за проверка на съдържание, дизайн и техническо изпълнение.
Responsive design означава респонсив дизайн, при който оформлението се приспособява към наличното пространство и различните размери на екрана. Това не означава просто страницата да се смали. Съдържанието, навигацията, изображенията, формите и действията трябва да останат четими и използваеми.
Според официалната документация на Google Core Web Vitals е набор от показатели за важни части от преживяването при зареждане и използване на страница. Те измерват скоростта на показване на основното съдържание, реакцията при взаимодействие и неочакваното разместване на елементи. Показателите помагат при техническа диагностика, но не оценяват сами по себе си дали съдържанието и пътят са ясни.
ISO 9241 е серия международни стандарти за взаимодействието между хора и интерактивни системи. Различните части разглеждат понятия като ползваемост и дизайн, ориентиран към човека. Посочването на стандарта не означава автоматично съответствие. Нужно е конкретните изисквания и методът на проверка да бъдат приложени към реалния продукт.
W3C е съкращение от World Wide Web Consortium. Организацията разработва отворени уеб стандарти и чрез инициативата WAI публикува насоки и образователни материали за достъпност. W3C не е търсачка и не оценява търговското качество на даден сайт, но стандартите му са основна техническа опора за уеб разработката.
Помощни технологии са устройства и програми, които улесняват използването на дигитално съдържание от хора с увреждания. Примери са екранните четци, увеличителният софтуер, гласовото управление и специализираните клавиатури. Сайтът трябва да предоставя правилна структура и ясни контроли, за да може такава технология да предаде съдържанието и действията.
