Незначні правила UI-дизайну, що мають значний вплив на конверсію

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

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

Що таке UI-дизайн та чому він важливий для вашого сайту

Ви могли чути про UI-дизайн у зв’язці з UX — зазвичай ці два терміни йдуть пліч-о-пліч. Як розшифровуються ці абревіатури та чим вони відрізняються між собою? Зараз розберемося.

Якщо коротко, UX-дизайн (User Experience, у перекладі — «користувацький досвід») відповідає за те, як інтерфейс сайту працює. А UI-дизайн (User Interface — «інтерфейс користувача») відповідає за те, як він виглядає. UI-дизайнер визначає вигляд зображень, іконок та шрифтів, яким буде розташування елементів на сторінці, наскільки гармонійно все виглядатиме разом у підсумку.

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

Відмінності між UX та UI

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

До завдань UX-дизайнера входить:

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

А чим займається UI-дизайнер? Він відповідає за те, як попередній макет виглядатиме у результаті і яку асоціацію викликає у користувача. Його завдання — створити інтерфейс, який виділятиметься на тлі конкурентів та викличе «вау-ефект». Для досягнення цієї мети використовуються різні кольори, типографіки, інфографіки, анімації та інші інструменти.

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

Як проробляти візуал сайту: чотири етапи

Працюючи над проектом, UI-дизайнер виконує кілька ключових дій:

1. Складання мудбордів. Спочатку підбираються референси як для продукту в цілому, так і для кожної його складової. Внаслідок цього кроку у вас має зібратися достатньо прикладів майбутньої роботи, які допоможуть втілити ідеї у життя.
2. Створення мокапа. Мокап — це тривимірна модель проекту, за допомогою якої можна продемонструвати майбутній дизайн. Тут вам необхідно ретельно промалювати всі елементи майбутнього дизайну, причому зробити це всередині реального інтерфейсу смартфону чи браузера, враховуючи пропорції та відмінності між різними пристроями.
3. Інтерактивний прототип. Це мокап нового рівня — а саме його клікабельна версія, в якій натискання кнопок відкриває відповідні екрани. Таким чином, можна оцінити інтерфейс ще до того, як він буде готовий.

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

Які існують стандарти UI?

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

Оптичний баланс

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

• великі та важкі елементи візуально «вагоміше» і можуть привертати більше уваги;
• яскраві кольори та контрастні комбінації варто використовувати, щоб виділити важливі елементи інтерфейсу;
• правильне вирівнювання елементів в інтерфейсі допомагає створити чистий та впорядкований вигляд; для цього дизайнери використовують сітку;
• дотримуйтесь пропорцій між елементами інтерфейсу, щоб уникнути спотворень і зберегти загальну гармонію;
• розділіть інтерфейс на логічні блоки за допомогою відступів, ліній чи контрастних елементів, щоб спростити сприйняття та навігацію користувача;
• використовуйте негативний простір (порожні області), щоб створити візуальну рівновагу та спрямувати погляд користувача на необхідні елементи.

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

Текст

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

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

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

Поки ви не визначилися із загальною картиною дизайну, не варто вибирати надто виразні та химерні шрифти. Також пам’ятайте про золоте правило гарного дизайну: використовуйте не більше двох типів шрифтів у рамках одного проекту. Якщо ви хочете урізноманітнити тексти, можна залишитися в межах однієї шрифтової родини (наприклад, Alegreya та Alegreya Sans SC) та експериментувати з жирністю та курсивом.

Колір

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

1. Монохроматичні палітри. «Родина» з одного основного кольору, вибрані шляхом зміни його відтінків, яскравості та насиченості. Підходять для створення спокійної, гармонійної атмосфери та ідеально вписуються в мінімалістичний дизайн.
2. Аналогові панелі. Засновані на кольорах, які є сусідами один з одним на кольоровому колі. Створюють гармонійні та приємні погляду комбінації, що використовуються для передачі атмосфери спокою та балансу.
3. Комплементарні палітри. Засновані на парах вілтінків, що розташовані навпроти один одного на кольоровому колі. Створюють контрастні та динамічні поєднання, часто використовуються для привернення уваги до певних елементів на сторінці та загальної картини загалом.
4. Прямокутні (квадратні) палітри. Чотири кольори, що розташовані на рівних відстанях один від одного на кольоровому колі. Дозволяють створювати складніші, але більш оригінальні комбінації.
5. Триадичні палітри. Три рівномірно розподілені на колірному колі відтінки. З такою палітрою виходять яскраві та живі поєднання відтінків, вони використовуються для створення енергійних та динамічних дизайнів.

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

Найпростіше розпочати з підбору трьох кольорів у рамках обраної палітри: основний колір, вторинний та акцентний. Використовуйте правило 60/30/10, щоб застосувати ці кольори по дизайну вашого сайту: 60% площі для основного кольору, 30% для вторинного, і 10% для акцентного. Перші два кольори можна використовувати для блоків, тексту та зображень, а третій — для CTA, плашок, кнопок та інших невеликих елементів.

Зручність для користувача

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

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

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

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

9 правил UI-дизайну, про які ви могли не знати

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

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

Уважне використання кольорів

Як кожен елемент сайту повинен виконувати певну функцію, кожен відтінок теж потрібно використовувати не просто так. Якщо у вас з’являється бажання додати якийсь колір у декоративних цілях — не варто цього робити. Краще обмежитися базовою гамою та стандартними відтінками.

Додаткові кольори можуть плутати користувача, оскільки багато відтінків на підсвідомому рівні асоціюються з певним функціоналом. Так, наприклад, синій елемент викликає бажання натиснути на нього (таким кольором зазвичай забарвлені посилання). Оформивши заголовок чорним кольором замість синього, ви нічого не втратите. І навіть навпаки: мінімізуєте кількість випадків, в яких користувач буде збентежений.

Контрастні елементи інтерфейсу та текст

Класичні правила дизайну передбачають роботу з параметрами зображень. Контраст — це різниця в характеристиках різних кольорів одного зображення. Цей параметр виражається у вигляді коефіцієнту від 1:1 до 21:1. Що більша відмінність між кольорами, то він вищий: наприклад, білий текст на білому тлі має контрастність 1:1 (найнижчий показник), тоді як білий текст на чорному тлі матиме коефіцієнт 21:1 (найвищий). Виміряти та змінити контрастність різних кольорів можна за допомогою сотень зручних онлайн-інструментів.

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

Основні правила дизайну сайту свідчать про те, що UI-елементи (поля форм та кнопки) повинні мати контрастність не менше 3:1. В іншому випадку деяким користувачам буде складно розпізнати елементи та скористатися ними, а значить і загальне враження від сайту та продукту буде зіпсоване.

Текст також має свої рекомендовані стандартні контрастності:

• для дрібного тексту (18px та менше) параметр повинен становити мінімум 4.5:1;
• для великого тексту (більше 18px із жирним накресленням або більше 24px із звичайним накресленням) – не менше 3:1.

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

Шрифти без зарубок з високими літерами

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

Ось кілька прикладів таких шрифтів:

• Open Sans
• Roboto
• Lato
• Montserrat
• Source Sans Pro
• Helvetica
• Proxima Nova
• Futura
• Avenir

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

Групування пов’язаних елементів

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

Декілька способів групування UI-елементів, які можна використовувати:

1. Просторовий поділ. Внутрішні проміжки між елементами потрібно зробити менше зовнішніх. Наприклад, кнопки, які відносяться до однієї і тієї ж функції, можна розташувати поруч.
2. Використання контейнерів. Елементи можуть бути розміщені всередині блоків, панелей чи карток. Це допомагає створити наочний візуальний поділ — одразу видно, що до чого.
3. Угруповання за кольором та стилем. Об’єднуємо елементи групи на основі їх кольору, стилю чи інших візуальних схожостей. Наприклад, усі заголовки на сторінці можуть бути одного відтінку, а посилання — іншого.
4. Логічне угруповання. Елементи можуть бути об’єднані на основі їхньої функціональності або відносин один з одним. Наприклад, все що стосується оформлення замовлення на сайті інтернет-магазину можна згрупувати (онлайн-форма, кнопка оформлення замовлення, вибір кольору та інших параметрів).

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

Менше Caps Lock

Використання великих літер у дизайні інтерфейсу веб-сайтів та програм краще уникати. По-перше, ТАКИЙ ТЕКСТ банально важче читати. Інтерфейс відразу стає більш заплутаним для користувача та втомлює його. По-друге, Caps Lock часто сприймається як крик чи грубий вираз. Ми автоматично читаємо текст із великими літерами з яскраво зафарбованою інтонацією. Це може збивати та створювати непотрібні асоціації, особливо у сфері продажів.

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

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

Уникнення чистого чорного та білого кольорів

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

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

Замість чистого чорного та білого кольорів краще використовувати відтінки на пару відтінків світліше або темніше – наприклад, темно-сірий та світло-молочний. Користувач практично не помітить різниці в кольорах, але це вплине на читабельність тексту або візуальну привабливість дизайну.

Послідовність у найдрібніших деталях

Коли елементи інтерфейсу виглядають і поводяться однаково, це створює чітку та передбачувану систему для користувачів. Ось які аспекти обов’язково варто врахувати:

1. Єдиний стиль оформлення. Усі елементи інтерфейсу (кнопки, поля введення, заголовки тощо) повинні мати однаковий стиль — узгоджені кольори, шрифти, відступи та інші візуальні атрибути.
2. Послідовне розташування елементів. Наприклад, якщо кнопка «вхід» знаходиться у верхньому правому кутку на одній сторінці, вона має бути в тому самому місці і на інших.
3. Загальноприйняті іконки та символи. Використовуйте однозначні та зрозумілі елементи в інтерфейсі. Також слідкуйте за тим, щоб вони мали однакову візуальну вагу. Якщо із заливкою — то всі разом, а не вроздріб. Найкращий варіант — лінійні іконки з товщиною обведення 2pt і округленими кутами.
4. Єдина логіка взаємодії. Користувацька логіка має бути послідовною. Наприклад, якщо на одній сторінці для зміни мови використовується список, що випадає, то на інших сторінках цей механізм повинен бути таким же.

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

Вирівнювання тексту з лівого краю

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

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

Висота рядків від 1,5 до 2

Висота — вертикальна відстань між двома рядками тексту. Оптимально підібраний простір між ними робить сприйняття всього тексту більш комфортним, а його зовнішній вигляд — більш привабливим. Веб-дизайнери зазвичай налаштовують висоту рядка на параметр від 1,5 до 2 — це оптимальний показник, з яким текст найкраще сприймається оком.

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