Топ-20 негативных примеров веб-дизайна: чему не следует учиться

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

Визуальный хаос: когда красота мешает функционалу

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

Слишком много анимации

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

Пестрое сочетание цветов

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

10+ разных шрифтов на одной странице

Курсив, готика, рукописный шрифт – такой микс делает текст нечитаемым. Пользователи не могут сосредоточиться на информации и закрывают ресурс.

Нерелевантные изображения

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

Чтобы ваш сайт выглядел профессионально, необходимо избегать визуального шума. Минимализм и простота – не просто тренд современного веб-дизайна, а один из главных принципов UI/UX.

Навигационный ад. Как потерять потенциального клиента за 3 клика?

Если пользователь не может найти нужную информацию за первые 10 секунд, он уйдет к конкурентам.

Меню–гамбургер в версии для ПК

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

Отсутствие «хлебных крошек»

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

Неочевидные названия разделов

В безудержном творческом порыве дизайнеры склонны «изобретать велосипед». И тогда вместо привычных названий разделов мы видим креативные словосочетания, которые ни о чем не говорят аудитории: «Что мы делаем?» вместо привычного «О компании» и «Где мы?» вместо «Контакты». Вряд ли кто–то будет разбираться в том, что именно вы имели ввиду.

Мертвые ссылки

Даже если вы запустили сайт буквально вчера, он может показаться посетителям заброшенным. Для этого достаточно, чтобы кнопки вели на страницу 404 «Page not found».

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

Плохой веб–дизайн в мобильной версии

По данным сервиса Similarweb за март текущего года, доля глобального трафика с мобильных устройств составляет 67,8%. Однако многие разработчики и владельцы сайтов до сих пор игнорируют этот показатель и не адаптируют свои площадки под смартфоны и планшеты.

Текст–невидимка

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

Кнопки–двойняшки. Или нет?

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

Горизонтальный скролл

Если страницу приходится сдвигать влево и вправо для того, чтобы прочесть текст, 90% пользователей покинут такой сайт, не познакомившись с контентом.

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

UX-провалы: когда дизайн противоречит логике

Ошибки в области user experience – наиболее частая причина потери клиентов.

Формы с огромным количеством полей

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

Нет возможности отменить действие

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

Поп–апы при первом визите

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

Сложная CAPTCHA

Чтобы отправить форму или зарегистрироваться, пользователь должен всматриваться в нечитаемые буквы или искать объекты и их детали на изображениях низкого качества. Скорее всего, юзер бросит эту задачу после нескольких оповещений системы о том, что CAPTCHA введена неверно. Ограничьтесь проверкой по SMS или галочкой напротив «Я не робот».

UX – это всегда про удобство, а не про креатив. Создавая интерфейс, думайте как пользователь, а не как дизайнер.

Как создать хороший веб–дизайн?

Конечно, вопрос отчасти риторический, ведь стили и эстетика – это вопрос вашего вкуса. Однако есть и общие советы, которые сделают любой дизайн хорошим:

Сделайте навигацию по своему ресурсу очевидной. Посетители не должны гадать, куда нажать, чтобы получить желаемое.
Оптимизируйте скорость загрузки. Медленные сайты чаще всего теряют аудиторию: уменьшайте количество анимаций и сложных эффектов, сжимайте изображения, используйте lazy load.
Используйте конкретные данные, а не свою интуицию. Увы, но дизайнерские решения часто принимаются «на глазок» и только потому, что это кажется разработчику красивым или эффектным. Анализируйте поведение своей аудитории, их вкусы и потребности, проводите тестирования и изучайте тепловые карты, ведь вы создаете сайт для конечных пользователей, а не для себя.
Учитесь у лучших. Анализируйте примеры из топов Awwwards или Behance, подпишитесь на блоги профи, изучайте гайды от крупных разработчиков. Это поможет найти баланс между эстетикой и функциональностью.

Визуальный редактор кода Taptop – инструмент, который поможет вам создавать по–настоящему профессиональные сайты. В Библиотеке шаблонов вас ждут готовые макеты, разработанные специалистами в области UX/UI с учетом последних трендов. Они подходят для самых разных ниш и направлений: достаточно наполнить сайт уникальным контентом, и площадка будет готова к запуску.

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