Дружественный интерфейс: как сделать дизайн сайта удобным

Дружественный интерфейс сайта (или юзабилити) отражает, насколько просто и удобно для обычного человека пользоваться веб-ресурсом. Основным показателем хорошего интерфейса является эргономичность. Это значит, что чем меньше действий человек совершает, чтобы достичь своей цели, тем интерфейс удобнее.

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

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

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

1. Интуитивная ясность

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

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

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

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

2. Предсказуемость

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

Наглядный пример — иконки и кнопки. Все привыкли, что окно с личными сообщениями или формой для обратной связи открывается с помощью иконки в виде “конверта”. Если вы добавите такой визуальный элемент в дизайн интерфейса, но придадите ему другую функцию (например, открытие страницы с условиями доставки), это запутает человека и вызовет раздражение, так как он ожидает другого результата от нажатия на иконку.

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

Предсказуемость важна и для контента страниц. Прайс-лист должен лежать в разделе “Цена”, а не в “Примерах работ”, а новости компании — в разделе “Новости”, а не на главной.

3. Минимализм

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

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

Не давайте большой свободы выбора

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

Например, на странице с описанием смартфона порекомендуйте конкретный чехол и конкретные наушники, а не абстрактные категории смежных товаров.

Докажите, что сайт безопасен

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

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

Запрашивайте разрешение на рассылку писем и СМС, на обработку персональных данных, согласие с пользовательским соглашением.

Заполнение полей должно быть простым

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

Чтобы форма была удобной, помогите человеку ее заполнить.

• Подсказывайте. Если заполняемые данные не уникальны (то есть, не электронная почта, номер телефона, имя), подскажите посетителю, как их заполнить, с помощью выпадающего списка, чтобы он не вводил все вручную. Для даты рождения подойдет окошко с календарем, для другой информации — список (выбор города, пола и пр.)
• Сразу проверяйте правильность. Выше мы описали ситуацию, в которой человек ошибся при заполнении формы, и у него удалились все данные, которые он успел вписать. Чтобы такого не произошло, сделайте автоматическую проверку рядом с каждым полем. Если телефон указан в неверном формате, пусть это будет видно сразу, а не когда посетитель нажмет “готово”.

Один блок с текстом на странице

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

Похожее к похожему

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

Дублируйте call-to-action

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

Используйте контраст

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

Дружественный дизайн интерфейса поможет заслужить доверие и лояльность пользователей, повысит конверсию и глубину просмотра сайта. Главный принцип дружественного интерфейса — баланс между удобством для посетителя и пользой для владельца сайта.