Как повысить юзабилити сайта — 3 важных совета. Улучшить юзабилити сайта


7 способов улучшить юзабилити сайта

usability.jpg

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

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

Контент, максимально удобный для пользователя. Общие цели

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

  • Текст должен быть легким и удобочитаемым не только в плане организации и подачи информации, но так же и его формата.
  • Смысл текста должен пониматься без усилий.
  • Текст должен быть предельно понятен даже при «чтении по диагонали» — помните, что посетители веб-сайтов, как правило, часто просто просматривают статьи. Согласно исследованиям, читается только 28% объема всего текста на веб-странице.

Далее читайте, как просто и легко добиться этих целей.

1. Краткость — залог успеха

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

  • Не тратьте время на введение, переходите сразу к сути.
  • Исключите ненужную информацию.
  • Используйте легкие для понимания, более короткие, общие слова и фразы.
  • Избегайте длинных абзацев и предложений.
  • Используйте экономные и эффектные способы оформления мысли и текста, например, вместо того, чтобы писать «одна тысяча» ограничьтесь цифрой «1000». Это позволит пользователям быстро просмотреть текст и найти нужную информацию
  • Проверьте свой стиль, используя формулы ридабилити, которые помогут вам оформить текст как можно правильнее. Инструмент для определения индекса ридабилити (The Readability Test Tool) позволяет вам подставлять URL, и показывает выдачу, основанную на популярных формулах ридабилити, таких как Flesch Kincaid Reading Ease (проверял на этом блоге, работает и с русским языком — прим. ред.).

1.jpg

2. Заголовки и подзаголовки, организация текста в больших статьях

Проведя исследование удобства и простоты использования сайтов, эксперт по организации веб-контента Джерри МакГоверн (Gerry McGovern), пришел к выводу, что интернет-пользователи просматривают страницы в интернете способом, который он назвал «блочным чтением».Так, при просмотре страницы, мы подсознательно делим ее на отдельные блоки информации и быстро сканируем взглядом каждый из этих блоков, высматривая в каждом ту информацию, которая нас интересует.Исследование движений глазного яблока, проведенное Нильсеном, только подтвердило этот вывод: сначала мы просматриваем текст слева направо, а затем скользим взглядом вниз по тесту и движения наших глаз напоминают латинскую букву F (по-английски это называется F-shaped pattern), что значит, что большое количество текста попросту остается непрочтенным.

2.jpg

Есть несколько вариантов работы с этим достаточно громоздким текстом. Одна стратегия состоит в том, чтобы разбить длинные статьи на абзацы для того, чтобы было удобнее быстро их просматривать. Данная стратегия отвечает особенностям блочного чтения (статья буквально разбита на эти самые блоки и каждый блок имеет заголовок), а так же тем, кто предпочитает просматривать статьи по модели буквы «F», потому, что заголовки мы так или иначе читаем.Ниже вы видите этот текст в двух вариантах – без заголовков (вариант 1) и с заголовками (вариант 2). Думаю, понятно, с каким из двух вариантов читателю будет проще работать.

3.jpg

Что можно предпринять:

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

3. Помогите читателям максимально быстро просматривать ваш текст

Как обозначено в исследовании юзабилити Нильсена, а так же на основе других не менее убедительных трудах, пользователи попросту просматривают текст «по диагонали» и наиболее эффективной организацией текста на странице, таким образом, является его структурирование для именно такого прочтения. (Это на целых 47 % улучшит его показатели удобства и простоты).

Что можно предпринять:

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

4.jpg

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

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

5.jpg

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

Что можно предпринять:

  • Обдумайте возможность разбивки абзаца на ряд пунктов с маркированным списком
  • Выделите важную информацию жирным шрифтом и курсивом.

5. Пробелы очень важны

Значения интервалов между символами, словами, строками и абзацами очень важны. От того, как текст расположен на странице, зависит его удобочитаемость (значит, и скорость прочтения).В исследовании, названном Reading Online Text: A Comparison of Four White Space Layouts, исследователи обнаружили, что варьируя интервалы и пробелы в тексте можно влиять на его понимание читателем и скорость его прочтения.

6.jpg

Что можно предпринять:

  • Обдумайте варианты верстки вашей странички в плане пробелов и интервалов и настройте CSS сайта соответствующим образом.
  • Ознакомьтесь со статьей CSS properties that affect spacing in your text. Наиболее важными являются такие показатели как margin, padding, line-height, word-spacing, letter-spacing и text-indent.

6. Понятные и удобные ссылки

Одним из главных преимуществ веб-текста является возможность использовать гиперссылки. Правильное использование гиперссылок в тексте может положительно повлиять на его ридабилити.

Что можно предпринять:

  • Определите, какие ссылки уже были использованы пользователем, выделяя использованные цветом (поможет селектор CSS:visited). Это поможет посетителям видеть, какими ссылками они уже пользовались, а какими — нет.
  • Используйте атрибут title, обеспечивая ссылки контекстом, на основе которого пользователи будут в общих чертах знать, что их ждет при переходе по ним.
  • Если возникнет необходимость в дополнительной информации, читайте Visualizing Links: 7 Design Guidelines.

7. Стратегическое использование визуальных элементов

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

7.jpg

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

Что можно предпринять:

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

Это была первая статья по юзабилити, ждите продолжения. Всего их будет аж 4. А пока жду ваши комментарии)

via

Naikom » Дизайн » Веб-дизайн

naikom.ru

Как улучшить юзабилити своего сайта, контент

Здравствуйте дорогие друзья! В сегодняшней статье мы будем заниматься, по истине, творческой работой – улучшать юзабилити сайта! Чтобы пользователи не покидали ваш интернет ресурс, прочитав несколько строчек текста, нужно улучшить их пребывание на сайте и делать его максимально комфортным!

Юзабитили сайта, как увеличить интерес

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

И так, давайте приступим к делу!

Поиск по сайту

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

Пример на моем сайте:

картинка формы поиска по сайту

Как видите, он расположен в правой боковой панели и виден при первом просмотре без прокрутки (вертикального скроллинга) вниз.

Восприятие текста

Это очень важный фактор, ведь если пользователю будет не комфортно читать текст какой-либо статьи, то больше 2-3 предложений он читать не будет.

Одной из частых ошибок является цвет текста, вот примеры, просто отвратительных для восприятия, текстов:

Желтый текст..

пример неправильного текста

Светло-голубой..

Отвратительный текст

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

Расположение элементов меню

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

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

Кнопка вверх

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

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

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

Поэтому ставим кнопку, вот статья в помощь: Как сделать кнопку наверх?

Грамотность

Грамотность написания статей – это очень важный фактор, влияющий на улучшение юзабалита сайта!

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

Чтобы проверить текст на ошибки, зайдите в панель Яндекс веб мастера и выберите инструмент – Яндекс-проверка орфографии, введите адрес вашего сайта (или адрес страницы) и нажмите “Проверить”. Ошибки будут выделены желтым.

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

Как не допускать ошибок? Чтобы не допускать ошибок, просто перечитывайте свою статью сразу после того, как завершите её написание.

Дизайн

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

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

На что влияет дизайн:

  • Время пребывания на сайте (отсюда следует уменьшение отказов)
  • Количество просмотров

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

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

Читайте: Какой выбрать шаблон для сайта?

Помните, читать интересную и полезную информацию на простом сайте – это одно, а читать статьи на сайте, дизайн которого радует глаз, это уже куда более приятное занятие!

Скорость загрузки

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

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

Также, для ускорения блога, рекомендую проводить оптимизацию картинок, для уменьшения их веса!

Размещайте контент слева

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

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

Мой сайт соответствует вышеописанному критерию, думаю, ваш тоже.

Простые формы для заполнения

Чем проще для заполнения форма, будь это контактная или регистрационная, тем лучше!

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

Страница 404

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

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

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

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

Улучшение комментариев

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

  1. Добавляем комментарии от Facebook
  2. Добавляем комментарии от Вконтакте
  3. Возможность подписаться на новые сообщения, ответы
  4. Возможность комментирования под профилями социальных сетей

Также, нужно сделать максимально удобным заполнения контактных полей (адрес сайта, адрес электронной почты, имя, фамилия..).

Похожие материалы

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

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

Прочие рекомендации

Основное оружие, которым должен владеть каждый блоггер – это умение писать интересные и полезные статьи.

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

Также, советую почитать эту статью по теме: Что должно быть на каждом seo блоге?

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

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

Ваш Сергей Оганесян, до новых встреч!

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

sergey-oganesyan.ru

Как улучшить UX сайта — 12 советов по юзабилити — Netpeak Blog

Клиенты довольно часто спрашивают: «Зачем вы, SEO-специалист, даете рекомендации по дизайну и юзабилити?». Все просто. Вне зависимости от уровня оптимизации пользователь сразу покинет сайт, если он неудобен. Подтверждающее правило исключение — тематики со слабой конкуренцией. Верно и обратное: проработка вопросов юзабилити может улучшить поведенческие факторы и, как результат, — видимость сайта. За несколько лет работы я собрал ряд заметок и наблюдений по улучшениям в сфере юзабилити, которые действительно оказывают влияние на показатели сайта. 

1. Меню и навигация по сайту

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

1.1. Где использовать горизонтальное меню?

Такое меню органично смотрится на сайтах, посвященных одной определенной тематике, или корпоративных порталах.

Плюсы:

  • занимает меньше места, чем вертикальное;
  • не нужно скроллить.

Минусы:

  • расположенные слева пункты привлекают больше внимания;
  • воспринимается медленнее, чем вертикальное.

1.2. Где использовать вертикальное меню?

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

Плюсы:

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

Еще один вопрос, связанный с вертикальным меню: где именно его разместить?

1.2.1. Зачем размещать вертикальное меню слева?

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

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

Кстати, в выдаче поисковиков F-образная траектория просмотра теряет актуальность. Отмена правого рекламного блока в выдаче Google только содействует этому. Но я еще не встречал серьезных исследований с критикой F-паттерна для сайтов.

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

1.2.2. Зачем размещать вертикальное меню справа?

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

Известный в среде интернет-маркетологов блог Devaka.ru

2. Какие шрифты использовать

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

Читайте по теме:

2.1. Семейство гарнитур

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

Распределение операционных систем в мире. Данные 2014 года

Пользователям Windows хорошо знакомы гарнитуры Arial, Tahoma, Verdana, Times New Roman, Georgia, Courier а также множество других, нестандартных шрифтов. Они установлены по умолчанию. На UNIX-платформах используются их аналоги. Правда, выглядят эти шрифты не совсем так, как в Windows, да и не для каждого нестандартного шрифта найдется соответствующий аналог.

Позвольте, спросите вы, но причем здесь сайты? Дело в том, что при загрузке сайта обычно никто не заливает на сервер файл со шрифтами. Из-за этого текст, набранный Arial, для пользователей Ubuntu, например, будет отображаться по-другому, чем для пользователей Windows.

Читайте по теме: Шрифты, общие для всех (актуальных) версий Windows, и их Mac-эквиваленты.

Самое простое решение вопроса — использовать шрифты из Google Fonts. Их легко подключать, кроме того, среди них нет некачественных гарнитур. Базовая рекомендация — сочетать для заголовка/основного текста шрифты с засечками/без засечек. Например, Antiqua для основного текста и Grotesque для заголовков. Еще несколько удачных, на мой взгляд, комбинаций из Google Fonts: Open Sans + Lora:

PT Sans + PT Serif:

PT Serif + Open Sans:

2.2. Вертикальный ритм текста

Помните, вы в школе писали в тетрадях в прямую линейку?

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

Высота элементов кратна высоте строки. Например, заголовок h2 — три высоты строки, h3 и h4 — две высоты строки. Пример соотношения размеров заголовков и текста в CSS:

h2 {font-size:36px; line-height:48px; margin:24px 0;} h3 {font-size:30px; line-height:48px; margin:24px 0;} h4 {font-size:24px; line-height:24px; margin:24px 0;} p {font-size:16px; line-height:24px; margin:24px 0;}

Здесь для простоты значения указаны в пикселях. На практике обычно используют относительные единицы «em» или «rem». Так будет выглядеть текст с данным оформлением:

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

Например:

2.3. Как выбрать нужный контраст шрифта и фона?

Хороший контраст:

Плохой контраст:

Как понять, хороший ли контраст у шрифтов с фоном? Сделайте скриншот страницы и переведите картинку в оттенки серого в любом редакторе (нет фотошопа? Ловите Pixlr). Если текст по прежнему легко прочитать, то контраст достаточный. Второй способ — воспользоваться бесплатным инструментом для проверки контрастности шрифта.

Рекомендую использовать цвет шрифта от #000 до #333.

2.4. Оптимальная длина строки

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

2.5. Оформление ссылок

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

3. Когда стоит использовать кнопки?

Рекомендую использовать кнопки, когда надо заставить пользователя выполнить важное действие (CTA) — зарегистрироваться, купить, скачать.

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

3.1. Где расположить кнопку?

Кнопки с важными CTA рекомендуется располагать справа. Это связано с тем, как пользователи просматривают страницу.

Диаграмма Гутенберга показывает ориентацию взгляда пользователя

Кнопка в четвертом квадрате — хороший призыв к действию. Она расположена именно там, где останавливается взгляд посетителя. Пример:

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

Суммируем все рекомендации:

  1. Используйте горизонтальное меню на сайтах, посвященных одной определенной тематике, или корпоративных порталах.
  2. В горизонтальном меню более важные пункты размещайте слева.
  3. Используйте вертикальное меню для крупных интернет-магазинов или порталов с большим количеством разделов.
  4. Если аудитория сайта постоянна и растет незначительно, меню стоит расположить справа, так как большинство пользователей уже знакомы с разделами сайта.
  5. Используйте шрифты из Google Fonts для обеспечения единообразного отображения на разных платформах (Windows, Mac, UNIX).
  6. Сочетайте для заголовка/основного текста шрифты с засечками/без засечек.
  7. При верстке сайта рекомендуется задавать такой размер шрифтов и междустрочный интервал, чтобы все элементы текста вписывались в горизонтальную сетку. Таким образом соблюдается вертикальный ритм текста.
  8. Для проверки контраста шрифта/фона сделайте скриншот страницы и переведите картинку в оттенки серого в любом редакторе. Если текст по-прежнему легко прочитать, то контраст достаточный.
  9. Чтобы читатель не уставал, рекомендуется задавать длину строки на десктопе в 60-75 символов.
  10. Используйте выравнивание текста по левой стороне экрана, чтобы избежать появления слишком больших пробелов между словами при отображении на мобильных устройствах.
  11. Никогда не используйте нижнее подчеркивание для выделения текста.
  12. Кнопки с важными CTA рекомендуется располагать справа, в четвертом квадрате по диаграмме Гутенберга.

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

netpeak.net

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

Как повысить юзабилити сайта — 3 важных совета

От автора: вы когда-нибудь представляли себя на месте пользователя вашего сайта? Представьте, что вы говорите по телефону с начальником, тут вам пишет кто-то из родственников и напоминает о том, что сегодня обязательно нужно быть на дне рождении подруги брата кумы. Подарок у вас еще, естественно, не куплен. И вы понимаете, что у вас очень мало времени, чтобы выбрать подарок в интернете, и еще меньше — чтобы забрать его в магазине. Заходите на какой-то сайт. Блин, долго грузится, нет времени ждать. А на этом ничего не понятно — нет желания разбираться. А где здесь вообще меню?

Как повысить юзабилити сайта — 3 важных совета

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

Что такое юзабилити?

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

удобство и простоту навигации;

логичное и комфортное расположение разных элементов;

продуманную структуру меню и элементов управления;

общую легкость восприятия веб-дизайна.

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

Для чего нужно повышать юзабилити?

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

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

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

Если сравнить два сайта с одинаковым уровнем доходов на рекламу, но разным уровнем usability, то можно сделать такие выводы:

у сайта с более высоким уровнем юзабилити больше поток клиентов;

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

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

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

С чего начать работы по улучшению юзабилити?

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

Изучаются сайты конкурентов (дизайн интерфейса, навигационная структура, семантическое ядро, способы привлечения клиентов и т. д.).

Составляется список поисковых запросов по тематике вашего ресурса.

Определяются роль и задачи проекта.

Изучаются отзывы клиентов в соцсетях, форумах, сайтах.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Выявление проблем сайта, касающихся разных аспектов (внутреннего поиска, дизайна, навигации, контента и т. д.).

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

Советы по повышению юзабилити

Совет 1. Используйте принципы визуальной иерархии на вашем сайте. Профессиональные веб-дизайнеры знают: люди не читают всю информацию на веб-странице — они ее сканируют, причем, по определенному узору. Обычно это узоры в виде буквы «F» или «Z».

Как повысить юзабилити сайта — 3 важных совета

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

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

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

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

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

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

Как повысить юзабилити сайта — 3 важных совета

Совет 2. Сделайте идеальное «лицо» сайта — главную страницу. Вот несколько рекомендацию по улучшению юзабилити главной страницы:

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

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

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

Совет 3. Уделите особое внимание оформлению текстов. Что имеет особое значение:

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

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

элементы оформления. Списки, картинки, подзаголовки —не обязательно, но очень желательны. Они позволяют структурировать и оформить текст, чтобы на него «любо-дорого» было глянуть;

отсутствие ошибок. Орфографические, пунктуационные, стилистические ошибки могут сильно подорвать репутацию вашего веб-сайта. Если не уверены в вашем копирайтере — наймите корректора.

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

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

Если вам нравится юзабилити нашего сайта, подписывайтесь на новые статьи и рекомендуйте их своим друзьям в соцсетях. А мы уже готовим для вас следующую статью по юзабилити, которая поднимет ваши usability skills до невообразимых высот :) . До новых встреч на страницах этого блога!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Рисуй крутые сайты, получай заказы и путешествуй!

Пройди практический видео курс по веб-дизайну

Получить

webformyself.com

Как улучшить юзабилити сайта? | Юзабилити

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

  • Музыка на сайте

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

  • Обилие текстовой и баннерной рекламы

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

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

  • Медленная загрузка страниц

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

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

  • Устаревшая и неактуальная информация

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

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

  • Опечатки, орфографические и грамматические ошибки

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

  • Требование регистрации для любых действий

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

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

  • Плохо подобранная цветовая гамма и слишком яркий дизайн

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

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

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

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

    www.internet-technologies.ru

    Улучшаем юзабилити сайта

    Улучшаем юзабилити сайта

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

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

     
    1. Метки форм работают лучше над полем

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

    Tumblr имеет простую и элегантную регистрационную форму, которая соответствует рекомендациям.  
     
    2. Пользователи фокусируются на лицах

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

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

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

     
    3. Качество дизайна является показателем доверия

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

     
    4. Большинство пользователей не прокручивают странницу

    Исследование показало, что только 23% посетителей прокручивают странницу сайта в свой первый визит. Это означает, что 77% посетителей не будут прокручивать странницу, они просто просматривают содержимое в верхней части страницы (т.е. область страницы, которая видна на экране без прокрутки вниз). Эти данные подчеркивает, насколько важно, разместить ключевое содержание на видном месте, особенно на целевых страницах.

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

     
    5. Синий лучший цвет для ссылки

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

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

     
    6. Идеальная ширина формы поиска 27 символов

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

    Окно поиска Apple слишком короткое, отрезав запрос "Microsoft Office 2008".

     

    По статистике 27% запросов были слишком длинные и не помещались в нее. Расширение формы до 27 символов, будет вмещать 90% запросов.

     
    7. Белое пространство улучшает понимание

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

    Белое пространство также делает содержание более удобным для чтения. Исследования показали, что использование белого пространства увеличивает понимания почти на 20%. Читателям легче сосредоточиться на процессе.

     
    8. Информативные страницы продукта помогут вам выделиться

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

    Магазин Apple - хороший пример страницы продукта

     

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

     
    9. Большинство пользователей не видят рекламы

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

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

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

     
    10. Эффективное тестирование юзабилити

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

     

    infotech.org.ua

    Как повысить юзабилити сайта: 7 простых советов

    Автор: Редакция Optimization, Май 10, 2012

    Версия для печати

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

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

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

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

    Основные принципы читабельной страницы

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

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

    Вот три основных принципа, которых следует придерживаться:

    1. Визуально текст и оформление странички должны быть приятными глазу и легко восприниматься читателем (текст должно быть хорошо видно, он должен быть разборчивым).
    2. Содержание должно быть лёгким для понимания.
    3. Текст должен быть таким, чтобы его можно было бегло просмотреть. Веб-пользователи не читают много. Исследования показывают, что в лучшем случае мы читаем 28% текста на веб-странице.

    Как же достигнуть соответствия контента на сайте этим принципами? Об этом мы и расскажем в нашей статье.

    1. Сохраняйте контент как можно более кратким

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

    Пришло время обратиться к исследованиям Якова Нильсена: он утверждает, что юзабилити сайта может быть повышено на 58% только путём сокращения текстов на нём наполовину.

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

    Что можно сделать уже сейчас:

    1. Переходите ближе к делу как можно быстрее. Не нужно длинных вступлений.
    2. Вырежьте всю не слишком необходимую информацию.
    3. Используйте лёгкие для понимания слова и фразы.
    4. Избегайте длинных абзацев и предложений.
    5. Используйте сохраняющие время и привлекающие внимание техники, такие как использование цифр вместо написания чисел прописью: «1000» вместо «одна тысяча». Такое представление текста облегчает беглый просмотр текста и позволяет быстро схватывать нужную информацию.

    2. Используйте подзаголовки, чтобы разбить длинную статью на части

    Исследования юзабилити, проведённые экспертом по веб-контенту Джерри МакГоверном, привели его к выводу, что веб-читатели изучают страницу, мысленно разбивая её на блоки и секции, он называет это «блочное чтение». Подробнее об этом можно почитать в его статье «Block reading: how we read on the Web».

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

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

    Ниже представлено два варианта расположения текста:

    1. Без заголовков2. С заголовками

    Посмотрите сами, какой из них более читабельный.

    Что можно сделать уже сейчас:

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

    3. Помогите пользователям быстро просканировать вашу страницу

    Мы уже не раз упоминали о том, что пользователь стремится бегло просмотреть страницу, нужно помочь ему в этом, сделать её более удобной для такого сканирования, и юзабилити повысится примерно на 47% (согласно исследованиям Якова Нильсена).

    Что можно сделать уже сейчас:

    1. Сделайте первые два слова значимыми. Когда пользователь просматривает страницу, он обращает внимание только на несколько первых слов заголовка или ссылки.
    2. Используйте ключевые слова в заголовках и ссылках.
    3. При написании текста используйте стиль «перевёрнутой пирамиды», поместив самую важную информацию в начале текста.

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

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

    Что можно сделать уже сейчас:

    1. Сделайте текст таким, чтобы можно было вставить список, маркируйте его точками.
    2. Выделите важную информацию курсивом или жирным шрифтом.

    5. В тексте должно быть достаточно пространства

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

    Что можно сделать уже сейчас:

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

    6. Ссылки должны быть правильными

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

    Что можно сделать уже сейчас:

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

    7. Используйте визуальные эффекты

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

    И снова согласно исследованиям, проведённым при помощи Eye Tracker, стало ясно, что пользователи уделяют очень пристальное внимание картинкам, которые содержат нужную информацию.

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

    Что можно сделать уже сейчас:

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

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

    Источник

    www.optimization.com.ua