GUI Machine » Эргономика и юзабилити GUI

Эргономика и красота

admin — Thu, 03 Oct 2013 12:42:14 +0000

Амели Буше (Amélie Boucher)

От переводчика

В печатных изданиях и в Интернете можно найти немало публикаций по различным частным аспектам проблематики юзабилити. Работ, посвященных анализу теоретико-методологических основ юзабилити, появляется значительно меньше. Мы хотели бы восполнить этот пробел и начать серию публикаций, в которых вопросы компьютерной эргономики рассматриваются на стыке различных областей знаний: технической эстетики и дизайна, психологии, философии техники…. Публикации будут включать как переводные, так и наши собственные исследовательские материалы.
Для начала мы хотели бы предложить вниманию наших читателей статью французской исследовательницы Амели Буше «Эргономика и красота». Работа была написана еще в 2004 году, однако затронутые в ней вопросы не утратили своей актуальности и сегодня. Что важнее: красота или функциональность? Каковы критерии красоты и эстетичности применительно к программным продуктам? Какую роль играет пользовательское восприятие чисто эстетических аспектов ПО в формирование представлений о его функциональности?
Надеемся, что предлагаемые статьи вызовут интерес читателей и станут предметом продуктивного обсуждения.

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

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

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

Удобство и красота — вещи взаимосвязанные

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

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

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

Эстетика на службе юзабилити

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

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

В дизайне интерфейсов можно выделить две группы элементов:

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

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

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

Существует, однако, и другое мнение. Одним из его приверженцев является Дональд Норман — известный специалист как в области дизайна интерфейсов, так и в области психологии. Он считает, что эстетическая привлекательность существенно повышает удобство в работе, делает сам процесс взаимодействия человека и машины приятным. «Aesthetics matter: attractive things work better” («Эстетика важна: вещь красива — значит, нужна»), – пишет Норман.

Эстетика для эстетики

Скажем несколько слов в защиту красоты-самой-по-себе, существующей как дополнение к функциональности. Чисто визуальные элементы могут не приносить никакой ощутимой пользы, увеличивать информационную плотность и время загрузки веб-страниц; кроме того, иногда они отвлекают внимание от важных вещей. Все это, однако, не умаляет той пользы, которую могут принести декоративные элементы. Уже упоминавшийся выше Дональд Норман так пишет о роли цвета в восприятии интерфейса пользователем: “Although my reasoning told me that color was unimportant, my emotional reaction told me otherwise” (Хотя разум говорил мне, что цвет не важен, моя эмоциональная реакция свидетельствовала о другом).

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

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

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

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

Природная тяга к красоте

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

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

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

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

Юзабилити — не только и не столько удобство использования

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

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

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

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

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

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

What is beautiful is good: роль эстетического фактора в оценке функционального удобства ПО

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

Знания о формировании впечатления на основе физической информации можно и нужно использовать при создании интерфейсов. Можно высказать предположение о том, что внешний вид интерфейса приводит нас к выводам о том, что он обладает теми или иными характеристиками, удобен или неудобен в работе и т. п. Для иллюстрации влияния на формирование эстетической привлекательности вещи на формирование субъективных представлений о качестве приведем еще одну цитату из Дональда Нормана: “Wash and polish your car – doesn’t it drive better?” (Отмойте свою машину до блеска — разве она не ездит лучше?) В формировании представлений об удобстве той или иной вещи большую роль играет чувство удовлетворения от ее использования. Представления об удобстве интерфейса во многом обусловлены его эстетической привлекательностью. Создание действительно удобных в использовании приложений невозможно без тесного сотрудничества разработчиков со специалистами по эстетике и дизайнерами.

Первоисточник

Интерфейсы мобильных приложений: дизайн и эргономика

admin — Thu, 03 Oct 2013 12:02:14 +0000

Патрик Кокс (Patrick Cox)

От переводчика

Продажи смартфонов и планшетов растут с каждым днем, и это уже говорит о необходимости повышенного внимания к интерфейсам для мобильных устройств. На каких принципах должен основываться дизайн приложений и сайтов для мобильных девайсов? Как удовлетворить все запросы пользователей, которые становятся все более и более требовательными?
По имеющимся прогнозам, в течение 2011 года объем продаж планшетов существенно возрастет, а объем продаж смартфонов существенно превысит объем продаж телефонов традиционного образца. Как показывает практика, пользователи предпочитают приложения для веб-навигации, уже установленные на телефоне, специальному программному обеспечению, которое нужно специально покупать или скачивать. Что это означает? В первую очередь — то, что в настоящее время перед веб-разработчиками и дизайнерами стоит задача учета особенностей мобильных устройств. Задача, следует заметить, не самая простая (см. статью известного специалиста в области веб-дизайна Якоба Нильсена «Мобильный контент: вдвойне сложнее» – http://www.useit.com/alertbox/mobile-content-comprehension.html, русский перевод- http://itopti.livejournal.com/2578.html, а также множество примеров дизайна на сайте http://www.mobileawesomeness.com/).
Специалист по юзабилити Патрик Кокс сформулировал 10 принципов, на которых должна основываться разработка мобильных приложений и сайтов http://www.ergonomie-interface.com/mobile-tactile-nomade/conception-site-web-mobile/). Приглашаем читателей к обсуждению; будем рады, если кто-то сможет поделиться собственным опытом проектирования интерфейсов для мобильных приложений.

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

Практические рекомендации:

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

2. Используйте тэги для обозначения типа содержимого: например, em для подчеркивания или abbr для обозначения аббревиатуры. Подробный список тэгов см. здесь: http://www.webdesignfromscratch.com/html-css/list-of-html-tags-with-semantic-usage/

3. Пользуйтесь тэгом div только для выделения больших блоков материала, связанных друг с другом. Для выделения отдельных абзацев пользуйтесь специальными тэгами: ul для составления маркированных списков, span для выделения небольших блоков содержимого.

4. Помните о том, что семантическая паутина – это способ организации содержания, к стилю не имеющий никакого отношения.

Четко формулируйте задачу

Мобильная версия сайта должна быть предназначена для решения ограниченного числа задач. При ее создании необходимо особенно четко формулировать цели. Если место для сайта уменьшается на 80%, то и от 80% намеченных планов также придется отказаться. Функциональность мобильной версии сайта существенно ограничена по причине небольшого размера экрана. Например, в версию сайта для большого экрана можно запросто включить такие функции, как реклама новых продуктов компании, просмотре личных сообщений, заполнение небольших контактных форм, индикация последних сообщений в Твиттере и т. п. Но для мобильной версии такой вариант не годится: разместить все это на экране смартфона вряд ли получится. Уменьшение размера элементов содержимого — тоже не выход: не будет же пользователь просматривать сайт через увеличительное стекло!
Выход один: ограничиться наиболее необходимыми функциями, чтобы для них хватило места на экране.

Пример: сжатое и ясное представление информации на сайте (мобильная версия портала http://bluemountain.ca/ ).

Практические рекомендации:

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

Избегайте перезаполнения!

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

Пример: упрощенная и хорошо организованная горизонтальная навигация (http://m.journeys.com/) .

Практические рекомендации:

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

Не используйте выделенного состояния!

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

Практические рекомендации:

Для обозначения ссылок используйте кнопки, а не подчеркивание текста.
Обозначайте доступ к более подробному содержимому при помощи стрелок.
В оформлении кнопок пользуйтесь оттенением и рельефными линиями.
Используйте знакомые и понятные иконки. Избегайте иконок непривычного вида для обозначения типов действий («добавить», «изменить», «назад», «вперед» и т. п.)

Пример: удачный вариант дизайна навигационных кнопок.

Пишите крупным шрифтом, просто и понятно

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

Практические рекомендации:

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

Пример: подача информации в виде кратких и емких текстовых блоков

Используйте элементы содержимого сайта в навигации

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

Практические рекомендации:

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

Пример: организация мобильной версии сайта как виртуальной галереи (сайт американской рок-группу Neon Trees).

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

Пример: минимум цветов и контрастность — залог удачного дизайна (http://world.g-shock.com/).

Практические рекомендации:

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

В общем стиле сайта главное — простота

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

Пример: форма для входа на мобильную версию сайта (социальная сеть для любителей пива Untapped – http://untappd.com/?mobile=true)

Обеспечьте возможность обратной связи

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

Практические рекомендации:

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

Сохраняйте пустые места

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

Пример — меню, удобное для навигации при помощи устройств с сенсорным экраном (мобильная версия портала http://www.charlesluck.com/ ).

Практические рекомендации:

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

Первоисточник

Слова имеют значение: языковые проблемы проектирования интерфейсов

admin — Thu, 03 Oct 2013 11:55:34 +0000

Чтобы все всем было понятно

Начнем с вполне конкретного примера. На иллюстрации ниже представлен интерфейс сайта, посвященного лекарственному препарату «Страттера»:

Обратим внимание на рубрику Taking Strattera (т. е. «Прием препарата»). Можно ли по прочтении данного заголовка однозначно сказать, чему конкретно посвящена данная рубрика? Конечно же, нет. Тексты, собранные под рубрикой с таким названием (не будем забывать о многозначность английского глагола to take), могут рассказывать как о том, как именно нужно принимать препарат (показания к приему, дозировка и т. п.), так и о том, почему нужно принимать именно этот препарат, а не какой-нибудь другой. Кроме того, под эту рубрику вполне подходят и тексты, описывающие результаты приема этого самого препарата. Из меню рассматриваемого сайта неясно, какую конкретно информацию содержит соответствующий раздел. Проблема могла бы быть решена с помощью выпадающего меню, включающего пункты «Показания», «Дозировка», «Эффект препарата и и т.п.». Использование выпадающего меню сделало бы работу с сайтом гораздо более удобной: посетители стали бы сразу переходить в необходимый раздел, не тратя времени на просмотр лишней и совершенно ненужной им информации.
На обсуждаемом сайте имеется еще один пример использования неудачных языковых выражений. Рубрика, в которой приведены полезные ссылки, имеет название Resources. Данный вариант представляется не совсем удачным: слово resources обозначает все возможные источники информации по теме, а не только ссылки на материалы в Интернете; кроме того, слово links является более употребительным; при беглом просмотре страницы оно сразу же будет «схвачено» пользователем. Сделать систему навигации более понятной можно опять же при помощи выпадающего меню, состоящего из пунктов «Полезные ссылки», «Библиография», «Материалы для скачивания».

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

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

У представителей каждой профессии вырабатывается собственный язык, непонятный для непосвященных. Хорошее владение языком профессионального общения является одним из показателей интеграции человека в профессиональное сообщество. Однако для того, чтобы рассказывать о своей деятельности другим людям, профессионал должен пользоваться понятным им языком — в противном случае он просто не будет понят.
Иногда бывает так, разработчики смотрят на мир, что называется, через призму собственной профессии и общаются с пользователям точно так же, как общаются между собой на специализированных форумах и блогах. Мне нередко приходилось сталкиваться с подобным явлением при редактировании текстов для специализированных сайтов и руководств пользователя. Например, в интерфейсе программы, целевой аудиторией которой являются менеджеры и бизнес-аналитики — люди, не владеющие компьютерным профессиональным жаргоном, мною была встречена фраза «Выбрать попап для меню….» Само слово «попап» по-русски звучит некрасиво и неуклюже. Да и сама фраза не будет понятной для непосвященных. Посоветовавшись с разработчиками, мы решили заменить ее на «Выбрать всплывающее меню для пункта…» – данный вариант звучит значительно красивее и естественнее с точки зрения грамматических и стилистических норм русского языка.

Рекомендация. Следует избегать употребления узкоспециальной профессиональной лексики, непонятной для широкой пользовательской аудитории. Если для специальных терминов сложно зайти замену, можно составить глоссарий и включить его в руководство пользователя. В особо сложных случаях можно обратиться за консультациями к специалистам-филологам.
Отдельная рекомендация для филологов. Лексика и стилистика языка пользовательских интерфейсов — область весьма интересная и малоизученная. Чем не тема для научной и практической работы?

Трудности перевода

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

Что значит выражение Searchable PDF? Сможет ли начинающий пользователь понять его смысл? Подумали ли разработчики о том, что среди пользователей могут быть люди, не знающие английского языка? Можно ли считать понятным и удобным интерфейс, текстовая часть которого представляет собой ералаш из русских и латинских букв?

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

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

Окулографические исследования: что может рассказать взгляд

admin — Thu, 03 Oct 2013 11:39:41 +0000

Окулографические исследования (иногда называемые также айтрэкингом, от англ. eye tracking) стали весьма модной тенденцией в сфере веб-разработки. Действительно ли они так полезны и эффективны? В чем заключается различие между окулографией и традиционными методиками юзабилити-тестирования и эргономической оценки? Попытка ответа на эти вопросы будет предпринята ниже.

Анализ того, что мы видим

Окулография уже давно используется в научных исследованиях, а также в промышленности. Смысл исследования заключается в анализе движения взгляда и зон визуальной фокализации, на которых концентрируется взгляд. Анализ осуществляется на основе показаний специального прибора — окулографа (айтрекера).
Чаще всего целью исследования является изучение реальных сценариев работы с сайтом путем отслеживания движений взгляда. Предметом исследования является компоновка информации на сайте и ее пертинентность, т. е. соответствие информационным потребностям пользователя. Данные анализа могут быть представлены в двух формах: траектория движения взгляда (англ. gaze plot) и тепловая карта зон (англ. heat map).

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

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

Айтрекинг и маркетинг

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

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

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

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

Движение взгляда по веб-странице напрямую зависит от того, как на ней расположена информация. Так, результаты анализа свидетельствуют о том, что пользователи почти не задерживают взгляда на рекламных баннерах (этот феномен получил название баннерной слепоты, от англ. banner blindness). На приведенных ниже рисунках видно, что взгляды испытуемых почти не останавливались на баннерах (как статических, так и анимированных), расположенных как в верхней части, так и по краям веб-страницы:

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

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

Тепловые карты F-образного сканирования.

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

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

Окулографическое исследование как средство измерения юзабилити веб-страниц

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

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

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

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

Точки фиксации взгляда на заполняемых текстовых полях.

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

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

Заключение

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

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

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

Окулографические исследования: о чем не расскажет взгляд

admin — Thu, 03 Oct 2013 11:14:55 +0000

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

Одного взгляда достаточно?

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

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

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

Факты или ощущения пользователя?

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

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

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

Привлекательно для взгляда или привлекательно для пользователя?

Если взгляд пользователя задержался на том или ином элементе интерфейса, это далеко не всегда значит, что этот элемент привлек его внимание. Айтрекинг дает лишь косвенную информацию о специфике пользовательского восприятия приложений и сайтов. Методики окулографических исследований появились задолго до того, как появился Интернет. Они уже давно и активно используются в науке и в промышленности. Так, например, многие производители автомобилей осуществляют оценку степени усталости водителя по специфике движения его взгляда (время фиксации на посторонних, т. е. не имеющих никакого отношения к управлению автомобилем, элементах; продолжительность закрытия век и т. п.). Еще одним важным окулометрическим показателем является расширение зрачков. Зрачки расширяются в зависимости от освещенности и от степени усталости. Чем больше расширяются или сужаются зрачки, тем больше усилий затрачивается на усвоение и запоминание визуальной информации. Это подтверждается и данными проводимых одновременно с айтрекингом исследований мозга. Энцефалография мозга позволяет уточнить данные айтрекинга и получить дополнительную информацию о распределении и фиксации внимания испытуемого. Исследования зрачков еще не получили широкого применения в окулографии — во многом потому, что причины сужения и расширения зрачков трудно определить однозначно. Точные данные возможно получить лишь в лабораторных условиях.

Выводы

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

Заключение

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

Сильные стороны айтрекинга:

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

Слабые стороны айтрекинга

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

Онлайновые аудиоплейеры: эргономика и дизайн

admin — Thu, 03 Oct 2013 11:00:30 +0000

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

Функциональность: ничего лишнего

В 90-е годах ХХ века радиоприемники и проигрыватели компакт-дисков нередко были перегружены различными функциями: случайное воспроизведение, повтор, эквалайзер, и т. д. и т. п. В то же время эти функции в большинстве случаев оставались невостребованными: мало кто из владельцев аппаратуры регулярно ими пользовался. То же самое можно сказать и об интерфейсах современных софтверных плейеров: избыточная функциональность вряд ли привлечет пользователь, но существенно усложнит работу с приложением. Рассмотрим в качестве примера французский сайт Wormee, один из первых в Европе веб-порталов для поиска и прослушивания аудиопотоков. Некоторые очевидные недочеты можно объяснить тем, что сайт создавался тогда, когда подобных веб-проектов было еще мало, и разработчикам во многом приходилось действовать, что называется, наощупь. В основу дизайна плейера положена следующая идея: уместить все функции и всю информацию на небольшом экране, по виду напоминающем жидкокристаллический монитор:

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

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

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

Рекомендации

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

Размер имеет значение: плейер не должен быть громоздким

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

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

В плейере Grooveshark панель дополнительных функций («поделиться» в популярных социальных сетях) отображается в виде тултипа при наведении курсора на прогресс-бар. Такое решение также представляется интересным:

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

Маленький, но заметный

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

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

Онлайновые аудиоплейеры: эргономика и дизайн

admin — Thu, 03 Oct 2013 10:45:37 +0000

Функциональность: ничего лишнего

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

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

Рекомендации

Размер имеет значение: плейер не должен быть громоздким

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

Маленький, но заметный

Выпадающие списки: эргономика и дизайн

admin — Thu, 03 Oct 2013 10:40:08 +0000

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

Эффективное отображение списка

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

Практические рекомендации:

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

Облегчение выбора

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

тип действия;
частота использования;
по алфавиту;
вокруг графического изображения.

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

Практические рекомендации:

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

Создать благоприятные условия для выбора

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

Пример: выпадающие меню выбора шрифтов (OpenOffice и InDesign).

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

Пример: представление текстового фрагмента выбираемым шрифтом (Office 2007).

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

Пример: выбор отображаемых элементов меню в WindowsExplorer7 и на французском сайте CadresOnline.

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

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

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

Практические рекомендации:

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

Заключение

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

Календари: эргономика и дизайн

admin — Thu, 03 Oct 2013 10:24:04 +0000

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

Упрощение ввода даты

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

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

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

На сайте авиакомпании Air France отсутсвует иконка календаря; календарь возникает на экране при переходе в раздел «Регистрация онлайн». Это может вызвать затруднения.

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

На сайте SNCF (французская государственная железнодорожная компания), дни предыдущего и следующего месяца отображаются при поиске поезда (слева), но не при поиске гостиниц (справа). При поиске поезда дата предустановлена, тогда как при поиске гостиниц задан лишь формата для ее ввода. Чтобы на экране не возникало некрасивых и бесполезных пустых мест, в календаре предпочтительно отображать дни предыдущего и следующего месяцев. Во избежание ошибок их лучше выделить графически (например, менее ярким шрифтом). Еще один классический элемент дизайна календарей – метки с названиями дней недели. Здесь следует учитывать специфику страны: например, во Франции неделя начинается с понедельника, тогда как в США — с воскресенья. Особые дни (например, праздники) также могут быть каким-то образом выделены. Такое выделение очень важно на сайтах, предоставляющих определенные типы услуг (например, на сайтах, предлагающих билеты на транспорт, иногда возникает необходимость выделение дней открытия и закрытия сообщения). Графическое выделение предпочтительно сопровождать текстовым пояснением (например, в виде подсказки, появляющейся при подведении курсора). Графически выделяются и выходные дни (это особенно важно при заказе билетов на поезд и самолет, турпутевок, гостиничных номеров и т. п.). Определенным образом должны выделяться и недоступные дни (на которые проданы все билеты, заняты все номера в гостинице и т. п.

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

Рекомендации

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

Упрощение выбора даты

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

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

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

Пример обозначения недель в календаре.

Рекомендации

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

Заключение

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

Текстовые поля: эргономика и дизайн

admin — Thu, 03 Oct 2013 09:51:21 +0000

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

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

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

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

Как правило, проверка осуществляется так: при завершении заполнения одного поля и переходе к другому на экране появляется сообщение об имеющихся недочетах. Так это реализовано, например, на сайте для онлайн-обработки фотографий Picnik.Com:

Другой способ заключается в том, что проверка ведется в режиме реального времени, и пользователь получает соответствующее предупреждение, как только совершит ошибку (например, введет недопустимый символ или превысит допустимое в текстовом поле число знаков). Предупреждение, как правило, осуществляется двумя способами. Первый способ заключается в выводе сообщения об ошибке без объяснения причин (в настоящее время
такое бывает очень редко). Второй способ используется гораздо чаще и заключается в том, что на экране отображается конкретная информация о совершенной ошибке (слишком длинное имя пользователя, неверный пароль, использование недопустимых слов и символов и т. п.). Функция проверки позволяет также предупреждать возможные ошибки. Так, при заполнении формы регистрации на сайте онлайнового инструмента ведения списка задач Remember the milk можно получить информацию о принятом формате пароля, лишь перейдя на соответствующее поле:

Как только пользователь начинает вводить пароль при регистрации, он сразу же получает информацию о том, что пароль должен содержать не менее 5 символов.

Похожим образом организован и процесс регистрации на сайте для онлайнового просмотра видео LiveStream:

Рекомендации

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

Разъяснить причины несоответствий

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

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

На некоторых сайтах (например, на игровом сервисе Thumbslap) отображается информация о ходе проверки правильности ввода данных:

Рекомендации

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