Юзабилити 2015

у же на этапе создания предварительного макета, т.е. еще без тщательной про рисовки, стоит подумать о юзабилити дизайна. "Юзабилити" - это слово, которое не любят сторонники использования русских терминов, но именно его гораздо проще и быстрее произносить, когда речь идет об удобстве пользования чем-либо. Само слово "usability" состоит из двух: "use" - использовать и "ability" - способность, возможность, умение. Главным идеологом юзабилити на веб-сайтах принято считать Якоба Нильсена: когда мы говорим "юзабилити': его имя всплывает в мозгу первым делом. Этот человек известен не только как специалист по исследованиям удобства использования интерфейсов, но и как автор книг и материалов на свою любимую тему. Пик его популярности пришелся на начало 2000-х годов, когда веб стал развиваться стремительными темпами и при этом в дизайне сайтов не всегда учитывались пожелания пользователей относительно удобства. Якоба Нильсена должен знать в лицо каждый дизайнер. Якоб Нильсен во многом консервативен, и в его материалах можно увидеть совершенно радикальные заявления наподобие "Флеш на 99% неприемлем': А его личный сайт, расположенный по адресу www . usei t . сот, выглядит чересчур минималистичным (насколько я помню, дизайн не менялея как минимум с 2001 года). Несмотря на это он сделал очень много для дизайнеров: научил их не просто рисовать красивую картинку, но и делать ее удобной для посетителей сайта. Материалы Якоба Нильсена, многие из которых переведены на русский язык, можно прочесть в Интернете, но, разумеется, всю полученную информацию нужно фильтровать, дабы не засорять свой мозг лишними правилами. Помимо него, многого в разработке правил юзабилити достигли, например, Стив Kpyr (автор популярной в свое время книги "Не заставляйте меня думать!"), а на просторах нашей родины - Влад Головач, чья книга "Дизайн пользовательского интерфейса': появившись в 2000 году, произвела большое впечатление на дизайнеров. На данный момент сам автор считает ее неактуальной и рекомендует следить за обновлениями на сайте своей компании (www . u sethi c s . ru). Ниже я изложу самые важные вещи относительно юзабилити на веб-сайтах, а также заблуждения, которые опровергло само время. Жизненно важные сведения М де и Поскольку дизайн веб-сайта начинается с идеи, то и удобство пользования сайтом начинается с нее же. Какой бы креативной ни была идея, заложенная в основу дизайна, она должна быть понятна зрителю. С точки зрения юзбилити самый правильный дизайн - безопасный и традиционный; он должен включать в себя стандартные элементы навигации и в нем все должно быть понятно с первого взгляда. Глава 8. Юзабилити 2012 1 09 Проблема в том, что тогда у вас получится слишком стандартный и неуникальный сайт. Поэтому дизайнеру нужно лавировать между попятным и знакомым пользователю и уникальным. Собственно, большинство сайтов достаточно просты и понятны. Во-первых, разработчики не рискуют внедрять слишком нестандартные элементы, во-вторых, это требует дополнительных усилий, и не факт, что все получится. Тон в современном юзабиляти задают самые посещаемые сайты: поисковики, социальные сети, , популярные сервисы. Благодаря им постепенно меняется и поведение пользователей. Помните: чем необычнее идея, тем меньше шансов у нее быть адекватно воспринятой большинством. Стив Круг в своей книге "Не заставляйте меня думать!" вообще настаивал на том, что чем проще и понятнее, тем лучше. 6оева1 раскраска С точки зрения дизайнера (даже нет, художника), цвет всехэлементов веб-страницы должен быть таким, чтобы он намертво запечатлевалея в сознании зрителя, наполнял его эмоциями. "Моя страница. Как хочу, так и раскрашиваю!" - говорят начинающие веб-дизайнеры и глубоко ошибаются! С точки зрения юзабиляти вы обязаны обеспечить пользователям комфортный просмотр своей страницы. Отсюда вытекает вывод: кислотные оттенки вроде # З З FF О О и # FF 0 0 9 9 используем по минимуму: не надо заливать подобными яркими цветами большие площади. Из этого правила, впрочем, есть исключение: если вы твердо уверены в том, что сможете применять очень яркий цвет так, что он не вызовет отторжения у вашей основной аудитории, то карты вам в руки. Но для этого нужно иметь достаточно большой опыт, так что первые цветовые эксперименты проводите с осторожностью и тестируйте дизайн на юзабиляти перед публикацией в Интернете. АнимаqiR Мне помнится время, когда было модно ставить на страницу анимированные фоны (бэкграунды). Какие-нибудь мерцающие звезды или просто непрестанное·мельтешение. Но знали ли веб-дизайнеры о том, что у людей, страдающих эпилепсией, слишком частая смена кадров в анимации может вызвать эпилептический приступ? Думаю, нет. Для людей относительно здоровых мелькание бывает просто некомфортным: глаз то и дело реагирует на движение, а затем убеждается, что ничего интересного на том участке сайта, где мелькает, нет, и раздражается: ну зачем оно мигает? Поэтому специалисты по юзабиляти непреклонны: никакой анимации! Я дополню: оживлять картинку надо только там, где это действительно уместно. При этом анимация должна иметь сценарий, а не просто бессмысленно мигать. Анимированный же логотип, который перепивается всеми цветами радуги и крутится вокруг своей оси, - совершенная бессмыслица. 1 1 0 Часть II. Ловкость рук Мупьтимедиа Современные технологии позволяют достаточно эффективно воздействовать на зрителя с помощью звука и видео, благо, скорости подключения к Интернету существенно подросли, по сравнению с 2000 годом, да и сами услуги стали значительно дешевле. В связи с этим у дизайнеров вновь началась лихорадка под названием "Что бы такого сделать с сайтом, чтобы он оставил неизгладимое впечатление': Специалисты по юзабилити как истинные консерваторы остаются непреклонными: сайты должны загружаться тихо и быстро. И это на 90% правда. 90% сайтов несут одну функцию: дать пользователю возможность получить свежую, полезную и относительно правдивую текстовую информацию. У него нет времени ждать загрузки аудио и видео. А что же остальные 10%? Это презентационные сайты. На них и отрываются дизайнеры, создавая шедевры веб-дизайна с видеовставками, мощным звуком и т.д. Одна маленькая просьба: старайтесь предварять презентационные флеш-сайты, которые много весят, заставками-предупреждениями. Это будет гуманно по отношению к тем пользователям, которые вовсе не намерены ждать, им бы поскорее. И уж точно нужно предусмотреть версию для тех, кто заходит на сайт с мобильного телефона и из-за технических ограничений своего устройства не может наслаждаться всеми красотами сайта. Не забывайте и о HTML 5, который очень настойчиво демонстрирует, что эра презентационных сайтов на флеше подходит к концу, так что пора думать о будущем. CCЬIJIKI Ссылка должна выделяться из текста: быть другого цвета, быть подчеркнутой или подчеркиваться при наведении на нее указателя мыши. Особенно это важно, если в вашем тексте много ссылок. Если они никак не выделяются, как пользователь поймет, где ему щелкать? Подчеркивание фрагмента текста, даже если он того же цвета, что и основной, дает человеку понять, что это наверняка ссылка. Вы можете использовать этот "рефлекс на подчеркивание" в своих целях. Однако же отныне никогда не используйте подчеркивание на сайтах как способ просто выделить какойлибо текст, чтобы никого не вводить в заблуждение. Подчеркиванием выделяется только ссылка. Правило для интернет-редактора: текст ссылки должен быть составлен так, чтобы пользователю было понятно, куда она ведет. Плохой пример ссылки на сайте какогонибудь банка: Калькулятор. Непонятно, какой калькулятор и что предполагается с его помощью рассчитать. А вот ссылка Рассчитать кредит более понятна, хотя и не так лаконична (рис. 8.2). Следующее правило нужно знать в основном НТМL-верстальщикам, которые заведуют еще и тем, куда будут вести ссылки. Однако дизайнерам оно тоже полезно. Глава 8. Юзабилити 2012 1 1 1 Ссылка должна вести туда, куда она обещает вас отправить. Если вы обещаете в случае перехода по ссылке дать пользователю десять долларов, а на самом деле ничего не даете, вы его обманываете и разочаровываете. Такая ситуация чаще всего встречается на нечестных сайтах, задача которых - любым путем заполучить "клики" пользователя. На нормальных сайтах такого быть не должно. Тексты На веб-сайтах пользователи читают и воспринимают информацию совершенно не так, как на бумаге. Вместо вдумчивого чтения, как это может быть с книгой, они быстро-быстро пробегают глазами по страницам сайта, цепляясь за заголовки или картинки. Поэтому, оформляя тексты с позиции юзабилити, необходимо придерживаться некоторых правил. 1. Четкие и не очень длинные заголовки, по которым сразу понятно, о чем речь. Якоб Нильсен советует ограничиться 40-60 символами. Это не жесткое требование, хотя краткость, безусловно, - сестра таланта. 2. Английские абзацы в противовес русской "красной строке': Забавный факт: именно по английским абзацам, т.е. по такому форматированию текста, где между абзацами помещается пустая строчка, некоторые преподаватели вузов вычисляют нерадивых студентов, которые списывают рефераты. Русская традиция предполагает разделение абзацев с помощью "красной строки': но, пожалуй, это больше не относится к веб-дизайну. Каждый абзац должен содержать законченную мысль, емкую и краткую, а с помощью английских абзацев достигается дополнительная "телеграфичность" сообщений. 3. Текст, который можно прочитать. Несмотря на всю красоту, которую вы придаете сайту, пользователь все-таки очень хочет получить текстовую информацию. Поэтому шрифт должен быть такого размера и цвета, чтобы его легко можно было прочитать, не мелкий и не бледный. Поддерживайте достаточный контраст между текстом и фоном, разрешайте менять в браузере размер шрифта - и читатель будет вам благодарен. 1 1 2 Часть II. Ловкость рук Навиrаqии Навигация на сайте должна быть непременно, если сайт состоит более чем из одной страницы. Более того, если сайт состоит из одной страницы, но информации на ней много (скажем, больше трех-четырех экранов), то почему бы не создать навигацию внутри страницы? Это достаточно популярный прием в наши дни: длинная страница с навигацией внутри нее (схематично показана на рис. 8.3). Активный раздел можно даже подсветить, а меню сделать плавающим, т.е. остающимся на своем месте даже тогда, когда остальная страница прокручивается. Этот прием уместен там, где нужно особенно подчеркнуть подразделы страницы, придать им большую значимость. Чтобы меню на сайте не было нечеловечески длинным, попробуйте логически сгруппировать некоторые пункты между собой для организации двухуровневого меню. А вот три уровня для раскрывающегося меню - это многовато. Раскрывающееся меню, к слову сказать, должно быть как-то обозначено: пользователь, взглянув на паиель навигации, должен догадываться, что после наведения указателя мыши на пункт меню он сможет открыть подменю. Не каждый дизайнер знает, что такое "хлебные крошки" (или "bread crumbs"). Этот термин появился благодаря сказке 'Тензель и Гретель': в которой брат и сестра смогли найти дорогу домой из темного леса, потому что бросали за собой сначала хлебные крошки, а потом камешки. Кстати, хлебные крошки в этой сказке съели птицы, и дети заблудились, но метафора закрепилась в среде интернет-разработчиков. Термин "хлебные крошки" можно определить следующим образом. Хлебные крошки - зто злемент навигации по сайту, визуализирующий путь по сайту от его "корня" до текущей страницы, на которой находится пользователь, в виде цепочки. Обычно представляет собой полосу в верхней части страницы примерно такого вида. Гл авн а я ст рани ца QРаадеЛQП ОдраЗАеЛQ Те куща я страни ца Все злементы в цепочке, кроме конечной, должны быть ссылками. Хлебные крошки - полезнейшая вещь при создании дизайна интернет-каталогов, магазинов, фотогалерей, а также сайтов с большим количеством уровней вложенности. Они облегчают пользователю навигацию, позволяют быстро перейти на несколько уровней выше и помогают ориентироваться в пространстве сайта. Разное 1. Используйте только вертикальную или только горизонтальную полосу прокрутки. Традиционно сайты "не помещаются в монитор" по длине, и это вполне нормально. Но если сайт вдобавок слишком широк для стандартных разрешений, это никуда не годится. Исключение составляют сайты, на которых в качестве изюминки используется только горизонтальная полоса прокрутки. Самый страшный грех - это когда сайт нужно прокручивать и по горизонтали, и по вертикали. 2. Графика на сайте должна иллюстрировать содержимое и четко соотноситься с тем предметом, которому посвящен сайт. Иначе вы попусту тратите килобайты трафика пользователя. 3. Не забывайте об иерархии: самая важная информация располагается выше, чем второстепенная, выделяется лучше и, возможно, имеет более крупный шрифт. 4. В создании дизайна интернет-магазина самое главное - показать пользователю, где находятся каталог товаров и его корзина, а также ссылки на условия оплаты и доставки товара. Мифы и забпуждения М•ф 1 "Вся самая важная информация должна располагаться на первом экране, и лучше, если на сайте вообще не используется вертикальная прокрутка". С этим мифом (его можно назвать "скроллофобия") (рис. 8.4) я борюсь до сих пор и регулярно пишу своим заказчикам письма следующего содержания. В зависимости от разрешения монитора пользователь видит больше или меньше материала страницы. Те, у кого монитор имеет диагональ экрана 17 дюймов, видят на одном экране меньше, а те, у кого 19 дюймов - больше. Есть мониторы с обычным форматом, а есть с форматом wide-screeп - длинные по горизонтали и узкие по вертикали . Получается , чтобы вместить все в один экран для нормального (не wide-screeп) монитора с диагональю 17 дюймов, придется все вокруг уменьшить и обрезать. В зто же время у пользователей с мониторами диагональю 19 дюймов возникнет чувство пустоты : места на экране у них много, а контента мало. Современные исследования того, как пользователи читают материал на веб-сайтах, показывают, что на первом экране должно помещаться самое главное, например логотип с контактным телефоном, меню и краткий список услуг. Человек, который решит внимательно изучить сайт, не поленится воспользоваться полосой прокрутки. Это простой и понятный злемент навигации в браузере Если вас будут просить вместить в один экран абсолютно всю информацию, включая длинную ленту новостей и фото директора компании, можете смело цитировать приведеиные выше два абзаца. Обычно это помогает. "Раскрывающимися меню трудно пользоваться': Неправда. Если раскрывающимся меню неудобно пользоваться, значит, оно просто плохо сделано. Посмотрите на паиели управления практически любой программы, от Microsoft Word до Adobe Photoshop: без раскрывающихся меню показать все функции мощных программ просто невозможно. "Ссьтки должны быть стандартного цвета: синего - непосещенные, фиолетового - посещенные': Якоб Нильсен, когда-то установивший это правило, уже признал, что пользователь стал умнее и способен по внешнему виду ссылки отличить ее от основного текста, даже если ссылка красная, а не синяя. Ваша задача - просто не забывать показывать в дизайне, как выглядит ссылка. 1 1 & Часть II. Ловкость рук ... ", 4 "Фреймы - это плохо". Когда-то использование фреймов не поощрялось по такой простой причине, как несовершенство браузеров. На данный момент этой проблемы не существует: в спецификации языка HTML 5 понятие фрейма отсутствует - оно отпало как ненужное. Раньше с помощью фреймов можно было сравнительно быстро обновить какую-либо часть сайта (например, меню), не затрагивая все страницы. Сейчас на помощь людям пришли мощные системы управления контентом (Content Management Systems - CMS), которые справляются с редактированием сайта и быстрее, и проще. И вообще, фреймы - это уже что-то такое старое и пыльное, что мало кто о нем помнит и тем более использует. И слава Богу! ... ", 5 "Язь1к Javascript использовать не стоит': Проблема с языком Javascript возникает у тех пользователей, которые отключают возможность его использования в браузере. Раньше язык Javascript, как и фреймы, понимали не все браузеры (и каждый понимал их в меру своих возможностей), но на данный момент я не только не вижу проблемы в его использовании, но и знаю, что многие сайты просто будут некорректно работать без сценариев на Javascript. Например, достаточно часто кодерам приходится писать отдельные таблицы стилей (файлы CSS) для разных типов браузеров. Как правило, имеется две категории: Internet Explorer и "все остальные браузеры". Именно сценарий на языке Javascript помогает "подсунуть" каждому браузеру подходящую для него версию файла CSS, благодаря чему дизайн отображается корректно в любом случае. Подобных мифов и заблуждений существует еще много. Они были рождены временем или фанатами минимализма на сайтах. Что-то было опровергнуто в процессе эволюции веба, что-то отброшено в борьбе за красоту (в противовес аскетизму). Если вы хотите знать о юзабилити больше, читайте специализированную литературу, держите свой разум открытым для восприятия новой информации и будьте готовы не воспринимать на веру все, что вам скажут об удобстве пользования. Юзабипити 2012. Что новоrо? Четко выявленная особенность поведения нынешнего пользователя заключается в следующем: повышенная ленивость и при этом требовательность к скорости. Это серьезно. Поэтому мы как разработчики сайтов должны сделать все, чтобы пользователь не ждал лишних секунд, не бродил по сайту, как по лабиринту, и не щелкал на лишних кнопках. Как этого достичь? Есть несколько особенностей современных сайтов, которые можно принять как ориентир. Глава 8. Юзабилити 2012 1 1 7 8 Четкая структурированность страницы. На странице - только самое нужное, никакого мусора. Ничего, что отвлекает от главного назначения страницы или главного "месседжа" всего сайта. 8 Навигация без перезагрузки. Все чаще востребовано пользователем то, чтобы после щелчка на какой-либо ссылке не загружалась новая страница. Вместо этого либо должно появиться всплывающее окно поверх основного окна, которое можно будет закрыть вручную или просто щелчком мышью вне его границ, чтобы вернуться в основное окно, либо новая информация будет загружена в какой-либо блок на странице, например может открыться закрытая ранее вкладка. Все это делается с помощью языка Javascript, и в итоге современный сайт все чаще напоминает интерфейс обычных программ, когда после выбора команд меню и щелчков на кнопках основное окно не пропадает, а остается на месте. 8 Раскрывающиеся или разворачивающиеся меню. При многоуровневой структуре сайта, безусловно, полезны раскрывающиеся меню. Они не являются новинкой, но по-прежнему востребованы. Они экономят время и позволяют быстрее ориентироваться без перехода во внутренние разделы сайта. 8 Всплывающие подсказки. Все чаще хорошим тоном становится обеспечивать вывод контекстных подсказок для элементов интерфейса сайтов. 8 Пунктирное подчеркивание. Большинство пользователей знает, что если ссылка подчеркнута пунктиром, значит, после ее выбора или откроется небольшое контекстное окошко, или что-то откуда-то выползет. Это одна из примет Веб 3.0, но пользоваться этим приемом надо аккуратно, стараясь не переборщить. Вообще говоря, разрабатывая сайт, на котором, где ни щелкни, что-нибудь открывается, выезжает или заезжает, главное - взять себя в руки и не делать абсолютно все движущимся. Слишком много движения заставляет чувствовать себя так, как на корабле во время качки, и сайт кажется неустойчивым. Очень радует, что общая тенденция в создании сайтов - упрощение работы пользователя, создание более дружественных и понятных интерфейсов и, я бы даже сказала, повсеместное преобладание функциональности над бессмысленной декоративностью. Юзабипити-тестирова ни е пейаута Очевидный вопрос от наивного дизайнера: "Господи, ну зачем тратить время еще и на такие глупости?" В самом деле, это требуется нечасто, особенно если вы делаете сайт с предсказуемым дизайном, на котором все элементы находятся на своих привычных местах. Но в таких серьезных вещах, как дизайн интернет-магазина, просчет 1 1 8 Часть II. Ловкость рук в юзабилити может стоить владельцу сайта потери клиентов. Самые простые примеры: неудобно пользоваться каталогом товаров; корзину не найти с первого взгляда; не на каждой странице есть ссылка на информацию об оплате и доставке товара. Я не говорю уже о такой кошмарной ситуации, когда ссылки вдруг уводят с сайта неизвестно куда, а вся полезная информация теряется за рекламой. Первый этап юзабилити-тестирования можно провести еще на стадии разработки лейаута: этот несложный и быстрый процесс сэкономит вам немало времени и нервов. Как тестировать лейаут на юзабилити? Для того чтобы это было возможно, лейаут должен быть не только размечен блоками, но и более-менее детализирован: все блоки, в которых будет находиться контент, подписаны, меню прорисовано так, чтобы по нему уже можно было выполнять навигацию, в дизайне точно размечено положение таких элементов, как логотип, шапка, подвальная область и т.п. Помните, что ваш взгляд разработчика не может быть в достаточной степени пристальным и непредвзятым, поэтому пригласите к монитору "обычного пользователя" - человека, ни разу не видевшего ваше творение. Лучше, чтобы на самом деле их было несколько, тогда результаты будут более точными. Проверьте, может ли пользователь ориентироваться в предложенном ему лейауте. Попросите его найти меню, область новостей, подписки на новости (или другие элементы, которые вы нарисовали). Исследователи юзабилити говорят, что особенно показательные результаты можно получить, заменив все "человеческие" надписи бессмысленными массивами текста наподобие псевдолатыни. " Lorem ipsum dolor sit amet, coпsectetuer adipisciпg elit. Proiп dapibus quam пес пibh. Praeseпt facilisis апtе eu ipsum. Nam velit. Nuпc sit amet dolor. Quisque cursus ligula vel tortor. Phasellus coпgue. Ouis feugiat leo quis tellus. lпteger posuere. Pelleпtesque luctus porta lectus " . Такой "рыбный", временный текст можно сгенерировать в любых количествах, зайдя на сайт h t tp : 1 1 www . l i p s um . сот/. Для русскоязычного пользователя лучше воспользоваться кириллическими аналогами, которые для вас сгенерирует сайт ref e r a t . yandex . ru. "Отношение к современности нетривиально. Гегельянство реально индуцирует субъективный дедуктивный метод, ломая рамки привычных представлений. Страсть трансформирует мир, не учитывая мнения авторитетов. Адаптация, следовательно, нетривиальна " . Видя, что анализ содержания текстов емуничего не дает, пользователь-тестировщик анализирует, как элементы расположены на странице, и, если он угадывает назначение блоков достаточно быстро, безо всяких усилий, лейаут можно считать удовлетворительным. В противном случае стоит доработать макет, чтобы в нем стало проще ориентироваться. Глава 8. Юзабилити 2012 1 1 9 В идеальном случае желательно именно так протестировать все критично важные страницы (например, ответственные за процесс покупки товара в интернет-магазине ), а также заранее позаботиться об удобстве навигации по всему сайту. Навигационные паиели тестируются следующим образом. В лейауте прорисуйте все важные ссылки (на этот раз назовите их своими именами, а не абракадаброй, как в первом тесте). Спросите пользователя, на какой ссылке ему следует щелкнуть, чтобы, скажем, попасть в раздел, где можно прочесть об услугах компании. Угадывание несколькими пользователями с первого раза означает, что вы все сделали правильно. Если меню на сайте предполагает наличие подменю, в лейауте разверните их, чтобы пользователь знал обо всех доступных пунктах. Перед началом тестирования составьте список вопросов, которые вы будете задавать. Лучше, если вопрос будет сформулирован не в виде "Как попасть в раздел контактов?", а так: "Как вы думаете, где следует щелкнуть, чтобы связаться с компанией?" Таким образом, вы не указываете прямо на название требуемого раздела, и ситуация становится более приближенной к реальности. Юзабилити - интереснейшая наука, особенно любезная людям с аналитическим складом ума. Возможно, начав с веб-дизайна, вы затем переключитесь на эту область. В любом случае базовые знания юзабилити и умение предсказать жизнеспособность создаваемого им дизайна должны быть у каждого дизайнера. Мне часто приходится убеждать клиентов в том, что их идеи при воплощении станут неудобными для посетителя, что есть грань между инновационным и откровенно нелогичным решением. Между прочим, "юзабилити" - слово, которое можно успешно применять не только по отношению к сайтам и пользовательским интерфейсам программ. Любая вещь, с которой вы сталкиваетесь ежедневно, связана с понятием удобства пользования. От того, насколько удобно пользоваться предметом, зависит субъективное ощущение комфорта и удовольствия, испытываемого человеком. К позитивным эмоциям при использовании наших сайтов или интерфейсов мы и должны стремиться.