Публикувано: Обновено:
Посетителят влиза в сайта с конкретна цел. Иска да види цена, да намери телефон или да поръча. Ако не намери това бързо, затваря страницата, колкото и красива да е тя. Тази разлика между „изглежда добре“ и „работи добре“ е разликата между UI и UX.
UX дизайнът (user experience design) проектира целия опит на човека с вашия сайт: от структурата и навигацията до запитването. UI дизайнът (user interface) е видимата част на този опит: бутони, шрифтове, цветове и екрани. На английски дисциплината се казва UX design, а на български потребителско изживяване.
В статията ще видите какво правят дизайнерите, какви са етапите, как се тестват решенията и как се мери резултатът. Пишем от позицията на екипа на CreateWeb, където дизайнът на всеки сайт минава през тези стъпки.
Какво представлява UX дизайнът и каква е разликата между UX и UI
UX обхваща целия процес на взаимодействие с компанията, услугите и продуктите ѝ. UI е потребителски интерфейс, през който става това. Добрият сайт има нужда и от двете.
Определението идва от Дон Норман и Якоб Нилсен от Nielsen Norman Group. Те пишат, че потребителското изживяване включва всички аспекти на взаимодействието на крайния потребител с компанията (NN/g, определение на user experience). Първото изискване за добър UX според тях е да се покрият точните нужди на клиента без излишно усилие.
Там е и важното разграничение. Потребителският интерфейс може да е перфектен, а изживяването да е лошо. Пример от същата статия: сайт за филми с отлична търсачка, но без филмите, които хората търсят. Интерфейсът работи, нуждата не е покрита.
| UX дизайн | UI дизайн | |
|---|---|---|
| Въпрос | Как работи и води ли до целта? | Как изглежда и как се натиска? |
| Работа | проучване, структура, сценарии, тестове | цветове, шрифтове, бутони, анимации |
| Резултат | карта на сайта, wireframe, прототип | визуален макет, дизайн система |
| Мярка | изпълнени задачи, запитвания, продажби | яснота, четливост, консистентност |
Usability (използваемост) е част от изживяването. Тя казва колко лесно се ползва интерфейсът. Някои наричат цялото понятие потребителско преживяване. То включва и дали в крайния продукт човекът намира това, което търси.
UI дизайнът се различава и от графичния дизайн. Графичният дизайнер прави лого и печатни материали. UI дизайнерите проектират екрани, с които хората взаимодействат.
Какви са основните етапи и методи в UX дизайна
Процесът минава през пет етапа: проучване, структура, wireframe, прототип и тест. Всеки етап отговаря на въпрос, преди да се похарчат пари за следващия.
- Потребителско проучване. Кой е посетителят, какво търси, какво го спира.
- Информационна архитектура. Какви страници трябват и как се свързват в менюто.
- Wireframe. Скица на страниците без цветове, само блокове и съдържание.
- Прототип. Кликаем модел, през който се минава сценарият.
- Тест. Реални хора опитват да изпълнят задачи, а дизайнерът гледа къде спират.
UX дизайнерите започват с въпроси, не с цветове. При нас дизайнът на сайт включва wireframe на ключовите страници, UI макет за компютър и мобилна версия и до 3 кръга корекции. Срокът е от 2 до 6 седмици. Подробно за скиците има в статията какво е wireframe, а за одобрението на макетите в Figma.
Как се проучват потребителите и се тестват UX решенията
Потребителите се проучват с интервюта, анализ на данните от сайта и наблюдение как използват страниците. Решенията се тестват, като давате на няколко души конкретна задача и гледате къде се затрудняват.
Методи, подходящи за сайт на фирма:
- разговор със собственика и екипа за честите въпроси на клиентите;
- данни от Google Analytics: откъде идват хората и къде излизат;
- поглед към сайтовете на конкуренти и какво очакват клиентите;
- тест с прототип: „намерете цената на услугата“, „изпратете запитване“;
- проверка на мобилната версия на реален телефон.
Тестът не изисква лаборатория. Наблюдавайте как човек извън екипа минава през сценария. Където потребителят се колебае, там има проблем.
Как UX дизайнът подобрява потребителското изживяване и успеха на продукта
Добрият UX скъсява пътя до целта: по-малко стъпки, по-ясни бутони, по-малко съмнения. Когато пътят е кратък, повече посетители стават клиенти.
На практика това значи:
- главното действие е видимо без скролване;
- менюто и бутоните са интуитивни и ползват думите на клиента;
- формата има удобство: иска само нужните полета;
- цените и условията се намират лесно;
- страниците са удобни и на телефон.
Удобството е бизнес въпрос, независимо от платформата. Сайт, който е удобен за потребителите, отговаря на въпросите им, преди да ги зададат. Как дизайнът и структурата влияят на запитванията, разглеждаме и в услугата оптимизация за конверсии.
UI дизайн: визия и визуалните елементи на интерфейса
UI дизайнерът превръща структурата в екрани. Избира шрифтове, цветове, иконки и бутони и ги събира в дизайн система. Целта е интерфейсът да е ясен, функционален и да носи вашия бранд.
Визуалните елементи, за които отговаря:
- типография: размери и разстояния на текста;
- цветове: основни, за действие, за грешка и успех;
- бутоните и формите с всичките им състояния;
- иконки и снимки;
- анимации, които показват, че действието е станало;
- версиите за телефон, таблет и компютър.
Естетиката има значение, защото носи доверие. Визуалният дизайн обаче служи на логиката на сайта. Повече за принципите, които стоят зад добрия визуален дизайн, има в статията принципи на уеб дизайна.
Как се създава достъпен и адаптивен дизайн за мобилни устройства
Достъпният дизайн позволява на всички хора да ползват сайта, включително с намалено зрение или на малък екран. Адаптивният дизайн подрежда страницата правилно на всяко устройство.
За достъпност (accessibility) стандартът WCAG 2.2 на W3C дава конкретни числа (WCAG 2.2). Контрастът на обикновения текст трябва да е поне 4,5:1, а на големия текст поне 3:1. Целта за натискане, например бутон, трябва да е поне 24×24 CSS пиксела. И двете изисквания са от ниво AA.
За адаптивния дизайн проверете три неща: менюто на телефон, размера на текста и бутоните под палеца. Сайт, който е труден на мобилни устройства, губи посетители независимо дали са с iOS или Android. Повече за законовите изисквания има в статията за уеб достъпност и EAA.
Какви са най-честите грешки и предизвикателства при UX дизайна
Най-честите грешки са дизайнерски решения по вкуса на собственика, твърде много информация на една страница и неработеща мобилна версия.
Честите грешки:
- менюто е подредено по структурата на фирмата, не по въпросите на клиента;
- няма ясен призив за действие или има пет различни;
- формата иска твърде много данни;
- текстът е малък или с нисък контраст;
- снимките са тежки и страницата се зарежда бавно;
- готовите дизайни не са тествани с нито един външен човек.
Голяма част от тях се виждат при одит. В анализа на уебсайт UX/UI дизайнер преглежда пътя до запитване като част от одита. Ако проблемите са много, понякога е по-разумен редизайн на сайт.
Как се измерва успехът на UX дизайна
Успехът се мери с това колко хора изпълняват целта на страницата: запитване, обаждане, покупка. Мерките идват от аналитиката и от тестовете.
Какво да следите:
- брой запитвания или поръчки спрямо посещенията;
- къде хората напускат формата или количката;
- колко време отнема ключова задача при тест;
- колко хора от тестовете се справят без помощ;
- оплаквания и въпроси към екипа, които сайтът трябваше да покрие.
Мерете преди и след промяната. Една промяна наведнъж прави ясно кое е дало резултат.
Какви умения и инструменти трябват на един UX дизайнер: от скици до AI
UX дизайнерът разбира хората, подрежда информация и тества идеи. Основните инструменти са Figma за wireframe и прототипи и аналитиката за данните.
Основните умения на дизайнера:
- интервюта и наблюдение на потребителското поведение;
- информационна архитектура и сценарии;
- скици, wireframe и прототипи;
- основи на UI: шрифтове, контраст, решетка;
- разбиране как работи разработката, за да е реалистичен дизайнът;
- портфолио с реални проекти, които показват процеса.
Добрите дизайнери показват в портфолиото процеса, не само красиви екрани. Инструментите се сменят, процесът остава. В нашия екип дизайнът се прави в Figma. Клиентът вижда екраните и ги одобрява, преди програмистите да напишат ред код. AI в работата помага за идеи, текстове за прототипи и бързи варианти. Решенията за потребителите обаче се проверяват с хора.
Как UX дизайнерът участва в продуктовия дизайн и в уеб сайта
В digital продукти като сайт или приложение UX дизайнерът свързва бизнеса, клиента и програмистите. Той определя какво прави продуктът, преди да се реши как изглежда.
При уеб сайт работата върви така: UX дизайнерът проектира структурата и сценариите, UI дизайнерът прави визията, а програмистите изграждат. В малък екип един човек често покрива UX и UI. Важното е логиката да е решена, преди да започне разработка на визията.
Ако подготвяте нов проект, вижте какво включва дизайнът на уеб сайт при нас и кои са UX/UI дизайн услугите ни.
Какво е UX локализация и защо е важна за български сайт
UX локализацията адаптира изживяването към езика и навиците на конкретен пазар. Тя е повече от превод: думи, формати, плащания и очаквания.
За сайт в България това включва:
- шрифтове, които показват добре кирилица;
- място за по-дълги думи в бутоните и менюто;
- цени в евро и ясни условия за доставка;
- плащане и доставка, които клиентите познават;
- думите, с които хората тук търсят услугата.
Ако сайтът има и английска версия, тя минава отделна проверка. Структурата може да е същата, а текстовете и примерите се пишат за другата аудитория.
Често задавани въпроси
Кратки отговори на въпросите, които чуваме най-често.
Какво е UX дизайн с прости думи?
Това е проектиране на сайта така, че човек да постигне целта си лесно: да намери информация, да изпрати запитване или да купи. Обхваща структурата, навигацията, текстовете и тестовете.
Каква е разликата между UI и UX дизайн?
UX решава как работи сайтът и дали води до целта. UI решава как изглежда: цветове, шрифтове, бутони. Красив интерфейс без добра логика не носи резултати.
Колко време отнема UX/UI дизайнът на сайт?
При нас дизайнът на сайт отнема от 2 до 6 седмици. Включва wireframe на ключовите страници, макет за компютър и мобилна версия и до 3 кръга корекции.
Как да разбера дали сайтът ми има добър UX?
Дайте на трима души задача, например да намерят цената и да изпратят запитване, и гледайте къде спират. Сравнете и броя запитвания спрямо посещенията в аналитиката.
Влияе ли UX на класирането в Google?
UX влияе на това дали хората остават и намират отговор. Скоростта и мобилната версия са част от него. Самият UX не е отделен фактор, но добрият сайт отговаря по-добре на търсенето.
Задължителна ли е достъпността на сайта?
За много бизнеси в ЕС вече има законови изисквания. Ние не сме юристи, затова за конкретния ви случай проверете закона. Стандартът WCAG 2.2 ниво AA е добрата отправна точка.
Правите ли UX/UI одит на съществуващ сайт?
Да. UX/UI анализът е част от анализа на уебсайт и може да се поръча и отделно. Цената зависи от размера на сайта и се дава след оглед.
Заключение: UX решава дали сайтът работи, UI решава как изглежда
Добрият UX дизайн започва от нуждите на клиента, проверява се с тестове и се мери със запитвания и продажби. UI го прави ясен и приятен.
Нашето мнение е, че най-полезната стъпка за малкия бизнес е прост тест с трима външни души. Той показва повече проблеми от всяко обсъждане на цветове. Започнете от главната задача на сайта и я направете възможно най-лесна.
Ако правите нов проект, вижте как работим при изработка на уеб сайт или пишете ни. За основите на дисциплината прочетете какво е уеб дизайн. След пускането UX не спира: поддръжката на уебсайт пази сайта бърз и работещ, за да не се губят постигнатите подобрения.
