Содержание

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

Тут будет очень уместным автоматическое переключение на цифровую раскладку.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

* * *

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

Улучшаем юзабилити за 5 минут / Хабр

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

1. Отображайте нажатия кнопок и кнопкоподобных ссылок


Мой излюбленный совет. Когда стиль кнопки задаётся в CSS, или когда для отображения необычной кнопки используется рисунок (либо как фон, либо как элемент <img />), то кнопка не реагирует на нажатие во всех или в некоторых браузерах (зависит от ситуации). Вот какой простой уловкою вы можете дать знать посетителю сайта, что он и впрямь нажал на нечто нажимаемое:
. mybutton:active {
   position: relative;
   top: 1px;
   left: 1px;
}

Этим кодом кнопка смещается на 1 пиксел направо и на 1 пиксел вниз, когда её нажимают. Испробуйте: выглядит весьма убедительно.

Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если где-то ещё на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них.

2. Плавные переходы (CSS3 transitions)


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

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

a {
   color:blue;
   -webkit-transition-property: color;
   -webkit-transition-duration: 1s;
}

a:hover {
   color:red;
}

Первая строчка (-webkit-transition-property) сообщает браузеру, какое CSS-свойство подвергать плавному изменению, а вторая (-webkit-transition-duration) сообщает желаемую длительность этого эффекта. Важно поместить их в обычное свойство CSS, но не под псевдоклассом :hover, а не то плавного перехода не будет, когда пользователь уберёт мышь с элемента.
Примечание переводчика. Lea Verou написала эти строки 10 апреля 2009 года. С тех пор плавное изменение свойств CSS начало, к счастью, поддерживаться и многими невебкитными браузерами (начиная от версий Firefox 4, Opera 10.5, Opera Mobile 10, Internet Explorer 10), так что этот совет стал много более кроссплатформенным. Чтобы невозбранно достигнуть желаемого, вам достаточно записать свойства CSS со всеми необходимыми префиксами:
a {
   color:blue;

   -webkit-transition-property: color;
      -moz-transition-property: color;
        -o-transition-property: color;
       -ms-transition-property: color;
           transition-property: color;

   -webkit-transition-duration: 1s;
      -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
       -ms-transition-duration: 1s;
           transition-duration: 1s;
}

a:hover {
   color:red;
}

Понимая, что увеличение числа свойств впятеро может подзадолбать, Lea Verou сочинила скрипт -prefix-free, о котором я ужé сообщал на Хабрахабре.

3. Снабжайте кнопки спецсимволами, означающими их функции


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

Для ряда таких символов существуют ключевые слова (named HTML entities), а другие придётся вызывать по их номерам в Unicode (наподобие &#xABCD;) — их придётся тестировать усерднее, так как не все они достаточно распространены в шрифтах.

Многие такие спецсимволы и их юникодовые шестнадцатеричные номера вы можете найти на сайтах http://www.copypastecharacter.com/и http://www.alanwood.net/unicode/dingbats.html.

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

4. Полосатые таблицы


Этот совет не сработает в IE (кроме IE9 и новее — caniuse) и в Firefox 3. Удобство чтения таблиц (а также некоторых списков) можно улучшить, слегка изменяя цвет фона от ряда к ряду. Вероятно, вы не раз видели этот эффект, и обычно он достигается либо джаваскриптом, либо на сервере при создании таблицы. Однако же его можно быстро устроить и на простом CSS3, если работоспособность в IE и старых браузерах вас не заботит, или когда нет времени на полностью кросс-браузерное решение:
table.stats tr {
   background: white;
}

table.stats tr:nth-child(odd) {
   background: #f4f4f4;
}

5. Подсветите целевой элемент внутренней ссылки


Этот совет не сработает в IE (кроме IE9 и новее — quirksmode.org) и в старых версиях браузеров. Если на одной из страниц много контента, достижимого по внутренним ссылкам (например, в FAQ), то можно использовать псевдокласс CSS3 «:target», чтобы показать читателю, куда конкретно он перешёл по ссылке:
h4:target {
   background: #FFFBCC;
}

Элемент h4 приобретёт фон #FFFBCC только тогда, когда читатель на нём приземлится по ссылке. Например, если у элемента задан id «foo», то тогда фон #FFFBCC он получит после перехода читателя к #foo.

Вот и всё


Ну разве это длилось дольше пяти минут?

10 полезных выводов и принципов юзабилити / Хабр

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

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


Сайт Tumblr имеет простую и элегантную форму регистрации, которая соответствует рекомендациям UX Matter.

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

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


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


Тепловая карта отслеживания взора при просмотре изображения с ребенком, который смотрит прямо на нас. Исследование сделано Usable World.


А сейчас ребенок смотрит на контент. Обратите внимание на увеличение количества взоров людей на заголовок и текст.

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


Были проведены различные исследования для выяснения факторов влияющих на доверие людей к веб-сайту.


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

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

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


Исследование Джакоба Нильсена (Jakob Nielsen) о том, сколько пользователей прокручивают страницу (Определение приоритетов в юзабилити сайтов), выявило, что только 23% пользователей прокручивают страницу при своем первом посещении сайта. Это значит, что 77% пользователей не будут прокручивать страницу, они просто просмотрят контент до надобности прокрутки. Более того, процент пользователей, которые будут прокручивать уменьшится при последующих визитах сайта до 16%. Эти данные свидетельствуют о том, насколько важно показать важную информацию в видном месте, особенно на целевых страницах.

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


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

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

Так предоставьте в этой части сайта основные данные:

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

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


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

Какой цвет должны иметь ссылки? Первое соображение это контраст: ссылки должны быть достаточно темными (или светлыми) чтобы контрастировать с цветом фона. Следующее, они должны отличаться от остального текста на странице, так что не надо делать черные ссылки, когда сам текст на странице черный. И наконец, исследование показало (Ван Шайк (Van Schaik) и Линг (Ling)), что если вы ставите приоритет на юзабилити, то ссылки лучше делать синими. Цвет ссылок браузера по умолчанию это синий, так что люди ожидают увидеть именно этот цвет. Выбор другого цвета отнюдь не проблема, но пользователям потребуется больше времени на нахождение таких ссылок.


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

Исследование показало, что в среднем поля ввода поискового запроса имеют ширину в 18 символов. Судя по данным, 27% поисковых запросов были слишком длинными и не поместились в них. Расширение поля ввода поискового запроса до 27 символов в длину позволит поместить в нем 90% поисковых запросов. Помните, что вы можете ставить ширину не только в пикселях и пунктах, но также и в “em” (относительная единица длины, равная размеру текущего шрифта). Таким образом используйте эту величину для установки ширины поля ввода поискового запроса в 27 символов.


Поле ввода поискового запроса Google является достаточно широкой для длинных поисковых запросов.


Поле ввода поискового запроса Apple слишком короткое, запрос “Microsoft Office 2008.”в нем не поместился.

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


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


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

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

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


Исследование Якоба Нильсена (Jakob Nielsen) на тему идеального числа тестирующих юзабилити сайта показало, что всего 5 тестирующих пользователей выявят почти 85% всех проблем на вашем сайте, в то время как 15 тестирующих выявят почти все проблемы.


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


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


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

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


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

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


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

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

8 простых способов как повысить юзабилити вашего сайта

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

Просто вспомните то, что делает и продает корпорация Apple: стала бы их продукция столь популярной, не будь она так красива и удобна?

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

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

1. Уберите лишнюю информацию

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

По некоторым данным, сокращение текстового контента вдвое может привести к повышению юзабилити на 58%.

Проще говоря, уберите лишние слова — в среднем, только 28% текста будет прочитано пользователями.

2. Размещайте контент согласно принципам айтрекинга

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

80% времени пользователей приходится на изучение информации выше линии сгиба.

А 69% времени посетителей приходится на левую сторону страницы. Как видите, левая верхняя часть сайта — лучшее место для самой важной информации.

3. Ориентируйтесь на то, как пользователи читают страницу

Дабы разобраться, как повысить юзабилити, нужно сперва изучить привычки и паттерны поведения своих пользователей. Подавляющее большинство людей пользуется F-паттерном при чтении страниц в интернете. То есть, сначала человек внимательно изучает 2 горизонтальные линии на первом экране (регион «выше сгиба», Above the Fold), после чего проглядывает остальной контент по одной вертикальной линии до конца страницы. Этим свойством можно воспользоваться для размещения важнейших элементов в центре внимания посетителя:

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

4. Быстрая загрузка страницы

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

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

Интернет-пользователи готовы ждать загрузки страницы 2 секунды или меньше — на третьей секунде большинство из них уйдет.

5. Размер окна поиска

Средняя длина окна поиска на большинстве сайтов — 18 символов, но такой размер не вмещает около 27% запросов.

Увеличьте окно поиска до 27 символов, и оно будет вмещать 90% запросов.

6. Разметка страницы

Оптимальный размер страницы: длина 1000–1600 пикселей и ширина около 770 пикселей.

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

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

Не допускайте, чтобы посетители попадали на «тупиковые» или нерелевантные страницы.

7. Типографика

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

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

Не используйте более 4 разных цветов на текст — это уменьшит путаницу.

Оптимальная ширина строки в статье — около 45–75 символов.

8. Ссылки

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

Ссылка должна менять цвет после нажатия на нее.

Пользователь должен интуитивно понимать, что перед ним — ссылка.

74% сайтов используют различные цвета для оформления посещенных и непосещенных ссылок.

Заключение

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

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

Высоких вам конверсий!

По материалам quicksprout.com 

14-10-2014

Школа юзабилити: как улучшить навигацию сайта?

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

В этой статье вы найдете несколько рекомендаций о том, как создать идеальную навигацию.

Что такое навигация?

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

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

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

Навигация сайта и иерархия контента

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

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

Проблемы, обусловленные иерархией контента

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

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

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

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

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

Рекомендуемые действия:

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

Ссылки между продуктовыми страницами и контент-страницами

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

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

Рекомендуемые действия:

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

Навигация по сайту с использованием JavaScript-эффектов

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

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

Ссылки, отображающие и скрывающие контент на странице

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

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

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

Рекомендуемые действия:

  • Для контента небольшого объема удалите тег <a> и замените его обработчиком события onClick JavaScript. С помощью CSS измените курсор мыши со стрелки на руку.
  • В случае контента большого объема, в том числе одностраничных сайтов с параллакс-скроллингом, не весь контент должен быть предварительно загружен. Предварительно загружайте только тот контент, который непосредственно связан с URL. Кроме того, для всех ссылочных тегов должно быть прописано значение href и onclick:

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

-Функция onclick предотвратит загрузку нового URL, но обеспечит загрузку контента из конечного URL.

-Используйте функцию pushState для обновления URL, даже если эта страница не загрузилась.

Использование трекинговых параметров в URL

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

Рекомендуемые действия:

  • Избегайте использования трекинговых параметров в URL. Вместо этого обратитесь к обработчикам событий onClick JavaScript на ссылках, которые будут передавать одни и те же трекинговые параметры. При использовании Google Analytics это можно сделать с помощью отслеживания событий.
  • Постоянное использование автореферентного канонического тега поможет избежать проблем с дублирующимся контентом.

Принцип приоритета первой ссылки

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

В данном примере страница дважды ссылается на один и тот же URL (ссылка Blog и ссылка celebrity news blog). Вторую ссылку Google проигнорирует и будет учитывать только первую.

Несколько вещей, которые стоит упомянуть:

  • В 2014 году Мэтт Каттс (Matt Cutts), бывший глава команды по борьбе с веб-спамом в Google, сказал, что это больше не является проблемой.
  • Когда это было впервые протестировано и обнаружено, использовалась версия HTML 4.1, XHTML 1.1 был на подъеме, а HTML 5 еще не существовало. Сегодня существуют такие теги, как <header>, <article> и <sidebar>. Теперь Google обрабатывает ссылки в тегах хедера, боковой панели и статей.
Читайте также: Как Google индексирует ваши сайты?

Проблемы в SEO, возникающие из-за приоритета первой ссылки

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

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

Рекомендуемые действия:

  • Учитывайте порядок кода. Расположите основной контент перед боковой и верхней панелями навигации.
  • Используйте CSS для контроля направления float слева-направо или справа-налево, чтобы загружать боковую панель навигации после основного контента. Для верхней панели навигации можно использовать абсолютное позиционирование (absolute positioning).

Навигация на больших сайтах

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

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

Вот возможные решения этих проблем:

1. Делегирование задачи разным отделам

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

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

2. Использование инструментов

Автоматизация всегда повышает масштабность ручных процессов.

Инструменты сканирования, такие как Xenu, Screaming Frog, DeepCrawl или Botify, анализируют существующие ссылки, определяют проблемы и описывают архитектуру сайта. Если вы хотите визуализировать архитектуру сайта, вам помогут в этом такие инструменты, как DynoMapper и PowerMapper.

Инструменты анализа ссылок, такие как Open Site Explorer, Ahrefs, Majestic, Sistrix, LRT, и CognitiveSEO, анализируют, какие страницы получают больше всего обратных ссылок извне, а затем добавляют на них перекрестные ссылки, ведущие на более важные страницы сайта.

3. Поэтапный подход

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

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

Читайте также: Как оптимизировать навигацию интернет-магазинов, или 7 раз отмерь

7 ключевых выводов

  1. Интересы пользователей всегда стоят на первом месте. При создании навигации в первую очередь стоит учитывать данный фактор. Только после этого можно оптимизировать для эффективного поискового продвижения. Никогда не подвергайте риску пользовательский опыт.
  2. Перелинковка между контентными кластерами. Релевантность контента между страницами важна для ранжирования, которая проявляется в хорошо структурированной иерархической архитектуре сайта. Тем не менее, может случиться нехватка перекрестных ссылок в том случае, если какие-то страницы расположены слишком глубоко.
  3. Связь между продуктовыми страницами и контент-страницами. Создавайте высококачественный и полезный для вашей целевой аудитории контент. Если статья в блоге может помочь принять решение о покупке продукта, то обязательно сошлитесь на нее на странице (-ах) продукта.
  4. Трекинговые параметры. Избегайте их. Вместо этого используйте обработчик события onClick на ссылках. Также никогда не помешает иметь автореферентный канонический тег.
  5. JavaScript ссылки. Избегайте использования JavaScript для написания контента и ссылок. Если другой возможности нет, существуют способы заставить работать такие ссылки.
  6. Приоритет первой ссылки. В идеале основной контент должен идти первым. Далее — боковая панель, затем — верхняя панель, и, наконец, футер.
  7. Огромные веб-сайты. Сайтам с тысячами и миллионами страниц трудно выполнить все вышеперечисленное. Делегируйте задачи специальной команде, автоматизируйте их с помощью инструментов или решайте проблемы по одной за раз.

Высоких вам конверсий! 

По материалам: searchenginejournal.com. Источник картинки: Orihuela

02-05-2017

125 простых советов по улучшению юзабилити вашего сайта


Выделите точку входа в интерфейс

В каждом интерфейсе должна быть чёткая отправная точка. Куда зрители должны посмотреть вначале? Сделайте это очевидным.

Создайте визуальный контраст для заголовков страниц

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

Направляйте пользователей с помощью визуальной иерархии

Избегайте пустых пространств, «запертых» внутри композиции

Комментарий Проектората: эти несколько советов построены на принципе F-паттерна считывания контента. То есть, пользователи читают сверху-вниз слева-направо и дизайнеру следует избегать неожиданных «прыжков» и «развилок» в восприятии. Всё верно, но не стоит забывать, что некоторые языки читаются справа-налево (http://he.aliexpress.com/">http://he.aliexpress.com/">http://he.aliexpress.com/">http://he.aliexpress.com/">http://he.aliexpress.com/">http://he.aliexpress.com/">http://he.aliexpress.com/">http://he.aliexpress.com/). Это раз. А два — интерфейсы, с которыми пользователи работают ежедневно, не обязательно должны быть легко воспринимаемыми. Они должны быть удобными для выполнения задач пользователя. Пример запертого пустого пространства — чаты в fb, которые появляются в правом нижнем углу экрана один за другим по горизонтали. И ничего плохого в этом нет. Профессиональный софт может обладать высоким порогом входа для новых пользователей, но сторицей окупится после его преодоления.

Компонуйте элементы в одну колонку

Перекройте один элемент другим, чтобы подчеркнуть целостность

Проектируйте интерфейс с учётом гештальт-принципов

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

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

Принципы гештальта

Расположите близкие по смыслу функции или пункты меню ближе друг к другу

Переместите заголовки ближе к релевантному тексту

Поместите заголовок в один блок с озаглавленным текстом

Комментарий Проектората: Артемий Лебедев в 2006 году написал параграф Ководства «Теория близости» (http://www.artlebedev.ru/kovodstvo/sections/136/">http://www.artlebedev.ru/kovodstvo/sections/136/">http://www.artlebedev.ru/kovodstvo/sections/136/">http://www.artlebedev.ru/kovodstvo/sections/136/). В проектировании это до сих пор правило номер один по частоте использования. На второе место мы бы поставили цветовое кодирование. Затем всё остальное.

Демонстрируйте изменения интерфейса, не вводя пользователя в замешательство

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

Добавьте анимацию изменений в интерфейсе

Выделите элементы, из-за которых возникла ошибка

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

Уберите или снимите акцент с ненужной информации

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

Затемните фон за поп-апом или модальным окном

На всех изображениях откажитесь от излишних украшений

Уберите ненужные рамки вокруг элементов

Удалите излишние или очевидные инструкции

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

Комментарий Проектората: прекрасные советы! Можем лишь дополнить ссылкой на видео с Дмитрием Сатиным. Это отрывок из выступления «Психология восприятия».

Покажите, что содержимое есть за границей видимой области

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

Пусть элементы обрезаются границей видимой области

Добавьте тень, чтобы показать глубину

С помощью слов или графики покажите, что ниже есть дополнительное содержимое

Делайте часто используемые функции и важную информацию доступнее пользователям

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

Предлагайте быстрые варианты для поиска
с первых введённых символов

Создавайте значения по умолчанию
в соответствии с самыми частыми запросами

Показывайте полезную информацию
при наведении курсором на объекты

Не прячьте часто используемые функции

Показывайте на дэшбордах важную информацию

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

Комментарий Проектората: хотелось бы предостеречь от слепого следования советам про ховеры (наведение курсором на объекты) и дэшборды. Ховеры мы не любим на мобильных устройствах. А дэшборды иногда лучше заменить переходом в раздел, с которого начинается работа пользователя (например, список входящих счетов или заявок в crm или список входящих сообщений в почтовом клиенте. Хотя что там, что там можно было бы придумать свои дэшборды).

Сообщайте о статусах процессов

Снижайте уровень неопределённости, демонстрируя пользователю релевантную информацию о состоянии системы.

Демонстрируйте состояние прогресса
и оставшееся время до завершения машинных процессов

Демонстрируйте текущее состояние сложных
или растянутых во времени процессов

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

Показывайте количество элементов в категориях

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

Предлагайте несколько путей достижения одной и той же цели

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

Позвольте авторизоваться как с помощью имени пользователя, так и с помощью адреса электронной почты

Предложите выполнять повторяющиеся
функции с помощью клавиатуры

Позвольте перетаскивать элементы курсором

Позвольте редактировать данные напрямую

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

Сообщайте о требованиях и параметрах интерактивных элементов

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

Опишите требования к данным,
которые вводят пользователи

Давайте обратную связь и требования к паролю
в режиме реального времени

Сопровождайте элементы форм универсальными обозначениями

Показывайте, какие поля форм обязательны к заполнению

Комментарий Проектората: здесь мы можем лишь пожаловаться на отсутствие внятного термина в русском языке, передающего смысл слова Interaction (дословный перевод: «взаимодействие»).

Подсказывайте, что произойдёт в результате взаимодействия с интерфейсом

Прежде чем пользователь совершит какое-то действие в интерфейсе, он должен понимать, что получит в результате этого действия

Пишите на кнопках, что конкретно произойдёт после нажатия

Показывайте, как будет выглядеть результат
уже на этапе ввода данных

Показывайте, что будет следующим в списке

Используйте «умные» пункты меню, дающие детальную информацию о результатах их использования

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

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

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

Соблюдайте соответствие между ссылками
и страницами, на которые они ведут

Награждайте маленькими победами в начале пути

Полосы прогресса начинайте со значений выше 0%

Комментарий Проектората: первый пункт — это «правило последовательности». После того, как пользователь нажал на ссылку с текстом «Регистрация» он не должен попасть на страницу «Создание аккаунта нового пользователя». Правило последовательности — одно из важнейших при создании высококонверсионных интерфейсов. Второй пункт всегда будет зависеть от контекста и не является универсальным. Третий пункт можем дополнить: не заканчивайте полосы прогресса значениями 100%, т.к. в этот момент пользователь может решить, что задача выполнена, и нарушить сценарий.

Закрывайте главные потребности пользователей

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

Указывайте, открыт или закрыт ваш офис прямо сейчас

Указывайте актуальность ближайших
событий относительно сегодняшнего дня 

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

Избавьте пользователей от подсчётов в уме

Никогда не заставляйте пользователей заниматься математикой в ваших интерфейсах. Пускай за них это делает компьютер.

Показывайте оставшееся количество всяких штук

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

Сообщайте о текущем положении пользователя в интерфейсе

Интерфейсы чем-то похожи на аэропорты. Без указателя «вы находитесь здесь» пользователи могут заблудиться. Поэтому создавайте такие указатели.

Выделяйте текущий раздел в меню навигации

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

В сложных интерфейсах используйте «хлебные крошки» и пошаговые карты

Размещайте полезную информацию в начале заголовков страниц

Упрощайте задачи, связанные с выбором

Выбор требует от пользователя определённых усилий. Уменьшите эти усилия, упростив выбор.

Выделяйте опции, которые выберут большинство пользователей

В поле поиска сразу предлагайте самые распространённые запросы по мере ввода

Не создавайте гигантских категорий в меню навигации

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

Используйте общепринятые интерфейсы в веб-дизайне

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

Используйте общепринятые меню навигации

Помещайте вспомогательные элементы в правый верхний угол

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

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

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

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

Выделяйте объекты, на которые пользователь навёл курсор

Комментарий Проектората: очень дельный совет. Во время проектирования начинающие специалисты часто упускают эти моменты. Мы в Проекторате называем многие завершённые сценарии «тупиковыми» страницами и прорабатываем их отдельно. Что видит пользователь после того, как он успешно выполнил свою задачу на сайте? Куда ему идти дальше? Какую информацию он хотел бы получить прямо сейчас?

Уменьшайте негативные эффекты во время ожидания

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

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

Синий цвет снижает раздражение (и повышает расслабленность). Когда пользователи смотрят на синие индикаторы загрузки, время для них летит быстрее ( http://repository.ust.hk/ir/bitstream/1783.1-1752/1/jmr01.pdf).

Поддерживайте вовлечённость пользователей во время длинных периодов ожидания

Заранее предотвращайте загрузку файлов, не подходящих по типу или размеру

Показывайте серию возникающих задач целиком

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

Не рассчитывайте на память пользователей

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

Подписи к полям форм всегда должны быть видимы

Размещайте тексты плейсхолдеров вне элементов форм

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

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

Избегайте зигзагообразных паттернов движения глаз

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

Группируйте схожую информацию, чтобы помочь пользователям сравнивать объекты

Выравнивайте подписи к полям в формах по правому краю

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

Наглядно показывайте, с какими элементами интерфейса можно взаимодействовать

Пользователи должны определять, какие элементы интерактивны (и как с ними взаимодействовать). Если вы знакомы с UX/UI, то вы, вероятно, знаете такие понятия, как аффордансы и сигнифаеры, популяризованные Доном Норманом в его «Дизайне привычных вещей» ( http://www.amazon.com/gp/product/0465050654).

Создавайте кнопки с использованием трёхмерных характеристик

Добавляйте текстуры в виде точек для элементов, которые можно перетаскивать

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

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

Общайтесь с пользователями с помощью знакомых всем слов и символов

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

Разговаривайте на языке пользователя, а не системы

Надпись на левой части картинки: «Системная ошибка! Бла-бла-бла на компьютерном жаргоне»

Надпись на правой части картинки: «Упс, что-то пошло не так! Но вы можете исправить это с помощью…»

Предлагайте кнопку перевода для иностранных языков

Используйте цвета, подходящие по смыслу

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

Увеличьте считываемость вашего интерфейса

Большинство пользователей будут продвигаться по интерфейсу, бегло его просматривая. Не стоит с этим бороться. Наоборот, воспользуйтесь этим. Сделайте ваш интерфейс более удобным для беглого просмотра.

Сокращайте объём параграфов и выделяйте основные мысли

Размещайте важную информацию в начале списковых элементов

Добавляйте чередующиеся горизонтальные полосы в таблицы

Пишите подзаголовки, раскрывающие суть абзацев

Разбивайте текст визуальным разнообразием

Комментарий Проектората: так и хочется на этот набор советов ответить фразой «Спасибо, Кэп!» А значит, для самых маленьких они отлично подойдут.

Делайте текст максимально читабельным

Очевидно, что текст обязан быть легко читаемым. Однако, вот несколько дополнительных советов, которые позволят сделать его считываемость ещё более высокой!

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

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

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

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

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

Подготовьте руководство по стилю интерфейса

Нужно вдохновение? Попробуйте взглянуть на руководство по стилю Мэйлчимпа ( http://ux.mailchimp.com/patterns)

Располагайте меню навигации в одних и тех же местах

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

Создавайте красивые, визуально сбалансированные интерфейсы

Интерфейсы более удобны, когда они приносят эстетическое удовольствие пользователю. Этот принцип называется эффектом эстетического юзабилити (Куросу и Кашимура, 1995, http://dl.acm.org/citation.cfm?id=223680).

Создавайте интерфейсы, используя математические законы

Используйте контрастирующие шрифты

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

Максимизируйте совместимость с учётом уровней знаний и навыков пользователей

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

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

Существует четыре основных стратегии по созданию вводных интерфейсов:

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

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

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

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

Максимизируйте совместимость с процессами работы, привычными пользователям

У пользователей будут свои разные потребности. Проектируйте интерфейсы таким образом, чтобы они отвечали разным пользовательским подходам к работе.

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

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

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

Используйте метод персонажей для описания процессов работы с интерфейсом от лица разных пользователей

Не запрещайте пользователям открывать страницы в новых вкладках

Комментарий Проектората: решение о том, стоит ли давать пользователям свободу выбора, принимается на основе большого количества факторов. И нужно понимать, что представленные советы работают только в том случае, если это решение было принято в пользу свободы. Что касается сортировок и фильтраций, рекомендуем ознакомиться со «старым, но не бесполезным» уроком Егора Камелева по проектированию универсальных каталогов (www.google.com="" url?q="https"">https://www.google.com/url?q=https://http://www.youtube.com/watch?v%3DEfQGWz3L2Q4&sa=D&...">www.youtube.com/watch?v%3DEfQGWz3L2Q4&sa=D&ust=148....">https://www.youtube.com/watch?v=EfQGWz3L2Q4">

Покажите, что содержимое есть за границей видимой области

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

Пусть элементы обрезаются границей видимой области

Добавьте тень, чтобы показать глубину

С помощью слов или графики покажите, что ниже есть дополнительное содержимое

Делайте часто используемые функции и важную информацию доступнее пользователям

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

Предлагайте быстрые варианты для поиска
с первых введённых символов

Создавайте значения по умолчанию
в соответствии с самыми частыми запросами

Показывайте полезную информацию
при наведении курсором на объекты

Не прячьте часто используемые функции

Показывайте на дэшбордах важную информацию

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

Комментарий Проектората: хотелось бы предостеречь от слепого следования советам про ховеры (наведение курсором на объекты) и дэшборды. Ховеры мы не любим на мобильных устройствах. А дэшборды иногда лучше заменить переходом в раздел, с которого начинается работа пользователя (например, список входящих счетов или заявок в crm или список входящих сообщений в почтовом клиенте. Хотя что там, что там можно было бы придумать свои дэшборды).

Сообщайте о статусах процессов

Снижайте уровень неопределённости, демонстрируя пользователю релевантную информацию о состоянии системы.

Демонстрируйте состояние прогресса
и оставшееся время до завершения машинных процессов

Демонстрируйте текущее состояние сложных
или растянутых во времени процессов

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

Показывайте количество элементов в категориях

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

Предлагайте несколько путей достижения одной и той же цели

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

Позвольте авторизоваться как с помощью имени пользователя, так и с помощью адреса электронной почты

Предложите выполнять повторяющиеся
функции с помощью клавиатуры

Позвольте перетаскивать элементы курсором

Позвольте редактировать данные напрямую

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

Сообщайте о требованиях и параметрах интерактивных элементов

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

Опишите требования к данным,
которые вводят пользователи

Давайте обратную связь и требования к паролю
в режиме реального времени

Сопровождайте элементы форм универсальными обозначениями

Показывайте, какие поля форм обязательны к заполнению

Комментарий Проектората: здесь мы можем лишь пожаловаться на отсутствие внятного термина в русском языке, передающего смысл слова Interaction (дословный перевод: «взаимодействие»).

Подсказывайте, что произойдёт в результате взаимодействия с интерфейсом

Прежде чем пользователь совершит какое-то действие в интерфейсе, он должен понимать, что получит в результате этого действия

Пишите на кнопках, что конкретно произойдёт после нажатия

Показывайте, как будет выглядеть результат
уже на этапе ввода данных

Показывайте, что будет следующим в списке

Используйте «умные» пункты меню, дающие детальную информацию о результатах их использования

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

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

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

Соблюдайте соответствие между ссылками
и страницами, на которые они ведут

Награждайте маленькими победами в начале пути

Полосы прогресса начинайте со значений выше 0%

Комментарий Проектората: первый пункт — это «правило последовательности». После того, как пользователь нажал на ссылку с текстом «Регистрация» он не должен попасть на страницу «Создание аккаунта нового пользователя». Правило последовательности — одно из важнейших при создании высококонверсионных интерфейсов. Второй пункт всегда будет зависеть от контекста и не является универсальным. Третий пункт можем дополнить: не заканчивайте полосы прогресса значениями 100%, т.к. в этот момент пользователь может решить, что задача выполнена, и нарушить сценарий.

Закрывайте главные потребности пользователей

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

Указывайте, открыт или закрыт ваш офис прямо сейчас

Указывайте актуальность ближайших
событий относительно сегодняшнего дня 

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

Избавьте пользователей от подсчётов в уме

Никогда не заставляйте пользователей заниматься математикой в ваших интерфейсах. Пускай за них это делает компьютер.

Показывайте оставшееся количество всяких штук

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

Сообщайте о текущем положении пользователя в интерфейсе

Интерфейсы чем-то похожи на аэропорты. Без указателя «вы находитесь здесь» пользователи могут заблудиться. Поэтому создавайте такие указатели.

Выделяйте текущий раздел в меню навигации

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

В сложных интерфейсах используйте «хлебные крошки» и пошаговые карты

Размещайте полезную информацию в начале заголовков страниц

Упрощайте задачи, связанные с выбором

Выбор требует от пользователя определённых усилий. Уменьшите эти усилия, упростив выбор.

Выделяйте опции, которые выберут большинство пользователей

В поле поиска сразу предлагайте самые распространённые запросы по мере ввода

Не создавайте гигантских категорий в меню навигации

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

Используйте общепринятые интерфейсы в веб-дизайне

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

Используйте общепринятые меню навигации

Помещайте вспомогательные элементы в правый верхний угол

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

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

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

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

Выделяйте объекты, на которые пользователь навёл курсор

Комментарий Проектората: очень дельный совет. Во время проектирования начинающие специалисты часто упускают эти моменты. Мы в Проекторате называем многие завершённые сценарии «тупиковыми» страницами и прорабатываем их отдельно. Что видит пользователь после того, как он успешно выполнил свою задачу на сайте? Куда ему идти дальше? Какую информацию он хотел бы получить прямо сейчас?

Уменьшайте негативные эффекты во время ожидания

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

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

Синий цвет снижает раздражение (и повышает расслабленность). Когда пользователи смотрят на синие индикаторы загрузки, время для них летит быстрее ( http://repository.ust.hk/ir/bitstream/1783.1-1752/1/jmr01.pdf).

Поддерживайте вовлечённость пользователей во время длинных периодов ожидания

Заранее предотвращайте загрузку файлов, не подходящих по типу или размеру

Показывайте серию возникающих задач целиком

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

Не рассчитывайте на память пользователей

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

Подписи к полям форм всегда должны быть видимы

Размещайте тексты плейсхолдеров вне элементов форм

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

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

Избегайте зигзагообразных паттернов движения глаз

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

Группируйте схожую информацию, чтобы помочь пользователям сравнивать объекты

Выравнивайте подписи к полям в формах по правому краю

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

Наглядно показывайте, с какими элементами интерфейса можно взаимодействовать

Пользователи должны определять, какие элементы интерактивны (и как с ними взаимодействовать). Если вы знакомы с UX/UI, то вы, вероятно, знаете такие понятия, как аффордансы и сигнифаеры, популяризованные Доном Норманом в его «Дизайне привычных вещей» ( http://www.amazon.com/gp/product/0465050654).

Создавайте кнопки с использованием трёхмерных характеристик

Добавляйте текстуры в виде точек для элементов, которые можно перетаскивать

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

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

Общайтесь с пользователями с помощью знакомых всем слов и символов

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

Разговаривайте на языке пользователя, а не системы

Надпись на левой части картинки: «Системная ошибка! Бла-бла-бла на компьютерном жаргоне»

Надпись на правой части картинки: «Упс, что-то пошло не так! Но вы можете исправить это с помощью…»

Предлагайте кнопку перевода для иностранных языков

Используйте цвета, подходящие по смыслу

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

Увеличьте считываемость вашего интерфейса

Большинство пользователей будут продвигаться по интерфейсу, бегло его просматривая. Не стоит с этим бороться. Наоборот, воспользуйтесь этим. Сделайте ваш интерфейс более удобным для беглого просмотра.

Сокращайте объём параграфов и выделяйте основные мысли

Размещайте важную информацию в начале списковых элементов

Добавляйте чередующиеся горизонтальные полосы в таблицы

Пишите подзаголовки, раскрывающие суть абзацев

Разбивайте текст визуальным разнообразием

Комментарий Проектората: так и хочется на этот набор советов ответить фразой «Спасибо, Кэп!» А значит, для самых маленьких они отлично подойдут.

Делайте текст максимально читабельным

Очевидно, что текст обязан быть легко читаемым. Однако, вот несколько дополнительных советов, которые позволят сделать его считываемость ещё более высокой!

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

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

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

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

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

Подготовьте руководство по стилю интерфейса

Нужно вдохновение? Попробуйте взглянуть на руководство по стилю Мэйлчимпа ( http://ux.mailchimp.com/patterns)

Располагайте меню навигации в одних и тех же местах

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

Создавайте красивые, визуально сбалансированные интерфейсы

Интерфейсы более удобны, когда они приносят эстетическое удовольствие пользователю. Этот принцип называется эффектом эстетического юзабилити (Куросу и Кашимура, 1995, http://dl.acm.org/citation.cfm?id=223680).

Создавайте интерфейсы, используя математические законы

Используйте контрастирующие шрифты

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

Максимизируйте совместимость с учётом уровней знаний и навыков пользователей

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

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

Существует четыре основных стратегии по созданию вводных интерфейсов:

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

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

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

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

Максимизируйте совместимость с процессами работы, привычными пользователям

У пользователей будут свои разные потребности. Проектируйте интерфейсы таким образом, чтобы они отвечали разным пользовательским подходам к работе.

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

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

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

Используйте метод персонажей для описания процессов работы с интерфейсом от лица разных пользователей

Не запрещайте пользователям открывать страницы в новых вкладках

Комментарий Проектората: решение о том, стоит ли давать пользователям свободу выбора, принимается на основе большого количества факторов. И нужно понимать, что представленные советы работают только в том случае, если это решение было принято в пользу свободы. Что касается сортировок и фильтраций, рекомендуем ознакомиться со «старым, но не бесполезным» уроком Егора Камелева по проектированию универсальных каталогов (www.google.com="" url?q="https"">https://www.google.com/url?q=https://http://www.youtube.com/watch?v%3DEfQGWz3L2Q4&sa=D&...">www.youtube.com/watch?v%3DEfQGWz3L2Q4&sa=D&ust=148....">https://www.youtube.com/watch?v=EfQGWz3L2Q4">). А за методом персонажей, если вы о нём не слышали, снова направляем вас в Гугл.

Максимизируйте доступность вашего интерфейса

Сделайте ваш интерфейс доступным для пользователей с ограниченными возможностями. Это не только хорошая практика, но и в некоторых странах повод для получения дополнительных привилегий ( https://en.wikipedia.org/wiki/Americans_with_Disabilities_Act_of_1990).

Используйте семантическую разметку (метки) в HTML5

Одновременно используйте разные индикаторы для выделения информации

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

Комментарий Проектората: семантическая разметка подойдёт не только для людей с ограниченными возможностями. Если она используется, ваши сайты можно будет просматривать в режиме удобного чтения статей, либо перемещаться от блока к блоку с помощью голосового управления (не только, если пользователь слеп, но и, например, если он управляет автомобилем). Второй совет будет сильно зависеть от контекста, но в большинстве случаев его действительно стоит применять. А вот ссылка на материал про 8% мужчин: www.google.com="" url?q="http"">https://www.google.com/url?q=http://apfmj.biomedcentral.com/articles/10.1186/s12930-014-0010-3&sa=D&ust=1483593605518000&usg=AFQjCNEW2_GkX0RQIWK_3K9yckxZ2NfEeQ">http://apfmj.biomedcentral.com/articles/10.1186/s1....">http://apfmj.biomedcentral.com/articles/10.1186/s1.....

Максимизируйте доступность для полей ввода данных и для крайних сценариев

Пользователи должны иметь возможность вводить разнообразные данные без негативных последствий.

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

Надпись на левой картинке: «Желаем повеселиться в Освенциме!». Надпись на правой картинке: «Хорошей поездки!».

Используйте элементы форм, которые «съедают» разные форматы данных

Показывайте результаты, которые решают задачи ищущего

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

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

Максимизируйте доступность для всех контекстов

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

Создавайте инструкции для разных браузеров

Надпись справа: «Вижу, вы используете Firefox».

На маленьких устройствах используйте выпадающие списки, занимающие весь экран

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

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

Предотвратите возможность возникновения ошибок

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

Отключайте кнопки сразу после того, как по ним кликнули

Не просите пользователей кликнуть по кнопке «Подтвердить» один раз. Если они могут кликнуть несколько раз, они кликнут. Вместо этого отключайте их после клика. Таким образом вы не позволите случайно отправить данные несколько раз.

Предлагайте такие поля ввода данных, которые не позволят ввести неподходящие значения

Используйте отзывчивые активацию и отключение элементов в формах

Оформляйте текстовые поля так, чтобы они соответствовали вводимым данным

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

Отслеживайте сигналы о том, что пользователь вот-вот допустит ошибку

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

Отслеживайте слова, которые выражают намерение пользователя

Надпись слева: «Ваше сообщение было отправлено».

Надпись справа: «Вы хотели прикрепить файл к сообщению? Вы написали «Я прикрепил», однако на самом деле ничего не прикрепили». И кнопки «Редактировать» и «Отправить».

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

Надпись на левой кнопке: «Купить».

Надпись на правой кнопке: «Купить ещё один экземпляр». 

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

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

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

Отделяйте «мощные» функции расстоянием или цветом

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

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

Предоставляйте возможности легко откатить или отменить действия

Всегда позволяйте пользователям вернуться назад или восстановить страницу в исходное состояние.

Лучше используйте откаты, а не дополнительные подтверждения

Давайте возможность вернуться «на исходную» в рамках любой страницы или функции вашего интерфейса

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

Явно показывайте кнопку «Закрыть» на модальных окнах

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

Минимизируйте негативный эффект от прерванных последовательностей действий

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

Сохраняйте введённые пользователями данные

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

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

Увеличивайте размеры подвижных частей и кликабельных зон

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

Увеличивайте кликабельные зоны элементов за счёт прозрачных границ

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

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

Делайте ссылками корневые пункты меню навигаций, элементы списков, и дополнительные иконки

Часто пользователи кликают на некликабельные элементы. Не боритесь с этими ошибками. Вместо этого добавьте этим элементам кликабельность. 

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

Показывайте ценные и подбадривающие сообщения об ошибках

Никогда не пишите стандартное сообщение «Произошла ошибка!» Объясните причину её возникновения и, при возможности, пути решения.

Объясняйте причины возникновения ошибок

Надпись слева: «Упс! Произошла ошибка».

Надпись справа: «Упс! Это старый пароль».

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

Надпись слева: «Упс. Произошла ошибка по причине XYZ. Теперь вы сами за себя».

Надпись справа: «Упс. Произошла ошибка по причине XYZ. Вы можете её исправить с помощью ABC. Кликните, чтобы узнать детали».

Избегайте обращений к пользователю на «вы» в сообщениях об ошибках

Надпись слева: «Упс! Вы забыли ввести индекс».

Надпись справа: «Упс! Пожалуйста, введите индекс». 

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

Сохраняйте информацию о предыдущих действиях пользователей

Напоминайте пользователям о действиях, совершённых ими ранее в вашем интерфейсе.

Показывайте последние поисковые запросы пользователей

Выделяйте посещённые ссылки другими цветами

Отмечайте, какие элементы пользователи уже просмотрели

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

Анализируйте поведение пользователей на сайте, чтобы обнаруживать проблемы с интерфейсом

Постоянно вносите итерационные улучшения в интерфейс. Для начала воспользуйтесь простыми советами ниже.

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

Отслеживайте увеличение количества ошибок-404 с помощью уведомлений

Выявите страницы, на которых пользователи «топчутся на месте»

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

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

Вы прочитали перевод статьи Ника Коленды « 125 Easy Tweaks to Optimize Your Website’s UX/UI Today».

Автор перевода и комментариев — Егор Камелев

Ссылка на первоисточник: http://projectorat.ru/125tweaks/

5 быстрых способов улучшить юзабилити вашего сайта

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

1. Ориентация на читаемость

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

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

2. Фон Цвет , Текстура и Контрастность

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

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

3. Выбор изображений и их размещение

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

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

4. Навигация

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

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

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

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

Заключение

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

Хотите узнать больше?

Если хотите…

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

… тогда рассмотрите возможность пройти онлайн-курс «Проведение Юзабилити-тестирование.

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

(Изображение: Depositphotos)

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

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

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

Удобство использования имеет далеко идущие последствия для бизнеса, чем достижение цели — она ​​улучшает цель конвертируемости посетителей.Например, когда веб-сайт использует рекламу с оплатой за клик (PPC), удобство использования помогает улучшить показатель качества и конверсию, тем самым улучшая общую стоимость привлечения клиентов. Это также помогает повысить количество действий, поскольку клиент понимает веб-сайт, продукт, услугу или контент. Чтобы узнать, почему удобство использования веб-сайта важно для любой компании, я советую прочитать статью под названием «Почему удобство использования веб-сайта важно для компании», которая была опубликована в этом блоге.

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

1. Хороший пользовательский интерфейс

Веб-сайты-портфолио обычно имеют очень креативный пользовательский интерфейс, чтобы продемонстрировать своей целевой аудитории свои возможности дизайна и разработки (Источник: http://aylis.com/).

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

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

2. Навигация Удобство использования

Пользователи обычно читают содержимое веб-страницы по F-образному шаблону. На этом изображении показаны тепловые карты из исследований пользовательского отслеживания взгляда. (Источник: Useit.com)

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

Research показало, что обычно пользователи читают веб-страницы по f-образному шаблону. Таким образом, имеет смысл разместить всю важную информацию, такую ​​как логотип сайта и основной навигации с левой стороны.Для более крупных веб-сайтов хорошей техникой будет отображение внутренних страниц / категорий на левой боковой панели. Для некоторых примеров того, что хорошо, а что плохо navigation , можно начать с этой статьи в Smashing Magazine. Тем не менее, можно найти различные хорошие ресурсы даже с помощью простого поиска в Google

3. Функции поиска

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

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

Фактически, для крупных веб-сайтов электронной коммерции рекомендуется, чтобы помимо традиционного механизма поиска также была доступна опция расширенного поиска, чтобы посетители могли уточнить свои поисковые запросы, выбрав такие параметры, как цена, торговые марки. и обзоры.Полный набор рекомендаций о том, как сделать ваш интерфейс поиска пригодным для использования, можно найти в статье «10 Usability Guidelines For Design the Search Interface».

4. Содержание Удобство использования

Загроможденный контент сделает ваш сайт кошмаром юзабилити (и да, этот снимок экрана сделан с сайта 2012 года!)

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

5. Изображения для поддержки содержимого

Веб-страница без изображений очень скучна и трудна для чтения (Источник: Chrisguitars.com)

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

6. Видео для улучшения содержимого

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

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

7. Быстрая загрузка веб-страниц

Как упоминалось в предыдущем пункте, пользователи быстро покидают страницы, если их не привлекает их содержание. А теперь представьте, как быстро пользователи покидают веб-страницу, если этот контент загружается очень долго! Важность быстрой загрузки веб-страниц настолько велика, что Google включил скорость сайта в свой алгоритм ранжирования поиска.Это связано с тем, что их исследования подтвердили, что «более быстрые сайты создают счастливых пользователей» и «когда сайт медленно реагирует, посетители проводят на нем меньше времени». Чтобы оценить скорость вашего веб-сайта, вы можете использовать такие инструменты, как Google PageSpeed, Yahoo! YSlow и WebPageTest.

Заключительные слова

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

Хотите узнать больше?

Если хотите…

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

… тогда подумайте о том, чтобы пройти онлайн-курс Проведение Юзабилити-тестирование.

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

(Ведущее изображение: Адрианна Кальво через Pexels)

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

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

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

1. Добавьте карту сайта

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

Карта сайта также является отличным способом удовлетворить требования доступности Руководства по доступности Консорциума World Wide Web (WCAG 2.0, критерии успеха 2.4.5).

В WordPress существует множество плагинов для создания страницы карты сайта из сообщений и страниц, включая Simple Sitemap и WP WordPress Sitemap.

Пользователи Drupal могут автоматически создавать карту сайта пунктов меню или категорий, используя модуль Site Map.

2. Используйте четкую и последовательную навигацию Системы

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

3. Подтвердите свои страницы и таблицы стилей

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

4. Просмотрите свой веб-сайт с помощью автоматизированных инструментов Accessibility Assessment Tools

Automated Accessibility Инструменты оценки — отличный способ начать всестороннюю проверку Accessibility и могут помочь вам выявить критические проблемы доступности на вашем веб-сайте. Эти инструменты могут помочь вам определить общие проблемы accessibility , такие как отсутствие атрибутов alt, низкая контрастность элементов , недопустимая разметка HTML / CSS и многое другое.Некоторые из этих автоматизированных инструментов также включают предупреждения о разметке и ручные проверки для дальнейшего тестирования. Ознакомьтесь с еще одним важным инструментом accessibility Evaluation здесь.

5. Используйте разметку HTML для предоставления семантической информации

Одна из самых мощных функций HTML — это возможность структурировать контент. Структурированное содержимое позволяет браузерам (и пользователям) понимать контекст информации в документе HTML. Правильно структурированные страницы используют упорядоченные и неупорядоченные списки, заголовки (h2, h3… h6), абзацы, разделы, статьи и многое другое.Включение семантической информации и структуры в ваши страницы важно для обеспечения того, чтобы браузеры и устройства со вспомогательными технологиями могли анализировать и интерпретировать содержимое ваших страниц. Ознакомьтесь с отличными статьями о семантической разметке и HTML.

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

Включение альтернативного (альтернативного) текста является одним из рекомендуемых методов для повышения удобства использования изображений на веб-сайте. Он также позволяет программам чтения с экрана и другим вспомогательным технологиям предоставлять информацию об изображениях, встроенных в страницы HTML.Альтернативный текст должен быть достаточно информативным и кратким, чтобы дать пользователям точное представление о контекстном значении изображения. Альтернативные описания, состоящие более чем из 5-7 слов, могут быть представлены как длинные описания, используя атрибут longdesc или ссылку на новую страницу с полным описанием. Для изображений, которые являются чисто декоративными (например, границы, разделители и т. Д.), Вы можете указать устройствам со вспомогательными технологиями игнорировать изображение, установив для атрибута alt значение NULL.

7. Проверьте Ваши страницы с помощью клавиатуры

Пользователи вспомогательных технологий обычно используют клавиатуру для навигации по страницам. Вы можете протестировать на наличие клавиатуры Accessibility , используя клавиатуру и клавиши «tab» и «shift + tab» для перехода по всем ссылкам на вашем сайте. Используйте клавишу «Enter», чтобы активировать элементы управления и ссылки, при этом убедитесь, что все функции страницы доступны только с клавиатуры.

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

  • Избегайте использования «display: none» или «display: 0» в ваших таблицах стилей.Для таблиц стилей, использующих эти свойства, не забудьте включить другой индикатор фокуса клавиатуры (например, стили: focus {}).
  • Убедитесь, что порядок табуляции для элементов управления страницей и ссылок соответствует естественному порядку чтения документа.
  • Включите ссылки или кнопки для реализации специальных возможностей интерактивных элементов.
  • Предоставьте пользователям возможность пропускать большие блоки ссылок.

Для получения дополнительной информации ознакомьтесь со статьей WebAim о Keyboard Accessibility .

8. Предоставление титров для встроенного видео

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

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

Популярные инструменты для создания субтитров: MAGpie, Subtitle Workshop и ccPlayer. Обратите внимание, что инструменты транскрипции не на 100% точны, поэтому все титры, созданные с помощью этих программ, следует проверять на точность.

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

9. Предоставьте стенограммы для временных СМИ

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

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

10. Проверьте Ваши страницы на мобильном устройстве

Все большее количество пользователей выходят в Интернет через мобильные устройства. Чтобы гарантировать лучший опыт для ваших посетителей, рекомендуется протестировать ваших страниц на одном или нескольких мобильных устройствах (включая телефоны и планшеты). Помимо ручного тестирования, существует несколько автоматизированных инструментов для оценки юзабилити вашего сайта на мобильных устройствах. Google Analytics включает анализ скорости страницы и пользовательского опыта для мобильных устройств (в разделе «Поведение»).Вы также можете использовать W3Cs MobileOK Checker для определения синтаксиса и других ошибок, которые могут повлиять на производительность сайта на мобильных устройствах.

Заключение

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

Вдохновение для этой статьи: Сеть консорциума World Wide Web Доступность и Удобство использования Совместная работа.

Хотите узнать больше?

Если хотите…

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

… тогда рассмотрите возможность пройти онлайн-курс «Проведение юзабилити-тестирования».Если, с другой стороны, вы хотите освежить в памяти основы UX и юзабилити, подумайте о том, чтобы пройти онлайн-курс по пользовательскому опыту. Удачи вам в обучении!

(Изображение: Depositphotos)

Руководство по обеспечению доступности веб-контента 1.0

Руководство по обеспечению доступности веб-содержимого 1.0

Рекомендация W3C от 5 мая 1999 г.

Эта версия:
http://www.w3.org/TR/1999/WAI-WEBCONTENT-199

(простой текст, PostScript, PDF , г. gzip tar-файл из HTML , zip архив HTML)
Последняя версия:
http: // www.w3.org/TR/WAI-WEBCONTENT
Предыдущая версия:
http://www.w3.org/TR/1999/WAI-WEBCONTENT-199
Редакторы:
Венди Чизхолм, Центр исследований и разработок Trace, Университет Висконсина — Мэдисон
Грегг Вандерхайден, Центр исследований и разработок Trace, Университет Висконсина — Мэдисон
Ян Джейкобс, W3C


Авторские права © 1999 W3C ( MIT , ИНРИЯ , Кейо), все права защищены.W3C ответственность, товарный знак, документ использовать и программного обеспечения применяются правила лицензирования.

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

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

Этот документ предназначен для стабильной работы и поэтому не предоставляет конкретная информация о поддержке браузером различных технологий поскольку эта информация быстро меняется.Вместо этого Инициатива веб-доступности ( WAI ) Интернет сайт предоставляет такую ​​информацию (см. [WAI-UA-SUPPORT]).

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

В отдельном документе, озаглавленном «Рекомендации по обеспечению доступности веб-контента 1.0» ([ТЕХНИКИ]), объясняется, как реализовать контрольные точки, определенные в текущем документе. Методы В документе более подробно обсуждается каждый контрольный пункт и примеры с использованием Язык разметки гипертекста ( HTML ), Каскадные таблицы стилей ( CSS ), Синхронизированный язык интеграции мультимедиа ( СМИЛ ), и математический язык разметки ( MathML ).Документ о методах также включает методы проверки и тестирования документов, а также указатель элементов и атрибутов HTML (и какие методы используй их). Документ о методах был разработан для отслеживать изменения в технологии и, как ожидается, будет обновляться чаще, чем текущий документ. Примечание. Не все браузеры или мультимедийные инструменты могут поддерживают функции, описанные в руководствах. В частности, новые функции HTML 4.0, CSS 1 или CSS 2 могут не поддерживаться.

«Руководство по обеспечению доступности веб-контента 1.0» является частью серии рекомендаций по обеспечению доступности опубликовано в Интернете Инициатива. В серию также включены специальные возможности агента пользователя. Рекомендации ([WAI-USERAGENT]) и Руководство по доступности средств разработки ([WAI-AUTOOLS]).

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

Английская версия данной спецификации является единственной нормативной версия. Однако для переводов на другие языки см. Http://www.w3.org/WAI/GL/WAI-WEBCONTENT-TRANSLATIONS.

Список известных ошибок в этом документе доступен по адресу http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA. Сообщите об ошибках в этом документ в wai-wcag-editor @ w3.орг.

Список текущих Рекомендаций W3C и других технических документов можно найти на http://www.w3.org/TR.

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

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

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

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

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

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

Как текстовый эквивалент делает изображение доступным? Оба слова в «текстовом эквиваленте» важны:

  • Текстовое содержимое может быть представлено пользователю как синтезированная речь, шрифт Брайля и визуально отображаемый текст. Каждый из этих трех механизмов использует другой смысл — уши для синтезированной речи, тактильные для шрифта Брайля и глаза для визуально отображаемого текста — создание информация, доступная для групп, представляющих различные сенсорные и другие инвалидности.
  • Чтобы быть полезным, текст должен передавать ту же функцию или цель как изображение. Например, рассмотрим текстовый эквивалент для фотографическое изображение Земли из космоса. Если цель изображения — главным образом украшение, затем текст «Фотография Земли из космоса» могла бы выполнить необходимая функция. Если цель фотографии — проиллюстрировать конкретная информация о географии мира, затем текстовый эквивалент должен передавать эту информацию.Если фотография была оформлена чтобы сказать пользователю выбрать изображение (например, щелкнув по нему) для информации о Земле эквивалентный текст будет «Информация о Земле». Таким образом, если текст передает то же самое функция или цель для пользователя с ограниченными возможностями, как изображение для других пользователей это можно считать текстовым эквивалентом.

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

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

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

В руководстве рассматриваются две общие темы: обеспечение изящного преобразование и обеспечение понятности и навигации по контенту.

2.1 Обеспечение постепенного преобразования

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

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

К теме изящной трансформации обращаются в первую очередь руководящие принципы с 1 по 11.

2.2 Делаем контент понятным и судоходный

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

Сделать контент понятным и удобным для навигации является рассматриваются в основном в руководящих принципах 12 — 14.

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

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

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

  • Номер КПП.
  • Выписка КПП.
  • Приоритет КПП. Приоритет 1 контрольные точки выделяются с помощью таблиц стилей.
  • Дополнительные информационные примечания, поясняющие примеры, и перекрестные ссылки на соответствующие руководящие принципы или контрольные точки.
  • Ссылка на раздел Документ о методах ([ТЕХНИКИ]), где обсуждаются реализации и примеры КПП.

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

3.1 Условные обозначения в документе

В тексте используются следующие редакционные соглашения. этот документ:

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

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

[Приоритет 1]
Разработчик веб-контента должен удовлетворить это контрольно-пропускной пункт. В противном случае одна или несколько групп сочтут невозможным получить доступ к информации в документе.Удовлетворение этой контрольной точки — это основное требование для некоторых групп, чтобы иметь возможность использовать веб-документы.
[Приоритет 2]
Разработчик веб-контента должен удовлетворить это контрольно-пропускной пункт. В противном случае одной или нескольким группам будет сложно получить доступ к информации в документе. Удовлетворение этой контрольной точки будет устранять значительные препятствия для доступа к веб-документам.
[Приоритет 3]
Разработчик веб-контента май адрес этот контрольно-пропускной пункт.Иначе, одной или нескольким группам будет трудно получить доступ информация в документе. Удовлетворение этой контрольной точки улучшит доступ к веб-документам.

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

В этом разделе определены три уровня соответствия этому документ:

  • Уровень соответствия «A» : все контрольные точки с приоритетом 1 удовлетворены;
  • Уровень соответствия «Double-A» : все контрольные точки приоритета 1 и 2 удовлетворены;
  • Уровень соответствия «Triple-A» : все контрольные точки с приоритетом 1, 2 и 3 выполнены;

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

В заявлении о соответствии этому документу необходимо использовать один из следующие две формы.

Форма 1: указать:

  • Название руководства: «Рекомендации по обеспечению доступности веб-контента 1.0»
  • Рекомендации URI : http://www.w3.org/TR/1999/WAI-WEBCONTENT-199

  • Удовлетворенный уровень соответствия: «A», «Double-A» или «Triple-A».
  • Объем притязаний (e.g., page, site или определенная часть сайта.).

Пример формы 1:

Эта страница соответствует «Руководству W3C по доступности веб-контента 1.0», доступно по адресу http://www.w3.org/TR/1999/WAI-WEBCONTENT-199

, уровень Double-A.

Форма 2: Включите на каждой странице с заявлением о соответствии один из трех значки, предоставленные W3C, и свяжите значок с соответствующее объяснение претензии W3C. Информация о значки и способы их вставки на страницы доступны по адресу [WCAG-ИКОНКИ].

Рекомендация 1. Предоставить эквивалентные альтернативы слуховой и визуальный контент.

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

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

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

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

Контрольно-пропускные пункты:
1.1 Обеспечьте текстовый эквивалент для каждого нетекстового элемента (например, с помощью alt, longdesc или в содержимом элемента). Сюда входят : изображения, графические представления текста (включая символы), области карты изображений, анимации (например, анимированные GIF-файлы), апплеты и программные объекты, искусство ascii , фреймы, сценарии, изображения, используемые в качестве маркеров списка, разделители, графические кнопки, звуки (воспроизводимые с или без взаимодействия с пользователем), автономные аудиофайлы, звуковые дорожки видео и видео.[Приоритет 1]
Например, в HTML:
  • Используйте alt для элементов IMG, INPUT и APPLET, или укажите текстовый эквивалент в содержании элементов OBJECT и APPLET.
  • Для сложного содержания (например, диаграммы), где текст «alt» не является полным текстом эквивалент, укажите дополнительные описание с использованием, например, «longdesc» с IMG или FRAME, ссылка внутри элемента OBJECT, или ссылку на описание.
  • Для карт изображений используйте атрибут «alt» с AREA или используйте элемент MAP с элементами A (и другим текстом) в качестве содержимого.

См. Также КПП 9.1 и КПП 13.10.

Приемы для КПП 1.1
1.2 Предоставьте повторяющиеся текстовые ссылки для каждой активной области серверной карты изображений. [Приоритет 1]
См. Также КПП 1.5 и КПП 9.1.
Техника КПП 1.2
1.3 До тех пор, пока пользовательские агенты не смогут автоматически читать вслух текстовый эквивалент визуальной дорожки, предоставьте слуховое описание важной информации визуальной дорожки мультимедийной презентации.[Приоритет 1]
Синхронизировать слуховой описание со звуковой дорожкой согласно КПП 1.4. Обратитесь к контрольной точке 1.1 для получения информации о текстовых эквиваленты визуальной информации.
Приемы КПП 1.3
1.4. Для любой временной мультимедийной презентации (например, фильма или анимации) синхронизируйте эквивалентные альтернативы (например, титры или слуховые описания визуальной дорожки) с презентацией. [Приоритет 1]
Приемы для КПП 1.4
1.5 До тех пор, пока пользовательские агенты не отобразят текстовые эквиваленты для ссылок на клиентские карты изображений, предоставьте избыточные текстовые ссылки для каждой активной области клиентской карты изображений. [Приоритет 3]
См. Также КПП 1.2 и КПП 9.1.
Техника КПП 1.5

Рекомендация 2. Не полагайтесь только на цвет.

Убедитесь, что текст и графика понятно при просмотре без цвета.

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

Контрольно-пропускных пунктов:
2.1 Убедитесь, что вся информация, передаваемая с помощью цвета, также доступна без цвета, например, из контекста или разметки. [Приоритет 1]
Техника КПП 2.1
2.2 Убедитесь, что комбинации цветов переднего плана и фона обеспечивают достаточный контраст при просмотре человеком с дефицитом цвета или при просмотре на черно-белом экране.[Приоритет 2 для изображений, Приоритет 3 для текста].
Приемы для КПП 2.2

Рекомендация 3. Используйте разметку и таблицы стилей и делайте это. должным образом.

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

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

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

С другой стороны, разработчики контента не должны жертвовать подходящая разметка, потому что определенный браузер или вспомогательная технология не обрабатывает его правильно. Например, уместно использовать элемент TABLE в HTML для разметки табличная информация даже хотя некоторые старые программы чтения с экрана могут не работать параллельно текст правильно (см. пункт 10.3). С помощью ТАБЛИЦА правильно и создание таблиц, которые красиво трансформируются (см. рекомендация 5) позволяет программному обеспечению отображать другие таблицы. чем двухмерные сетки.

Контрольно-пропускные пункты:
3.1 При наличии подходящего языка разметки для передачи информации используйте разметку, а не изображения. [Приоритет 2]
Например, используйте MathML для разметки математических уравнения и таблицы стилей для форматирования текста и управления макетом. Также, избегайте использования изображений для представления текста — используйте текст и таблицы стилей вместо. См. Также рекомендации 6 и 11.
Приемы для КПП 3.1
3.2 Создайте документы, подтверждающие соответствие опубликованным формальным грамматикам.[Приоритет 2]
Например, укажите тип документа объявление в начале документ, который ссылается на опубликованный DTD (например, строгий HTML 4.0 DTD).
Приемы для КПП 3,2
3.3 Используйте таблицы стилей для управления макетом и представлением. [Приоритет 2]
Например, используйте свойство CSS font вместо элемента HTML FONT для управления стилями шрифтов.
Техника КПП 3.3
3.4 Используйте относительные, а не абсолютные единицы в значениях атрибутов языка разметки и значениях свойств таблиц стилей.[Приоритет 2]
Например, в CSS используйте ’em’ или процент длины, а не pt или cm, которые являются абсолютными единицы. Если используются абсолютные единицы, проверить, что визуализированный контент можно использовать (см. раздел о валидации).
Приемы для КПП 3,4
3.5 Используйте элементы заголовка для передачи структуры документа и используйте их в соответствии со спецификацией. [Приоритет 2]
Например, в HTML используйте h3 для обозначения подраздел h2. Не используйте заголовки для эффектов шрифта.
Приемы КПП 3,5
3.6 Правильно разметьте списки и элементы списков. [Приоритет 2]
Например, в HTML правильно вложите списки OL, UL и DL.
Приемы КПП 3,6
3.7 Наценка котировок. Не используйте разметку кавычек для эффектов форматирования, таких как отступ. [Приоритет 2]
Например, в HTML используйте элементы Q и BLOCKQUOTE. для разметки коротких и длинных котировок соответственно.
Приемы для КПП 3.7

Руководство 4. Уточнение использования естественного языка

Используйте разметку, облегчающую произношение или интерпретацию сокращенный или иностранный текст.

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

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

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

Контрольно-пропускных пунктов:
4.1 Четко обозначьте изменения в естественном языке текста документа и любых текстовых эквивалентов (например, подписей). [Приоритет 1]
Например, в HTML используйте атрибут «lang». В XML используйте «xml: lang».
Техника для КПП 4.1
4.2 Укажите расширение каждого аббревиатуры или акронима в документе, где они встречаются впервые. [Приоритет 3]
Например, в HTML, используйте атрибут «title» элементов ABBR и ACRONYM.Обеспечение расширения в основной части документа также помогает документировать удобство использования.
Техника КПП 4.2
4.3. Определите основной естественный язык документа. [Приоритет 3]
Например, в HTML установите атрибут «lang» в HTML-элемент. В XML используйте «xml: lang». Операторы серверов должны настроить серверы на воспользоваться механизмами согласования содержимого HTTP ([RFC2068], раздел 14.13) поэтому что клиенты могут автоматически получать документы на предпочитаемом языке.
Техника КПП 4.3

Рекомендация 5. Создавайте таблицы с плавным преобразованием.

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

Таблицы следует использовать для правильной разметки табличная информация («данные таблицы «). Разработчикам контента следует избегать их использования для компоновки страниц. («Макетные таблицы»). Таблицы для любого использования также представляют особые проблемы пользователям экрана читатели (см. КПП 10.3).

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

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

Контрольно-пропускных пунктов:
5.1 Для таблиц данных укажите заголовки строк и столбцов. [Приоритет 1]
Например, в HTML используйте TD для идентифицировать ячейки данных и TH для определения заголовков.
Техника КПП 5.1
5.2 Для таблиц данных с двумя или более логическими уровнями заголовков строк или столбцов используйте разметку, чтобы связать ячейки данных и ячейки заголовков. [Приоритет 1]
Например, в HTML используйте THEAD, TFOOT и TBODY для группировки строки, COL и COLGROUP для группировки столбцов и атрибуты «ось», «область действия» и «заголовки» для описания более сложные отношения между данными.
Приемы для КПП 5.2
5.3 Не используйте таблицы для компоновки, если таблица не имеет смысла после линеаризации. В противном случае, если таблица не имеет смысла, предоставьте альтернативный эквивалент (который может быть линеаризованной версией). [Приоритет 2]
Примечание. Как только пользовательские агенты поддержка позиционирования таблицы стилей, таблицы не должны использоваться для верстки. См. Также пункт 3.3.
Техника КПП 5,3
5.4 Если таблица используется для разметки, не используйте структурную разметку для визуального форматирования.[Приоритет 2]
Например, в HTML не используйте элемент TH для вызвать содержимое (не заголовок таблицы) ячейка будет отображаться по центру и жирным шрифтом.
Техника КПП 5,4
5.5 Предоставьте сводки для таблиц. [Приоритет 3]
Например, в HTML используйте атрибут «сводка». элемента ТАБЛИЦА.
Техника КПП 5.5
5.6 Укажите сокращения для меток заголовков. [Приоритет 3]
Например, в HTML используйте атрибут abbr в TH элемент.
Техника КПП 5,6

См. Также КПП 10.3.

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

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

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

Контрольно-пропускные пункты:
6.1 Организуйте документы так, чтобы их можно было читать без таблиц стилей. Например, когда HTML-документ визуализируется без связанных таблиц стилей, он все равно должен быть доступен для чтения. [Приоритет 1]
Когда контент организован логически, он будет отображается в осмысленном порядке, когда таблицы стилей выключены или не поддерживаются.
Техника КПП 6.1
6.2. Убедитесь, что эквиваленты динамического содержимого обновляются при изменении динамического содержимого.[Приоритет 1]
Техника КПП 6.2
6.3 Убедитесь, что страницы можно использовать, когда сценарии, апплеты или другие программные объекты отключены или не поддерживаются. Если это невозможно, предоставьте эквивалентную информацию на альтернативной доступной странице. [Приоритет 1]
Например, убедитесь, что ссылки, запускающие скрипты, работают. когда скрипты отключены или не поддерживаются (например, не используйте «javascript:» в качестве цели ссылки). Если нет возможности сделать страницу, которую можно использовать без скриптов, укажите текстовый эквивалент с NOSCRIPT или используйте серверный сценарий вместо клиентского. скрипт, или предоставить альтернативную доступную страницу в соответствии с КПП 11.4. См. Также рекомендацию 1.
Техника КПП 6.3
6.4 Для сценариев и апплетов убедитесь, что обработчики событий не зависят от устройства ввода. [Приоритет 2]
См. Определение независимость от устройства.
Техника КПП 6.4
6.5 Убедитесь, что динамический контент доступен, или предоставьте альтернативное представление или страницу. [Приоритет 2]
Например, в HTML используйте NOFRAMES в конце каждого набора фреймов.Для некоторых приложений серверные скрипты могут быть более доступными, чем клиентские скрипты.
Техника КПП 6.5

См. Также КПП 11.4.

Рекомендация 7. Обеспечьте пользователю контроль над изменением содержимого, которое зависит от времени.

Убедитесь, что перемещение, мигание, прокрутка или автоматическое обновление объектов или страницы могут быть приостановлены или остановлены.

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

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

Контрольно-пропускных пунктов:
7.1 Пока пользовательские агенты не позволят пользователям управлять мерцанием, избегайте мерцания экрана. [Приоритет 1]
Примечание. человек при светочувствительной эпилепсии судороги могут быть вызваны: мерцание или мигание в диапазоне от 4 до 59 вспышек в секунду (Герц) с максимальной чувствительностью 20 вспышек в секунду и быстрой меняется с темного на светлый (как стробоскопы).
Техника КПП 7.1
7.2 До тех пор, пока пользовательские агенты не позволят пользователям управлять миганием, избегайте мигания содержимого (т.е.е. регулярно менять представление, например включать и выключать). [Приоритет 2]
Приемы для КПП 7.2
7.3 Пока пользовательские агенты не позволят пользователям останавливать движущийся контент, избегайте движения на страницах. [Приоритет 2]
Если страница содержит движущееся содержимое, предоставить механизм в сценарии или апплет, позволяющий пользователям останавливать движение или обновления. Использование таблиц стилей со сценариями для создания движение позволяет пользователям выключить или легче переопределить эффект.См. Также руководство 8.
Приемы для КПП 7.3
7.4 Пока пользовательские агенты не предоставят возможность останавливать обновление, не создавайте периодически автоматически обновляющиеся страницы. [Приоритет 2]
Например, в HTML не заставить страницы автоматически обновляться с «HTTP-EQUIV = refresh», пока пользовательские агенты позволить пользователям отключить эту функцию.
Техника КПП 7,4
7.5 Пока пользовательские агенты не предоставят возможность остановить автоматическое перенаправление, не используйте разметку для автоматического перенаправления страниц.Вместо этого настройте сервер на выполнение перенаправления. [Приоритет 2]
Техника КПП 7,5

Примечание. Элементы BLINK и MARQUEE не являются определен в любой спецификации W3C HTML и не должен используемый. См. Также руководство 11.

Рекомендация 8. Обеспечение прямого доступа встроенного пользователя интерфейсы.

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

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

Примечание. Для получения информации о доступных интерфейсах, пожалуйста, ознакомьтесь с Руководством по доступности User Agent ([WAI-USERAGENT]) и инструментом Authoring Tool. Рекомендации по доступности ([WAI-AUTOOL]).

КПП:
8.1 Обеспечьте прямой доступ к программным элементам, таким как сценарии и апплеты, или совместимость со вспомогательными технологиями [Приоритет 1, если функциональность важна и нигде не представлена, в противном случае — Приоритет 2].
См. Также руководство 6.
Техника КПП 8.1

Рекомендация 9. Дизайн для независимости от устройства.

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

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

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

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

Контрольно-пропускные пункты:
9.1 Предоставлять карты изображений на стороне клиента вместо карт изображений на стороне сервера, за исключением случаев, когда области не могут быть определены с доступной геометрической формой. [Приоритет 1]
См. Также контрольную точку 1.1, контрольную точку 1.2, и КПП 1.5.
Приемы КПП 9,1
9.2 Убедитесь, что любой элемент, имеющий собственный интерфейс, может работать независимо от устройства. [Приоритет 2]
См. Определение независимость от устройства.
См. Также руководство 8.
Приемы для КПП 9,2
9.3 Для сценариев укажите логические обработчики событий, а не обработчики событий, зависящие от устройства. [Приоритет 2]
Приемы КПП 9,3
9.4 Создайте логический порядок табуляции с помощью ссылок, элементов управления формы и объектов. [Приоритет 3]
Например, в HTML укажите порядок табуляции с помощью атрибут tabindex или обеспечить логический дизайн страницы.
Приемы для КПП 9.4
9.5 Предоставьте сочетания клавиш для важных ссылок (в том числе в клиентских картах изображений), элементов управления формами и групп элементов управления формами. [Приоритет 3]
Например, в HTML укажите ярлыки через атрибут «accesskey».
Техника КПП 9,5

Руководство 10. Используйте временные решения.

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

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

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

Контрольно-пропускных пунктов:
10.1 Пока пользовательские агенты не разрешат пользователям отключать порожденные окна, не вызывать всплывающих или других окон и не изменять текущее окно без уведомления пользователя. [Приоритет 2]
Например, в HTML избегайте использования фрейма, цель которого это новое окно.
Приемы для КПП 10,1
10.2 Пока пользовательские агенты не поддерживают явные ассоциации между метками и элементами управления формы, для всех элементов управления формы с неявно связанными метками убедитесь, что метка правильно расположена. [Приоритет 2]
Этикетка должна стоять непосредственно перед его контроль в той же строке (позволяя более одного элемент управления / метка в строке) или находиться в строке, предшествующей элемент управления (только с одной меткой и одним элементом управления на строку). См. Также контрольную точку 12.4.
Приемы для КПП 10,2
10.3 До тех пор, пока пользовательские агенты (включая вспомогательные технологии) не будут правильно отображать параллельный текст, предоставьте линейный текст (на текущей странице или какой-либо другой) для всех таблиц , которые размещают текст в параллельных столбцах с переносом слов. [Приоритет 3]
Примечание. Пожалуйста, ознакомьтесь с определением линеаризованная таблица. Этот контрольно-пропускной пункт приносит пользу людям с пользовательские агенты (например, некоторые программы чтения с экрана) которые не могут обрабатывать блоки текста, представленные бок о бок; КПП не должен отпугивать разработчики контента от использования таблиц представлять табличная информация.
Приемы для КПП 10,3
10.4 До тех пор, пока пользовательские агенты не будут правильно обрабатывать пустые элементы управления, включите символы по умолчанию в полях редактирования и текстовых областях. [Приоритет 3]
Например, в HTML сделайте это для ТЕКСТАРА и ВХОД.
Приемы для КПП 10,4
10.5 До тех пор, пока пользовательские агенты (включая вспомогательные технологии) не отобразят соседние ссылки отчетливо, включайте несвязочные печатные символы (окруженные пробелами) между соседними ссылками.[Приоритет 3]
Техника КПП 10,5

Руководство 11. Используйте технологии и рекомендации W3C.

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

Текущие рекомендации рекомендуют технологии W3C (например, HTML, CSS и др.) по нескольким причинам:

  • Технологии W3C включают «встроенные» специальные возможности.
  • Спецификации W3C проходят предварительную проверку для обеспечения доступности вопросы рассматриваются на этапе проектирования.
  • Спецификации W3C разрабатываются в процессе открытого отраслевого консенсуса.

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

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

Примечание. Преобразование документов (из PDF, PostScript, RTF и т. Д.) В языки разметки W3C (HTML, XML ) не всегда создает доступный документ. Поэтому проверяйте каждую страницу на предмет доступность и удобство использования после процесса преобразования (см. раздел о валидации). Если страница не сразу преобразовать, либо пересмотреть страницу до ее исходного представление преобразуется соответствующим образом или предоставляет HTML или простой текст версия.

Контрольно-пропускных пунктов:
11.1 Используйте технологии W3C, если они доступны и подходят для задачи, и используйте последние версии, если они поддерживаются. [Приоритет 2]
См. Список литературы для получения информации о том, где найти последние спецификации W3C и [WAI-UA-SUPPORT] для получения информации о поддержке пользовательских агентов для технологий W3C.
Приемы для КПП 11,1
11.2 Избегайте устаревших функций технологий W3C. [Приоритет 2]
Например, в HTML не используйте устарел Элемент FONT; вместо этого используйте таблицы стилей (е.g., свойство ‘font’ в CSS).
Приемы для КПП 11,2
11.3 Предоставлять информацию, чтобы пользователи могли получать документы в соответствии со своими предпочтениями (например, языком, типом контента и т. Д.) [Приоритет 3]
Примечание. По возможности используйте согласование содержимого.
Приемы для КПП 11,3
11.4 Если, приложив максимум усилий, вы не можете создать доступную страницу, укажите ссылку на альтернативную страницу, которая использует технологии W3C, доступна, имеет эквивалентную информацию (или функциональность) и обновляется так же часто, как недоступная (исходная) страница .[Приоритет 1]
Приемы для КПП 11,4

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

Рекомендация 12. Предоставьте информацию о контексте и ориентации.

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

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

Контрольно-пропускные пункты:
12.1 Заголовок каждого кадра для облегчения идентификации кадра и навигации. [Приоритет 1]
Например, в HTML используйте атрибут «title» в FRAME. элементы.
Приемы для КПП 12,1
12.2 Опишите назначение фреймов и то, как фреймы соотносятся друг с другом, если это не очевидно только по заголовкам фреймов. [Приоритет 2]
Например, в HTML используйте longdesc или ссылка на описание.
Приемы для КПП 12.2
12.3 Разделите большие блоки информации на более управляемые группы, где это естественно и уместно. [Приоритет 2]
Например, в HTML используйте OPTGROUP группировать элементы OPTION внутри SELECT; группировать элементы управления формами с помощью FIELDSET и LEGEND; при необходимости используйте вложенные списки; используйте заголовки для структурирования документов и т. д. См. Также руководство 3.
Приемы на КПП 12,3
12.4 Явно связывайте метки с соответствующими элементами управления. [Приоритет 2]
Например, в HTML используйте LABEL и его атрибут «for».
Приемы для КПП 12,4

Указание 13. Обеспечьте понятные механизмы навигации.

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

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

Контрольно-пропускные пункты:
13.1 Четко определите цель каждой ссылки. [Приоритет 2]
Ссылка текст должен быть достаточно значимым иметь смысл при чтении вне контекста — либо отдельно, либо как часть последовательности ссылок. Текст ссылки также должен быть кратким.
Например, в HTML напишите «Информация о версия 4.3 «вместо» щелкните здесь «. Помимо четкого текста ссылки, разработчики контента могут дополнительно уточнить цель ссылки с информативным заголовком ссылки (например, в HTML, атрибут «title»).
Приемы для КПП 13.1
13.2 Предоставление метаданных для добавления семантической информации на страницы и сайты. [Приоритет 2]
Например, используйте RDF ([RDF]) указать автора документа, тип контента и т. д.
Примечание. Немного HTML пользовательские агенты может создавать инструменты навигации из отношений документов, описанных элемент HTML LINK и атрибуты rel или rev (например, rel = «next», rel = «previous», rel = «index» и т. д.). См. Также пункт 13.5.
Приемы для КПП 13.2
13.3 Предоставьте информацию об общем макете сайта (например, карту сайта или оглавление). [Приоритет 2]
При описании макета сайта, выделите и объясните доступные специальные возможности.
Техника для КПП 13,3
13.4 Последовательное использование навигационных механизмов. [Приоритет 2]
Техника для КПП 13,4
13.5 Предоставьте панели навигации для выделения и предоставления доступа к механизму навигации.[Приоритет 3]
Техника для КПП 13,5
13.6 Сгруппируйте связанные ссылки, идентифицируйте группу (для пользовательских агентов) и, пока пользовательские агенты не сделают это, предоставьте способ обхода группы. [Приоритет 3]
Техника для КПП 13,6
13.7 Если предусмотрены функции поиска, включите разные типы поиска для разных уровней навыков и предпочтений. [Приоритет 3]
Техника для КПП 13,7
13.8 Размещайте отличительную информацию в начале заголовков, абзацев, списков и т. Д.[Приоритет 3]
Примечание. Это обычно называется «фронтальной загрузкой» и особенно полезно для людей, получающих доступ к информации с серийным устройства, такие как синтезаторы речи.
Техника для КПП 13,8
13.9 Предоставлять информацию о коллекциях документов (т. Е. Документах, состоящих из нескольких страниц). [Приоритет 3]
Например, в HTML укажите коллекции документов с помощью ССЫЛКИ элемент и атрибуты «rel» и «rev».Другой способ создать коллекцию — построить архив (например, с zip, tar и gzip, stuffit и т. д.) из нескольких страниц.
Примечание. Улучшение производительности, полученное офлайн обработка может сделать просмотр намного меньше дорого для людей с ограниченными возможностями, которые могут просматривать медленно.
Техника КПП 13,9
13.10 Предоставьте средства для пропуска многострочного ASCII-арта. [Приоритет 3]
См. Контрольную точку 1.1 и пример ascii art в глоссарии.
Техника для КПП 13.10

Руководство 14. Убедитесь, что документы понятны и просты.

Убедитесь, что документы четкие и простые, их может быть легче понять.

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

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

Контрольно-пропускные пункты:
14.1 Используйте самый ясный и простой язык, подходящий для содержания сайта.[Приоритет 1]
Приемы КПП 14,1
14.2 Дополните текст графическими или слуховыми презентациями, чтобы облегчить понимание страницы. [Приоритет 3]
См. Также руководство 1.
Приемы для КПП 14,2
14.3 Создайте стиль представления, совместимый на всех страницах. [Приоритет 3]
Техника для КПП 14,3

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

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

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

  1. Используйте автоматический инструмент специальных возможностей и инструмент проверки браузера.Обратите внимание, что программные инструменты не обеспечивают полную доступность вопросы, такие как значимость текста ссылки, применимость текстовый эквивалент и т. д.
  2. Проверить синтаксис (например, HTML, XML и т. Д.).
  3. Проверить таблицы стилей (например, CSS).
  4. Используйте только текстовый браузер или эмулятор.
  5. Используйте несколько графических браузеров с:
    • звуков и графики загружены,
    • графика не загружена,
    • звуки не загружены,
    • без мыши,
    • фреймы, скрипты, таблицы стилей и апплеты не загружены
  6. Используйте несколько браузеров, старые и новые.
  7. Используйте голосовое сопровождение браузер, программа чтения с экрана, программное обеспечение для увеличения, небольшой дисплей, пр.
  8. Используйте средства проверки правописания и грамматики. Человек, читающий страницу с синтезатор речи может быть не в состоянии расшифровать синтезатор лучше всего угадайте слово с орфографической ошибкой. Устранение грамматических проблем увеличивает понимание.
  9. Просмотрите документ на предмет ясности и простоты. Статистика удобочитаемости, например, генерируемая некоторым словом процессоры могут быть полезными индикаторами ясности и простоты.Лучше тем не менее, попросите опытного (человека) редактора просмотреть письменный контент для ясность. Редакторы также могут улучшить удобство использования документов, выявление потенциально деликатных культурных проблем это может возникнуть из-за использования языка или значков.
  10. Пригласите людей с ограниченными возможностями для просмотра документов. Эксперт и начинающие пользователи с ограниченными возможностями предоставят ценные отзывы о проблемах доступности или удобства использования и их серьезности.
Доступно
Контент доступен, когда это возможно использоваться кем-то с ограниченными возможностями.
Аплет
Программа, вставленная на веб-страницу.
Вспомогательные технологии
Программное или аппаратное обеспечение, специально разработанное для помощи люди с ограниченными возможностями при выполнении повседневной деятельности. Вспомогательный техника включает инвалидные коляски, читающие машины, устройства для хватание и т. д. В области веб-доступности программные вспомогательные технологии, включая программы чтения с экрана, лупы, синтезаторы речи и программное обеспечение для ввода голоса, которые работают в сочетании с графическими настольными браузерами (среди других пользователей агентов).Вспомогательные аппаратные технологии включают альтернативные клавиатуры и указывающие устройства.
ASCII art
ASCII art относится к текстовым знакам и символам. которые объединяются для создания образа. Например, «;-)» — смайлик-смайлик. Следующее цифра ascii, показывающая соотношение между частотой вспышки и светосудорожный ответ у пациентов с глаза открываются и закрываются [пропустить над цифрой ascii или свериться с описанием диаграммы]:
  % __ __ __ __ __ __ __ __ __ __ __ __ __ __
100 | * |
 90 | * * |
 80 | * * |
 70 | @ * |
 60 | @ * |
 50 | * @ * |
 40 | @ * |
 30 | * @ @ @ * |
 20 | |
 10 | @ @ @ @ @ |
      0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
      Частота вспышки (Герцы)
Инструмент для разработки
HTML редакторы, инструменты преобразования документов, инструменты, которые генерировать веб-контент из баз данных — все инструменты разработки.Обратитесь к «Руководство по доступности средств разработки» ([WAI-AUTOOLS]) для получения информации о разработке доступные инструменты.
Обратная совместимость
Дизайн, который продолжает работать с более ранними версиями языка, программы и т. д.
Брайля
Брайль использует шесть выпуклых точек с разными узорами для обозначения буквы и цифры, которые должны читать люди, слепые своими кончики пальцев. Слово «Доступный» шрифтом Брайля следует:
A дисплей Брайля , обычно называемый «динамическим дисплеем Брайля», повышает или понижает точечные рисунки по команде с электронного устройства, обычно компьютер.В результате получается строка шрифта Брайля, которая может меняться в любой момент. к моменту. Текущие динамические дисплеи Брайля имеют размер от одной ячейки (шесть или восемь точек) к линии из восьмидесяти клеток, большинство из которых от двенадцати до двадцати ячеек в строке.
Содержимое проявитель
Тот, кто создает веб-страницы или проектирует веб-сайты.
Устарело
Устаревший элемент или атрибут — это тот, который устарел более новые конструкции.Устаревшие элементы могут стать устарело в будущих версиях HTML. В индекс элементов и атрибутов HTML в Документ о методах указывает, какие элементы и атрибуты устарели в HTML 4.0.
Авторам следует избегать использования устаревших элементов и атрибутов. Пользовательские агенты должны продолжать поддерживать причины обратной совместимости.
Не зависит от устройства
Пользователи должны иметь возможность взаимодействовать с пользовательским агентом (и документ, который он отображает) с использованием поддерживаемого ввода и вывода устройства по своему выбору и в соответствии с их потребностями.Устройства ввода могут включать указывающие устройства, клавиатуры, устройства Брайля, налобные палочки, микрофоны и другие. Устройства вывода могут включать мониторы, синтезаторы речи и устройства Брайля.
Обратите внимание, что «поддержка, не зависящая от устройства» не означает, что Пользовательские агенты должны поддерживать каждое устройство ввода или вывода. Пользовательские агенты должен предлагать избыточные механизмы ввода и вывода для этих устройств которые поддерживаются. Например, если пользовательский агент поддерживает клавиатуру и ввод с помощью мыши, пользователи должны иметь возможность взаимодействовать со всеми функциями с помощью клавиатуры или мыши.
Содержание документа, Структура и представление
Содержание документа относится к что он говорит пользователю на естественном языке, изображения, звуки, фильмы, анимация и т. д. Структура документа такая, какая она есть организованы логически (например, по главам, с введение и оглавление и др.). Элемент (например, P, STRONG, BLOCKQUOTE в HTML), который определяет документ конструкция называется структурной элемент. Презентация document — это способ визуализации документа (например,g., как печать, как двухмерное графическое представление в виде текстового представления, синтезированной речи, шрифтом Брайля и т. д.) Элемент который определяет представление документа (например, B, FONT, CENTER) называется презентацией элемент.
Рассмотрим, например, заголовок документа. Содержание заголовка — это то, что в заголовке написано (например, «Парусники»). В HTML заголовок является структурным элементом размеченный, например, элементом h3. Наконец, представление заголовка может быть выделенный жирным шрифтом текст на полях, центральная строка текста, название, произносимое определенным голосом (например, слуховой шрифт) и т. д.
динамический HTML (DHTML)
DHTML — маркетинговый термин, применяемый к смесь стандартов, включая HTML, таблицы стилей, Объектная модель документа [DOM1] и сценарии. Однако нет спецификации W3C, которая формально определяет DHTML. Большинство рекомендаций могут быть применимы в приложения, использующие DHTML, однако следующие рекомендации сосредоточены на вопросы, связанные со сценариями и таблицами стилей: рекомендация 1, руководство 3, руководство 6, руководство 7 и руководство 9.
Элемент
В этом документе термин «элемент» используется как в строгом смысле SGML (элемент — это синтаксическая конструкция) и в более общем смысле для обозначения типа контента (например, видео или звука) или логического конструкция (например, заголовок или список). Второе чувство подчеркивает, что руководство, вдохновленное HTML можно легко применить к другому языку разметки.
Обратите внимание, что некоторые элементы (SGML) имеют содержимое, которое отображается (например, элементы P, LI или TABLE в HTML), некоторые заменяются по внешнему содержанию (например,g., IMG), а некоторые влияют обработка (например, STYLE и SCRIPT вызывают информацию для обработки таблицей стилей или обработчиком сценариев). Элемент, вызывающий текстовые символы быть частью документа называется текстовый элемент.
Эквивалент
Контент «эквивалентен» другому контенту, когда оба по существу та же функция или цель при представлении пользователю. В контексте В этом документе эквивалент должен выполнять по существу ту же функцию для человека с ограниченными возможностями (по крайней мере, насколько это возможно, учитывая характер инвалидности и состояние техники) в качестве основного контент предназначен для человека без инвалидности.Например, текст «Полнолуние» может содержать ту же информацию. как изображение полной луны при представлении пользователям. Обратите внимание, что эквивалентная информация сосредоточена на выполнении та же функция . Если изображение часть ссылки и понимание изображения имеет решающее значение чтобы угадать цель ссылки, эквивалент также должен давать пользователям представление о целевой ссылке. Предоставление эквивалентной информации для недоступных контент — один из основных способов авторы могут сделать свои документы доступными для людей с инвалидность.
В рамках выполнения той же функции содержания эквивалент может включать описание этого контента (т.е. как выглядит или звучит контент). Например, чтобы пользователи понимали информация, представленная сложной диаграммой, Авторы должны описывать визуальную информацию в таблице.
Поскольку текстовый контент может быть представлен пользователю как синтезированный речь, шрифт Брайля и визуально отображаемый текст, эти рекомендации требуется текст эквиваленты для графической и звуковой информации.Текстовые эквиваленты должны быть написаны так, что передают все необходимое содержание. Нет текста эквиваленты (например, слуховое описание визуального представления, видео человека рассказывать историю, используя язык жестов в качестве эквивалент письменного рассказа и т. д.) также улучшить доступность для люди, которые не могут получить доступ к визуальной информации или письменный текст, в том числе многие люди со слепотой, когнитивные нарушения, нарушения обучаемости и глухота.
Эквивалентная информация может быть предоставлена ​​несколькими способами, в том числе через атрибуты (например,g., текстовое значение для «alt» атрибут в HTML и SMIL) как часть содержимого элемента (например, OBJECT в HTML), как часть текста документа или через связанный документ (например, обозначенный атрибутом longdesc в HTML или ссылкой описания ). В зависимости от сложности эквивалент, может потребоваться объединить методы (например, использовать «alt» для сокращенного эквивалента, полезного для знакомых читателей, в дополнение к longdesc для ссылки на более полную информацию, полезно для начинающих читателей).Подробная информация о том, как и когда предоставлять эквивалентную информацию являются частью документа о методах ([МЕТОДЫ]).
расшифровка текста текстовый эквивалент аудиоинформации, которая включает устную слова и молчаливые звуки, например звуковые эффекты. Подпись — текст расшифровка звуковой дорожки видеопрезентации, которая синхронизируется с видео и аудио треками. Субтитры обычно визуализируется путем наложения на видео, что приносит пользу глухим и слабослышащие и все, кто не слышит звук (например,г., в переполненном помещении). A с подборкой расшифровка текста объединяет (сопоставляет) подписи с текстовыми описаниями видеоинформации (описание действий, язык тела, графика и сцена изменения видеодорожки). Эти текстовые эквиваленты делают презентации доступны для слепоглухих и для людей, не может воспроизводить фильмы, анимацию и т. д. Это также делает информацию доступны для поисковых систем.
Примером нетекстового эквивалента является слуховое описание ключевых визуальных элементов презентации.Описание является либо предварительно записанный человеческий голос или синтезированный голос (записанный или сгенерированный на лету). Слуховое описание синхронизируется со звуковой дорожкой презентации, обычно во время естественных пауз в звуковой дорожке. Слуховые описания включают информацию о действиях, язык тела, графика и изменения сцены.
Изображение
Графическое представление.
Карта изображения
Изображение, разделенное на области с соответствующими действия.Щелчок по активной области вызывает действие.
Когда пользователь щелкает активную область клиентская карта изображений, пользовательский агент вычисляет, в каком регионе произошел щелчок, и переходит по ссылке, связанной с этим регионом. Нажав на активный область карты изображения на стороне сервера вызывает координаты щелчка для отправки на сервер, который затем выполняет какое-то действие.
Разработчики контента может сделать клиентские карты изображений доступными, предоставив независимый от устройства доступ к тем же ссылкам, связанным с изображением карта регионов.Карты изображений на стороне клиента позволяют пользовательскому агенту предоставлять немедленная обратная связь относительно того, находится ли указатель пользователя над активная область.
Важно
Информация в документе важно, если понимание этой информации важно для понимания документа.
Линеаризованная таблица
Процесс визуализации таблицы, в котором содержимое ячейки становятся серией абзацев (например, вниз страницу) одну за другой.Абзацы будут в том же порядок, поскольку ячейки определены в источнике документа. Ячейки должны иметь смысл при чтении по порядку и должны включать структурные элементы (которые создают абзацы, заголовки, списки и т. д.) поэтому страница имеет смысл после линеаризации.
Текст ссылки
Отображаемое текстовое содержимое ссылки.
натуральный Язык
Разговорные, письменные или жестовые человеческие языки, такие как французский, Японский, американский язык жестов и шрифт Брайля.Естественный язык содержания может быть обозначенным атрибутом «lang» в HTML ([HTML40], раздел 8.1) и «xml: lang» атрибут в XML ([XML], раздел 2.12).
Механизм навигации
Механизм навигации — это любое средство, с помощью которого пользователь может перемещаться по странице или сайту. Вот некоторые типичные механизмы:
панели навигации
Панель навигации — это набор ссылок к наиболее важным частям документа или сайта.
карты сайта
Карта сайта обеспечивает глобальный обзор организация страницы или сайта.
оглавление
В оглавлении обычно перечислены (и ссылки) на самые важные разделы документа.
Персональный цифровой помощник (КПК)
КПК — маленький, портативное вычислительное устройство. Большинство КПК используются для отслеживания личных данных такие как календари, контакты и электронная почта.КПК обычно портативное устройство с маленьким экраном, позволяющее вводить данные с различных источники.
Экран лупа
Программа, увеличивающая часть экрана, поэтому что может быть больше ea

Юзабилити-тестирование веб-сайтов | Userlytics

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

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

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

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

Бесплатная демонстрация