Когда мы думаем о графическом дизайне, мы обычно вспоминаем о поверхностном: цвет, форма, размер.
Но веб-дизайн и редизайн намного больше, чем это.
Вы также должны думать о юзабилити и пользовательском опыте.
88% онлайн потребителей говорят, что у них меньше шансов вернуться на сайт после неудачного опыта.
В этой статье мы раскроем 9 основных принципов проектирования безупречного пользовательского опыта (UX), чтобы помочь вам увеличить количество конверсий и многое другое.
Визуальная иерархия направляет взгляд посетителя
Что такое визуальная иерархия? Это один из наиболее важных принципов, лежащих в основе эффективного веб-дизайна и положительного пользовательского опыта.
Люк Врублевский объясняет, что конечной целью визуальной иерархии является быстрое сообщение посетителю следующего:
- Что это? (полезность)
- Как его использовать? (удобство использования)
- Почему это должно меня беспокоить? (желательность)
Использование визуальной иерархии — правильный путь на вашем сайте, который вы показываете пользователю. То, куда они должны идти дальше, и что им нужно сделать. Это показывает им, что важно, а что не так уж важно — не нужно думать или бродить бесцельно.
Домашняя страница Teamwork’s Project делает хорошую работу с помощью визуальной иерархии на их сайте.
Заголовок является большим и сообщает пользователю, чем является их продукт, описательный абзац снизу дает вам более подробную информацию. Кнопка призыва к действию «Начните бесплатно» проясняет, что нужно сделать после прочтения.
Белое пространство ведет к фокусировке
Эффективная конструкция значительно выигрывает от пространства. Это помогает вашему дизайну дышать.
Белое пространство, с точки зрения веб-дизайна, это «пространство между графическими, колоннами, изображениями, текстом, полями и другими элементами». Оно не обязательно белого цвета; оно также может быть цветным или узорчатым, используйте пустое пространство, чтобы помочь разбить макет.
Домашняя страница Invision’s делает большую работу, используя пустое пространство, чтобы помочь различать и сосредоточить внимание на каждой из особенностей своего продукта.
Пространство помогает вашему взгляду отличить конец одной секции и начало другой, а также помогает вам сосредоточиться на описании текущей информации, не отвлекаясь ничем другим.
Навигация должна отражать путь пользователя
Опыт посетителя на вашем лендинге не должен быть похож на карту сокровищ. Вы не хотите, чтобы люди потерялись или разочаровались, пытаясь попасть туда, куда вы хотите (т.е. с просьбой о консультации, подписавшись на бесплатную пробную версию, запроса демо и т.д.). Таким образом, вы должны убедиться, что в вашей навигации очень легко ориентироваться.
Навигация – это своего рода серия дорожных знаков. Если ваши знаки не ясны, точны и прямы, то, как потенциальные клиенты должны узнать о вашем продукте или услуге? Как они могут знать, где найти то, что они ищут?
При проектировании вашей навигации, нужно держать путь идеального покупателя в голове и сделать его как можно проще. Используйте слова, которые они распознают, и располагайте наиболее важные страницы на виду. Не прячьте их.
Адаптивность является обязательным
Все больше и больше людей совершают поиск на своих мобильных устройствах, потому что они постоянно находятся на ходу. В самом деле, инфографики на UX Measure’s показывают: «52% пользователей говорят, что из-за плохого мобильного опыта существует меньше шансов взаимодействовать с компанией».
Убедитесь, что пользователь имеет лучший опыт, независимо от того, как они просматривают ваш сайт. Для этого ваш сайт должен иметь адаптивный дизайн и одинаково хорошо отображаться на любом мобильном устройстве.
Последовательность помогает избежать путаницы
Последовательность является ключевым для практически всех областей маркетинга, но особенно для юзабилити сайта и UX. Как маркетолог, вы хотите, чтобы ваш сайт имел единообразный внешний вид от цвета, шрифтов и размеров, макета и даже интонации ваших сообщений.
Эта согласованность помогает передать плавный опыт одной страницы на другую, сводя к минимуму путаницу, и делает ваш сайт легким в ориентировании.
Некоторые элементы, которые никогда не должны меняться
В постоянно меняющемся мире веб-технологий и веб-дизайна, каждый маркетолог хочет не только не отставать, но и перепрыгнуть каждого, но при этом, не рискуя оттолкнуть аудиторию. С Интернетом, будучи основной частью нашей жизни на протяжении почти 30 лет, у пользователей есть определенные ожидания, когда речь идет о навигации онлайн.
Например, они рассчитывают перейти на главную страницу, когда нажимают на ваш логотип в углу навигации. Когда речь идет о разработке веб-сайта, не слишком далеко отклоняйтесь от этих конвенций, поскольку они могут, в конечном счете, спутать сознание вашего пользователя и создать негативный опыт.
Если вы хотите попробовать что-то новое, тестируйте и смотрите, насколько хорошо изменение перед тем, как его использовать.
Установка реалистичного ожидания создает доверие
Последнее, что вы хотите сделать, это ввести в заблуждение ваших потенциальных клиентов. Будьте верны тому, что делает ваш продукт или услуга и установите реалистичные ожидания, показывая своим посетителям именно то, что они получают.
Если вы продаете программное обеспечение, вы можете сделать это, показывая снимки экрана, в том числе фотографии под разными углами, если это физический продукт, или покажите видео. Видео помогает убедить 73% людей, чтобы купить продукт или услугу, в соответствии с инфографикой UX Measure’s. Так что, если у вас нет ничего подобного, это может быть разумным, чтобы начать мозговой штурм.
Вы можете также установить реалистичные ожидания, будучи честными с такими вещами, как условия обслуживания и цены.
Тестирование это ваш друг
При разработке веб-сайта и проектировании структуры сайта, вы должны думать так же, как ваши посетители и как они будут взаимодействовать с ним. К сожалению, даже с самыми лучшими намерениями, иногда вы делаете это неправильно.
Чтобы увидеть, как ваш посетитель действительно взаимодействует с вашим сайтом, сделайте некоторые тесты пользователей и соберите некоторые данные с помощью тепловых карт и записей. Эти данные помогут вам, дать людям то, что они ищут и в целом улучшить производительность вашего сайта.
Принцип KISS (Keep It Simple, Stupid), или будьте проще
У вас слишком много поваров на кухне, которые принимают окончательное решение о том, как ваш сайт выглядит? Это, как правило, случается чаще, чем вы думаете, и в конце долгого процесса ваш сайт оказывается слишком запутанным для ваших потенциальных клиентов.
Убедитесь, что ваш веб-сайт является простым и не заставляет ваших посетителей слишком много думать. Конечная цель вашего сайта, чтобы ваш новый посетитель стал клиентом, а также сделать его проще для них, чтобы пользователи могли найти ответы, которые они ищут.
С точки зрения UX, HubSpot, предлагают вам держать в виду следующее:
Цвета – CrazyEgg советует заимствовать из дизайна интерьера и моды, правило 60-30-10, которое гласит, что три цвета должны использоваться в той или иной пропорции (60%, 30%, 10%), чтобы создать идеальную гармонию. Вы можете использовать и более чем три, но не стоит использовать более пяти.
Шрифты — так же, как цвета нужно ограничить количество использования. Стоит придерживаться максимум двух, один для основного текста, другой для заголовков. Просто убедитесь, что независимо от того, что вы выбираете – это легко читать.
