Лише 5% випускників Гарварду розв’язують цю задачу з газовою плитою. Що треба знати про UX-дизайн
Привіт! Я Костя Левошко, працюю UI/UX Lead в компанії Forte Group, напрямі Salesforce. Наша спеціалізація — eCommerce, і ми ті, хто перші у світі випустили проєкт на новому клауді Salesforce B2B commerce on lightning.
В цій статті поговоримо про деякі принципи і закони дизайну, подивимось на помилки в створенні UX сайту на прикладах і розв’яжемо задачу, яка вчить UX-дизайнера бути адвокатом інтересів користувачів.
Спочатку я хотів би навести визначення дизайну, яке я колись прочитав у старій енциклопедії, і з того часу воно зі мною:
«Дизайн — це конструювання, основою якого є зручність, економічність і краса».
Краса в дизайні важлива, але не першочергова. Зручність завжди була складовою дизайну, поки не стала окремим напрямом. Колись він називався Usability, зараз — UX. Поділ на спеціалізації всередині дизайну призвів до того, що у великих компаніях є сотні UX-дизайнерів, які не вміють робити візуальну частину. Їм це навіть не потрібно.
В цій статті я буду поєднувати теорію із практичними прикладами. Так буде простіше розібратись тим, хто не знайомий детально зі світом UX-дизайну. А ще спробуємо вирішити задачу. Її дають молодим дизайнерам на першому курсі в університетах. Вона стане прикладом застосування того, про що я розкажу. Нижче умова задачі.
Є плита з 4 пальниками і 4 ручками для управління цими пальниками. На картинці нижче функцію документації виконують іконки біля ручок. Без цих іконок складно зрозуміти, яка ручка відповідає за яку конфорку.
Завдання: потрібно змінити інтерфейс так, щоб він був зрозумілий користувачу на когнітивному рівні (не потребував пояснення або документації).
User Centered Design Framework
User Centered Design Framework (користувацько-центрична) — це така модель, яка дозволяє циклічно підходити до будь-якої задачі з дизайну. Вона дуже схожа на Agile-методику в розробці IT-продуктів.
Цикл складається з таких фаз:
- дослідження (користувачів, конкурентів),
- визначення проблеми, висування гіпотез,
- створення прототипу і перевірка гіпотез на користувачах до того, як віддати проєкт в роботу девелоперам.
Якщо гіпотези дизайнера неправильні, то дизайнер переходить до наступного циклу, зекономивши роботу девелоперів. Якщо гіпотези вірні і підтверджені тестуванням на користувачах — проєкт передається в роботу і супроводжується дизайнером аж до дизайну QA.
Цей підхід частково перетинається з тією сферою, де працюють PO або BA, але з однією суттєвою різницею — UX-дизайнери завжди на стороні інтересів користувачів. Вважається, що якщо користувачі будуть щасливі, то і бізнес буде рости, а отже бізнес-інтереси теж будуть в порядку.
Розуміння больових точок (pain-points) користувачів і їх ефективне вирішення — основне завдання UX-дизайнера. І визначається якість роботи дизайнера не суб’єктивними «подобається/не подобається», а даними — якісними та кількісними. Qualitative and quantitative data — скальпель в руках UX-дизайнера.
Статистика
Тепер трохи перейдемо до практики. Нижче дані опитування від Baymard Institute за 2021 рік, в якому взяли участь 4329 користувачів. Вони відповідали, що їх змушує залишати сайт в процесі checkout.
На деякі причини UX-дизайнер не може вплинути, наприклад складно вмовити клієнта знизити ціни на продукцію. Але так, як UX-дизайнер — адвокат інтересів користувачів, він може вмовити клієнта зробити Guest Checkout, показавши свіжі дослідження, що відсутність цього функціоналу призводить до втрати 24% потенційних клієнтів. Не завжди є можливість і бюджет зробити власні дослідження користувачів, і врятувати можуть наявні Secondary Research.
Цікаво, що, наприклад, 17% користувачів залишають сайт, тому що не довіряють йому свої платіжні дані. Що робити у такому випадку? Можна зробити детальніший ресьорч і вийти на додаткові дані, які на щось та й наштовхнуть. Так, наприклад ще в одному дослідженні 35% людей із цих 17%, що не довіряють, відповіли, що якщо вони побачать бейдж Norton Secured, то страху робити покупки на сайті у них не буде.
Закони UX
І ще трохи повернемось до теорії. Як і в математиці, у світі UX є сформовані аксіоми, які не потребують, щоб їх доводили — це закони UX. Це всі найкращі практики UX дизайну, як, наприклад, евристика, психологія гештальту, когнітивні ілюзії. Так, є закон Міллера, який говорить про те, що середньостатистична людина може тримати у своїй робочій пам’яті 7 плюс/мінус два елементи. Через це UX дизайнери рекомендують створювати головне меню від 5 до 7 елементів, а якщо замовник хоче туди запхати більше, то переробляти інформаційну архітектуру проєкту.
А для тих, у кого виникло бажання вивчити закони UX детальніше, існує окремий сайт.
Оцінка ефективності e-commerce сайтів
Завжди можна оцінити ефективність e-commerce сайтів. З цього починається будь-який редизайн готових сайтів. Здавалось би, для e-commerce існує багато дизайн-паттернів, бо ж все, що можна, вивчили, а маса досліджень доступні за один-три кліки.
Але якщо дивитись на топ світових e-commerce сайтів, усвідомлюєш, що без хліба дизайнери не залишаться.
Навіть такі гіганти як Costco, Verizon та Vodafone дуже слабо попрацювали над e-commerce складовою у сфері UX.
UX Case Study: невдалі приклади інтерфейсів
Ніщо краще не покаже помилки в UX як Case Study, особливо на прикладі якогось реального бренду. Ми подивимось, що не так із сайтом Hewlett-Packard.
Історія починається з того, що жінка намагалась купити картридж для принтера і помилково додала в кошик картридж не тієї моделі. Потім вона знайшла правильний і теж додала його в кошик, але не могла зрозуміти, як видалити неправильний. Вона не знала, що видалити означає поставити 0 у вікні «Quantity». Не впоравшись з інтерфейсом, жінка пішла і купила потрібний їй картридж на Amazon, а HP втратили потенційного клієнта.
Ще один приклад з компанією Adidas. Користувач не помітив посилання «Remove Item» і намагався поставити Quantity на нуль, але це йому не вдалося.
Ще один невдалий приклад у BestBuy. Там користувач може вибрати у варіаціях товару через дропдаун іншу модель телевізора. Але цей інтерфейс не дає жодного розуміння, які відмінності мають моделі між собою.
Важливо розуміти відмінності UX для десктопу та мобільних додатків. Так, дропдаун може бути зручним для вибору штату чи країни у формі на десктопі, але повна протилежність буде у мобільному браузері. Тут краще робити введення тексту з автосаджестом, бо мотати через весь перелік країн до Ukraine чи United States вручну — це не дуже приємний досвід.
Так а що там з тією плитою?
Ви ще не забули, що за нами одна не розв’язана задача для першокурсників? Чудово, але спочатку я хотів би зупинитись на ще одному законі UX — Ефект Зейгарнік. Люди пам’ятають незавершені або перервані задачі краще, ніж завершені.
Тепер повернемось до плити. Тут немає одного правильного рішення, але її можна вирішити декількома способами. Зі своїми плюсами і мінусами.
У першому варіанті, якщо ми зменшимо дві передні конфорки, то на когнітивному рівні стане зрозуміло, які ручки керують пальниками.
А ось другий варіант мені подобається більше. Правда для нього потрібно трішки збільшити ширину плити. Окрім того, що ми зрозуміємо за порядком, яка ручка який пальник вмикає, ми ще й отримаємо додаткову поверхню, щоб ставити на неї, наприклад, каструлі.
Висновки
- В центрі будь-якого UX-дизайну — користувач, і завдання UX-дизайнера зробити продукт максимально зрозумілим на когнітивному рівні.
- Розуміти больові точки юзерів допомагають дослідження і дані.
- Скільки б патернів не було вже створено для дизайну e-commerce сайтів, UX-дизайнери не залишаться без роботи, адже досі на сайтах багато помилок, через які бізнес втрачає клієнтів. Для клієнтів залишаються незрозумілими прості речі — як редагувати кошик або ж знайти потрібний продукт серед великого вибору.
- Якщо UX-дизайнер на стороні користувача, він на стороні всієї команди з розробки і на стороні успіху бізнесу клієнта.
Найкращі коментарі пропустити