10 золотих правил UI дизайну

Список надійних правил проектування, які слід дотримуватися. Коли ви сумніваєтеся, зверніться до цього списку стандартних прийомів UI дизайну, які потрібно дотримуватися. Жодне з них не висічено у камені – це просто список методів, які, я вважаю, можуть допомогти вам у повсякденному проектуванні інтерфейсів. Пам'ятайте, що дизайн зводиться до нестандартного мислення, а тому поставтеся до цих порад із часткою скептицизму.

1. Проектуйте для густини, а не для пікселів

[caption align="aligncenter" width="1730"] Значення пікселів у 3 або 4 рази більші за значення dp (незалежні від щільності екрану пікселі)[/caption] Якщо ви не знаєте, щільність – це кількість пікселів на один дюйм екрана або PPI . Одиниця виміру "dp" - це скорочення від виразу "незалежний від щільності екрану піксель", іноді можна зустріти скорочення "dip". Рекомендується проектувати інтерфейс не для пікселів, а для густини дисплея пристрою. Це забезпечує правильне масштабування елементів інтерфейсу для відповідності розмірів пристроїв. Причина, через яку ми це робимо, полягає в тому, що, якщо ми створимо актив кнопки, наприклад, з роздільною здатністю 200 x 50 dp, він відображатиметься 200 x 50 px на екрані 160 ppi та 400 x 100 пікселів на екрані 320 ppi ( вдвічі більше початкового розміру активу). Оскільки деякі екрани мають більше пікселів на дюйм, ніж інші, активи не відображаються в меншому розмірі на екранах з високою щільністю пікселів, вони просто відображаються в 2x, 3x, 4x масштабі від початкового розміру. Це гарантує, що всі активи зберігатимуть свої розміри на пристроях з різною щільністю дисплея. Наприклад, розміри екрана iPhone XS Max становлять 414 x 896.Але це не пікселі, а кількість крапок. У пікселях це 1242 x 2688 px. Враховуючи це, при проектуванні для iPhone XS Max я вибрав би розмір 414 x 896 пікселів, а потім масштабував активи в @ 3x.

2. Використовуйте крок 8dp

Навіщо проектувати із кроком 8? Ну, це є просте пояснення. Причина, за якою ми використовуємо магічне число 8, а не 5, полягає в тому, що якщо пристрій має роздільну здатність 1,5x, воно не буде правильно відображати непарне число. Крім того, переважна більшість сучасних розмірів екрану ділиться на 8, що спрощує належне вирівнювання ваших дизайнів на цих пристроях. Проектуючи з кроком 8 на сітці 8-pt, ваші дизайни будуть виглядати узгодженими. Більше не треба вгадувати інтервал, і все ідеально узгоджується з вказаними вами інтервалами. Якщо хочете докладніше дізнатися про цю тему, прочитайте цю статтю.

3. Заберіть лінії та рамки

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

4. Звертайте увагу на контраст

Використання контрасту не тільки привертає увагу користувача до відповідної інформації на сторінці, але також покращує доступність продукту. Проектування продукту схоже на будівництво громадського будинку, такого як бібліотека чи школа – воно має бути інклюзивним для всіх. У тому числі сліпих, дальтоніків і користувачів з вадами зору. Правила доступності веб-контенту (WCAG) вимагають контрастності щонайменше 4,5:1.Щоб переконатися, що ви відповідаєте цьому стандарту, завантажте Stark, який дозволить перевірити доступність ваших дизайнів.

5. Використовуйте знайомі користувачам стандарти

Існує безліч причин, через які певні елементи вважаються стандартними. Наприклад, якщо ви створите кнопку у вигляді кола і розмістите на ній текст "Start Free Trial", то він займе занадто багато вертикального простору. Крім того, в Інтернеті користувачі звикли чекати на знайомий їм досвід. Якщо ваш веб-сайт, програма або програмне забезпечення функціонують не так, як звикли користувачі, то вони не будуть інтуїтивно зрозумілими і, швидше за все, нададуть досвід, що розчаровує. З цієї причини найкраще виявляти творчий підхід лише у рамках існуючих норм дизайну. Не вигадуйте велосипед.

6. Використовуйте колірну вагу, щоб встановити ієрархію

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

7. Намагайтеся не використовувати більше двох шрифтів

Загальноприйнятою практикою проектування є обмеження кількості шрифтів, які у інтерфейсі. Як правило, двох різних гарнітур має бути достатньо. Це не означає, що ви не можете використовувати більше, але якщо у вас немає вагомих причин, краще цього не робити.Виходом може бути використання сімейства шрифтів. Використовуючи сімейство шрифтів, ми можемо використовувати той самий шрифт з різними варіаціями. Шрифти з однієї родини чудово поєднуються, тому що вони гнучкі та послідовні. При виборі шрифту знайдіть сімейства, які мають різні ваги (light, regular, medium, bold, extra bold, а також такі стилі, як стислий, розширений та курсив). Це дасть вам більше можливостей вивчення різних стилів без додавання додаткових шрифтів.

8. Впізнавати знайоме, а не намагатися згадати

Впізнавання - це хороша практика в продуктовому дизайні, тому що дозволяє користувачеві вкотре не замислюватися про свої дії. Сторінки оформлення замовлення, поштові скриньки, історія пошуку, кнопки «Назад» тощо є хорошими прикладами. На сторінці оформлення замовлення (якщо вона добре спроектована) я не маю пам'ятати, за які товари я плачу. Я маю можливість чітко визначити, які товари я купую, а не намагатися це згадати. У поштовій скриньці Gmail я з першого погляду можу визначити, які листи я вже прочитав, а які ні, зовсім не замислюючись про це. Або, якщо я зайду в свій обліковий запис на Amazon, я зможу швидко дізнатися, де зупинився, тому що він покаже мені товари, які я нещодавно переглядав. «Мінімізуйте навантаження на користувача, роблячи об'єкти, дії та параметри видимими. Користувач не повинен пам'ятати інформацію з однієї частини діалогу до іншої. Інструкції щодо використання системи повинні бути видимими або легко доступними за необхідності» — Nielson Norman Group

9. Не сповільнюйте мене

Повний посібник із правильного використання анімації в UX Для користувача швидкість та ефективність – єдине, що має значення.Я використовую програму, щоб виконати конкретну роботу, яку потрібно зробити.

Якщо досвід внесення чека на мій банківський рахунок у цифровій формі приємний, це здорово, але не дозволяйте вашій креативності заважати цілі користувача. Хороше емпіричне правило, що стосується в основному анімацій та мікровзаємодій, полягає в тому, що якщо щось додає непотрібний час, то це не покращує досвід. Акуратне використання анімації може покращити досвід, але додавання непотрібних відволікаючих факторів та руху до елементів – ні. Я часто бачу на Dribbble дизайни цільових сторінок, які анімуються, коли користувач прокручує сторінку. Вони часто надмірно анімовані – все зникає та рухається, при цьому мало уваги приділяється самому досвіду. Користувачеві може бути складно зрозуміти, на що слід звернути увагу, коли на екрані відбувається стільки всього. Це також витрачає його дорогоцінний час. Численні дослідження показали, що оптимальна швидкість анімації інтерфейсу становить від 200 до 500 мс. Ці цифри ґрунтуються на конкретних якостях людського мозку. Будь-яка анімація коротша за 100 мс є миттєвою і не розпізнається взагалі. Тим часом, анімація тривалістю більше 1 секунди викликає відчуття затримки і, отже, буде нудною для користувача» — Посібник з правильного використання анімації в UX Якщо ви використовуєте анімацію – робіть це з розумом. І, якщо ці анімації важливі, не змушуйте на мене чекати більше 500 мс. У 2019 році достатньо лише мілісекунди, щоб викликати роздратування у своїх користувачів.

10. Менше означає більше

[caption align="aligncenter" width="1920"] Дайте знати, якщо захочете інвестувати в цю революційну ідею[/caption] Щоразу, коли ми додаємо на сторінку додаткову інформацію: кнопки, текст, зображення, анімацію, ілюстрації тощо. д., вона конкурує з релевантною інформацією. Якщо на сторінці занадто багато елементів, їхня важливість зменшується. Чудовим прикладом цього є відома домашня сторінка Google. Замість того, щоб завантажувати відвідувача непотрібною інформацією, дизайн, як і раніше, зосереджений на основній дії – пошуку. [caption align="aligncenter" width="1682"] Вибач Yahoo, я повинен був це зробити[/caption] Одна з моїх улюблених цитат: «Досконалість досягнута не тоді, коли нічого додати, а коли нічого прибрати». - Антуан де Сент-Екзюпері Дякую за прочитання! Підписуйтесь на автора на Dribbble та Medium.Пишіть йому у LinkedIn. Переклад статті uxdesign.cc

4 правила для відмінного UI

У цій статті ми визначимо, що таке дизайн інтерфейсу користувача, складові хорошого UI і чотири правила, які допоможуть вам його створити.

Згадайте один із найкращих сайтів, на який ви нещодавно заходили. А тепер подумайте, чим він вас вразив. Малоймовірно, що ви згадаєте про красиві зображення, які він містив (хоча вони й важливі), або про інформативний текст, який ви там прочитали (і це також важливо). Але швидше за все, сайт справив на вас враження, тому що вам вдалося зробити щось швидко, ефективно та якісно. Один з ключових підходів до досягнення цієї мети відомий як дизайн інтерфейсу користувача (або скорочено UI-дизайн).

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

1. Що таке дизайн інтерфейсу користувача?

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

Найбільш поширені форми UI-дизайну:

• Графічні інтерфейси - це візуальне оформлення кнопок, меню або панелей управління, по суті, всього, з чим взаємодіє користувач. Прикладом може бути робочий стіл вашого комп'ютера або інтерфейс мобільного телефону.
• Інтерфейси з голосовим керуванням — це, як випливає з назви, інтерфейси, у яких ініціювання дії потрібен голос. Останнім часом вони стають все більш популярними. Як приклад можна навести Siri від Apple, Alexa від Amazon або Bixby від Google.
• Інтерфейси на основі жестів — це інтерфейси, у яких жести користувача впливають дії.Прикладом можуть бути ігри віртуальної реальності.

Кожна з цих форм накладає на дизайнера свій набір обмежень, і кожна з них має бути ретельно вивчена, щоб користувачі могли отримати максимально комфортний досвід взаємодії.

2. Що таке гарний UI-дизайн?

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

Насправді визначити хороший інтерфейс відносно просто. Ось деякі з характеристик, які слід мати на увазі:

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

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

3. Важливі правила гарного UI-дизайну

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

1. Гарний UI-дизайн одноманітний на всьому сайті.

Можливо, найважливішим елементом відмінного дизайну інтерфейсу користувача є послідовність. В ідеалі кожен елемент вашого сайту повинен точно вказувати користувачам, де саме вони знаходяться. При цьому сам дизайн не повинен заважати вивчати сайт. Це означає, що одним із перших ваших кроків у створенні якісного веб-сайту має стати розробка фірмових рекомендацій за текстами та колірними схемами. Єдина палітра кольорів вашого бренду в UI-дизайні не буде плутати користувача. Так, він точно знатиме, що, як і раніше, знаходиться на вашому сайті.

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

Кнопки із закликом до дії «Подати заявку» та «Почати роботу» виглядають однаково з різним текстом. Це дозволяє користувачеві зрозуміти, що обидві кнопки виконують те саме завдання. Автор Masiko

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

2. Гарний UI-дизайн позбавляє користувача зайвої роботи

Веб-сайти з відмінним UI-дизайном полегшують користувачеві виконання складних завдань. Цього можна досягти, максимально позбавивши його зайвої роботи. Наприклад, полегшити читання тексту або структурувати контент та сторінки для досягнення максимальної ефективності. Щоб розпочати роботу зі зниження навантаження на користувача, розглянемо такі прийоми:

Візуальна чіткість

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

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

Баланс тексту та зображень

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

‍Спрощений процес роботи

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

4. Гарний UI-дизайн дає користувачам можливість контролювати ситуацію

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

Існує кілька способів досягти цього, і ось найбільш часто зустрічаються з них:

• Увімкніть якесь головне меню або прив'язку з посиланнями на сторінки, що часто використовуються, щоб вони допомогли користувачам легко переміщатися по вашому сайту.
• Зробіть так, щоб відвідувачі сайту могли легко повернутись на сторінку, яку вони вже відвідували. Це не тільки спростить процес роботи з сайтом та його вивчення, а й дозволить їм контролювати свою подорож.
• Надайте підтвердження або іншу форму зворотного зв'язку, коли користувач завершив певну дію. Або повідомите йому про результат сукупності його дій. Наприклад, створюючи пароль, відразу ж давайте зрозуміти, чи відповідають символи, що вводяться, вимогам чи ні.

• Показуйте оновлення стану системи в режимі реального часу, щоб запобігти подразненню користувачів (тобто коли запит в інтерфейсі завершено, користувачі могли б бачити оновлення статусу у вигляді лінійного індикатора виконання, який рухається через обробку, доставку, скачування) і т. д.).
• Забезпечте візуальні та текстові позначки. Дайте зрозуміти, яка вкладка призначена для якоїсь дії, використовуючи знайомі символи або точні підписи.
• Увімкніть автозбереження, щоб користувачі не втратили свою попередню роботу при помилковому натисканні неправильної кнопки.
• Якщо трохи розширити попередній пункт, необхідно зазначити, що повідомлення про помилки повинні бути грамотно складені, щоб не викликати розчарування. Вони повинні містити посилання на сторінки, які можуть бути корисні для вирішення проблеми, наприклад, посилання для скидання пароля.

5. Гарний UI-дизайн забезпечує комфорт користувачам

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

Уникати жаргону

Не використовуйте лексику, яку користувачі можуть не зрозуміти. Завжди думайте про свою цільову аудиторію та вживайте ті терміни та слова, які вона знає та використовує. Наприклад, люди, які працюють у сфері виробництва одягу, можуть називати пропозицію "два за ціною одного" терміном BOGO (від англ. Buy One Get One - Купи Один Отримай Два). Однак, якщо ви розмістите на сайті фразу "BOGO безкоштовно" для просування цієї пропозиції, вона не матиме сенсу для більшості відвідувачів. Крім того, це може заплутати та відлякати клієнтів від вашого сайту.

Інклюзивність

Пам'ятайте, що користувачі вашого сайту можуть мати різні особливості, такі, як слабкий зір, порушення слуху, когнітивні або рухові недоліки. Переконавшись, що ваш сайт може обслуговувати різноманітні групи населення, ви можете охопити всіх. Пам'ятайте про це при розробці інтерфейсу користувача.

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

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

6. Використовуйте підказки, які вже знають користувачі

Коли ви застосовуєте візуальні підказки з фізичного світу в цифровому, користувач знає їх значення. Просто погляньте на свій комп'ютер, і ви побачите іконку папки, схожу на справжню папку, та кошик для сміття, призначений для “викинутих” файлів та документів. Люди вже розуміють функцію папки та кошики і використовуватимуть їх аналогічно в цифровому просторі.

Інший приклад: багато користувачів знають, що для виходу з екрану їм потрібно натиснути на "x" у правому верхньому кутку (або лівому, якщо ви користувач ПК). І чого ще не вистачало, так це розробити спливаюче вікно або сторінку, де ця функція знаходилася б у нижній частині екрану. Це, безсумнівно, призвело б користувачів до збентеження і згодом до розчарування.

Бачите, як кнопка "Пропустити" знаходиться там, де має бути кнопка виходу "X"? Це повідомляє користувачеві, що функція виходу знаходиться там, де він на неї чекає. Автор Brendox

7. Останнє слово про дизайн інтерфейсу користувача

Зрештою, ціль гарного UI-дизайну — зробити навігацію по сайту або додатку легкою та приємною для користувачів. Це спонукає відвідувачів вивчати ваш продукт чи послугу без відчуття, що це надто складно чи що на них чекають невдачі.

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

UI-дизайн

У конструкторі Unisender живе вмілий AI асистент.
Він допоможе придумати тему та текст листа,
намалює відповідні картинки і дасть поради,
як покращити розсилку.

UI-дизайн (Від англ. user interface design, дизайн інтерфейсу користувача) - це створення візуальної частини програми або сайту: екранів, кнопок, іконок. UI-дизайнер стежить, щоб продукт виглядав красиво та однаково.

UI-дизайнер вигадує, як виглядатимуть іконки та кнопки, які кольори та шрифти будуть використані у додатку

UI-дизайн змінюється за тенденціями. Наприклад, у 2012 році в моді були об'ємні іконки, у 2017 році вони стали простішими, у 2022-му — дизайн зовсім плоский.

Для чого потрібний UI-дизайн

Дизайн визначає перше враження користувача продукту на 94%. Такого висновку дійшли дослідники з Австрії.

46,1% користувачів вирішують, чи можна довіряти сайту, виходячи з його дизайну, виявили вчені зі Стенфорда.

59% користувачів виберуть контент із гарним дизайном, а не контент із мінімальним оформленням. Це результати дослідження компанії Adobe.

Користувач розуміє, чи йому дизайн сайту, за 5 мілісекунд, з'ясували в канадському дослідженні.

54% користувачів очікують, що контент виглядатиме красиво, також виявили в Adobe.

Тобто для цифрового продукту зовнішній вигляд важливий не менше, ніж зміст. Зараз користувачі очікують, що програми та сайти будуть виглядати красиво.

Особливо важливий UI-дизайн для залучення нових клієнтів, які нічого не знають про компанію чи продукт. Наприклад, людина шукає ветеринарну клініку, щоб обстежити свого вихованця. Пошук надасть йому десятки сайтів, серед яких треба вибрати один. Дизайн стає першим фільтром: сайт застарілий чи незручний – йду на наступний.

Легко припустити, на сайті якої клініки користувач затримається довше

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

Відмінності UI від UX

User experience (UX), або досвід користувача, — ширше поняття. UX включає всі враження від роботи з сайтом або програмою: наскільки все було зручно і зрозуміло, чи швидко вантажилися сторінки, чи відчув користувач, що про нього подбали.

UI - одна з важливих складових UX: зовнішній вигляд сайту або програми впливає на те, які враження отримає користувач.

Більше того, зовнішній вигляд інтерфейсу може навіть спотворювати враження про юзабіліті – зручність використання.Японські дослідники Масаакі Куросу та Каорі Кашимура з'ясували це в результаті експерименту. Вони сконструювали 26 інтерфейсів банкомату та просили учасників експерименту сказати, які з них здаються більш простими для використання. Більш високу оцінку завжди отримували інтерфейси, які виглядають гармонійніше, навіть якщо вони насправді не були сконструйовані з урахуванням принципів юзабіліті.

Приклади інтерфейсів з експерименту Куросу та Кашимура: зручний, але негарний; зручний та красивий; незручний та некрасивий; незручний, але гарний. Четвертий інтерфейс здається зручнішим, ніж перший, хоча насправді він менш зручний

Насправді поділ на UX, UI та юзабіліті досить умовний — часто вони пов'язані настільки тісно, ​​що не можна провести чітку грань. Тому й усіма аспектами дизайну в компанії найчастіше займається одна людина – UX/UI-дизайнер або дизайнер інтерфейсів.

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

Етапи розробки UI

Хороший інтерфейс непомітний: він просто допомагає отримати потрібний результат від сайту чи програми. А якщо постаратися проаналізувати його, здається очевидним, що кнопки повинні розташовуватися так, а кольори повинні бути такими. Це ж природно.

Насправді якщо інтерфейс справляє таке враження, значить, над ним добре попрацювали. Ось як це зазвичай відбувається. Все починається з UX – збору інформації, тестування гіпотез та створення прототипу.

Створення прототипу (UX). Спочатку потрібно зрозуміти, як сайт або програма буде влаштована зсередини: які у нього будуть екрани, як вони будуть пов'язані між собою.Це каркас продукту. Кольори, шрифти, ілюстрації з'являться пізніше.

На цьому етапі основна увага приділяється UX та юзабіліті, тому що графічної частини інтерфейсу ще немає. Дизайнер створює низькодеталізований прототип інтерфейсу - такі нариси ще називають вайрфреймами (від wireframe, дротяний каркас).

У вайрфреймах картинки позначені прямокутниками, текст - смужками, тому що на даному етапі важливіше важливо зрозуміти, як вони будуть розташовані

Далі переходять до опрацювання візуалу (UI).

Створення візуальної концепції (UI) складається з кількох етапів:

• Складання мудбордів. Можна брати референси як продукту загалом так кожної його частини, поступово заповнюючи весь прототип прикладами методом прогресивного джипега.
• Підготовка загальної концепції, начерки основної стилістики, робота з дизайном "широкими мазками".
• Детальна промальовування дизайну та всіх елементів інтерфейсу. На цьому етапі створюється мокап. Англійський термін mockup можна перекласти як "макет у натуральну величину". Його використовують, тому що дизайнер створює мокап не просто на аркуші фотошопу, а всередині реального інтерфейсу телефону або браузера, з урахуванням пропорцій.

Часто дизайнер готує одразу кілька мокапів для різних пристроїв.

• Підготовка інтерактивного прототипу. По суті це клікабельний мокап: можна натискати кнопки, і будуть відкриватися відповідні екрани. Такий макет допомагає оцінити інтерфейс без витрат на його розробку.

Прототип виглядає як справжня програма, але працює всередині графічного редактора, наприклад Figma

Якщо продукт великий і складний, інтерактивний прототип краще робити вже на етапі підготовки вайрфреймів. Це важливо, тому що для тестування гіпотез часто потрібно вже на початку роботи перевіряти переходи, кліки та логіку шляху користувача.