Без картинок выбрать тип сумки на сайте Самсонайт очень сложно.
Без картинок выбрать тип сумки на сайте Самсонайт очень сложно.
На сайте интернет-магазина Самсонайт покупатель может выбирать среди множества типов сумок. Он может выбрать Посадочные сумки, Ручные сумки, Ручной багаж, Сумки с колесиками и нечто, названное Вращающимся багажом.
Проблема в том, что непонятно чем различаются эти варианты. Если вы хотите, что-нибудь небольшое, что можно взять на самолет, с ручкой и колесиками, что вы выберете? Когда мы наблюдали за людьми, совершающими покупки на этом сайте, они не знали ответа.
Картинки могли бы коренным образом изменить ситуацию. Фотографии или иллюстрации каждого типа чемоданов помогли бы пользователям разобраться без необходимости изучать профессиональный жаргон производителей сумок.
Когда графика полезна
Графика, как упомянутые выше изображения чемоданов, полезна тогда, когда она улучшает взаимодействие с пользователем. Однако, мы обнаружили, что не всякая графика помогает. Некоторые изображения просто занимают место или, в худшем случае, сбивают с толку пользователя.
Графика, включая фотографии, иконки и иллюстрации, не бесплатна. Она должна быть придумана, изготовлена, адаптирована и согласована. Что поглощает ограниченный ресурс, который мог бы дать большую отдачу в других аспектах дизайна, таких как навигация или копирайтинг.
Чтобы определить стоит ли графика вложений мы поделили ее на три типа: навигационная графика, графический контент и декоративная графика. Наше исследование наглядно показывает, что хорошо выполненная навигация и графический контент обогащают взаимодействие с пользователями. Ценность же декоративной графики обнаружить гораздо сложнее. Похоже в большинстве случаев декоративная графика раздражает как дизайнеров, так и пользователей.
Навигационная графика
Если бы интернет-магазин Самсонайт имел эти самые изображения чемоданов, мы назвали бы их Навигационной графикой. Они бы подтолкнули пользователя, направляя его к искомой информации.
Когда нет навигационной графики, пользователь вынужден полагаться на текст. Наглядные изображения могут творить чудеса, помогая определить следующий шаг в навигации.
(Интересный факт: навигационная графика – это не всегда ссылки. Если она помогает пользователю решить куда кликнуть – значит она выполняет свою задачу.)
Розничная сеть BestBuy.com в ситуации, похожей на ту, в которой оказался Самсонайт. Товарные группы, такие как Цифровые фотоаппараты, например, имеют свой описательный словарь с жаргоном типа Зеркалки (DSLR) или Мыльницы (Point & Shoot).
Бест бай использует навигационную графику чтобы помочь пользователям определиться с необходимым типом фотоаппарата.
Бест бай использует навигационную графику чтобы помочь пользователям определиться с необходимым типом фотоаппарата.
Чтобы помочь покупателям в навигации они сделали простую иллюстрацию, показывающую оба типа фотоаппаратов и их названия. Таким образом пользователь одновременно и изучает лексикон и получает ясное указание куда сейчас нужно кликнуть.
Хорошо сделанная навигационная графика помогает пользователям. Такая графика обогащает диалог, предоставляя визуальный канал восприятия, который не мог бы быть получен за счет только лишь текста. Когда дизайнер использует правильные картинки – они улучшают взаимодействие с пользователем.
Графический контент
В то время как задачей Навигационной графики является направление пользователя к искомой информации, Графический контент предоставляет эту самую информацию.
Люди, ищущие на Крейглисте (онлайн газета бесплатных объявлений) новое жилье, должны определить какие из объявлений им стоит рассмотреть. Владелец недвижимости может загрузить фотографии интерьера и фасада.
Интерьеры недвижимости - это прекрасный пример графического контента на крейглисте.
Интерьеры недвижимости - это прекрасный пример графического контента на крейглисте.
Эти изображения – это графический контент, предоставляющий потенциальным съемщикам информацию, которую невозможно получить из текстового описания.
Лучший графический контент помогает смотрящему получить ответ на конкретные вопросы. Люди, посещающие Диснейленд, например, могут захотеть спланировать оптимальный маршрут через тематические парки, таким образом, чтобы посетить свои любимые аттракционы в течение непродолжительной прогулки.
Карта Диснейленда не обладает достаточной детализацией для графическего контента.
Карта Диснейленда не обладает достаточной детализацией для графическего контента.
Декоративная графика
В разделе кредитов на сайте банковского гиганта Ситибанк есть бросающаяся в глаза фотография людей, пожимающих руки.
Страница Ситибанк Кредиты с декоративной графикой, изображающей людей, пожимающих руки.
Страница Ситибанк Кредиты с декоративной графикой, изображающей людей, пожимающих руки.
А вот в разделе кредитов на сайте Истерн Банка, единственным графическим элементом помимо логотипа банка оказалась маленькая картинка, связанная с ипотечным калькулятором.
Раздел кредитов на сайте Истерн Банка
Раздел кредитов на сайте Истерн Банка
Будем ли мы относиться к Ситибанку с большим доверием из-за картинки с улыбающимися людьми, завершающими сделку рукопожатием.
Рукопожатие на странице кредитов Ситибанка – это то, что мы называем декоративной графикой. Она не направляет пользователя к другому контенту на сайте, так что это не Навигационная графика. В ней нет и никакой полезной информации, так что мы не назовем ее Графическим контентом.
Мы думаем, что изображение рукопожатия предназначено для того, чтобы передать какую-то важную нематериальную характеристику, например то, как именно Ситибанк выдает кредиты. Дизайнеры рассказали нам, что они используют подобную графику, когда они хотят, чтобы сайт выглядел более профессиональным, дружелюбным или забавным. Как бы там ни было, дает ли использование декоративной графики тот эффект, который подразумевают дизайнеры?
Сайт Ти-мобайл заполнен множеством изображений популярной звезды Кэтрин Зэта-Джонс. Мы пронаблюдали за покупателями мобильных телефонов, пробирающихся через сайт. Они проявляли нарастающее раздражение каждый раз, когда появлялось её фото вместо изображений, которые могли бы нести полезную информацию.
Кэтрин Зэта-Джонс появляется повсюду на сайте Ти-мобайл.
Кэтрин Зэта-Джонс появляется повсюду на сайте Ти-мобайл.
Одна пожилая покупательница, заинтересованная в покупке телефона с крупными удобными клавишами (buttons), была очень разочарована когда не смогла различить размер кнопок ни на одной из фотографий. Когда она заметила что Кэтрин Зэта-Джонс держит именно тот телефон, что ей понравился, она рассердилась. “Она очень красивая девушка,” сказала нам покупательница, “жаль только что я не могу разглядеть её пуговицы (buttons)”.
Дизайнеры говорили нам, что они используют декоративную графику, чтобы разредить страницу, уменьшая плотность текста. Это похвальное стремление. Действительно, бывает сложно работать с большими блоками текста. Однако выбранные наугад картинки не очень-то помогают.
В шаблоне сайта Университета Хельсинки есть большая зона для графики наверху. К несчастью, дизайнеры, похоже, не нашли полезных изображений, так что они просто заполнили эту зону случайными картинками. Например некоторые страницы украшены парой фиолетовых кресел, которые не сообщают нам ничего ни об университете, ни о содержимом страницы.
Мы не уверены в том, что именно пытаются сказать нам два фиолетовых кресла на сайте Университета Хельсинки.
Мы не уверены в том, что именно пытаются сказать нам два фиолетовых кресла на сайте Университета Хельсинки.
Что именно дает декоративная графика для взаимодействия с пользователем? Мы пока точно не знаем. Мы не смогли найти ни одного доказательства тому, что декоративная графика заставляют пользователя больше доверять сайту или, что сайт кажется более профессиональным или дружелюбным с нею. Хоть она и может уменьшить плотность крупных текстовых блоков, есть более эффективные приёмы компоновки, позволяющие получить такой же результат.
Важность графики
На протяжении лет мы повидали множество бесплодных попыток сделать навигационную графику и графический контент правильно – картинки не делали того, что задумал дизайнер. Однако мы видели и хорошо сделанную графику обоих типов, что позволяет быть уверенными в том, что такая графика может улучшить взаимодействие с пользователем.
Навигационная графика помогает пользователю найти информацию, которая ему необходима, зачастую так, как простой текст не смог бы сделать. Графический контент передает важную информацию, помогая пользователю достичь своей цели. Что же до декоративной графики, в лучшем случае она и не помогает, и не вредит.
Поскольку графика не получается бесплатно, мы рекомендуем разработчикам, которые стремятся к эффективности в дизайне, сфокусироваться на навигационной графике и графическом контенте. Сопротивляйтесь искушению декоративной графики.
Перевод: frst.
Впервые опубликовано в «Юзабилити Бюллетень, 2010».