• English
  • Русский
  • Українська
 

UX/UI – что это? Разбираемся в терминах

UX/UI – что это? Разбираемся в терминах

UX/UI – что это? Разбираемся в терминах

Веб-дизайн постійно розвивається, а UX / UI-одна із ступенів цього розвитку. Сергій Попков, шеф-дизайнер AIC, пояснив, що це таке, і назвав головні тренди, які визначають сучасний дизайн.

Дизайн: початок

Подивимося на історію розвитку дизайну – як перші експерименти і спроби стандартизації призвели до виникнення UX/UI.

періодознаки періодуяк виглядали сайтищо з’явилося
початок 90-хнайпростіші інструменти і технології.Текст однією колонкою, HTML, внутрішні посилання; просте меню, сині посилання.Веб-сайти, Mosaic. Перші стандарти.
Середина 90-хЗ’явилася примітивна верстка;
Оптимізація сторінок під повільний інтернет;
Текст в кілька колонок;
Таблиця;
Відділення тіла сайту від бічної навігації;
Система навігації.
Фреймовий метод, безкоштовні конструктори сайтів-Angelfire, GeoCities і Expages.
кінець 90-хFlash і графічні елементи.Плиткові зображення;
Кислотні кольори;
3D-кнопки;
Миготливий текст.
Flash, анімований текст, GIF, Професія веб-дизайнера.
ранні 2000-тірозширилися можливості верстки;
Інтуїтивне розміщення контенту;
Зрозуміла навігація.
сайти на CSS-технології, яка відокремила контент веб-сторінок від дизайну.Каскадні таблиці стилів (CSS), принципи юзабіліті.
пізні 2000-тіперехід від “просто дизайну” до UX / UI; зростання кількості сайтів і додатків;
Цифровізація бізнесу.
WEB 2.0;
Широке використання значків / іконок;
Інтерактивний контент.
мультимедійні програми, пошукові системи, соціальні мережі, HTML5, UX/UI.

В кінці 2000-х з’явилися UX / UI, ключовими якостями будь-якого продукту стали зручність і функціональність.

Наші дні

Тепер в дизайні використовуються Data Driven Design і UX / UI.

Data Driven Design – це дизайн на основі даних: досліджень, тестів, гіпотез, Big Data. У DDD кожне дизайнерське рішення грунтується на цифрах і конкретних показниках, а не на суб’єктивному висновку дизайнера.

DDD критикують за перегини «» машинний ” підхід до розробки продукту. Є ризик потонути в аналітиці і втратити з уваги сміливі ідеї.

UX і UI – головні інструменти створення дизайну. Так як тепер на поліпшення користувацького досвіду направлено всю увагу дизайнера, продукт треба робити максимально зручним і зрозумілим для користувача. Саме UX / UI найкраще підходять для досягнення цієї мети. З їх допомогою сайт можна зробити красивим і зручним з чіткою структурою.

UX / UI – що це?

UX і UI-терміни споріднені і взаємопов’язані, але не тотожні. Між ними є принципова різниця.

UX-user experience, користувальницький досвідUI-user interface, інтерфейс користувача
Сайт проектується на основі потреб користувачів і результатів тестувань.
UX не обмежується тільки візуальним інтерфейсом сайту, він охоплює всі можливі нюанси спілкування з користувачем:

  • Шлях на сайті
  • Послідовність дій
  • Думки і почуття
  • Загальні враження.
Взаємодія людини з сайтом.
Дизайн інтерфейсу користувача (UI) – це дизайн кнопок, полів введення, форм заявки-всіх точок взаємодії користувача з сайтом.

UX-це процес, а UI-це інструмент. UX ширше UI і включає в себе це поняття. Але у них одна мета-зробити взаємодію користувача з сайтом зручним, приємним і незабутнім. Приклад хорошого UX-Google, у нього простий інтерфейс і немає нічого зайвого: тільки логотип, рядок пошуку і кілька кнопок.

Вводите що-небудь в поле пошуку і за секунду отримуєте потрібну інформацію. Це і є позитивний користувальницький досвід.

UX / UI в цифрах

  • 40% користувачів зізналися, що не будуть користуватися сайтом, якщо у нього неохайний вигляд.
  • 94% відвідувачів не довіряють сайтам з поганим дизайном.
  • 67% споживачів вважають за краще купувати з телефону.
  • 73% топ-менеджерів заявили, що збираються збільшити кількість UX-дизайнерів у своїй організації в найближчі п’ять років.
  • Середня зарплата UX-дизайнера в Москві становить 91 570 рублів на місяць.

Добре, коли UX допомагає створити візуальну історію, яка веде користувача за собою. Таке візуальне оповідання зі вступом, основною частиною і висновком зробила компанія Upstream на головній сторінці сайту.

Користувачі можуть прокручувати сайт до основної частини історії, але коротко всі три частини представлені в першому екрані. Візуальні ефекти і текст розповідають, навіщо допомагати людям і компанії Upstream. Завершується розповідь call-to-action-кнопкою Submit. UX тут веде користувача з історії і підводить до логічної дії: просить приєднатися до програми.

Інструмент

В юзабіліті однаково важливі і UX, і UI, які використовують широкий арсенал  інструмент для досягнення потрібного результату.

UXUI
Аналітика та дослідження користувачів:

  • Персонаж
  • Сценарії використання продукту
  • Customer Journey Map
  • Карта Емпатії
  • А / B-тестування

Прототипування:

  • На папері
  • У спеціальних програмах-Axure Pro, WireframeSketcher, SketchFlow
  • У графічних програмах-Photoshop, Illustrator, InDesign
Інтерфейс сайту і його складові:

  • Кнопка
  • Іконка
  • Поп-апи
  • Таблиця
  • Чекбокси
  • Меню
  • Попередження (Алерти)
  • Ярлики і лейбли
  • Форми з полями введення
  • Повідомлення
  • Перемикач
  • Галерея
  • Підказка
  • Пагінація
  • Вкладки і хлібні крихти
  • Прогрес-бари

В UX все визначають аналітика і прототипи, а в UI – базові правила юзабіліті і UX. У аналітиці та зборі даних UX подібний до DDD.

Тренд

Захоплення UX / UI породило кілька трендів, які впливають і на дизайн, і на дизайнерів:

Спрощення візуальної частини інтерфейсів. Дизайнеру тепер не потрібно витрачати час на отрисовку рельєфною кнопки і пошук добре зчитуваних образів. Сучасний користувач без праці розуміє умовні позначення. Вже не потрібно пояснювати, що кольоровий прямокутник-це кнопка, а три горизонтальні смужки-меню.

Ускладнення самого дизайну як дисципліни. Інтерфейси спростилися, але сам дизайн став складніше і багатошаровіше. Зараз сайти являють собою комплексні системи з безліччю різних елементів: формами заявки, особистим кабінетом, підписками та онлайн-консультантами. Потрібно чітко продумувати шлях користувача на сайті, щоб він не заблукав, швидко знаходив потрібні розділи, а в ідеалі – здійснював цільові дії.

gif

Приклад хорошого UX. Картинка показує, які дані потрібно ввести і як це буде виглядати. Вводите дані, натискаєте на єдину кнопку і переходите до наступного кроку.

 

Поява професії UX / UI дизайнера. Ринок наповнили різномасті вузькі фахівці з приставкою UX / UI. Крутий UX / UI-дизайнер бачить всі сторони процесу і вміє добре робити і аналітику, і дизайн. Але в реальності кожен, хто чув про ці терміни і хоч трохи мав справу з сайтами, прагне обізвати себе UX/UI.

Поява безлічі спеціалізованих інструментів для веб-дизайну: Sketch, Figma, Readymag, Framer та інші. Це полегшило і прискорило роботу дизайнерам.

figma collaboration

Figma в дії

Висновок

Веб-дизайн пройшов довгий шлях становлення і розвитку, і в підсумку переродився в UX/UI. Зараз це єдина форма існування сайтів, основні принципи якої-опора на потреби користувачів і юзабіліті.

З появою UX / UI робота дизайнера не стала легше. Спростилася тільки зовнішня сторона. Всередині ж все набагато складніше. UX / UI ввели ряд стандартів і методик, які можна і потрібно брати на озброєння при роботі над проектами.

Тепер недостатньо просто працювати в фотошопі і вміти малювати макети. Сильний дизайнер розуміє запити людей і робить доброзичливі інтерфейси.