7 простих способів значно покращити інтерфейс користувача
Правильно побудована візуальна частина інтерфейсу може творити чудеса. У цій статті ви знайдете сім способів створити ефективний і привабливий інтерфейс, який ви зможете застосувати на практиці у власних проектах.
1. Не захаращуйте інтерфейс
У 1950-х роках британський психолог Вільям Едмунд Хік довів експериментальним шляхом, що час, за який людина приймає рішення, обернено пропорційно залежить від кількості варіантів вибору. Чим більше елементів на екрані, тим довше людина вибирає необхідну йому.
Якщо ви надасте занадто багато варіантів, користувачі можуть впасти у ступор.
Складність у тому, що користувачі хочуть, щоб вони мали вибір, тільки не дуже великий. Застосовуйте правило Хіка, працюючи над інтерфейсом, щоб досягти ідеального балансу, надаючи користувачам свободу вибору, але не перевантажуючи їх.
Наприклад, подивіться Амазон. На домашній сторінці є лише кілька навігаційних кнопок зверху, решта заповнена привабливими картинками, які пропонують деякі товари.
Зверніть увагу на те, як меню, що випадає, дозволяє зробити інтерфейс лаконічніше, не позбавляючи його функціональності. Якби всі елементи меню були б видимими, користувач відчував би себе перевантаженим і розгубленим.
Ховаючи другорядні елементи контролю, ви не тільки спрощує сайт, але й робите інтерфейс привабливішим.
2. Використовуйте правильні поля
Поле, що має на увазі дію, може стати найкращим другом дизайнера, якщо ви знаєте, як ним користуватися.
Можна розділити поля на 5 типів:
1. Явні - очевидні підказки, наприклад, слова або картинки, що показують дії. Найчастіше застосовуються заклики до дії.
3. Приховані - підказки, які спливають у певних моментах - меню, що випадає, іконки, що спливають при наведенні на них мишкою.
4. Метафоричні - часто поєднуються з іншими типами підказок. Це може бути зображення, яке пропонує певну функцію за допомогою метафори. Іконка з ручкою, наприклад, означає, що ви можете ввести текст.
5. Негативні – підказки, які показують, що функція недоступна.
Підказки можуть зробити ваш інтерфейс більш інтуїтивним і простим. Вони можуть стати потужним інструментом оптимізації дизайну та створити більш естетичний вигляд.
Підказки допомагають зменшити завантаженість сайту. Знайомі людям символи не вимагають пояснень, і їх можна мінімізувати та прибрати убік.
3. Знайте, які кольори вам підійдуть більше
Чому попереджувальні знаки зазвичай оформлені у червоному кольорі? Колірні гами підбираються не так.
Кожен колір особливо впливає на людину. Звичайно, різні відтінки можуть мати різний ефект, але вплив основних кольорів залишається незмінним:
Червоний – попереджувальний, сильний, пристрасний – стимулює потік крові, коли людина дивиться на цей колір.
Помаранчевий - грайливість, дружелюбність, доступність - менш стимулюючий, ніж червоний, але все ще дуже енергійний.
Жовтий - щастя, хвилювання, енергія - теж часто використовується для попереджувальних знаків, тому що привертає увагу.
Зелений - зростання, баланс, багатство - уособлює гармонію та зв'язок з природою.
Блакитний чи синій – довіра, відкритість, спокій – найбільш популярний колір в інтернеті, він сподобався фінансовим компаніям та соцмедіа.
Фіолетовий – загадковий, люксовий, креативний – королівський колір з тінню декадансу.
Білий – віртуозний, стерильний, простий – асоціюється з лікарями та святістю, також може бути ненав'язливим тлом.
Чорний - витончений, сучасний, домінуючий - найбільш сильний колір, який може надати вашому сайту гнітючий відтінок, якщо перестаратися з його використанням.
Більше про колір ви зможете дізнатись у цій статті.
Симетрія не така проста, як може здаватися. Вона може подаватися в різних стилях і видах (включаючи її повну відсутність), і все це може по-різному впливати на користувача.
Симетрію можна розділити на чотири види:
1. Горизонтальна симетрія - стандартна форма симетрії, яка зазвичай спадає на думку. Обидві частини сторінки мають однакову ширину та розташування елементів. Безпечний вибір.
2. Приблизна симетрія – досить ризикований вибір. Ця симетрія використовує дві частини з однаковою візуальною вагою, але не завжди з однаковим наповненням. Зазвичай одна частина містить великий елемент, а друга набір дрібних елементів.
3. Радіальна симетрія - складна у застосуванні, але дуже ефектна. Вона використовує центр як точку фокусу, від якої розходяться секції, створюючи спіральний рисунок.
4. Асиметрія - відсутність симетрії. Об'єкти розташовані так, щоб протистояти один одному, та створені відмінними один від одного. Це досить складний спосіб оформлення, найкраще підходить сайтам із сучасним чи нестабільним інтерфейсом.
5. Використовуйте фото реальних людей
Людський погляд притягується до реальних людей.
Фотографії людей отримують більше уваги, ніж текст або будь-якіінші елементи.
Є лише одна умова – на зображенні має бути реальна людина. Тобто це не повинно бути стокове фото. Фотографія має здаватися природною та унікальною.
6. Будьте послідовні
Привабливого інтерфейсу недостатньо. Ви маєте створити ще й послідовність. Послідовність помічають лише тоді, коли її немає.
Непослідовні сайти заводять користувача в безвихідь. Їм доводиться розбиратися з інтерфейсом кожної сторінці.
Приділіть увагу цим елементам:
- Типографіка – шрифт, розміри, відстані тощо для кожного елемента тексту.
- UI елементи – уніфікуйте набір іконок, зображень та шаблонів, щоб допомогти користувачам.
- Колір – застосувавши певні кольори для певних елементів, ви зможете навчити користувачів та допомогти їм у роботі з вашим сайтом.
Також вам варто дотримуватися послідовності і по відношенню до інших сайтів теж.
Наприклад, багато сайтів містять логотип у правому верхньому кутку. Помістивши лого в якесь інше місце, ви бентежите своїх користувачів і вводите їх у ступор.
7. Винесіть вигоду з порожнього простору
Легко помилитися, думаючи, що хороший інтерфейс передбачає заповнення екрану симпатичними картинками. Але один із найприємніших елементів – це порожнеча.
Порожній простір – відсутність будь-яких елементів. Візьмемо для прикладу мінімалістичний дизайн, слоган якого - "Чим менше, тим краще". Як тільки ви приберете зайві елементи, ви виділите красу того, що залишиться.
Порожній простір впливає на те, куди пройде погляд користувача, і допомагає покращити візуальну ієрархію.
Ось кілька способів отримати зиск від порожнього простору:
- Увага – що більше порожнечі навколо елемента, то більше уваги він приверне.
- Друкарня – відстані створюють ієрархію між параграфами, рядками і навіть літерами, покращуючи читабельність та підвищуючи комфорт.
- Елегантність – порожній простір надає відтінку витонченості та люксу.
- Створення відносин – залишаючи менше простору між елементами, що входять до однієї групи, ви допомагаєте користувачеві краще орієнтуватися на сайті.
Порожній простір – такий самий елемент інтерфейсу, як і інші. І він має використовуватись у дизайні.
Звичайно, це очевидно, але варто згадати цей фактор – якщо користувачі вам не довіряють, то всі ваші зусилля будуть марними. Використовуйте логотип або фото вдячних клієнтів, використовуйте відгуки та показуйте людям власну команду.
Головне фото взято з сайту Depositphotos
Як зробити свій сайт ще кращим: