На сайте онлайн магазина Самсонайт покупатель может выбирать среди множества типов сумок. Он может выбрать Посадочные сумки, Ручные сумки, Ручной багаж, Сумки с колесиками и нечто, названное Вращающимся багажом.
http://www.uie.com/images/graphicswillhelp/samsonite-cropped.png
Без картинок выбрать тип сумки на сайте Самсонайт очень сложно.
Проблема в том, что не понятно чем различаются эти варианты. Если вы хотите, что-нибудь небольшое, что можно взять на самолет, с ручкой и колесиками, что вы выберете? Когда мы наблюдали за людьми, совершающими покупки на этом сайте, они не знали ответа.
Картинки могли бы коренным образом изменить ситуацию. Фотографии или иллюстрации каждого типа багажа помогли бы пользователям разобраться без необходимости изучать профессиональный жаргон производителей сумок.
Когда графика полезна
Графика, как упомянутые выше изображения чемоданов, полезна тогда, когда она улучшает взаимодействие с пользователем. Однако, мы обнаружили, что не всякая графика помогает улучшить взаимодействие с пользователем. Некоторые изображения просто занимают место или, в худшем случае, сбивают с толку пользователя.
Графика, включая фотографии, иконки и иллюстрации, не бесплатна. Она должна быть придумана, изготовлена, адаптирована и согласована. Что поглощает ограниченный ресурс, который мог бы иметь большую отдачу в других аспектах дизайна, таких как навигация или копирайтинг.
Чтобы определить стоит ли графика вложений мы поделили ее на три типа: навигационная графика, графический контент и декоративная графика. Наше исследование наглядно показывает что хорошо выполненная навигация и графический контент обогащают взаимодействие с пользователями. Ценность же декоративной графики обнаружить гораздо сложнее. Похоже в большинстве случаев декоративная графика раздражает как дизайнеров, так и пользователей.
Навигационная графика
Если бы онлайн магазин Самсонайт имел эти самые изображения чемоданов, мы назвали бы их Навигационной графикой. Они бы подтолкнули пользователя, направляя его к искомой информации.
Когда нет навигационной графики, пользователь вынужден полагаться на текст. Наглядные изображения могут творить чудеса, помогая определить следующий шаг в навигации.
(Интересный факт: навигационная графика - это не всегда ссылки. Если она помогает пользователю решить куда кликнуть - значит она выполняет свою задачу.)
Розничная сеть BestBuy.com в ситуации, похожей на ту, в которой оказался Самсонайт. Товарные группы, такие как Цифровые фотоаппараты, например, имеют свой описательный словарь с жаргоном типа Зеркалки (DSLR) или Мыльницы (Point & Shoot).
http://www.uie.com/images/graphicswillhelp/bestbuy-digitalcameras-cameras-cropped.png
Бест бай использует навигационную графику чтобы помочь пользователям определиться с необходимым типом фотоаппарата.
Чтобы помочь снять квартиру на сутки в Новосибирске покупателям в навигации они сделали простую иллюстрацию, показывающую оба типа фотоаппаратов и их названия. Таким образом пользователь одновременно и изучает лексикон и получает ясное указание куда сейчас нужно кликнуть.
Хорошо сделанная навигационная графика помогает пользователям. Такая графика обогащает диалог, предоставляя визуальный канал восприятия, который не мог бы быть получен за счет только лишь текста. Когда дизайнер использует правильные картинки - они улучшают взаимодействие с пользователем.
Графический контент
В то время как задачей Навигационной графики является направление пользователя к искомой информации, Графический контент предоставляет эту самую информацию.
Люди ищущие на Крейглисте (онлайн газета бесплатных объявлений) новое жилье должны определить какие из объявлений им стоит рассмотреть. Владелец недвижимости может загрузить фотографии интерьера и фасада.
http://www.uie.com/images/graphicswillhelp/craigslist-apartmentpics-cropped.png
Интерьеры недвижимости - это прекрасный пример графического контента на крейглисте.
Эти изображения - это графический контент, предоставляющий потенциальным съемщикам информацию, которую невозможно получить из текстового описания.
Лучший графический контент на сайте Демянскапомогает смотрящему получить ответ на конкретные вопросы. Люди, посещающие Диснейленд, например, могут захотеть спланировать оптимальный маршрут через тематические парки, таким образом, чтобы посетить свои любимые аттракционы в течении непродолжительной прогулки.
http://www.uie.com/images/graphicswillhelp/disneylandresort-maps-cropped.png
Карта Диснейленда не обладает достаточной детализацией чтобы быть графическим контентом.
Декоративная графика
В разделе кредитов на сайте банковского гиганта Ситибанк есть бросающаяся в глаза фотография людей, пожимающих руки.
http://www.uie.com/images/graphicswillhelp/citibankonline-linesoans-overview-cropped.png
Страница Ситибанк Кредиты с декоративной графикой, изображающей людей, пожимающих руки.
А вот в разделе кредитов на сайте Истерн Банка, единственым графическим элементом помимо логотипа банка оказалась маленькая картинка, связанная с ипотечным калькулятором.
http://www.uie.com/images/graphicswillhelp/eastern-mortgage-cropped.png
Будем ли мы относиться к Ситибанку с большим доверием из-за картинки с улыбающимися людьми, завершающими сделку рукопожатием.
Рукопожатие на странице кредитов Ситибанка - это то, что мы называем декоративной графикой. Она не направляет пользователя к другому контенту на сайте, так что это не Навигационная графика. В ней нет и никакой полезной информации, так что мы не назовем ее Графическим контентом.
Мы думаем что изображение рукопожатия предназначено для того чтобы передать какую-то важную нематериальную характеристику sst программы для общения в сети Интернет и , например как именно Ситибанк выдает кредиты. Дизайнеры рассказали нам, что они используют подобную графику когда они хотят чтобы сайт выглядел более профессиональным, дружелюбным или забавным. Как бы там ни было, дает ли использование декоративной графики тот эффект, который подразумевают дизайнеры?
Сайт Ти-мобайл заполнен множеством изображений популярной звезды Кэтрин Зэта-Джонс. Мы пронаблюдали за покупателями мобильных телефонов, пробирающихся через сайт. Они проявляли нарастающее раздражение каждый раз, когда появлялось ее фото вместо изображений, которые могли бы нести полезную информацию.
http://www.uie.com/images/graphicswillhelp/tmobile-cropped.png
Кэтрин Зэта-Джонс появляется повсюду на сайте Ти-мобайл.
Одна пожилая покупательница, заинтересованная в покупке телефона с крупными удобными клавишами, была очень разочарована когда не смогла различить размер кнопок ни на одной из фотографий. Когда она заметила что Кэтрин Зэта-Джонс держит именно тот телефон, что ей понравился, она рассердилась. "Она очень красивая девушка," сказала нам покупательница, "жаль только что я не могу разглядеть ее кнопочки".
Дизайнеры говорили нам, что они используют декоративную графику чтобы разредить страницу, уменьшая плотность текста. Это похвальное стремление. Действительно, бывает сложно работать с большими блоками текста. Однако выбранные наугад картинки этой квартиры посуточно в Новосибирске не очень то помогают.
В шаблоне сайта Университета Хельсинки есть большая зона для графики наверху. К несчастью, дизайнеры похоже не нашли полезных изображений, так что они просто заполнили эту зону случайными картинками. Например некоторые страницы украшены парой фиолетовых кресел, которые не сообщают нам ничего ни об университете, ни о содержимом страницы.
http://www.uie.com/images/graphicswillhelp/universityofHelsinki-cropped.png
Мы не уверены что именно пытаются сказать нам два фиолетовых кресла на сайте Университета Хельсинки.
Что именно дает декоративная графика для взаимодействия с пользователем? Мы пока точно не знаем. Мы не смогли найти ни одного доказательства что декоративная графика заставляют пользователя больше доверять сайту или что сайт кажется более профессиональным или дружелюбным с нею. Хоть она и может уменьшить плотность крупных текстовых блоков, есть более эффективные приемы компоновки для получения такого же результата.
Важность графики
На протяжении лет мы повидали множество бесплодных попыток сделать навигационную графику и графический контент правильно - картинки не делали того, что задумал дизайнер. Однако мы видели и хорошо сделанную графику обоих типов. Достаточное ее количество, чтобы быть уверенными в том что такая графика могут улучшить взаимодействие с пользователем.
Навигационная графика помогает пользователю найти информацию, которая ему необходима, зачастую так, как простой текст не смог бы этого сделать. Графический контент передает важную информацию, помогая пользователю достигнуть своей цели. Что же до декоративной графики, в лучшем случае она и не помогает, и не вредит.
Но графика не получается бесплатно, поэтому мы рекомендуем разработчикам, которые стремятся к эффективности в дизайне, сфокусироваться на навигационной графике и графическом контенте. Сопротивляйтесь искушению декоративной графики.
http://translated.by/
