Все ли тренды того стоят? 5 самых распространенных ошибок UX, которые допускают веб-дизайнеры

«Элегантность достигается тогда, когда отброшено все лишнее и человек открывает для себя простоту и сосредоточенность: чем проще и трезвее поза, тем она будет красивее». -Пауло Коэльо

Миссия веб-дизайнера — создавать привлекательный пользовательский интерфейс, помогать посетителям сайта выполнять задачи и повышать конверсию. В процессе они часто сосредотачиваются только на эстетике, используют ярлыки и в конечном итоге полагаются на различные общие шаблоны и тенденции дизайна. Опасность в том, что они могут увлечься популярными тенденциями, и, следовательно, распространенные ошибки UX совершаются из-за того, что тенденции развернуты ненадлежащим образом.

Когда дело доходит до Интернета, люди не хотят чему-то учиться , они хотят что-то делать . В Интернете есть множество примеров, когда дизайнеры решили сосредоточиться только на визуальной привлекательности и при этом пожертвовали удобством использования. Они предположили, что «вау-момент», который привел в действие дизайн, сам по себе будет достаточно мощным, чтобы заинтересовать пользователя. Но, к сожалению, пользователи с трудом понимают пользовательский интерфейс, испытывают серьезные трудности с использованием сайта, а показатели отказов на сайте резко возросли.

Как сказала Кейт Раттер: «Уродливое, но полезное превосходит красивое, но бессмысленное». Ключом к эффективному использованию шаблонов и тенденций веб-дизайна является поиск баланса между тем, что выглядит эстетично, и тем, где они добавляют ценность.

Давайте рассмотрим некоторые распространенные ошибки UX.

Распространенная UX-ошибка веб-дизайна № 1: большие фиксированные заголовки

Все больше и больше высоких липких заголовков можно увидеть на веб-сайтах. «Брендовые блоки» и навигационные меню, имеющие фиксированное положение и занимающие значительное место. Они остаются приклеенными к верхней части окна браузера («липкий заголовок») и часто блокируют содержимое, когда оно прокручивается под ними.

Некоторые заголовки на сайтах крупных брендов имеют высоту более 150 пикселей. Где их ценность? Фиксированные элементы, такие как липкие заголовки, могут иметь реальные преимущества, но веб-дизайнерам следует быть осторожными при их использовании — есть несколько важных вопросов UX, которые следует учитывать.

Заголовок Sticky Nav может быть слишком большим для комфорта

Если решение использовать липкий заголовок навигации уже принято, лучше протестировать его с пользователями. Распространенной ошибкой UX является переборщить и заполнить липкий заголовок навигации контентом. С фиксированным заголовком просмотр должен быть удобным для посетителей. Неспособность найти правильный баланс может привести к тому, что останется мало места для основного контента, а посетителям будет скучно и клаустрофобно.

Иногда с помощью CSS можно найти простой обходной путь: сделав липкий заголовок слегка прозрачным, люди по-прежнему могут видеть контент сквозь него при прокрутке, что делает область контента более существенной.

Вот пример высокого липкого заголовка: страница профиля игрока ATP о Роджере Федерере.

Липкий заголовок этого сайта имеет высоту более 180 пикселей! На некоторых ноутбуках это более 30% всей высоты страницы: плохой пользовательский интерфейс, которого можно избежать.

Не учитывать проблему пользовательского интерфейса Sticky Nav Header на мобильных устройствах

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

Сайт «Кофе с полицейским» также имеет фиксированный заголовок, но гораздо меньше — менее 80 пикселей в высоту.

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

Распространенная UX-ошибка веб-дизайна № 2: тонкие, светлые шрифты

В наши дни тонкие, легкие шрифты широко распространены во многих мобильных приложениях и на веб-сайтах. Благодаря развитию экранных технологий и улучшенному рендерингу многие дизайнеры используют их, потому что они элегантны, чисты и модны. Однако тонкие шрифты могут вызвать проблемы с удобством использования и, следовательно, затруднить UX.

Цель всего текста на веб-сайте — быть разборчивым, а тонкий шрифт может серьезно повлиять на читабельность. Не все посетители будут просматривать сайт на дисплее, который хорошо отображает тонкий шрифт. Некоторый светлый шрифт сложно читать на iPhone или iPad с дисплеем Retina.

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

Руководство по человеческому интерфейсу Apple

Apple имеет в виду мобильные приложения, но тот же принцип применим и к веб-сайтам. Разборчивость обязательна, а не необязательна для удобства использования. Нет смысла размещать контент на веб-сайте, если он нечитаем.

Вот некоторые распространенные ошибки UX, которые следует учитывать перед использованием тонкого шрифта:

Использование тонких и светлых шрифтов, потому что это модно

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

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

Что приводит нас к следующей распространенной ошибке UX:

Не проверяется удобочитаемость текста на всех основных устройствах

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

Например, при тестировании мобильного дизайна попросите участников использовать сайт на мобильных устройствах при дневном свете — у реальных пользователей не всегда будут идеальные условия просмотра и освещения. Если на веб-сайте используется тонкий шрифт, есть простой способ адаптироваться к мобильным пользователям: укажите более толстый шрифт на мобильных устройствах для лучшей читабельности.

Распространенная UX-ошибка веб-дизайна № 3: низкоконтрастный текст

Использование элементов с низким цветовым контрастом также стало модным в современном дизайне пользовательского интерфейса. Он вырос из тенденции минимализма в дизайне, потому что при уменьшении контраста в некоторых областях дизайн выглядел бы «минималистичным». Дизайнеры не могли уменьшить сложность информации, которую нужно было представить, поэтому они играли с низким контрастом в дизайне.

Мы уже рассмотрели тонкие шрифты, но есть еще большая ловушка: сочетание светлого шрифта с низкой контрастностью, что серьезно мешает UX из-за паршивой читабельности. Дизайнеры должны сделать все возможное, чтобы избежать этой ловушки юзабилити.

Низкий контраст текста в основном тексте

Cool Springs Financial использует тонкий вариант Helvetica для основного текста на своем веб-сайте. Хотя он выглядит элегантно и способствует эстетически приятному пользовательскому интерфейсу, его трудно читать на некоторых платформах. Хотя низкая контрастность не обязательно плоха, она может негативно сказаться на удобстве использования веб-сайта, затруднив чтение текста.

Не тестировать контраст текста

В Интернете есть отличный инструмент для проверки контрастности под названием Colorable, который поможет дизайнерам установить правильный контраст текста в соответствии с Руководством по доступности веб-контента. Как только дизайнеры узнают, что они используют правильный контраст текста, они могут настроить другие цвета на своем веб-сайте и выполнить быстрые тесты на нескольких устройствах/пользователях, чтобы убедиться, что текст читаем.

Распространенная UX-ошибка веб-дизайна № 4: перехват прокрутки

Еще одна тенденция с высокой степенью риска, набирающая популярность в Интернете, — это «перехват прокрутки». Веб-сайты, реализующие эту тенденцию, берут под контроль прокрутку страницы (обычно с помощью JavaScript). Когда люди сталкиваются с этим, они больше не контролируют прокрутку страницы и не могут предсказать ее поведение, что может легко привести к путанице и разочарованию. Это рискованный эксперимент, который может повредить удобству использования веб-сайта и, в худшем случае, вызвать «компьютерную ярость».

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

Отсутствие тестирования с реальными пользователями

При заимствовании модных идей или шаблонов пользовательского интерфейса лучше протестировать прототип веб-сайта на реальных пользователях, чтобы избежать проблем с UX. Простое юзабилити-тестирование покажет, возможна ли реализация захвата прокрутки, например, или нет. Без тестирования у дизайнеров нет возможности узнать, сработает ли перехват прокрутки, а делать предположения часто дорого.

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

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

Распространенная UX-ошибка веб-дизайна № 5: карусели

Карусели — слайд-шоу для просмотра разнообразного контента — очень распространены в Интернете, особенно на целевых и домашних страницах. Хотя они могут быть полезными, они имеют множество проблем с удобством использования и поэтому считаются еще одной распространенной ошибкой UX. По данным Nielsen Norman Group: « люди часто сразу же прокручивают эти большие изображения и пропускают весь их контент ». Это может негативно повлиять на UX, поскольку посетители могут не увидеть ценный контент на некоторых вращающихся слайдах.

Карусели веб-сайтов могут быть бесполезны для пользователей

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

Предыдущая и следующая стрелки имеют низкую обнаруживаемость

Важная информация в карусели веб-сайта может оставаться скрытой, если стрелки « следующая » и « предыдущая » недоступны для обнаружения. Элементы управления также должны быть совместимы с мобильными устройствами.

Часто нет стрелок для управления каруселью; только точки индикатора слайдов включены для продвижения слайдов. Однако они часто имеют низкую контрастность, низкую обнаруживаемость и не имеют достаточно большой области, на которую можно нажимать или нажимать. Маленькие интерактивные цели могут привести к плохому UX, разочарованному посетителю сайта и быстрому выходу с сайта.

Например, на главной странице веб-сайта Фонда Флоресты Лонго есть вращающаяся карусель изображений. Он настроен на автовоспроизведение и чередует пять фотографий. Стрелки «предыдущий» и «следующий», однако, маленькие и прозрачные, что делает их трудноразличимыми и сложными для нажатия. Нет индикаторов для посетителей слайда и нет меток, обозначающих, что представляют изображения. Изображения не являются ссылками и служат чистым украшением. Хотя этот тип карусели может иметь некоторую ценность для привлечения посетителей, в целом он оставляет желать лучшего.

Заключение

Тенденции веб-дизайна, если их не учитывать тщательно и осторожно, могут привести к нескольким распространенным ошибкам UX. UX-дизайнеры должны руководствоваться своим здравым смыслом и не бояться вводить новшества, но для обеспечения отличного юзабилити веб-сайта им хорошо бы тщательно протестировать свой дизайн с реальными пользователями.

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

Веб-дизайнеры могут придумать самую крутую цветовую схему, самую причудливую анимацию прокрутки или самые фантастические эффекты параллакса, но если в результате страдает человеческое взаимодействие, UX будет плохим, и люди быстро уйдут. Другой сайт находится на расстоянии одного клика.

Дальнейшее чтение в блоге Toptal Design:

• Отзывчивый дизайн — лучшие практики и рекомендации
• Подход к процессу разработки веб-сайта из браузера
• Программирование для дизайнеров — что мы должны знать?
• Лучшие практики дизайна пользовательского интерфейса и распространенные ошибки