Один из трендов в дизайне интерфейсов 2020 – сочетание фотографии и графики. А еще – hand-drawn элементы и светящиеся футуристические цвета. Но все это – формальные решения. Когда речь идет о UI/UX, то информативность и юзабилити первичны. Опирайся на опыт, потребности и привычки пользователя. Предугадывай реакции, давай только нужный контент. Пусть путь к цели будет максимально простым и понятным. И потом уже думай, как сделать, чтобы сайт выглядел круто.
Эта ошибка дополняет предыдущую. Мы часто хотим повторить идеальные кейсы, которые видим на Dribble и Behance, но забываем о Good User Experience.
Например, мы наблюдаем фул-сайз фото на фоне в множестве проектов. Стараемся сделать так же, но забываем о том, что на устройствах с разным разрешением экрана все равно получим кропнутую фотку. Лучше сосредоточиться на том, чтобы фото отображалось одинаково на экранах с разными разрешениями.
Еще популярная фича – размещение одних элементов поверх других. Например, карта на сайте AirBnb. Она стильно смотрится, но нефункциональна. Пользователь видит картинку, но не получает полезной информации. Лучше было бы продумать возможность перехода на реальную карту или разместить дополнительный источник информации о локации места.
Попробуйте найти линк на почтовый ящик пресс-центра Инстаграм и скажите, сколько времени потратили. Раздел “Пресса” похож на блог с обновляющимися новостями. Прямого линка на мейл нет. Внизу Инфо-центра ничего. Только в разделе Brand Assets (?) нахожу Send Us An Email. При нажатии ничего не происходит, но если навести курсор, высветится ссылка на почту.
Можно загуглить “Instagram Press Center Contact”, но это ничего не даст.
В общем, спустя какое-то время я таки нашел имейл, но уже не помню как.
Контрастные цвета делают дизайн более читабельным, разделяет объектым и помогает расставить акценты. Есть 5 видов цветовых контрастов.
При недостаточном контрасте картинка выглядит менее резкой, элементы сливаются. Контраст же помогает расставить акценты и захватить внимание.
Большой “приклеенный” хедер может вызвать ощущение клаустрофобии. Закрепленный сверху элемент блокирует контент во время того, как юзер скролит страницу и уменьшает на ней полезное пространство, как бы выдавливая его. Вместо контента пользователь видит ту же “шапку”. Проблему можно решить, придав хедеру свойство увеличивающейся прозрачности по мере скроллинга страницы. Юзер будет спускаться вниз, а хедер – растворяться.
Цель типографии – быть читабельной, текст должен давать информацию, а не быть декоративным элементом (если не задумано обратное). Легкие и тонкие шрифты труднее читать на iPad и iPhone с Retina Display. Такой шрифт может быть вполне разборчивым на мониторе с высоким разрешением, но на недорогих ноутбуках, планшетах и смартфонах – нет. Поэтому важно тестировать сайт на разных девайсах.
Еще одна ошибка, выросшая из минималистичного тренда – текст с низким контрастом. В связке с тонкими и легкими шрифтами недостаточно контрастный текст снижает читабельность и юзабилити сайта. Проверить уровень контраста текста и найти оптимальный тебе поможет сервис Colorable.
Scroll-jacking – это когда сайт сам выбирает, как ты скролишь страницу. Когда скорость и интенсивность просмотра – автоматическая. По задумке авто-скроллинг должен быть естественным и упрощать пользование сайтом. На деле – никто не может предугадать как быстро и интенсивно каждый отдельный пользователь просматривает страницу. Поэтому технология Scroll-jacking считается одной из самых спорных и фрустрирующих.
Внимание пользователя задерживается на странице до 8-и секунд. И если не захватить его, не дать нужную информацию в правильной последовательности, он просто уйдет.
Чтобы зацепить пользователя:
Помни о приоритетности. Разделяй информацию на первоочередную по важности.
По материалам: wayup.in
2 комментария