Устранение общих проблем в оформлении сайта, влияющих на юзабилити

Устранение общих проблем в оформлении сайта, влияющих на юзабилити

Опубликовано: 14.02.2019. Обновлено: 16.08.2019 332 2

В материале рассматриваются общие элементы оформления сайта, влияющие на юзабилити:

Содержание статьи:

  1. 1. Адаптивность.
  2. 2. Кроссбраузерность.
  3. 3. Скроллинг.
  4. 4. Оформление абзацев и списков.
  5. 5. Качество изображений.
  6. 6. Закреплённая шапка сайта.
  7. 7. Индивидуальное оформление материалов.

Адаптивность

Если адаптивная версия сайта отсутствует, обычно, последовательность действий такая:

  1. 1. Ставим задачу дизайнеру на разработку адаптивных макетов под экраны шириной:

    320
    480
    600
    768

  2. 2. Если речь идет о работе с клиентским сайтом, полученные макеты согласовываем с заказчиком.
  3. 3. Передаём верстальщику, чтобы сверстал на резервной копии сайта.
  4. 4. Переносим на рабочий сайт (верстальщик переносит).

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

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

Элементы, которые всегда должны быть в шапке (на всех экранах):

  • Номер телефона (или ссылка на набор номера ввиде значка).
  • Логотип (если он есть на десктопной версии).
  • Меню (услуги, категории товаров, о компании, цены, вакансии и т.д.).
  • Дескриптор.

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

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

Обязательные элементы в футере:

  • Номер телефона.
  • Название компании текстом.
  • Ссылка на почтовый ящик.

Здесь также, как и в шапке, элементов может быть больше.

Меню сайта

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

Например, здесь сложное многоступенчатое меню, объединяющее сразу несколько меню на сайте:

многоступенчатое меню

В целом при формировании тз для дизайнера, нужно максимально подробно всё расписывать приводить примеры со скриншотами. Лучшие решения можно подсмотреть у крупных магазинов и компаний (не обязательно из той же тематики, например, https://www.mvideo.ru/ )

Также полезно ставить себя на место посетителя.

Кроссбраузерность

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

Internet Explorer
Google Chrome
Opera
Mozilla Firefox
Yandex браузер

При обнаружении ошибок ставим задачу верстальщику на исправление.

Скроллинг

  1. 1. На сайте не должно быть горизонтального скроллинга.
  2. 2. Бесконечный вертикальный скроллинг не дает пользователю домотать до низа страницы. Желательно этого избегать.

Оформление абзацев и списков

Между абзацами и элементами списков в текстах должны быть отступы. Неправильное оформление:

неправильно оформленный текст

Правильное оформление:

правильно оформленный текст

Качество изображений

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

Эффективный поиск изображения — загрузить в поиск по картинкам Яндекса текущее некачественное:

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

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

Закреплённая шапка сайта

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

Обычная шапка:

шапка сайта

Закреплённая:

зафиксированная шапка сайта

Закреплённая шапка не должна мешать просмотру контента, поэтому обычно невысокая — 60-70 пикс.

В ней обычно размещают:

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

Индивидуальное оформление материалов

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

Поскольку такая проработка — удовольствие недешевое, необходимо работать с самыми приоритетными ключевыми фразами:

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

Более подробно о методике с примерами здесь: /blog/usability/individual-design.html

Что-то не вижу даты выхода статьи.

Ответить

Константин Гайдук
17.09.2019 в 08:56

В планах добавить.

Ответить

Комментировать