В интернете появляется всё больше контента, связанного с юзабилити. Во многих публикациях содержатся отличные советы и приемы, как сделать интерфейс более удобным, для создания выдающихся пользовательских интерфейсов, которые действительно нравятся пользователям.
Такой контент часто фокусируется либо на разработчиках, либо на дизайнерах, либо на создателях контента. Он содержит важную информацию о юзабилити сайта, но там так много особенностей, что невозможно охватить все.
В этой статье мы хотели бы сосредоточиться на советах по юзабилити, которые будут особенно полезны для маркетологов.
Без лишних слов, вот известные и менее известные советы и приемы улучшения интерфейса.
Текстовые изображения
По возможности используйте текст вместо изображения (например, для цитаты) в противном случае обязательно укажите ценный альтернативный текст (совпадающий с текстом на изображении).
По крайней мере, предоставьте средствам чтения с экрана и другим вспомогательным технологиям какой либо вариант доступа и чтения текста — это будет невозможно, если текст будет отображаться только на изображении.
Автовоспроизведение видео
Не запускайте автовоспроизведение видео (особенно если они содержат речь) или анимацию, которая слишком яркая или напряженная. Это повредит опыту пользователей с когнитивными нарушениями. Также пользователи с медленным интернет соединением не смогут быстро получить контент.
Понятные формы
Формы являются важным и широко распространенным элементом сайта, но есть тонкая грань между отличной и плохой формой, поэтому вам следует применять особый подход к разработке форм.
Одна из самых важных вещей здесь — четко отображать всплывающие подсказки для разных полей формы, не скрывая ключевую информацию и не вводя пользователя в заблуждение излишним количеством информации. Конечно, они также должны быть доступны с помощью вспомогательных технологий и обеспечивать навигацию с помощью клавиатуры, включая открытие и закрытие формы.
Надлежащее тестирование
В дополнение к автоматизированному тестированию вам также придется провести более практическое тестирование удобства использования, чтобы позаботиться о трудно обнаруживаемых проблемах. Если возможно (или если у вас есть дополнительные потребности в специальных возможностях), постарайтесь привлечь к тестированию реальных людей с ограниченными возможностями.
В противном случае попытайтесь поставить команду QA на место пользователей с различными ограниченными возможностями — пусть они просматривают сайт, используют программу чтения с экрана, программное обеспечение для распознавания речи или другую вспомогательную технологию для доступа к контенту, позволяют им читать и взаимодействовать при различных условиях освещения и на разных размерах экрана.
Подписи и транскрипции
Предоставляя аудиоконтент, такой как подкаст, обязательно сделайте его доступным для пользователей с нарушениями слуха или тех, кто временно не может слушать. Лучший способ сделать это — добавить письменную расшифровку или особенно в случае вебинара или видеоподкаста, субтитры в реальном времени.
Цветовой контраст и шрифты
Хороший цветовой контраст — одна из самых важных функций специальных возможностей, но этого недостаточно, если вы используете слишком тонкий шрифт или размер текста слишком мал.
Кроме того, обязательно проверяйте коэффициент контрастности, даже если вы просто используете комбинацию черного и белого — в зависимости от того, сколько серого содержится в оттенках и насколько они насыщены, различить их может быть не так просто, особенно в менее благоприятных условиях (например, плохое освещение и маленький экран).
Указание ссылок
«Принцип избыточного кодирования гарантирует, что элементы обозначаются как требующие действия более чем одним отличительным визуальным признаком». — Цитата W3C
Убедитесь, что вы четко указываете гиперссылки в своем контенте. В дополнение к изменению цвета используйте еще один визуальный признак, чтобы отличить их от остального текста. Лучше всего подчеркивать их, поскольку другие функции форматирования текста обычно используются для стилистических нюансов.
При использовании цвета для обозначения ссылок не используйте цвет, который слишком близок к цвету основного текста — если это один из цветов вашего бренда, попробуйте использовать другой, иначе вы, скорее всего, вызовете путаницу (особенно если вы используете жирный шрифт вместо подчеркивания в качестве другого ключевого индикатора).
Мобильная доступность
Мобильный канал становится настолько популярным, что опыт должен разрабатываться с учетом удобства использования мобильных устройств и следовательно удобства.
Когда речь заходит о юзабилити для мобильных устройств, есть несколько примечательных особенностей, в основном касающихся другого способа взаимодействия и доступа к контенту на смартфоне, в отличие от использования мыши и клавиатуры.
Наиболее очевидным является то, как обрабатываются различные сенсорные функции, реализованы ли они удобным и логичным образом.
Еще одна вещь, которую следует учитывать, это частое использование смартфонов одной рукой, при этом большой палец выполняет большинство действий, что необходимо учитывать при выборе размера и расположения кнопок и других интерактивных элементов.
Заключение
Хотя вы, вероятно, знаете и следуете многим советам, изложенным в этой статье, мы надеемся, что смогли пролить дополнительный свет на несколько менее известных проблем и соображений.
Если вам нужна помощь в разработке аспектов юзабилити вашего сайта, обращайтесь в поддержку сайтов Drupal, и у вас будет разработчик ориентированный на юзабилити проекта.
