Много креатива — мало юзабилити

Один из трендов в дизайне интерфейсов 2020 — сочетание фотографии и графики. А еще — hand-drawn элементы и светящиеся футуристические цвета. Но все это — формальные решения. Когда речь идет о UI/UX, то информативность и юзабилити первичны. Опирайся на опыт, потребности и привычки пользователя. Предугадывай реакции, давай только нужный контент. Пусть путь к цели будет максимально простым и понятным. И потом уже думай, как сделать, чтобы сайт выглядел круто.

В приоритете тренды, а не потребности юзера

Эта ошибка дополняет предыдущую. Мы часто хотим повторить идеальные кейсы, которые видим на Dribble и Behance, но забываем о Good User Experience.

Например, мы наблюдаем фул-сайз фото на фоне в множестве проектов. Стараемся сделать так же, но забываем о том, что на устройствах с разным разрешением экрана все равно получим кропнутую фотку. Лучше сосредоточиться на том, чтобы фото отображалось одинаково на экранах с разными разрешениями.

Еще популярная фича — размещение одних элементов поверх других. Например, карта на сайте AirBnb. Она стильно смотрится, но нефункциональна. Пользователь видит картинку, но не получает полезной информации. Лучше было бы продумать возможность перехода на реальную карту или разместить дополнительный источник информации о локации места.

Не продуманы ожидания пользователя

Попробуйте найти линк на почтовый ящик пресс-центра Инстаграм и скажите, сколько времени потратили. Раздел “Пресса” похож на блог с обновляющимися новостями. Прямого линка на мейл нет. Внизу Инфо-центра ничего. Только в разделе Brand Assets (?) нахожу Send Us An Email. При нажатии ничего не происходит, но если навести курсор, высветится ссылка на почту.

Можно загуглить «Instagram Press Center Contact», но это ничего не даст.

В общем, спустя какое-то время я таки нашел имейл, но уже не помню как.

Недостаточный цветовой контраст

Контрастные цвета делают дизайн более читабельным, разделяет объектым и помогает расставить акценты. Есть 5 видов цветовых контрастов.

1. Контраст холодного и теплого: оттенки желтого, оранжевого, красного на синем/черном. Такое сочетание — самое динамичное и создает движение. Плюс: контраст бледного и яркого.
2. Светлого и темного: темный насыщенный объект на бледном фоне и наоборот
3. Контраст по тону на основе цветового круга Иттена.
4. Контраст дополнительных или противоположных цветов. см. круг Иттена. Это самая яркая комбинация по тону, в отличие от тепло-холодного контраста создает устойчивость.
5. Симультанный контраст: возникает в сочетании с серым цветом другого насыщенного (не монохромного или нейтрального) оттенка, когда в сером мы видим дополнительный тон к нему. Например, красный с серым — при беглом взгляде на серый в таком соседстве мы можем увидеть зеленый тон. На оранжевом фоне серый примет голубой оттенок, на красном – зеленый; на фиолетовом – желтоватый.

При недостаточном контрасте картинка выглядит менее резкой, элементы сливаются. Контраст же помогает расставить акценты и захватить внимание.

Огромные фиксированные хедеры

Большой “приклеенный” хедер может вызвать ощущение клаустрофобии. Закрепленный сверху элемент блокирует контент во время того, как юзер скролит страницу и уменьшает на ней полезное пространство, как бы выдавливая его. Вместо контента пользователь видит ту же “шапку”. Проблему можно решить, придав хедеру свойство увеличивающейся прозрачности по мере скроллинга страницы. Юзер будет спускаться вниз, а хедер — растворяться.

Слишком легкие и тонкие шрифты

Цель типографии — быть читабельной, текст должен давать информацию, а не быть декоративным элементом (если не задумано обратное). Легкие и тонкие шрифты труднее читать на iPad и iPhone с Retina Display. Такой шрифт может быть вполне разборчивым на мониторе с высоким разрешением, но на недорогих ноутбуках, планшетах и смартфонах — нет. Поэтому важно тестировать сайт на разных девайсах.

Еще одна ошибка, выросшая из минималистичного тренда — текст с низким контрастом. В связке с тонкими и легкими шрифтами недостаточно контрастный текст снижает читабельность и юзабилити сайта. Проверить уровень контраста текста и найти оптимальный тебе поможет сервис Colorable.

Scroll-jacking

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

Визуальный хаос вместо упорядоченной иерархии

Внимание пользователя задерживается на странице до 8-и секунд. И если не захватить его, не дать нужную информацию в правильной последовательности, он просто уйдет.

Чтобы зацепить пользователя:

• Убирай ненужную информацию. Подавай контент емко и последовательно. Не бойся резать тексты и переносить разделы на другие страницы.
• Визуально выделяй важные элементы. Если самое важное на странице — это фото, делай их видимыми.
• В текстах используй анкоры: подзаголовки, цитаты, маркированные списки. Это помогает пользователю “ухватиться” за главное.

Помни о приоритетности. Разделяй информацию на первоочередную по важности.

По материалам: wayup.in