У даній статті ми розглянемо, що таке UI та UX, які правила існують при створенні дизайну інтерфейсу, що впливає на UX, і яка різниця між цими поняттями.
Дана термінологія часто задіяна в багатьох сферах IT, але великої популярності набула саме в розробці web-сайтів і додатків. Ці поняття часто плутають, хоча їм вже близько 70 років.
Давайте разом дізнаємося, що означають абревіатури і яка ж різниця між ними.
UX, користувацький досвід (англ. «User experience») – цей термін збирає в собі загальний досвід, який може отримати або отримує користувач при використанні програми або web-сайту. UX-дизайн відповідальний за те, як буде функціонувати продукт, як він буде адаптований і яку віддачу та емоції буде викликати у звичайного користувача. На даний вид досвіду впливає дуже багато чинників, усі їх не перерахувати, але можна виділити найосновніші чинники. Це зрозумілість мови і якісне наповнення контенту, очевидність будь-якої представленої дії в продукті, єдність в рішеннях розробки інтерфейсу, прозора логіка інтерфейсу та її ідентичність з ментальною установкою клієнта. Саме з цього терміна починається проектування інтерфейсу програми або web-сайту, грунтуючись на дослідженні досвіду користувача і його поведінкових реакцій.
UI, інтерфейс користувача (англ. «User interface») – цей термін включає в себе сукупність засобів, за допомогою яких користувач зможе взаємодіяти з продуктом. Ці засоби можуть бути звуковими, фізичними (заснованими на тактильності), графічними, голосовими. У цій статті ми розглянемо тільки графічну частину інтерфейсу, так як більшість дизайнерських рішень в сфері IT засновані саме на цьому елементі. UI-дизайн графічного інтерфейсу зосереджений на роботі над шрифтами, ілюстраціями, слайдерами, меню, полями введення, анімацією, кнопками і фотографіями. Дизайн користувацького інтерфейсу – це процес створення візуального прототипу, розробка якого заснована на призначеному для користувача досвіді та аналізі цільової аудиторії продукту.
Головним обов'язком UI-дизайнера є допомога користувачеві максимально зручно і швидко показати і зрозуміти, як користуватися вашим програмним продуктом, будь то додаток, інструмент, web-сайт, гаджет або будь-який інший предмет, що нас оточує в звичайному житті. Для того, щоб цього досягти, дизайнер повинен дотримуватися таких правил:
Добре розроблений інтерфейс дуже сильно економить нерви і час користувача, направляє в потрібне місце з мінімальним вкладенням сил.
Інтерфейс розробленого проекту не повинен бути перевантажений різними підказками, анімацією, спливаючими вікнами. Це потрібно для того, щоб не заплутати і не перевантажити інформацією цільову аудиторію. Лаконічність зможе акцентувати увагу на конкретних аспектах продукту.
В інтерфейсі розробленого продукту не повинно бути двозначного тлумачення, а текстове і структурне наповнення повинно направляти юзера в потрібне місце.
Естетичний користувацький інтерфейс привертає безліч юзерів до вашого продукту і в ньому буде дуже приємно працювати. Одна з головних речей, яка повинна бути в кожному продукті.
Елементи інтерфейсу, такі як слайдери та меню, повинні мати однакову поведінку на будь-якій сторінці вашого продукту.
Інтерфейс повинен бути на інтуїтивному рівні впізнаваним, навіть якщо користувач вперше відвідує ваш сайт або програмний продукт. Як приклад, зазвичай на різних web-сайтах кнопку підтвердження зображують зеленою, тому не бажано її робити іншого кольору або замість вертикальної прокрутки сайту зробити горизонтальну прокрутку.
Грамотно розроблений інтерфейс взаємодіє з користувачем миттєво і так, щоб користувач розумів, що в даний момент відбувається на екрані: інформування про успішну оплату товару або платежу, оголошення про успішну відправку повідомлення і і т. ін. Анімації, іконки, поп-апи, текстове наповнення виступають функціональним рішенням даного аспекту розробки інтерфейсу.
Найчастіше буває таке, що користувач може зробити помилку. Тому вам як UI-дизайнеру необхідно продумати на подібні випадки спеціальні повідомлення, які турботливо і дбайливо пояснять, що сталося в даний момент. Це рішення значно допоможе зберегти нерви, час і гроші лояльного користувача в разі критичних ситуацій і збоїв.
Прикладом хорошого UX/UI-дизайну, який включає всі перераховані вище правила є сайт компанії ZARA HOME:
Так в чому ж полягає різниця? Можна сказати коротко – різниця між UI та UX полягає у відмінності завдань:
Для досягнення поставленої мети UI та UX потрібно використовувати разом, інакше високий ризик отримати непрацездатний інтерфейс. Тільки в разі спільного використання двох видів дизайну можна досягти ідеального співвідношення між гарним зовнішнім виглядом, зрозумілим функціоналом і зручністю сприйняття. Через це часто розробкою інтерфейсів займається один і той же чоловік і дана професія пишеться разом з даними термінами через «слеш».
І на закінчення можна сказати, що дизайн – це не тільки зовнішній вигляд предмета і відчуття від спостереження за ним. Дизайн – це те, як предмет працює. Необхідно пам'ятати, що UI однаковий для всіх, а UX для кожного користувача унікальний. Тому не має значення, скільки людина (один або кілька) займається їх розробкою і реалізацією, важливо забезпечити комфорт користувача та бажання повернутися до продукту знову і знову.
