CC BY
59
КРИТЕРИИ ДОСТУПНОСТИ ВЕБ-ИНТЕРФЕЙСОВ
© Башмаков Е.Д.*
Кубанский государственный университет, г. Краснодар
При разработке пользовательского интерфейса веб-продукта, в первую очередь, стоит обращать внимание не на дизайн, а на доступность. Если пользователь не может увидеть, плохо видит или запутывается в пользовательском интерфейсе, то остальные аспекты уже не имеют значения.
Как объективно оценить результат работы программиста, создающего пользовательский интерфейс? Ответ на этот вопрос, а также практические рекомендации, основанные на актуальных исследованиях и стандартах, предлагаются в данной работе.
Введение
Первое, что видит пользователь при взаимодействии с веб-продуктом -пользовательский интерфейс. Это понятие включает в себя, например, дизайн элементов, цветовое оформление, наличие или отсутствие картинок. Однако, не все разработчики уделяют должное время наиболее главному требованию любого пользовательского интерфейса - его доступности. Например:
1. Как быстро система реагирует на запросы пользователя?
2. Различимы ли основные элементы (текст, кнопки)?
3. Насколько устают глаза при прочтении текста?
Целью статьи является составление конкретных критериев доступности для фокусировки на них при создании нового пользовательского интерфейса или для оценки уже разработанного.
Критерии доступности пользовательского интерфейса Время загрузки
Скорость загрузки - один из первых параметров, которые вспоминают люди, когда их просят оценить свой опыт взаимодействия с определённым веб-сайтом [2]. Проблема восприятия в том, что обычному человеку время загрузки кажется на 15 % дольше, чем есть на самом деле. Но самое интересное, что когда они будут делиться своим опытом с другими, они назовут время загрузки на 35 % больше реального - нормальная человеческая склонность преувеличивать [3].
Jakob Nielsen, основываясь на сорокалетних исследованиях, в своей статье «Website Response Times» [4] дает следующую классификацию:
- 0,1 секунды дает иллюзию мгновенного ответа.
- 1 секунда сохраняет ощущение нормального взаимодействия.
* Аспирант кафедры Математического моделирования.
- Задержка в 1-10 секунд воспринимается как медленная, неприятная, но терпимая.
- После 10 секунд, пользователь отвлекается или завершает работу.
Помимо оптимизации программного кода, существуют способы снизить
негативное восприятие в случае большого времени загрузки:
- Прогрессивный рендеринг страницы - элементы загружаются последовательно - с первого, который заметит пользователь.
- Индикаторы прогресса - информация о текущем состоянии запроса («Сохранение», «Отправка» и т.д.), но они не должны указывать пользователям, что им делать («Ожидайте»). Показывать индикаторы стоит, если задержка превышает 5 секунд.
- Белый цвет в дизайне. Такие страницы кажутся быстрее, но и требования к скорости для них завышены.
- Не указывать время загрузки - автоматически рассчитанное время, не соответствующее действительности - причина отвлечения внимания или завершения работы.
- Анимация загрузки конкретных блоков пользовательского интерфейса вместо индикатора прогресса - только в том случае, если анимация загрузки выполнена качественно.
Оптический контраст
Контраст между фоном и цветом элементов (текст, иконки и т.д.), т.е. различимость предмета наблюдения от окружающего его фона - оптический контраст. Визуальное восприятие объекта возможно только при наличии контраста между объектом и фоном. Данное утверждение особенно актуально для пользователей, страдающих дальтонизмом или работающих не в идеальных условиях (плохой монитор, отражение окон, блики от солнца).
Контраст K определяется отношением разности яркостей объекта наблюдения B1 и фона B2 к одной из этих яркостей:
K = (B1 - B2) / B1
Когда объект имеет абсолютный контраст, то K = 1, при его отсутствии (объект сливается с фоном) K = 0 [5]. Величины контраста:
- до 20 % - малый контраст.
- до 50 % - достаточный контраст.
- выше 50 % - высокий контраст.
Более качественный алгоритм, принятый W3C и входящий в Web Content Accessibility Guidelines (WCAG 2.0):
Коэффициент контраста:
C = (L1 + 0.05) / (L2 + 0.05)
где L1 - относительная яркость самого светлого оттенка, L2 - самого темного.
Относительная яркость (для цветового пространства sRGB): L = 0.2126 * R + 0.7152 * G + 0.0722 * B
R, G и B определены как:
if RsRGB < 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) л 2.4 if GsRGB < 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) л 2.4 if BsRGB < 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) л 2.4
RsRGB, GsRGB, and BsRGB определены как:
RsRGB = R8bit/255, GsRGB = G8bit/255, BsRGB = B8bit/255
Значения коэффициента контраста C (максимальный 21:1):
- 7:1 и выше - высший уровень соответствия WCAG 2.0.
- 4.5:1 и выше - дост аточный уровень.
- Ниже 4.5:1 - недост аточный уровень.
Чтобы оценить контраст приложения, его необходимо увидеть в «черно-белом» варианте. Если все элементы дизайна хорошо видны, а текст легко читаемый, значит выбран правильный контраст, и наоборот [6].
Для более качественной проверки контраста, можно воспользоваться ПО сравнения контрастности на основе сложных.
Шрифт
Понятие «Шрифт» включает в себя множество аспектов. Однако, в плане доступности, наиболее важными является правильная комбинация количества слов в строке и длины строки. Сложности заключаются в следующем:
1. экраны мониторов и ноутбуков, а также подключаемых проекторов, плазменных панелей и т.д., имеют разную плотность пикселей (количество пикселей, которое помещается в один линейный дюйм) [7];
2. расстояние от экрана до глаз пользователя может быть разным.
И если первый параметр можно получить, то для определения второго необходимо специальное оборудование, поэтому будем измерять длину строки именно в сантиметрах, а не в пикселях.
С конца 19-го столетия было проведено много исследований по оптимальной ширине линии текста, но идеального решения так и не появилось. Если собрать результаты исследований, то можно сделать выводы [8] (см. табл. 1).
Широкий параграф даёт лучший результат в скорости чтения, но при этом глаза устают быстрее. Дело в том, что после прочтения одной строки, глазу необходимо перестраиваться на следующую строку. А при длинной строке, глаз должен преодолеть большее расстояние, из-за чего ему сложнее найти следующую строку.
Таблица 1
Исследователь Год Оптимальная длина строки Примечание
Вебер 1881 10 см Максимальная длина 15 см.
Джавель 1881 9 см
Тинкер и Пат-терсон 1929 7,5-9 см Использовался текст размером 10 пунктов. Параграфы длиной 18,5см читались медленнее.
Кон 1983 9 см Максимальная длина 10 см
Дачники и Ко-лерс 1983 18,7 см Строка длиной 18,7 см читалась быстрее на 28 % чем 1/3 длины монитора - 6,2 см.
Дайсон и Кип-пинг 1998 18,2 см Использовался текст размером 12 пунктов. Тесты показали, что скорость чтения увеличивается вместе с увеличением количества символов в строке. Несмотря на то, что текст в одной колонке читался быстрее, пользователи предпочитали 3-х колоночный формат.
Янгмэн и Шарф 1999 20 см Использовался текст размером 12 пунктов. 20 см были оптимальны для скорости чтения, но пользователи предпочитали длину 10-12,5 см.
Бернард, Фернандес и Хал 2002 24,5 см Использовался текст размером 12 пунктов. Данный тест не выявил особой разницы в скорости чтения между тремя размерами - 24,5 см, 14,5 см и 8,5 см. Взрослые пользователи всё же выбрали 2 более коротких длины.
В итоге, оптимальная длина строки: 9-14 сантиметров. Допустима длина от 7,5 до 20 сантиметров, другие значения будут приводить к слишком быстрой усталости глаз.
Количество слов в строке
Роберт Брингхерст в книге «Основы стиля в типографике» [9] говорит, что для одноколонного набора мелким кеглем текстовой антиквой на английском языке оптимальное значение длины строки составляет от 45 до 75 знаков. 66 знаков - идеальный вариант. Для многоколонного набора - 40-50 знаков. Эти же данные подтверждаются и в других исследованиях [20].
Семейство шрифта
Обычно выбор стоит между шрифтами с засечками (хвостики на буквах снизу и сверху) и без (не имеющие хвостиков на буквах). Говоря об удобстве чтения, противопоставление шрифта с засечками и без засечек вылилось в целый комплекс исследований, состоящих из слабых противоборствующих утверждений. Одно за другим, исследования проводились лишь для того, чтобы приходить к одному и тому же выводу: «нет различий» [12]. Оба этих начертания будут хорошо смотреться, если выбрать размер основного текста больше 12 пикселей. Шрифт с засечками размером менее 12 пикселей смотрится размыто [13]. В итоге, для удобства чтения большее значение имеет конкретное семейство шрифта, нежели наличие у него засечек, однако, количество современных семейств значительно усложняет нахождение
лучших. Кроме того, в разных ситуациях, разные семейства могут быть более или менее уместны. Приведем несколько обоснованных фактов, которые могут помочь с выбором семейства шрифта:
- шрифт с засечками имеет более авторитарный оттенок, в то время как шрифт без засечек кажется более демократичным.
- Comics Sans доказал свою полную некомпетентность в передаче важной информации [14].
- по результатам исследования, Baskerville и Computer Modern являются лучшими шрифтами в вопросе доверия к содержимому текста (среди шести претендентов, среди них Georgia, Trebuchet, Helvetica, Comic Sans) [15].
- среди 52 очерков студента, 11 были написаны Times New Roman, 18 -Trebuchet MS, а остальные 23 - Georgia. Times New Roman очерки заработали в среднем A- (5 с минусом), Trebuchet - только B- (4 с минусом), Georgia - только твердые A (5).
- в приложениях, в отличие от печатной продукции, чаще используются шрифты без засечек - на экранах с низким разрешением форма засечки плохо воспроизводится [16].
- самый безопасный шрифт для приложений - Verdana (по версии ученых из Лаборатории зрительной эргономики) [17].
Заключение
Таким образом, мы выявили критерии доступности, за которыми необходимо следить и измерять при разработке нового или оценке эффективности существующего веб-продукта. Они сыграют большую роль в формировании положительного восприятия у пользователей, а значит обеспечат большую посещаемость и большее внимание.
Список литературы:
1. Dr. Peter J. Meyers «25-point Website Usability Checklist» [Электронный ресурс]. - Режим доступа: http://www.usereifect.com/topic/25-point-website-usability-checklist.
2. Александр Астапенко «Что значит скорость загрузки сайта для маркетинга и бизнеса?» [Электронный ресурс]. - Режим доступа: http://www.e-xecutive.ru/community/articles/1551190/index.php?ID=1551190.
3. Инфографика Strangeloopnetworks «Internet users have faulty perceptions of time» [Электронный ресурс]. - Режим доступа: http://www.stan-geloopnetworks.com/assets/images/diagrams/_resampled/resizedimage500293-Strangeloop-Infographic-3 .jpg.
4. Jakob Nielsen «Website Response Times» [Электронный ресурс]. - Режим доступа: http://www.useit.com/alertbox/response-times.html.
5. Материал из Википедии «Оптический контраст» [Электронный ресурс]. - Режим доступа: http://ru.wikipedia.org/wiki/ %D0 %9E %D0 %BF
%D1 %82 %D0 %B8 %D1 %87 %D0 %B5 %D1 %81 %D0 %BA %D0 %B8 %D0 %B9_ %D0 %BA %D0 %BE %D0 %BD %D1 %82 %D1 %80 %D0 %B0 %D1 %81 %D1 %82.
6. Leslie Jensen-Inman «Contrast is King» [Электронный ресурс]. - Режим доступа: http://www.uxfox.ru/contrast-is-king.
7. Вадим Макеев «Чётко и резко» [Электронный ресурс]. - Режим доступа: http://pepelsbey.net/pres/dear-and-sharp.
8. Umade.ru «Оптимальная длина строки» [Электронный ресурс]. - Режим доступа: http://www.umade.ru/log/2005/11/optimal-line-length.
9. Роберт Брингхерст «Основы стиля в типографике» / Д. Аронов. -2006. - 432 с.
10. Rhytm&Proportion «The Elements of Typographic Style Applied to the Web» [Электронный ресурс]. - Режим доступа: http://www.webtypograp-hy.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2.
11. «Secret Symphony: The Ultimate Guide to Readable Web Typography» [Электронный ресурс]. - Режим доступа: http://www.pearsonified.com/2011/ 12/golden-ratio-typography.php.
12. Alex Poole «Which Are More Legible: Serif or Sans Serif Typefaces?» [Электронный ресурс]. - Режим доступа: http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces.
13. OLIVER REICHENSTEIN «Responsive Typography: The Basics» [Электронный ресурс]. - Режим доступа: http://informationarchitects.net/blog/ responsive-typography-the-basics.
14. ERROL MORRIS «Hear, All Ye People; Hearken, O Earth (Part One)» [Электронный ресурс]. - Режим доступа: http://opinionator.blogs.nytimes.com/ 2012/08/08/hear-all-ye-people-hearken-o-earth.
15. Phil Renaud «The Secret Lives Of Fonts» [Электронный ресурс]. - Режим доступа: http://web.archive.org/web/20100403022212/http://fadtastic.net/ 2006/03/12/the-secret-lives-of-fonts.
16. Материал из Википедии «Гельветика» [Электронный ресурс]. - Режим доступа: http://ru.wikipedia.org/wiki/ %D0 %93 %D0 %B5 %D0 %BB %D1 %8C %D0 %B2 %D0 %B5 %D1 %82 %D0 %B8 %D0 %BA %D0 %B0.
17. РиаНовости «Ученые выяснили, какой шрифт является самым безопасным для зрения».
18. http://ria.ru/kaleidoscope/20100820/267245614.html.
19. Александр Головко, Татьяна Шкабко «Верстальщику о шрифтах. Часть I: Безопасные шрифты» [Электронный ресурс]. - Режим доступа: http://www.xiper.net/collec^tml-and-css-tricks/typographics/safe-fonts.html.
20. Bnonn «16 PIXELS For Body Copy. Anything Less Is A Costly Mistake» [Электронный ресурс]. - Режим доступа: http://www.smashingmagazine.com/ 2011/10/07/16-pixels-body-copy-anything-less-costly-mistake.
