UI-дизайн: 5 поширених помилок - Gnome Agency
 
0 %
GnomeAgency

UI-дизайн: 5 поширених помилок

UI дизайн приклади, помилки

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

Наприклад Google - це відмінний приклад інтуїтивно-зрозумілого та зручного у використанні дизайну.

UI правильний дизайн приклади

1 Незрозуміла форма входу

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

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

 

UI дизайн форм і поля вводу

 

2 Полотно тексту без структури

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

Потрібно уникати надто дрібного шрифту - якщо відвідувачу не зручно читати текст, він покине сайт. Оптимальний розмір шрифта (кегль) для вебсторінок - 14-16 пунктів (пт).

Поширеною помилкою є поєднання темного режиму (Dark Mode) з великою кількістю тексту, написаного білим. Так, Dark Mode - це сучасний тренд, але він вимагає мінімалізму. Білий текст на темному фоні сприймається важко, тому варто тримати баланс.

 

dark mode білий текст темний фон

 

3 Невідповідність елементів інтерфейсу

Використовувати занадто багато різних стилів - поширена помилка. Натомість “послідовний” дизайн викликає довіру та прихильність відвідувачів.

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

 

елементи UI дизайну

4 Низький контраст

Якщо контраст між елементами інтерфейсу низький, всі елементи зливаються між собою, і ви отримуєте важкий для читання інтерфейс. Низький контраст дорівнює низькій зручності використання.

Ось кілька порад для вдалого використання контрасту в дизайні інтерфейсу:

  • використовуйте контраст, щоб направляти увагу користувача до важливих елементів; 

  • використовуйте контраст, щоб чітко розділити різні розділи вашого інтерфейсу; 

  • використовуйте контраст, щоб відокремити елементи від фону. 

 

контраст інтерфейс UI дизайн

5 Мало вільного простору

Типова помилка новачків - забувати, що дизайн повинен “дихати” :) Тому варто пам'ятати про дистанцію між елементами і не перевантажувати його.

 

приклади UI дизайну

Висновок ;)

Також до типових помилок UI-дизайну можна віднести:

  • повільну швидкість завантаження сайту;

  • відсутність зображень або їх завелику кількісь;

  • зображення низької якості або велика кількість стокових фото;

  • неадаптивний інтерфейс (“пливе” на смартфоні);

  • піктограми у різному стилі.

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

Картинка користувача Svitlana K..

автор - Svitlana K.

Час прочитання статті - 7 хв.