§2. Юзабилити как ключевой параметр дизайна мобильных приложений для СМИ.
2.1. Юзабилити в веб-дизайне: понятие, цели и принципы.
Рождение веб-дизайна как части графического дизайна вызвало к жизни появление такого ранее не существовавшего понятия, как юзабилити. Юзабилити, или удобство пользования (англ. usability – «возможность использования», «способность быть использованным», «полезность») – понятие в микроэргономике, эргономическая характеристика10 степени удобности предмета для применения пользователями при достижении определённых целей в некотором контексте11.
Определение эргономики сформулировано Международной Ассоциацией Эргономики и предлагает понимать под ней научную дисциплину, изучающую взаимодействие человека и других элементов системы, а также сферу деятельности по применению теории, принципов, данных и методов этой науки для обеспечения благополучия человека и оптимизации общей производительности системы.
Часто термины «юзабилити» и «эргономика» употребляются в качестве синонимов, однако между ними есть небольшая разница: эргономичность описывает количество затраченных физических сил для работы с сайтом, а юзабилити – общую степень удобства пользования, сумму умственных усилий, требующихся от пользователя для выполнения задачи. Именно поэтому разработчики, как правило, делают акцент на «юзабельности» сетевых проектов.
Практикующие веб-дизайнеры говорят о юзабилити в связи с применением методов улучшения функциональности и удобства сайта на стадии его разработки. Для того, чтобы читатель вернулся на сайт или начал регулярно пользоваться мобильным приложением, необходимо спроектировать его так, чтобы учесть все возможности и потребности аудитории. В случае с журналистикой главная задача пользователя – получить информацию наиболее простым и комфортным способом. В отличие от, например, интернет-магазинов, где основной целью остается акт продажи товара или услуги12.
Учитывая контекст использования мобильного Интернета (дискретное внимание, поглощение данных на ходу, ограничение времени на просмотр и т.д.), грамотное применение принципов юзабилити в мобильном веб-дизайне становятся даже более важным, чем в традиционном дизайне десктопных сайтов. Даже небольшие недоработки могут существенно сказаться на общей конверсии продукта, что обязательно повлечет за собой снижение интереса рекламодателей к СМИ.
Исследование, проведенное Нильсен Норман Груп (Nielsen Norman Group) – одной из наиболее авторитетных организаций по части юзабилити – сетевые технологии существенно изменили паттерны поведения аудитории: в условиях переизбытка информации человек стал слишком нетерпелив и избирателен. Типичный пользователь тратит на одной странице порядка 27 секунд и часто не прокручивает её до упора. И если у пользователя за домашним компьютером есть возможности изучать сайт подробно, особенно при уже сформированной лояльности к конкретному СМИ, то перегруженный мобильный дизайн и долгая загрузка, скорее всего, поставят точку во взаимодействии читателя с данным продуктом.
При создании дизайна необходимо учитывать, что аудитория имеет несколько неотъемлемых прав при работе с информацией. Человек должен понимать, каким процессом он управляет, на что тратит время и усилия. На заре Интернета при конфликте между человеком и технологией подстраиваться приходилось пользователю. На сегодняшний день ситуация принципиально иная. Если разработчики принимают решение улучшить свой продукт, его монетизация может возрасти в два раза13. Количество СМИ, представленных в сети уже настолько велико, что аудитория с легкостью покинет неудобный ресурс, оставив издание без рекламодателей.
Являясь качественной характеристикой продукта, юзабилити включает в себя ряд количественных признаков по совершенствованию пользовательского интерфейса. По мнению Якоба Нильсена14, одного из крупнейших специалистов в области юзабилити, ключевыми пунктами при разработке дизайна являются:
Легкость обучения. Насколько просто новый пользователь сможет сориентироваться в незнакомом ему интерфейсе.
Эффективность. Успешность выполнения задач человеком после ознакомления с дизайном.
Запоминаемость. Простота возобновления работы с сайтом после продолжительного периода времени.
Ошибки. Определение количества и качества ошибок аудитории при работе с сайтом. Возможность их исправления со стороны пользователя.
Удовлетворение. Положительные эмоции после работы с сайтом, высокая оценка эстетических и функциональных сторон дизайна.
Дизайнеры часто пренебрегают принципами юзабилити при создании макетов, опираясь лишь на творческую интуицию и фантазию, а итоге в дизайне страдает функциональная компонента. В литературе уже хорошо описаны аспекты психологии, которые делают сайты более привлекательными для аудитории. Другими словами, знание теории цвета или основ композиции без понимания законов психологии недостаточно для проектировки интерфейсов. Пользовательский интерфейс (ПИ) – система правил и средств, регламентирующая и обеспечивающая взаимодействие программы с пользователем15. Частью пользовательского интерфейса является графический интерфейс пользователя (ГПИ), в котором элементы ПИ рассматриваются как графические изображения. Учитывая, что ГПИ является посредником во взаимодействии между человеком и машиной, психология решает проблемы грамотной организации пространства экрана, особенности восприятия информации аудиторией, оптимальное количество данных на дисплее, скорость обучения работе с интерфейсом и прочее. Эти аспекты взаимодействия человека и системы рассматривает микроэргономика и когнитивная психология.
Среди наиболее заметных законов психологии, применяющихся для улучшения эргономики в веб-дизайне – эффект, описанный в 1927 году психологом Блюмом Зейгариком16, который гласит, что люди не любят и всячески избегают недосказанности. Внезапный обрыв какого-либо процесса сопровождается негативными эмоциями, результатом которых может стать прекращение взаимодействия. На данном эффекте основан один из основных принципов юзабилити: человек должен контролировать процесс, видеть, в какой части сайта он находится, как он туда попал и, возможно, предугадать, что последует дальше. Этот принцип учитывается при продумывании механизма регистрации или, например, при электронной подписке на издание.
При разработке дизайна важно помнить о так называемом «синдроме утенка». Пользователь склонен выше оценивать то, что видел ранее. Отсюда возникает негативная реакция на изменение дизайна и в целом консерватизм аудитории. Новый интерфейс заново ставит перед ними задачу обучения, и, несмотря на его возможные достоинства, к его недостаткам могут отнестись критичнее. Именно поэтому введение нового дизайна должно проходить по возможности постепенно, с тщательным тестированием юзабилити.
Перед тем, как приступить к дизайну или редизайну мобильного сайта, необходимо четко обозначить его цели и аудиторию, так как они могут совпадать с аудиторией десктопного ресурса лишь частично. Издатель, например, может предполагать сужение возрастных рамок или перекос в сторону какого-либо пола или уровня доходов. Также необходимо определить время обращения к мобильному ресурсу и предполагаемые задачи, которые намерен решить пользователь. Затем полученные данные преобразовывают в техническое задание для дизайнера.
Правила юзабилити можно разбить на общие и частные. Первые, в целом, совпадают с основными принципами верстки в графическом дизайне и базируются на законах восприятия информации человеком. Частные правила – это прикладные советы по организации элементов контента на странице.
В первую группу входит верстка по F-образному шаблону. Движения глаз пользователя уже достаточно подробно изучены. Человек западной цивилизации просматривает страницу слева направо и сверху вниз, описывая взглядом траекторию буквы F17. При этом его внимание рассеивается по мере приближения к правому нижнему углу страницы, если дизайнер не прибег к помощи акцентов и намерено не сместил тем самым фокус внимания. Таким образом, для наибольшего удобства пользователя нежелательно размещать важные элементы в заведомо второстепенных зонах. Соответственно, в японском и арабском дизайне действуют обратные принципы.
В некоторых исключительных случаях правило F-образной верстки может быть нарушено на десктопных сайтах, однако крайне нежелательно делать это на мобильных устройствах, где расположение контента должно быть максимально предсказуемым и удобным для адаптации на различных устройствах. Иногда, чтобы облегчить решение задачи или просто разнообразить макет, дизайнеры прибегают к размещению заметного изображения или элемента навигации в центре. Это хорошо смотрится на небольших экранах (например, push-уведомления или поля авторизации), однако после этого человек все равно вернется на тот же путь просмотра.
Соблюдая правила F-образной верстки возможно не только удержать внимание аудитории, но и привлечь на сайт новую. Для повышения конверсии достаточно поместить нужные кнопки и ссылки на пути движения глаз читателей. Например, размещение иконок социальных сетей сразу после статьи может значительно повысить количество просмотров, а при добавлении ссылок на схожие материалы возрастает глубина просмотра сайта.
Если пользователь попал на страницу при помощи социальных сетей, поисковиков или рекламных баннеров, то его необходимо сориентировать: информация об источнике и месте нахождения должна быть доступна на каждой странице18. Разумеется, это правило касается исключительно мобильных версий сайтов, так как приложения установлены самим пользователем и в представлении не нуждаются. Этот факт позволяет экономить место при разработке интерфейса.
Общие принципы описывает Международный стандарт юзабилити BS EN-ISO 9241-110. Они общепризнанны и на их основе формируются национальные стандарты. В России а базе этого ИСО действует ГОСТ Р ИСО 9241-110-2009 «Эргономика взаимодействия человек-система. Часть 110. Принципы организации диалога» (Ergonomics of human-system interaction. Part 110. Dialogue principles), введенный в действие в 2010 году.
ГОСТ устанавливает семь основных эргономических принципов конструкции интерактивных систем в общем виде (т.е. без привязки к расположению системы, окружающей среде и технологии изготовления) и служит основой для применения этих принципов при проведении анализа, проектировании и оценке таких систем19.
ГОСТ используется дизайнерами на этапе проектирования и экспертами в дальнейшей оценке и тестировании прототипа. Грамотный специалист руководствуется семью общими принципами юзабилити и задает к своему проекты соответствующие вопросы:
Насколько содержание отвечает задачам и квалификации аудитории? Оформление и контент сайта и приложения должно соответствовать целям читателя, пришедшим на сайт или в приложение. Аудитория должна решать свои задачи, а не тратить время на размышления, как и где она технически решается на данном ресурсе. Дизайнер, в первую очередь, создает макет не для заказчика, а для его клиентов.
Дает ли структура электронного ресурса данные о местонахождении пользователя?
Насколько контент отражает ожидания аудитории?
Насколько хорошо контент может обучить работе с интерфейсом? Параллельно нужно следить за тем, насколько заметно и трудоемко это обучение.
Управляет ли аудитория темпом и вектором работы с интерфейсом?
Насколько пользовательский интерфейс терпим к ошибкам? Каково количество правок, которые вынуждена вносить аудитория, для решения своих задач?
Кастомизирован ли дизайн? Насколько широки пределы персонификации и модификации интерфейса для отдельного пользователя?
Альтернативой данным принципам служат сформированные Якобом Нильсеном и Рольфом Моличем20 ещё в 1990 году «эвристики юзабилити», или эвристические правила. Позже список правил был подкорректирован21, но, в целом, эвристический метод оценки удобства интерфейса остается актуальным до сих пор. Эти эвристики во многом совпадают с Международными стандартами юзабилити, однако есть и ряд частных принципов, вынесенных отдельно:
Соответствие системы реальности, то есть взаимодействие графического интерфейса и пользователя должно проходит на одном языке.
Последовательность и стандартизация. Функция интерфейса не должна вызывать вопросов у аудитории.
Не следует сильно загружать память человека.
Эстетика и минимализм в дизайне. Мобильный дизайн особенно чувствителен к лишней информации. Следует концентрироваться на наиболее значимом и четко выстраивать иерархию контента.
Инструкции по эксплуатации ресурса должны быть доступны. Тем не менее, необходимо сводить к минимуму потребность человека в использовании технических документов (например, карт сайтов).
Представленные подходы к оценке эргономики и юзабилити являются основными, но не единственными. Например, модель Шнейдермана22, основанная не на принципах, а на точных и почти всегда измеримых показателях.
Частные принципы юзабилити сформированы ежедневной практикой UX-дизайнеров и представляют собой выработанные опытным путем советы по верстке и макетированию. Частные принципы, как и общие, исходят из фундаментальных законов когнитивной психологии (психологии понимания). Приведем наиболее популярные из них:
Правило семи. Основано на современном представлении о работе кратковременной памяти. Желательно не помещать более семи элементов навигации подряд. В противном случае пользователь запутается, либо элементы интерфейса будут чрезвычайно мелкими для управления.
Принцип трех кликов. Структура сайта должна быть устроена таким образом, чтобы пользователь могу попасть с главной страницы на нужную, пройдя по ссылкам не более трех раз.
Закон Фиттса. Описывает взаимосвязь времени движения с точностью движения и расстоянием перемещения. Во множестве интерфейсов кнопки подтверждения имеют излишнюю площадь – важные элементы не всегда должны быть самыми крупными.
Тестирование интерфейса – важнейший этап проектирования, который часто опускается из-за ошибочного мнения, что опытный дизайнер способен с нуля сделать хорошее приложение.
2.2. Концепции веб-дизайна, основанные на принципах юзабилити.
Эргономичность и юзабилити – достаточно общие свойства хорошего дизайна интерфейсов. На их основе постепенно базируются более сложные концепции:
Дизайн, ориентированный на пользователей (ДОП);
Дизайн, ориентированный на задачи пользователей (ДОЗ);
Дизайн, ориентированный на мотивы пользователей (ДОМ).
ДОП (User Centered Design)23 как подход к создания интерфейсов появился раньше остальных и до недавнего времени был основным. Эта концепция предполагает, что для качественного дизайна достаточно изучить аудиторию и подстроить под её интересы ПИ. Исследование аудитории заключается в определении уровня её квалификации, ожиданий, физиологических свойств. В данном подходе интересы и вкусы самих дизайнеров учитываются в минимальной степени и сами по себе не имеют значения. Одним и тем же специалистам приходится разрабатывать интерфейсы для СМИ разной аудитории, в том числе аудитории весьма узкой и специфической. Это особенно актуально для специализированных, профильных изданий. Однако даже относительно широкая целевая аудитория новостного СМИ, как правило, чем-то специфична.
Однако ДОП упускает из виду тот момент, что аудитория адаптивна. Если пользователь впервые сталкивается с данным приложением, он довольно легко обучается правилам игры. Тем не менее, при радикальном редизайне веб-ресурса часть аудитории может отказаться от переобучения и прекратить дальнейшее взаимодействие.
Другой недостаток подхода ДОП – дороговизна и продолжительность исследований, которые по сути являются этнографическими. В таких исследованиях крайне тяжело заранее предсказать, какие примерно результаты будут получены. Отсутствие четкого бюджета с большой долей вероятности отпугнет заказчика от дизайн-студии.
Вторая концепция – ДОЗ (Task Centered Design)24 – строится не вокруг характеристик пользователей, а вокруг эффективности решаемых им задач. Задача – сумма действий, которые сами являются суммой отдельных операций. Принципиально то, что для решения одной задачи могут быть выбраны различные пути, которые в итоге приведут к единому результату. Дизайнер, в соответствии с данным подходом, должен провести пользователя по оптимальному пути.
Доз является логическим продолжением ДОП, но рассматривает дизайн шире, в том числе и как средство достижения коммерческой цели. С точки зрения менеджмента, ДОЗ позволяет жестче планировать бюджет, так как поиск задач и их решения – более определенные категории, чем этнографические особенности аудитории. Однако этот подход ничего не говорит о количестве задач, из-за чего ресурс может оказаться перегруженным.
ДОМ (Goal Centered Design)25, несмотря на прямой перевод слова goal, не ориентирован на цели пользователя – он связан с удовлетворением личных потребностей или, другими словами, работает с мотивами. Концепция дизайна, ориентированная на мотивы, позволяет структурировать задачи, выделив наиболее важные и часто запрашиваемые, то есть ДОМ решает проблему так называемой ползучей функциональности, способной сделать крайне неэффективным любой мобильный интерфейс.
2.3. Адаптивный дизайн как подход к дизайну пользовательских интерфейсов.
Как уже говорилось выше, при наличии десктопного сайта разработчики могут пойти разными путями: создать для мобильных устройств собственную версию либо привести сайт к такому дизайну, которых бы хорошо смотрелся как на большом экране, так и на малых. Последний подход и называют адаптивным.
Адаптивный веб-дизайн (англ. Adaptive Web Design) – дизайн веб-страниц, позволяющий корректно воспроизводить их на разных компьютерах. Философия адаптивного дизайна – предоставить всем пользователям, независимо от их технических средств, равные возможности в доступе к контенту. Адаптивный подход позволяет не менять ссылку и не переадресовывать пользователя на отдельный мобильный сайт. Подход позволяет не создавать различные версии под каждое отдельное устройство, не зависеть от разрешения и формата экрана.
С момента запуска первого адаптивного сайта прошло около четырех лет. Сегодня примерно 12% всех сайтов адаптированы для мобильных устройств, и это число растет. С точки зрения разработки, адаптивный дизайн строится на эластичных шаблонах и CSS3 Media Queries. CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки26. Media Queries (медиа-запросы) позволяют задавать различные стили, исходя из характеристик устройства.
Большинство СМИ уже имеют десктопную версию сайта, поэтому дизайнер может пойти несколькими путями:
Адаптивная модернизация;
Адаптивные мобильные сайты;
Изначальный адаптивный дизайн для мобильных гаджетов;
Поэтапный переход.
Адаптивная модернизация – процесс переделки уже существующего сайта в адаптивный. Данный подход популярен, так как требует небольших финансовых и временных ресурсов, к тому же, не сопряжен с художественными рисками – цветовая палитра, типографика, изображения – все остается на месте. К тому же, аудитории не приходится заново привыкать к интерфейсу. Фактически, болезненного редизайна не происходит. Тем не менее, мобильные сайты, сделанные подобным образом, часто теряют в производительности, хуже поддерживаются мобильными устройствами, плохо структурированы и нуждаются в регулярных исправлениях. Негативный пользовательский опыт обязательно отразится на конверсии продукта.
Адаптивные мобильные сайты есть у таких крупных западных СМИ, как The BBC, The Guardian и Entertainment Weekly – это отдельные сайты на поддомене, которые используют методы адаптивной верстки. Такие сайты хорошо разгружают трафик, так как фактически находятся на отдельных адресах. Подобный дизайн - временная мера, позволяющая оценить потребность издания в мобильных технологиях в принципе.
Мир адаптивного дизайна серьезно изменил метод Люка Вроблевски в своей книге «Сначала мобильные!»27, вышедшей в 2009 году. Автор предлагает начинать дизайн сайтов не с десктопных версий, а с максимально маленьких экранов, с которых будет просматриваться контент. Вроблевски предлагает создавать дизайн, исходя из особенностей и слабых мест мобильных устройств: скромные размеры дисплеев, низкая производительность и пропускная способность систем и прочее. Такой подход дает качественный дизайн, однако долог, дорог, организационно сложен и достаточно кардинален. Преимущества данного подхода, как показывает практика, тяжело объяснить заказчикам. Незнакомый интерфейс, к тому же, может вызвать негативную реакцию аудитории.
Несмотря на все проблемы, данный подход нашел множество сторонников и продолжает развиваться, что неудивительно при настоящих темпах развития мобильных технологий. К тому же, он учитывает преимущества, которые дает HTML5 и, в принципе, мобильная природа гаджетов: GPS, камеры, акселерометр, геолокация, сенсорный экран.
Стратегия поэтапного перехода к адаптивному дизайну подразумевает постепенную, страница за страницей, смену интерфейса. Аудитории легче принять такой дизайн, она обучается работе в новом интерфейсе поэтапно. Однако с эстетической точки такой дизайн не может считаться удачным: мобильный сайт оказывается неоднородным, новые страницы перемежаются с устаревшими, визуально конфликтуют друг с другом. Этот метод создает много проблем с архитектурой сайта.
Адаптивный подход ставит перед дизайнером две проблемы: различные разрешения экранов и выбор контента. Проблема разрешения решается при помощи технологии медиа-запросов, позволяющей менять ширину макета, количество колонок, формат изображений и текста. На данный момент их поддерживают все мобильные браузеры. Резиновые макеты позволяют не ломать колонки с другими элементами интерфейса.
В допадаптивную эпоху дизайн сайтов мог некорректно отображаться на экранах мобильных устройств: появлялась горизонтальная полоса прокрутки, элементы навигации могли иметь неадекватный размер (что могло быть критично, учитывая менее точные движения пальцами по сравнению с мышью), неверно масштабировались изображения. Стандартное значение ширины устройства, сообщаемое просмотрщиками, колеблется около 320 пикселей28, но опираться на эти цифры не стоит – стандарты меняются слишком быстро. К тому же, в отличие от десктопов экран многих мобильных устройств может менять ориентацию, что может исказить макет при неадаптивном подходе.
Модульные сетки существенно облегчают создание сайта, одинаково корректно работающего в различных экосистемах. Особенностью модельных сеток в адаптивном дизайне являются блоки различных размеров и постоянная подгруздка содержимого. Подгрузка как прием изначально пришла из приложений для социальных сетей. Оказалось, что наиболее интуитивно понятное движение – протягивание края страницы вверх («свайп»), часто сопровождающееся характерным звуком. Этот паттерн моторики настолько общепринят, что менять его не имеет смысла.
Особое значение приобретает иерархия контента, так как при адаптивном подходе нет отдельной десктопной версии, куда можно было бы обратиться за полной информацией. Для того, чтобы уместить на экране необходимое и достаточное количество данных, дизайнерам прибегают к замене части текстового контента на аудио и видео, упрощают навигацию и убирают менее значимые элементы под выпадающие списки. Однако не всегда эти методы приводят к положительному пользовательскому опыту. Например, часть аудитории Русской службы Би-би-си жаловалась, что на мобильном сайте слишком много мультимедиа – оказалось, что пользователям неудобно слушать и смотреть новости «на ходу» и они бы предпочли традиционные текстовые варианты.
Приведенный пример дает понять, почему так важно понимать контекст использования мобильной версии для создания мобильного сайта. Увлечение мультимедийностью, как оказалось, не всегда идет на пользу СМИ и должно совпадать с запросом аудитории. Более того, мультимедийные элементы могут настолько перегрузить мобильный сайт, что это сведет на нет одно из важнейших условий юзабилити – скорость работы. Веб-дизайн отличается от всего остального графического дизайна еще и тем, что его неотъемлемой частью стала производительность.
Скорость работы на мобильном устройстве – величина, которую нужно учитывать не только программистам, но и дизайнерам. для того, чтобы оптимально ранжировать контент, необходимо изучить аудиторию издания. Исходя из концепции мобильного контекста29, пользователи делятся на категории;
Обращающиеся повторно (Repetitive Now), т.е. те, кто рутинно просматривает ленту событий (например, новостную ленту);
Скучающие в данный момент (Bored Now), т.е. те, кто заходи на сайт в период ожидания чего-либо;
Срочно запрашивающие (Urgent Now), т.е. аудитория с четко сформированным, не требующим отлагательства запросом.
Таким образом, адаптивный подход к дизайну перестает быть просто способом решить проблему различных форматов и разрешений. Адаптивный метод – это набор гибких сценариев. Не только программные приемы могут увеличить производительность, но и дизайнерские. Гай Подъярны в своей статье выделил три возможных улучшения со стороны дизайнера30:
Не загружать большое количество элементов, скрытых для пользователя;
Не загружать изображения в высоком разрешении, чтобы потом они были урезаны в соответствии с дисплеем;
Избегать избыточного DOM – (Document Object Model) программного интерфейса, который не зависит от экосистемы и языка.
Родственным методу адаптивного дизайна является принцип RESS (Responsive Web design + Server Side components). Он пытается преодолеть главную проблему адаптивности – зависимость от определения ширины дисплея. При всей легкости трансформации дизайна, опирающегося на данные браузера, этот процесс не всегда проходит гладко с точки зрения функциональности. Метод предложен Люком Вроблевски в 2011 году и предполагает определение макета страницы исходя из информации о типе устройства. Можно сказать, принцип RESS совмещает в себе достоинства адаптивного подхода и отдельных версий.
При разработке приложения для компании BBC дизайнеры использовали подход RESS, параллельно с макетами под популярные устройства был создан и универсальный мобильный сайт для гаджетов, которые обладают нестандартными характеристиками. Однако недостатком данного подхода является сложность и дороговизна разработки.
|
