8 рекомендаций по созданию удобного сайта с уникальным веб дизайном, хорошим юзабилити и исключительными поведенческими характеристиками
April 28, 2016 // 8:00 AM
8 Guidelines for Exceptional Web Design, Usability, and User Experience
Written by Erik Devaney | @bardofboston Перевод Irin German
Когда приходит время дизайна или редизайна сайта, очень легко зависнуть на эстетическом внешнем виде: «Этот глубокий синий абсолютно не подходит… А не круче было бы разместить логотип в правой части экрана? … А давайте в центре страницы разместим огромный анимационный GIF!”
Однако, если вы действительно пытаетесь достичь чего-то при помощи вашего сайта (например, узнаваемость бренда, поиск потенциальных клиентов и т.д.) , вам необходимо сфокусироваться на чем-то большем чем внешний вид сайта.
В мире где у людей более миллиарда сайтов, на которые они могут зайти, вы должны быть уверены, что ваш дизайн максимально удобен и стимулирует желаемое поведение пользователей (насколько приятно и удобно взаимодействовать с вашим сайтом для реальных пользователй).
Мы предлагаем 8 рекомендаций по созданию прекрасного продающего дизайна.
1. Простота
Хотя внешний вид и общее впечатление от сайта играю значительную роль, большинство посетителей заходят на ваш сайт не для того, чтобы оценить качество дизайна. Они возвращаются на ваш сайт, чтобы совершить какое-то действие или получить какую-то информацию.
Применение лишних элементов дизайна (т.е элементов, которые не имеют функционального смысла) на сайте, будет только мешать вашим посетителям завершить то, что они хотят завершить.
С точки зрения юзабилити и поведенческого удобства, простота ваш друг. И вы можете эксплуатировать ее разными способами. Вот несколько примеров:
Цвета. Не используйте слишком много. Рекомендуется использовать 5 (+-2) различных цветов в дизайне веб-сайта.
Шрифты. Шрифты должны быть читаемыми даже в самом мелком размере. Не следует использовать слишком много цвета в шрифтах. Рекомендуется использовать не более 3 различных шрифтов и не более 3 размеров.
Графика. Используйте ее только в том случае, если она помогает пользователю завершить действие или выполняет специфическую функцию (не используйте графику просто так)
Великий автомобильный дизайнер Colin Chapman когда-то сказал.
«Упрости и потом добавь легкости».
Каждый элемент на странице должен добавлять ценность для пользователя или для бизнеса – в идеале для обоих.
2. Визуальная иерархия
Близко связанная с принципом простоты, визуальная иерархия определяет расположению и организацию элементов страницы таким образом, чтобы посетитель естественным образом двигался в первую очередь в сторону наиболее важных элементов.
Когда наступает время оптимизации сайта для удобства пользователя, помните о том, что главная цель подвести посетителя к выполнению желаемого действия наиболее естественным и приятным путем. Настраивая позицию, цвет или размер некоторых элементов, вы можете структурировать ваш сайт таким образом, чтобы посетитель в первую очередь обращал внимание на эти элементы.
3. Удобство навигации
Интуитивная навигация на вашем сайте – это ключевой момент, который дает уверенность, что посетители смогут найти то, что они ищут. В идеале, посетитель, зайдя на ваш сайт, не должен долго думать, куда ему нужно нажать в следующий раз – перемещение из точки А в точку Б должно быть как можно более безболезненно.
Вот несколько советов, чтобы улучшить навигацию на вашем сайте:
- Сохраняйте структуру первичной навигации простой (и располагайте ее вверху страницы).
- Включите навигацию в подвал страницы.
- Используйте «хлебные крошки» еа каждой странице (кроме главной) так чтобы люди понимали где они находятся.
- Разместите окно поиска ближе к вверху сайта так, чтобы посетитель мог найти информацию по ключевому слову.
- Не размещайте слишком много навигационных опций на одной странице.
- Не «закапывайте» информацию слишком глубоко. В большинстве случаев, наилучшая глубина навигации не более 3 уровней.
Другой момент, выбрав местоположение для главной панели навигации на вашем сайте, сохраняйте ее постоянной. Заголовки и местоположение навигации должны оставаться неизменными на каждой странице вашего сайта.
И это приводит нас к следующему принципу.
4. Постоянство
Кроме того, что местоположение навигации должно оставаться постоянным, также должен оставаться неизменным внешний вид вашего сайта при переходе от страницы к странице. Бекграунды, цветовые схемы, шрифты и даже стиль письма должны оставаться неизменными. Все это может оказать позитивное влияние на юзабилити.
Однако, никто не говорит, что все страницы вашего сайта должны иметь абсолютно одинаковую раскладку. Напротив, Вы должны создавать разные шаблоны для специальных типов страниц (например, для посадочных страниц, для информационных страниц и т.д.) и используя эти шаблоны постоянно, вы позволите посетителям понять какой тип информации они вероятнее всего найдут на данной странице.
5. Доступность
Согласно данным comScore количество потребителей планшетов выросло на 30% за период между 2013 и 2015 годами. Количество потребителей смартфонов, вместе с тем, выросло на 78% за тот же период. Вот главное. Для того чтобы предоставить своим пользователям реальные удобства, ваш сайт должен быть совместимым с разными устройствами (и операционными системами, и браузерами), которые используют ваши посетители.
На высшем уровне – это означает разработку такой подвижной структуры страниц – как адаптивный дизайн. На адаптивных сайтах контент автоматически меняет размер и позицию в зависимости от разрешения экрана устройства пользователя таким образом, чтобы сделать пребывание сайте наиболее удобным и приятным.
На более низких уровнях разработки, доступность может быть реализована простым добавлением свойства ALT на всех графических элементах страницы (таким образом посетитель, который не видит на своем устройстве изображение может хотя бы понять что оно означет, каков его функционал)
Особенно важно, чтобы ваш сайт был удобен и выглядел одинаково хорошо на всех платформах и во всех возможных браузерах. Это может означать даже создание отдельного дизайна для специфических платформ, вместо того чтобы пытаться выдавить уникальные элементы, с которыми пользователь этой платформы может быть не знаком.
И все это приводит нас к следующем правилу
6. Следование традициям
Существует несколько принципов веб-дизайна, которые с годами стали традиционными, пользователи привыкли к ним. Эти принципы включают:
- Главное меню располагается в верхней (или левой) части страницы.
- Логотип размещается в верху слева (или по центру) .страницы
- Логотип, как правило, представляет собой ссылку на главную страницу.
- Ссылки на страницах меняют цвет/внешний вид при наведении курсора.
Хотя конечно можно игнорировать эти правила в попытке сделать дизайн сайта абсолютно оригинальным или уникальным, это будет ошибкой. Это будет все-равно что поставить рулевое колесо в автомобиле перед задним сидением, по-просту говоря, это запутает людей.
Для того , чтобы посетители вашего сайта чувствовали себя привычно и уверенно, воспользуйтесь преимуществом, что вы уже знаете, каким опытом веб-серфинга они обладают. Вы можете использовать эту информацию, чтобы сделать ваш сайт более простым для путешествия по нему ваших посетителей.
Один из наиболее общих примеров традиций в веб-дизайне: применение иконки покупательской корзины на сайтах электронной коммерции.
7. Доверие
Важно! Использование традиционного веб-дизайна - элементов дизайна и стратегий, которые известны и понятны посетителям – могут помочь вашему сайту вызывать больше доверия. И если вы прилагаете усилия, чтобы сделать сайт, который предоставит своим посетителям наиболее удобный и дружелюбный интерфейс, доверие может сохраняться долгое время.
Один из наилучших способов увеличить доверие к сайту - ясно и честно рассказывать о продукции представленной на вашем сайте. Не заставляйте посетителей раскапывать дюжины страниц, чтобы выяснить чем же вы на самом деле занимаетесь. Вместо этого, расскажите обо всем на первой странице, и посвятите несколько солидных абзацев, объяснению ценности того, что вы делаете.
Другой способ. Создайте страницу с ценами. Кроме того, что она будет побуждать ваших посетителей контактировать с вами с целью узнать больше о ценах, наличие такой страницы определенно поможет вашему сайту выглядеть законным и заслуживающим доверия.
8. Потребности и ожидания конечного пользователя
Каким должно быть юзабилити сайта, его восприятие и ответные действия на нем, зависит от предпочтений конечных пользователей (В конце концов, если вы не создаете дизайн для них … то для кого вы его создаете?)
Таким образом изложенные здесь принципы представляют собой стартовую площадку, настоящий ключ к улучшению дизайна вашего сайта лежит в проведении пользовательского тестирования, получении обратной связи и проведении изменений основанных на том, что вы узнаете.
Вот несколько инструментов для тестирования.
Crazy Egg. Используйте этот инструмент для изучения поведения пользователей с помощью тепловой карты, карты прокручиваний, перекрытий и конфетти.
Loop 11. Инструмент для тестирования юзабилити сайта.
Согласно данным Vitamin T, 68% посетителей не приносят никакой конверсии, потому что они считают, что вы не заботитесь об их удобстве и восприятии. Таким образом последний мудрый совет по юзабилити – начните больше заботиться о посетителях!
Ставьте себя на место посетителя и думайте о нем на каждом этапе создания сайта.