Дружественный интерфейс: как сделать дизайн сайта удобным
Андрей Батурин,
Андрей Батурин
Чтобы посетители вашего сайта чувствовали себя комфортно, с легкостью находили нужную информацию и за короткий промежуток времени превращались из просто посетителей в клиентов, сделайте сайт удобным для них. В этом поможет дружественный интерфейс, суть которого в том, чтобы максимально упростить для пользователя процесс взаимодействия с сайтом.
Что такое дружественный интерфейс?
Дружественный интерфейс сайта (или юзабилити) отражает, насколько просто и удобно для обычного человека пользоваться веб-ресурсом. Основным показателем хорошего интерфейса является эргономичность. Это значит, что чем меньше действий человек совершает, чтобы достичь своей цели, тем интерфейс удобнее.
На сайте с дружественным интерфейсом ничто не отвлекает пользователя, не мешает ему, не запутывает и не отталкивает.
Цель дружественного интерфейса
Цель дружественного интерфейса — соблюсти баланс между удобством использования для посетителя и пользой, на которую рассчитывает владелец. Иными словами, чтобы посетителю было комфортно на сайте, но чтобы при этом он совершал нужные действия: регистрировался, покупал товары, открывал ссылки и т.д.
Основные принципы дружественного интерфейса
Чтобы добиться этого, дизайн интерфейса сайта должен отвечать пяти принципам, которые позволят завладеть вниманием пользователя, удержать его и подтолкнуть к совершению действия, при этом не вызывая раздражения.
1. Интуитивная ясность
Чтобы интерфейс был удобным, он должен быть понятным с первых секунд: куда нажимать, чтобы посмотреть цену на услуги, где кнопка покупки товара, как зарегистрироваться или зайти под своими данными. Если человек не поймет этого сразу, он понажимает произвольные кнопки и, скорее всего, уйдет в другое место с более понятной структурой.
Чтобы избежать этого, дизайн должен быть логичным: с понятной иерархией, привычным расположением элементов, удобными кнопками навигации. Например, в интернет-магазинах корзина всегда располагается в правой верхней части страницы. Если вы уберете ее в другое место, с большой долей вероятности процент брошенных корзин увеличится на несколько пунктов.
Еще один пример — страница с контактами. Все привыкли, что этот раздел отображается последним в меню. Если переместить его на другую позицию, часть пользователей из-за невнимательности или спешки его не найдет и уйдет с сайта, так с вами и не связавшись.
В общем дизайне можно экспериментировать, чтобы выделиться на фоне конкурентов. Но что касается интерфейса, то чтобы он был дружественным, лучше придерживайтесь устоявшихся правил.
2. Предсказуемость
Проанализируйте свою аудиторию и определите, какими сайтами они чаще всего пользуются: соцсетями, поисковиками. Ориентируйтесь на интерфейс этих ресурсов при разработке собственного дизайна. Не нужно бездумно копировать, просто сделайте так, чтобы у посетителей сработали ассоциации.
Наглядный пример — иконки и кнопки. Все привыкли, что окно с личными сообщениями или формой для обратной связи открывается с помощью иконки в виде “конверта”. Если вы добавите такой визуальный элемент в дизайн интерфейса, но придадите ему другую функцию (например, открытие страницы с условиями доставки), это запутает человека и вызовет раздражение, так как он ожидает другого результата от нажатия на иконку.
Тот же принцип действует с кнопками. Если пользователь привык, что кнопка должна быть объемной и контрастной, а вы сделали ее в угоду дизайну блеклой и не сильно выделяющейся, он может вообще не понять, что она кликабельна.
Предсказуемость важна и для контента страниц. Прайс-лист должен лежать в разделе “Цена”, а не в “Примерах работ”, а новости компании — в разделе “Новости”, а не на главной.
3. Минимализм
Не загромождайте дизайн интерфейса излишними элементами: несколько кнопок на одной странице, десятки разделов, сложное меню. В дружественном дизайне интерфейса чем проще, тем лучше.
Дизайн должен быть ориентирован на пользователя. Если у вас много информации, которую никак не удалить и не сократить, выберите из нее только самое важное и поместите на главной странице, остальное спрячьте в тематических разделах. Когда человек заходит на сайт, он не хочет, чтобы на него сразу обрушивались тонны информации. Он хочет увидеть то, зачем пришел, не отвлекаясь на ненужные элементы.
4. Скорость загрузки
Даже самый лаконичный, удобный и приятный для глаз дизайн интерфейса оказывается бесполезными, если страницы прогружаются слишком долго. Пользователь не будет ждать, пока откроется нужный раздел сайта или загрузится анимация с важной информацией, а уйдет в другое место. Низкая скорость загрузки, кстати, может быть следствием перегруженности элементами, но не всегда.
Подробнее мы разбирали эту тему в статье “Скорость сайта и методы ее повышения”.
5. Терпимость к ошибкам
Понятно, что при идеальном дизайне интерфейса ошибок возникать не должно. Однако если рассматривать реальные ситуации, небольшой процент посетителей всегда будут путаться и нажимать “не туда”. В этом случае важно сделать так, чтобы они не боялись ошибок.
Представьте ситуацию. Вы зашли в интернет-магазин, выбрали товар и решили его купить. Заполняете длинную форму заказа: свои контакты, адрес доставки, номер банковской карты. Но в поле для телефона пишете свой номер, например, без приставки “+7”. Затем нажимаете кнопку “Заказать” и… все данные удаляются, а вам высвечивается сообщение об ошибке. Сайт требует, чтобы вы заполнили все по-новой, а вы с досады закрываете его и едете в ближайший розничный магазин, пусть там и дороже.
Чтобы такого не было, в удобном интерфейсе должны быть продуманы сценарии ошибок пользователей. В этом помогут кнопки для отмены изменений и возврата к предыдущему разделу, сообщения о последствиях закрытия страницы. В общем, любое, даже ошибочное, действие посетителя не должно быть невозвратным.
Советы, как сделать интерфейс дружественным, а дизайн — удобным
Если принципы, описанные выше, показались вам слишком абстрактными и теоретическими, давайте перейдем к практике.
Не давайте большой свободы выбора
Да, посетитель должен чувствовать себя свободно на сайте, он не любит, когда что-то навязывают. Но свобода хороша до тех пор, пока не приводит к путанице и сомнениям. Если у вас интернет-магазин, и вы в карточках товаров рекомендуете другие, похожие товары, ограничьте их количество. Не нужно показывать все возможные варианты, выберите только самые подходящие.
Например, на странице с описанием смартфона порекомендуйте конкретный чехол и конкретные наушники, а не абстрактные категории смежных товаров.
Докажите, что сайт безопасен
Пользователи все больше заботятся о конфиденциальности личных данных. Они боятся, что их фотографии, пароли, номера телефонов, истории предпочтений окажутся в общем доступе, и этим воспользуются мошенники.
Чтобы человек доверял вам, докажите и покажите ему, что вы ответственно подходите к защите данных своих клиентов. Используйте протокол https, надежно следите за логинами и паролями, в соглашении расскажите о методах защиты.
Запрашивайте разрешение на рассылку писем и СМС, на обработку персональных данных, согласие с пользовательским соглашением.
Заполнение полей должно быть простым
Если у вас на сайте есть форма для заполнения — регистрация, оформление покупки, подписка на рассылку и т.д. — сделайте ее простой, иначе человек просто не захочет ее заполнять.
Чтобы форма была удобной, помогите человеку ее заполнить.
- Подсказывайте. Если заполняемые данные не уникальны (то есть, не электронная почта, номер телефона, имя), подскажите посетителю, как их заполнить, с помощью выпадающего списка, чтобы он не вводил все вручную. Для даты рождения подойдет окошко с календарем, для другой информации — список (выбор города, пола и пр.)
- Сразу проверяйте правильность. Выше мы описали ситуацию, в которой человек ошибся при заполнении формы, и у него удалились все данные, которые он успел вписать. Чтобы такого не произошло, сделайте автоматическую проверку рядом с каждым полем. Если телефон указан в неверном формате, пусть это будет видно сразу, а не когда посетитель нажмет “готово”.
Один блок с текстом на странице
Только на информационных порталах и в онлайн-СМИ допустим вариант, когда на одной странице отображается основная статья, а по бокам размещены блоки с новостями или кратким содержанием других материалов. Даже в этой ситуации такое решение кажется спорным, на других же сайтах лучше делать дизайн интерфейса таким, чтобы главная информация на странице не оттенялась дополнительными блоками. Внимание пользователя — ценный ресурс, и нельзя им так непрактично разбрасываться.
Похожее к похожему
Не разделяйте структуру сайта на множество похожих разделов, лучше объедините их. Например, в раздел “Контакты” можно добавить и схему проезда, и форму обратной связи, и график работы.
Дублируйте call-to-action
Если контент страницы не помещается на одном экране, и его нужно прокручивать вниз, добавьте призыв к действию и в начале текста, и в конце. Некоторые пользователи готовы сразу нажать на кнопку, некоторым для принятия решения нужно узнать подробности. В обоих случаях человек должен видеть перед глазами кнопку целевого действия.
Используйте контраст
Кнопки должны выделяться на фоне текста и иллюстраций. Это основной элемент, который важен и вам, и пользователю. Сделайте их заметнее, подберите наиболее контрастное сочетание, затемните фон.
Адаптивность
Чтобы не терять потенциальных клиентов и сделать дизайн дружественным, сделайте так, чтобы сайт работал на всех устройства и во всех браузерах. Для смартфонов и планшетов подойдет мобильная версия или адаптивный дизайн. Проверьте, чтобы все кнопки, ссылки и иллюстрации корректно отображались на любом размере экрана.
Удобный поиск
Если у вас на сайте много информации — статей, товаров, документов, — добавьте на нем функцию поиска и сделайте ее удобной. Желательно, чтобы поисковый алгоритм мог распознавать разные формы слов (падежи, род, число) и выстраивать приоритетность результатов.
— Дружественный дизайн интерфейса поможет заслужить доверие и лояльность пользователей, повысит конверсию и глубину просмотра сайта. Главный принцип дружественного интерфейса — баланс между удобством для посетителя и пользой для владельца сайта.
