Современное юзабилити сайтов: как оформить сайт, чтобы не потерять посетителей

В 2017 году превалирующая компаний в крупных городах уже имеют личный сайт, да он, как и любая динамическая структура, постоянно требует доработок. Какие-в таком случае компании только собираются создавать свой первый сайт. И на пороге всеми причастными к обновлению сайта людьми встаёт масса вопросов:

• Что размещать на главной странице?
• Сколько стоит в меню выводить категорий товаров?
• В какой последовательности разместить пункты меню и т.д.

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

Какие элементы сайта рассматриваем в статье

«Менингитка» сайта – самая видимая часть сайта, в соответствии с, сюда обращаем пристальное внимание и оцениваем эффективность каждого символа и иконки.

Веб-склад – краеугольный камень большинства современных сайтов, здесь сосредоточено 80% всех ошибок, вынуждающих пользователя побросать сайт.

Навигация – наравне с веб-формами таит в себя множество нюансов и требует тщательной проработки.

Графические азбука – а вы бы купили товар/заказали услугу числом одной только картинке с этого раздела? Если да и только, читаем и внедряем.

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

Адаптивная набор – на экранах мобильных устройств ваш сайт очевидно обязан выглядеть хорошо.

Пробежимся по всем пунктам и составим показ удобного сайта.

«Шапка» или хедер

«Шапка» сайта – сие, как правило, первое, что видит пользователь нате сайте. Этот элемент расположен на самом заметном месте бери странице. Поэтому он должен быть информативным, маловыгодный перегруженным.

• Высота шапки не должна быть преувеличенно большой. Так, в первый экран должно попадать основа предложение сайта, которое пойдет ниже, поэтому пирожок должна располагаться компактно.

• В шапке должны располагаться логотип компании и призыв-подстрочник. Желательно расположить логотип с левой стороны и учредить на него ссылку на главную страницу. Такое склонность логотипа уже стало негласным отраслевым стандартом.

Речевка-подстрочник – это краткое описание того, чем занимается компашка. Такая надпись легко доносит до нового посетителя основную участие. Ant. бездейственность компании.

• В «шапке» должны присутствовать контактные данные. Сотовик и почта. Эти данные должны быть размещены текстом, а невыгодный картинкой, чтобы при желании пользователи могли их повторить.

• В шапке полезно разместить кнопки для вызова сложение заявки. Например, «Заказать обратный звонок» или «Оставить заявку». Таким образом, разве посетитель не хочет звонить, он может отринуть заявку и с ним в дальнейшем свяжутся.

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

Исходя из написанного выше, «шапка» сайта у нас должна выйти информативной и компактной. Важно сохранить легкость восприятия и простоту.

Передвижение

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

• Основа всего – удобство навигации. Звучит просто, в реализации случается довольно сложно этого добиться.
• В большинстве случаев – используйте древовидную структуру список:

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

• Количество уровней вложенности не должно находиться (в присуствии) больше двух-трех. Иначе пользователям будет чрезвычайно сложно ориентироваться.
• Необходимо визуально показывать пользователю, в каком пункте листок он сейчас находится. Как правило, это ударение цветом.
• Если имеется несколько уровней вложенности, коли на то пошл используйте «хлебные крошки». Они выглядят вот круглым счетом:

• Если у вас имеется объемный каталог, задействуйте раскрывающиеся пункты карта. Они позволят избавиться от длинных «портянок», в которых пиччикато ориентироваться.

Совсем плохо

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

Просто плохо

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

Хорошо

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

Здесь реализация очень удачная и удобная.

Веб-фигура

Чаще всего именно веб-формы стоят промежду успешной продажей/заявкой и обычным посещением. Сложно взглянуть иными глазами важность данного элемента в коммерческой успешности сайта. Значит, каким критериям должна удовлетворять идеальная веб-форменная одежда?

• В форме должно быть минимум полей (если фон нужно сделать обязательным, то объясняем «почему»).
• Указываем (наглядный) заполнения поля (формат номера телефона, адреса и т.д.).

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

• Красной звездочкой (*) обозначаем обязательные к заполнению полина. Без заполнения этих полей не отправляем документация формы.
• В обязательных полях проверяем корректность введенных данных. Приближенно, телефон должен содержать только цифры и символы. В почте поставлен в необходимость присутствовать символ «@».
• После успешной отправки данных телосложение сообщаем об этом и прописываем, чего пользователю имеет смысл ожидать дальше (позвоним, напишем, когда).

• Очищаем полина формы только после успешной отправки данных веб-конституция.
• С 1 июля 2017 года (вообще-то всегда) должно размещать на каждой веб-форме чек-ящик с текстом «Я согласен на обработку персональных данных», идеже этот текст является ссылкой на документ. Грамота должен присутствовать на сайте и содержать политику конфиденциальности. Подробнее см. основание «О персональных данных».

Плохо

Много полей, неважный (=маловажный) указано, какие из них обязательные к заполнению, в случае ошибки оттиск сбрасывает все данные и не подсвечивает ошибочно заполненные полина. К тому же при заполнении полей пропадают обозначения сих полей и уже сложно понять, что куда нужно записать. Ужас юзабилиста!

Хорошо

Одно обязательное поле исполнительно сверстано, присутствует поле для уточнения, если нужно.

Чисто такой элемент должен быть у вас в веб-форме. Еще бы-да, и у вас тоже. При условии что вас собираете данные пользователей.

«Подвал» или футер

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

Где-то, здесь размещаем:

• Ссылку на упомянутое пользовательское пул, в котором описывается информация о персональных данных.
• Копирайт в формате «год создания сайта – катящийся год».
• Контактную информацию из шапки сайта. Долистав накануне конца страницы, пользователь, возможно, захочет вам протелефонировать/написать.
• Полезно также разместить ссылки на основные разделы сайта, чтоб пользователи могли быстро перейти в нужный раздел.

Плохо

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

Хорошо

Достаточно спорное форма «подвала», но в целом от такой реализации побольше плюсов. Заметьте, как много свободного места рядом таком количестве элементов. Здорово!

Графика

О графике вы следует знать следующее: мозг воспринимает графическую информацию в один-два раз быстрее, чем написанную текстом. Лучше Вотан раз увидеть, чем 100 раз услышать, помните эту поговорку?

Почему все фото на сайте должны удовлетворять следующим условиям:

• Используйте точию качественные фотографии.
• Используйте уникальные фотографии (для SEO – сие тоже плюс). Не используйте стоковые фотографии.

Стоковые фотографии безлюдный (=малолюдный) несут необходимой информации о компании.

• Картинка должна реализовать.

• Удобный просмотр фотографии – залог успеха. Для сего нужно сделать так, чтобы фотографии можно было отсмотреть в увеличенном размере, реализовать пролистывание увеличенных фото.
• К фотографиям добавьте описания. Чаще сие относится к фото выполненных заказов.

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

Адаптивная верстка

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

Современный сайт не мудрствуя лукаво обязан быть адаптированным под мобильные устройства. Пусть даже если у вас промышленная ниша, адаптивная вtрстка утвердительно скажется на ранжировании сайта в поисковых системах (об этом говорили наподобие в Google, так и в Яндексе). К тому же такая оптимизация улучшит поведенческие факторы пользователей мобильных устройств. Никак не говоря уже о качественном охвате еще большей аудитории.

В целях проверки сайта на адаптивность есть много онлайн-сервисов. Водан из самых известных – сервис от Google. Для того чтобы посмотреть, как выглядит сайт на различных устройствах, я использую услуга adaptivator.ru.

Плохо

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

Хорошо

Сподручный сайт, адаптированный под мобильные устройства.

Для а следует улучшать юзабилити сайта?

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

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

Рассмотрим бесцеремонно пример:

Вывод здесь достаточно прост. Поработав по-над юзабилити, вы можете увеличить количество заявок близ той же посещаемости!

Вместо заключения

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

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

Удобных сайтов, больших конверсий, счастливых клиентов! 

Источник: www.seonews.ru