Юзабилити сайта: от разработки до апгрейда

Юзабилити сайта: от разработки до апгрейда

Юзабилити сайта: от разработки до апгрейда
Время чтения: 19 минут
Отправим материал вам на:

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

Ответ прост: посетитель не может воспользоваться вашими услугами, потому что он не в состоянии разобраться, ЧТО ему предлагают и КАК это получить.

Из этой статьи вы узнаете:

  1. Что такое юзабилити сайта
  2. Основы юзабилити сайта
  3. Пошаговая инструкция разработки правильной юзабилити сайта
  4. Какие преимущества дает тестирование сайта
  5. 5 способов анализа юзабилити сайта
  6. Как провести аудит сайта в домашних условиях
  7. 5 лучших бесплатных инструментов для самостоятельного анализа юзабилити сайта
  8. 16 советов, за счет которых возможно улучшение юзабилити сайта
  9. 6 книг, рекомендуемых для чтения, про юзабилити
  10. Новые идеи для юзабилити сайта 2017-2018 гг.

Что такое юзабилити сайта

Юзабилити сайта

это показатель качества его использования. Причем, это касается и его видов: многостраничника, интернет-магазина, лендинга и других.

Оценка юзабилити веб-сайта дается по показателям качества следующих компонентов:

  1. Ориентация. Новые посетители сайта не испытывают никаких трудностей при совершении простых действий. Иначе говоря, наполнение сайта (дизайн, реклама и др.) не мешает им знакомиться с основной информацией.
  2. Эффективность - показатель скорости совершения необходимых действий, т.е. как быстро простой пользователь ориентируется на сайте.
  3. Запоминаемость - показатель легкости ориентации при совершении действий. Предположим, пользователь длительное время не заходил на сайт, и это не должно вызвать затруднений при новом посещении.
  4. Ошибки - показатель численности ошибок, сделанных посетителями, а также способов и простоты их устранения.
  5. Удовлетворенность. Самый субъективный показатель, который основан на том, насколько пользователь доволен «сотрудничеством». Он включает удовлетворенность информацией, дизайном и навигацией ресурса.
  6. Полезность - показатель функциональности, т.е. находит ли посетитель сайта предмет своего поиска.

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

Условия юзабилити сайта:

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

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

Практичность сайта = юзабилити + полезность

Где «полезность» - способен ли сайт предложить ответы на вопросы, интересующие пользователя; «юзабилити» - легкость и удобство управления сайтом.

Действительно ли юзабилити сайта имеет такое большое значение? Уверены, что да, имеет. Грамотное юзабилити способствует повышению конверсии и посещаемости сайта.

Основы юзабилити сайта

Дизайн сайта

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

Компания VVS

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

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

Универсальность браузеров

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

Качество контента

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

Компания Сантехрегион

Навигация, «хлебные крошки» и интерфейс

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

Реклама

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

Гарантия надежности

Что способно вызвать доверие? Естественно, наличие сведений во вкладке «О компании»: контакты и реквизиты, сертификаты и отзывы клиентов. Уровень доверия и юзабилити продающего сайта поднимется, если вы предоставите эту информацию.

Кнопка поиска

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

Кнопка поиска Сантехрегион2

Простота использования сайта

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

Мобильная версия

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

Title (заголовки)

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

Пошаговая инструкция разработки правильной юзабилити сайта

Шаг 1. Планируем веб-сайт

Прежде всего, разберитесь в следующем:

  • Зачем вам сайт?
  • Кто должен стать посетителем сайта?
  • Когда и для чего люди будут пользоваться сайтом?

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

Шаг 2. Собираем данные от пользователей

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

article_banner.png

Шаг 3. Разрабатываем прототип

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

Прототип необходим, чтобы получить отзыв посетителя и определить, может ли он решить поставленные задачи. Сделать это можно несколькими способами: на листе бумаги, в HTML или используя специальные средства (например, MSVisio).

Шаг 4. Собираем, пишем и изменяем контент

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

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

Далее вам необходимо протестировать сайт.

Какие преимущества дает тестирование сайта

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

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

Существует три вида тестирования юзабилити сайта:

  1. Обзорный. Сайт тестируется на этапе разработки. Это делается для того, чтобы проверить удобство работы с прототипом и оценить степень воздействия.
  2. Оценочный. Используется при всестороннем тестировании. Дает возможность установить технологическую ценность сайта и стоимость его разработки.
  3. Сравнительный. Есть ряд задач, для решения которых необходимо использование разных технологий. Данный вид тестирования юзабилити сайта способствует выявлению положительных и отрицательных моментов, связанных с использованием определенных методик.

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

Анализ юзабилити сайта: 5 способов

  1. Статистический анализ (Яндекс.Метрики, Google Analytics, статистики Bitrix и др.). Данный вид анализа является самым доступным: практически все сайты оснащены счетчиками, и данные можно получить совершенно бесплатно. Если у вас есть доступ к аналогичным сайтам, то статистический анализ можно провести в отношении нескольких сайтов и сравнить показатели.

Недостаток способа: скудность данных и упрощенность выводов.

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

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

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

Чтобы протестировать страницы, можно использовать «Оптимизатор web-сайтов» (специальный инструмент от Google). Для этого надо собрать группу исполнителей и дать им задание по достижению цели.

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

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

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

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

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

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

Чек-лист юзабилити сайта – аудит в домашних условиях по пунктам

Концепция сайта:

  • Раскрыта идея и отмечены отличительные черты сайта.
  • Конверсионный путь виден с первой страницы.
  • Посетитель понимает, на чем специализируется сайт.
  • Содержание сайта раскрыто в слогане.
  • Разделы носят названия, понятные не только владельцам сайта, но и пользователям.
  • Официальный сайт представлен в одном экземпляре, с одной главной страницей.

Дизайн:

  • По всем элементам дизайна можно кликнуть.
  • Логотип, наименование и слоган не содержат анимации.
  • Логотип, размещенный на видном месте, имеет приемлемые размеры.
  • Дизайна сайта предусматривает оригинальность главной страницы.
  • Пользователь сразу понимает пиктограммы.
  • Очевидные области сайта не нуждаются в подзаголовках.
  • Первый экран содержит все основные элементы.
  • Элементы навигации не обременены анимацией.
  • На сайте нет каких-либо приветствий.
  • Не используются чужие логотипы.
  • Адаптация сайта под разное разрешение экрана.
  • Не используются разные шрифты и слишком яркая цветовая гамма.
  • Гармоничное сочетание фона и текста.
  • Не используется горизонтальная прокрутка.
  • Небольшое количество раскрывающихся списков.
  • Размер шапки сайта не превышает 50% размера экрана.

Навигация:

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

Ссылки:

  • После перехода по ссылке, она меняет цвет.
  • Ссылки выделяются цветом и подчеркиванием.
  • Штрихом (dashed) подчеркиваются ссылки на всплывающие окна.
  • Циклические ссылки не используются.
  • Анкоры ссылок поясняются.

О компании:

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

Стилистика:

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

Форматирование текста:

  • Не используются одноэлементные списки (или категории).
  • Для ключевых словосочетаний используется неразрывный пробел.
  • Приемлемое количество восклицательных знаков.
  • Подзаголовки не состоят только из ЗАГЛАВНЫХ букв.
  • В абзаце не более восьми строк.
  • В каждой строке размещено не более 6-8 слов.
  • На ключевых страничках не более 4000 символов (лучше, если меньше).
  • Окна сайта не раскрываются в новой вкладке.
  • Все выделения обоснованы.

Статьи и новости:

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

Title и доменное имя:

  • В начале Title указывается слово, которое раскрывает суть всей страницы.
  • В Title не включено доменное имя, не являющееся брендом компании.
  • В Title не входит «Главная страница».
  • В Title дается краткое описание страницы.
  • Title содержит до восьми слов.
  • В доменное имя входит наименование компании.
  • В доменном имени дается характеристика региона (кроме me, .tv, etc).

Контакты:

  • На всех страницах сайта указывается контактный телефон компании.
  • Шапка сайта содержит название города.
  • Указываются способы обратной связи: «Заказать звонок», «Консультация специалиста», «Написать».
  • На полях форм есть подсказки и описание.
  • После отправки формы приходит подтверждение.
  • На странице контактов указаны: полный почтовый (с индексом) и электронный адреса компании, время работы, местоположение на карте и схема проезда, фотографии здания и офиса.

Интерактив:

  • Посетители не имеют возможности настраивать интерфейс.
  • Перед регистрацией поясняются преимущества.
  • Перед подтверждением согласия на рассылку указывается её частотность.
  • Деловые сайты не содержать гостевых книг.
  • Есть автоматическое определение местоположения (включая возможность смены региона).
  • Для взаимодействия с посетителем используется страница «Ошибка 404».
  • Есть раздел «Отзывы клиентов».

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

Самостоятельный анализ юзабилити сайта бесплатно онлайн: 5 лучших инструментов

Инструменты Яндекс.Метрики

Яндекс Метрики1

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

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

Яндекс Метрики3

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

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

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

UsabilityHub

Юзабилити хаб

Данный сервис для проверки юзабилити сайта предлагает пять несложных онлайн-тестов:

  • Five Second Test (пятисекундный тест).

Принцип действия следующий:

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

При этом можно использовать дополнительные вопросы: «Какой элемент привлек внимание?», «Что осталось в памяти?», «Какова тема сайта?» и пр.

После этого у вас будут: сгенерированное облако наиболее повторяемых слов и ответы участников тестирования.

  • Click Test (тест кликов).

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

  • Question Test (опросник).

Вы задаете вопросы о сайте, а реальные пользователи отвечают.

  • Navigation Test (тестирование навигации).

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

  • Preference Test (тест на предпочтение).

Дает возможность осуществить тестирование дизайна сайта, листовки и приложения.

Принцип проверки прост и оперативен:

  • Вы загружаете два варианта дизайна (А и В).
  • Посетители выбирают наиболее понравившийся вариант.

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

Usabilla

Usabilla

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

Принцип взаимодействия следующий:

  • Выставление оценок участниками.
  • Добавление комментариев с указанием ошибок, подтверждая это скриншотами.
  • Сохранение статистических данных.

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

Optimal Workshop

Optimal Workshop

Сервис предлагает следующие инструменты:

  • Treejack (проверка «дерева» сайта)

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

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

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

  • OptimalSort (метод сортировки карточек)

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

Принцип работы следующий:

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

В бесплатной демоверсии можно опросить 10 человек, протестировав 30 карточек.

  • Chalkmark

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

Чтобы проверить юзабилити сайта необходимо:

  • Загрузить скриншот страницы.
  • Сформулировать задачи для участников.
  • Получить результаты тестирования (карта кликов, схема с количеством кликов и т.д.).

Feng-GUI

Feng-GUI

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

Чтобы проверить юзабилити сайта, необходимо:

  • Ввести url тестируемой страницы.
  • Нажать кнопку «Analyze».
  • Просмотреть результаты (через несколько секунд появится готовая «карта взглядов»).

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

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

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

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

16 советов, за счет которых возможно улучшение юзабилити сайта

  1. Статьи должны состоять из коротких абзацев (5-7 предложений). Современные пользователи не вчитываются в текст, они его сканируют, определяя значимость предложенной информации (полезна она для них или нет). Увидев один большой текст, посетитель вряд ли проявит желание ознакомиться с ним подробнее. А как бы поступили вы?
  2. Учитывая, что пользователь ищет информацию по ключевым словам, они должны быть выделены уже в самом начале статьи. В этом случае, посетитель поймет: это то, что он искал. Не забывайте, статья не изучается подробно, а сканируется для получения ответа на интересующий вопрос. Иначе говоря, если в начале статьи не будет ключевых слов, или они не привлекут внимание посетителя, то дальше он читать не станет.
  3. Давайте пояснения используемым терминам, так как на сайт могут зайти люди, не очень компетентные в данном вопросе.
  4. Сопровождайте свои публикации качественными роликами или картинками. Это улучшит юзабилити сайта (никому не интересно читать сплошной «умный текст», кому-то проще посмотреть). Учтите, что многие люди опять стали отдавать предпочтение комиксам, а не объемным произведениям.
  5. Если вы предлагаете ознакомление с инструкцией, то стоит её поделить на небольшие пронумерованные пункты. Это поможет пользователю скорее разобраться в очередности дальнейших действий.
  6. Для общения «перейдите» на язык пользователя. Здесь надо учесть социальный состав вашей целевой аудитории и использовать соответствующую лексику.
  7. Одним из основных для юзабилити сайта правил можно считать простоту проекта. Выделиться на фоне конкурентов – это хорошо, но навигация и интерфейс должны быть понятны рядовому пользователю. Это облегчит его перемещение по сайту и поспособствует формированию желания повторно воспользоваться ресурсом.
  8. Создайте страницу «Ошибка 404». Как ни странно, но она способствует продвижению сайта. Когда-то одна компания пошла на хитрость и на странице «Ошибка 404» написала: «Извините, но в данный момент мы не можем обработать данный товар. Пожалуйста, оформите свой заказ еще раз». И это поспособствовало росту прибыли (она увеличилась на $380 ежемесячно).
  9. Сделайте кнопку «Вверх». Если ваш контент наполнен объемным материалом, то посетитель может не захотеть после прочтения прокручивать всю страницу.
  10. Не увлекайтесь созданием подкатегорий. Не зависимо от размера сайта, их количество должно ограничиваться двумя. Если их больше, то читатель просто запутается и не сможет найти искомый материал или товар.
  11. Мы привыкли читать слева-направо. Это надо учесть при создании сайта: начало текста располагается только в левой стороне. Также улучшению юзабилити сайта способствует и сочетание цветов на текстовом экране: светлый фон (лучше белый) и темные буквы (лучше черные не мельче 12рх). Довольно тяжело читать светлый мелкий текст на темном фоне. Кроме этого, не увлекайтесь яркими цветами, палитра должна ограничивать четырьмя цветами.
  12. Перелинкуйте сайт внутри. Это действие подходит владельцам текстовых сайтов, и нежелательно для интернет-магазинов, так как пользователь может «заблудиться» и не попасть в нужное вам место.
  13. Не требуйте заполнения формы регистрации (можно предложить авторизоваться на сайте через соцсети). Повышению юзабилити сайта будет способствовать отсутствие лишних полей, которые надо заполнить. Согласитесь, мало кому захочется раскрывать всю «подноготную», типа: как вы о нас узнали, чем вы увлекаетесь и т.д.
  14. Если это возможно, то не вставляйте в меню сайта скрипты и анимацию (java и flash). Может быть так, что в настройках браузера пользователя они отключены, и вы просто ограничите его функциональность. А это, в свою очередь, может лишить вас заказа.
  15. Не размещайте на сайте плейер. Пользователь пришел к вам с конкретной целью, и музыка ему ни к чему. Кроме этого, не перегружайте главную страницу лишней информацией, например, «ТОП-10 комментаторов», «Календарь» и т.п.
  16. Будьте позитивны и доброжелательны в отношении своих пользователей. Согласитесь, негатива в реальной жизни более, чем достаточно.

6 книг, которые рекомендуем прочитать про юзабилити

Хотим предложить вашему вниманию шесть книг, которые помогут сделать сайт максимально удобным. Итак, лучшие новинки и классика из серии must have:

  • Стив Круг «Веб-дизайн: книга Стива Круга, или не заставляйте меня думать!»

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

  • Алан Купер, Роберт Рейман, Дэвид Кронин «Алан Купер об интерфейсе. Основы проектирования взаимодействия»

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

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

  • Якоб Нильсен, Хоа Лоранжер «Web-дизайн. Удобство использования Web-сайтов»

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

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

  • Итан Маркотт «Отзывчивый веб-дизайн»

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

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

  • Артемий Лебедев «Ководство»

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

  • Патрик Макнейл «Настольная книга веб-дизайнера»

Патрик Макнейл – достаточно известный веб-дизайнер, написавший серию книг Web Designer’s Idea Book, получивших широкую известность в определенных кругах. Наибольший интерес книга представляет для разработчиков и дизайнеров сайтов, потому что автор подробно раскрывает тему функционирования Интернета и учит создавать эффективные сайты.

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

Новые идеи для юзабилити сайта 2017-2018 гг.

Абстрактный дизайн

Абстрактный дизайн Абстрактный дизайн2

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

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

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

Новые варианты навигации

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

Навигация Навигация2

Карточки в дизайне

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

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

Карточки Карточки2

Сплит макеты с разделением экрана на две части

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

Сплит-макеты Сплит-макеты2

Яркие цвета

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

Яркие цвета Яркие цвета2

Анимация и микровзаимодействия

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

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

Анимация

Анимация2

Почти виртуальная реальность

Тема виртуальной реальности становится все популярнее, хотя многие прогнозы не оправдываются в реальной жизни. Естественно, никакие проблемы данной сферы не способны остановить дизайнеров. Сегодня уже существуют такие макеты, в которых реализованы некоторые приемы, создающие «эффект присутствия»: просмотр панорам в 3D-режиме, игры, видеовставки и пр.

Виртуальность

Виртуальность2

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

article_banner.png

Опубликовано Генератор Продаж