15 шагов по улучшению юзабилити / Хабр

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

Ясное и осознанное взаимодействие

1. Выбирайте размеры шрифтов

Люди всё больше сёрфят по сети с помощью мобильных устройств, и для некоторых сайтов мобильная версия стала основной. А это диктует свои требования к размеру шрифтов, ведь экраны смартфонов и планшетов гораздо меньше, чем обычные мониторы и ноутбуки. Распространение адаптивного дизайна сыграло большую роль в привлечении внимания к проблеме шрифтов.

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

2. Пишите информативные сообщения об ошибках

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

Но настоящие пользователи не могут этим похвастаться.

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

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

Удобство форм ввода

3. Упростите требования к паролям

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

К примеру, исторически сложилось так, что поля выбора (select box) трудно поддаются стилизации. В большинстве случаев разработчики стараются скрыть стандартные объекты и клонировать их в виде более подходящих DOM-элементов. При этом данные из «клонов» передаются на вход оригинальных элементов.

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

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

4. Используйте правильные формы ввода

Многие советуют использовать форматирование данных в полях ввода. Например, если добавить input[type="email"], input[type="tel"], то при вводе автоматически переключается раскладка. Однако выглядит это странно и вовсе не помогает, а мешает в заполнении формы.

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

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

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

5. Срежиссируйте яркий и запоминающийся опыт первого использования

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

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

6. Дьявол в деталях

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

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

Режиссирование успешного первого опыта использования сродни ходьбе по канату — очень трудно всё сделать правильно, но если у вас получается, то с лихвой вознаграждается пользовательским признанием. Например, проект Stumbleupon очень удачно обучает новичков своим основным возможностям.

Хорошим решением может быть встраивание процесса обучения в обычную процедуру использования продукта. Допустим, при выполнении архивирования писем в почтовом приложении можно выдавать сообщение «А вы знаете, что можно запускать архивирование с помощью Ctrl + K?». Такой подход позволяет обучать пользователей гораздо мягче по сравнению с традиционными уроками в стиле «обзор всего приложения».

7. Микрокопирование не должно использоваться задним числом

«Микрокопирование» имеет отношение ко всем маленьким инструкциям и подтверждениям, используемым в приложениях.

• «Не волнуйтесь, мы не допустим утечки вашего почтового адреса»
• «Для оплаты не требуется банковская карта»

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

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

8. Всегда обеспечивайте наличие контекста

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

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

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

Крайне популярный сегодня material design от Google вывел на новый уровень использование анимации для обеспечения контекста. Нажатие на объект запускает анимированное перетекание из текущей страницы к подгружаемой информации об объекте. Это наглядно показывает логические взаимосвязи, откуда что проистекает и куда пользователь вернётся.

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

9. Атомарные действия

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

Один из замечательных примеров: модальное окошко “compose new tweet” в Twitter’е, представляющее собой модуль для выполнения одного из важнейших действий в этом приложении. Ведь Twitter умрёт, если люди перестанут твитить. Как видите, здесь всё нацелено на то, чтобы пользователь мог сосредоточиться на написании текста, не отвлекаясь ни на что лишнее.

Этот подход работает эффективнее всего при выполнении атомарных действий. При этом вы можете предоставить всё необходимое для совершения действия в рамках того же самого модала.

10. Сообщения об ошибках

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

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

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

11. Сосредоточение уведомлений в одном месте

Благодаря распространению одностраничных приложений мы имеем возможность унифицировать всевозможные пользовательские уведомления. Граница между нативными и веб-приложениями становится всё более размытой. Когда приложению нужно повзаимодействовать с пользователем, то куда легче отправлять все сообщения в какое-то отдельное место, а не размещать их в контексте. Хотя из этого правила есть исключения. Хорошим примером репозитория уведомлений является папка входящих сообщений Gmail. А модуль для организации уведомлений Growl не даст пользователю не заметить важное сообщение.

В Feedly уведомления всегда располагаются в середине «шапки» страницы. Это приучает пользователя всегда искать в этой зоне важные сообщения, даже во время выполнения каких-то действий и покидания исходного контекста. Здесь реализована удобная функция перехода к следующей статье, когда пользователь помечает текущую статью прочитанной.

В Feedly все уведомления глобальные и всегда отображаются в одном и том же месте. При этом ссылки и перечень необходимых действий явно отделены от текстового контекста.

12. Избегайте тупиковых состояний

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

13. Предоставляйте пользователю контроль

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

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

14. Избегайте рассеивания внимания

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

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

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

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

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

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

К примеру, Facebook несколько лет оттачивал группировку настроек приватности, чтобы облегчить их конфигурирование. А ведь когда-то это была настолько нетривиальная задача, что многие просто не трогали эти настройки. После их разделения на секции увеличилась доля пользователей, которые работают с этими страницами, а не избегают их.

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

Также разделение на логические блоки облегчает обнаружение и решение возникающих проблем. Ведь никому не захочется разбираться с сообщением наподобие «Вы не могли бы исправить следующие четыре пункта?»

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

То же самое можно сказать и о формах пожертвования, в особенности в мобильных проектах. Вы же наверняка хотите, чтобы пользователь подумал: «Надо же, как всё просто» вместо «Да уж, на это нужно время». Улучшение удобства пользования формами напрямую отражается на прибыльности проекта.

* * *

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

Как улучшить юзабилити сайта — CMS Magazine

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

• дизайн и юзабилити, 




• работа над контентом, 




• seo.

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

Юзабилити — удобство сайта, как для визуального восприятия, так и для работы с ним. Поисковая система Яндекс уже в 2011 году научила свои алгоритмы учитывать юзабили сайтов и при ранжировании отдавать предпочтение более удобным (http://webmaster.ya.ru/replies.xml?item_no=11888). 

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

Хорошо рассказывать и давать рекомендации, а мы готовы поделиться с Вами уникальным опытом работы по улучшению юзабилити сайта одного из наших клиентов http://www.f-kovrikov.ru

Юзабилити сайта — все дело в мелочах

Сайт www.f-kovrikov.ru пришел на продвижение к нам совсем недавно — 15 августа 2015 года. В первую очередь специалист по поисковому продвижению приступил к анализу сайта, из которого выяснилось, что над юзабилити сайта, при его создании, никто не задумывался.  

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

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

Скрины: Главная страница сайта «До» и «После» проделанных работ

ПОСЛЕ

Что было сделано

Мы поработали над шапкой и верхним меню сайта:

1. В верхнее меню добавили кнопку «Заказать» — это поможет посетителям сайта в любой момент совершить заказ.




2. К телефонам добавили адрес офиса, и что самое главное — город. Теперь пользователи будут видеть, что компания работает в Ростове-на-Дону




3. Переименовали названия разделов. Так, название «Найти свой автомобиль» было переименовано «Выбор по автомобилю»




4. Перераспределили разделы между двумя верхними меню.




5. Изменили размер шрифтов заголовков

Добавили новые разделы на сайте:

1. о компании




2. оплата

Обновили информацию на сайте

• на главной странице убрали устаревшую акцию




• обновили новостной блок свежими новостями




• переписали текст на главной, а так же красиво его оформили и структурировали




• обновили данные в разделе «Контакты» в соответствии с требованиями поисковых систем. Подробнее о том как должна быть оформлена стрнаица Контакты. 

Скрины: Раздел Контакты «До» и «После» проделанных работ 

ПОСЛЕ

Стилизовали новостной блок:

• сделали одинаковый шрифт для заголовков и краткого описания




• названия новостей выделили цветом




• выровняли новости по краю

Изменили футор:

• удалили текстовую информацию




• добавили нижнюю навигацию




• Разместили контактные данные




• сократили размер футора

И вот он результат

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

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

Конечно мы будем и дальше работать над улучшением юзабилити даного сайта и будем делать это постоянно.

И напоследок

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

Перейти на сайт

7 советов по улучшению удобства использования и дизайна веб-сайта

«Удобство использования веб-сайта» означает, насколько легко кому-либо пользоваться веб-сайтом и перемещаться по нему. Хотя это довольно широкий термин, веб-юзабилити можно сузить до нескольких ключевых аспектов — простоты, согласованности, узнаваемости, релевантности и доступности сайта. Короче говоря, удобство использования веб-сайта в основном направлено на то, чтобы сделать веб-сайт более удобным для пользователя.

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

Вот семь основных советов, которые вы можете использовать для повышения удобства использования вашего веб-сайта:

1. Сократите время загрузки страницы

Пользователи могут «отложить» посещение вашего веб-сайта до полной загрузки страницы.

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

Согласно опросу Kissmetrics, 40% покупателей покидают веб-сайт, загрузка которого занимает более трех секунд.

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

2. Поддерживайте согласованность на вашем сайте

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

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

3. Сделайте свой сайт адаптивным

За последнее десятилетие число мобильных пользователей резко возросло: отчет Ofcom за 2015 год показал, что 33% интернет-пользователей считают свой смартфон самым важным устройством для выхода в интернет. В результате иметь удобный для мобильных устройств и адаптивный сайт больше не вариант, а неотъемлемая часть дизайна вашего сайта.

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

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

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

4. Используйте знакомый макет навигации

Без простого и узнаваемого макета навигации пользователи будут сбиты с толку, и многие могут отказаться от веб-сайта из-за разочарования.

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

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

5. Используйте заголовки и подзаголовки с вашим контентом

Контент является жизненно важной частью любого веб-сайта, особенно с точки зрения SEO. Заголовки (h2) и подзаголовки (h3) помогут разбить ваш контент и сделать страницу лучше для пользователя, просматривающего ваш сайт, а также помогут с SEO, поскольку h2 по-прежнему считается важным фактором ранжирования. . Вместо того, чтобы приводить пользователей к большому объему текста, использование заголовков и подзаголовков вселит в пользователя уверенность в том, что он находится в нужном месте, что в конечном итоге приведет к «долгому клику», повышающему уровень вовлеченности.

6. Выделите свои ключевые особенности

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

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

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

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

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

Как повысить удобство использования веб-сайта

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

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

Посмотрите приведенное ниже видео с канала Flux на YouTube, чтобы услышать мнение Рана Сегалла о красивом и удобном дизайне веб-сайта:

‍

‍

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

‍

5 принципов удобства использования веб-сайта

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

‍

1. Оптимизация для мобильных устройств

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

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

‍

Пример дизайна веб-сайта, оптимизированного для мобильных устройств ( источник )

‍

Как улучшить мобильную оптимизацию

Если вы новичок в веб-дизайне, вам может быть интересно: что на самом деле означает для веб-сайта, который может реагировать на мобильные устройства? Вот три способа обеспечить оптимизацию веб-сайта для мобильных устройств:

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

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

‍

Как протестировать мобильную оптимизацию

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

Вот пара сайтов, предоставленных вам Google, которые вы можете использовать для проверки производительности своих веб-сайтов на мобильных устройствах:

• Think with Google’s Test My Site
• Google’s Mobile-Friendly Test

‍

2. Простая навигация

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

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

‍

Пример понятной и простой навигации с выпадающим меню ( источник )

‍

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

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

‍

3. Визуальная иерархия

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

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

‍

Пример эффективной визуальной иерархии в дизайне веб-сайта с большим количеством текста ( источник )

‍

Как создать визуальную иерархию в веб-дизайне с использованием различных методов

900 визуальная иерархия для повышения удобства использования веб-сайта.

Вот некоторые из наиболее распространенных способов создания визуальной иерархии в веб-дизайне:

• Размер . Самый большой элемент на странице обычно первым привлекает внимание.
• Цвет . Контрастные цвета визуально выделяются и могут привлечь внимание к важным элементам, таким как кнопки.
• Негативное пространство . Белое пространство разделяет элементы и важно для добавления акцента и ограничения перегруженности.
• Выравнивание . Использование соответствующего выравнивания в веб-дизайне помогает организовать контент так, чтобы за ним было легко следить.

Щелкните здесь , чтобы узнать больше о визуальной иерархии и о том, как ее реализовать в веб-дизайне.

‍

4. Доступность

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

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

Как улучшить доступность веб-сайта

Итак, что вы можете сделать, чтобы улучшить доступность веб-сайта? Вот четыре рекомендации, которые следует использовать на каждом создаваемом веб-сайте:

• Добавить замещающий текст ко всем изображениям . В целях SEO у вас может возникнуть соблазн заполнить теги alt вашего изображения ключевыми словами. Или, может быть, вы вообще не используете теги. Для обеспечения доступности в Интернете важно написать замещающий текст, описывающий содержимое изображения, чтобы средства чтения с экрана могли передать эту информацию пользователю, если он не может просмотреть изображение.
• Создать цветовой контраст . Убедитесь, что весь текст на вашем сайте сильно контрастирует с фоном, будь то сплошной цвет, изображение или что-то еще. Чем выше коэффициент контрастности, тем доступнее сайт. Используйте это средство проверки контраста, чтобы проверить соответствие.
• Используйте правильные теги заголовков HTML . Использование правильных тегов заголовков (h2, h3, h4, h5) важно для организации содержимого на странице, чтобы его было легко отслеживать и понимать, особенно для тех, кто использует программы чтения с экрана.
• Включить теги меток для ввода формы . Добавляя форму на свой веб-сайт, убедитесь, что каждое поле ввода имеет метку. Другими словами, не полагайтесь только на текст-заполнитель, который доступен не каждому пользователю.

Щелкните здесь , чтобы прочитать наше подробное руководство по доступности веб-сайтов.

‍

5. Доверие

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

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

‍

Отзывы — отличный способ повысить доверие к сайту ( источник )

‍

Как повысить доверие к сайту

05 9 t требуют получения самых престижных наград в вашей отрасли.

Вот несколько советов, как повысить доверие к каждому создаваемому вами веб-сайту:

• Проверка на грамматические и орфографические ошибки . Это может звучать как легкая задача, но это легко упустить из виду. Подобные простые ошибки выглядят ленивыми и непрофессиональными.
• Предоставьте контактную информацию . В идеале каждый веб-сайт должен содержать некоторые контактные данные, такие как адрес, номер телефона и адрес электронной почты. Эти детали помогают узаконить бизнес.
• Включить отзывы . Стороннее социальное доказательство имеет большое значение для укрепления доверия и авторитета.
• Создать страницу «О нас» . Это одна из самых важных страниц каждого веб-сайта. Расскажите немного предыстории, чтобы очеловечить бренд.
• Покажите свой опыт . Награды, публикации и другие функции — отличный способ завоевать авторитет и доверие.

Чтобы узнать больше о том, как повысить доверие к веб-сайту, ознакомьтесь с этой полезной статьей Нила Пателя.

This entry was posted in Популярное