Как не надо: 6 ошибок в дизайне сайта

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

Сайт группы Аквариум https://www.aquarium.ru/ru — пример дизайна, когда UI выходит на первый план. Тематика этого сайта предполагает что-то экстравагантное и неподдающееся правилам, но подобные решения могут быть неудобны для пользователей. Хотя это вполне приемлемо в конкретном примере.

С другой стороны, чрезмерное внимание к удобству использования может привести к созданию визуально непривлекательного дизайна. Упрощенный интерфейс часто выглядит скучным или устаревшим.
Интернет-магазин https://apteka.ru/ — пример большого функционального сайта с довольно посредственным UI. Здесь можно легко найти и заказать нужные препараты, но эстетики в дизайне очень мало.

Сайт студии Chipsa https://chipsa.ru/ — пример баланса между удобством, функциональностью и красивой картинкой (с небольшими неточностями, но в целом подходит под критерии). Актуально на момент написания статьи, так как студия часто делает редизайн.

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

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

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

Приступая к работе, дизайнер должен задать себе вопрос: «как целевая аудитория будет пользоваться моим продуктом?» Ответ даст понять, что важнее пользователям: mobile или desktop. Возможно, что верстка под большие экраны и не потребуется.

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

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

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