Виды графики на сайте (типы картинок, изображений)

Подпишитесь на ленту или по электронной почте:

Вперед!

Все изображения (т.е. графика) на сайте делятся на 5 типов: тематические, маркетинговые, структурные, контентные и иконные.

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

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

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

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

Виды графики

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

1. тематическая графика: применяется для передачи тематики и ассоциации, схожей с содержимым
2. маркетинговая графика: применяется для усиления и продвижения товара, бренда
3. структурная графика: разделяет и группирует части структуры страницы
4. контентная графика (или графика содержимого): применяется в контексте содержимого сайта
5. иконная графика: символизирует действие или объект

Теперь подробнее (но все еще кратко) о каждом виде картинок.

Тематическая графика

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

Пример тематической графики на сайте TPK.ua:

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

Тематическая графика очень часто используется в т.н. конкурентной рекламе (англ. competitive advertising), которая используется для склонения потребителя выбрать именно этот продукт/услугу, а не иную из известного списка больших игроков. Все достаточно известные компании зачастую выбирают по объективным причинам радостные лица: им не надо рассказывать о своих услугах, о них и так уже все знают. Их главная цель — сыграть на эмоциях, склонить к продаже любым путем. Именно поэтому мы видим ролики перешептывающихся девушек в рекламе McDonalds, улыбающиеся портреты на рекламе BMW и т.п. Иными словами, когда компания известная, она будет применять тематические изображения на сайте как основной инструмент склонения пользователя к конвертации в клиента: «дай нам денег (за строительный инструмент, канализационные работы, азартные игры) и будет радость вам!»

Но тематическая графика доступна и в совершенно другом формате, когда она применяется для реальной ассоциации, а не фиктивной.

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

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

Маркетинговые изображения

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

Пример маркетинговой графики на сайте Korrespondent.net:

Все, что касается рекламы, саморекламы, скрытой- или нестандартной рекламы — это примеры маркетинговой графики.

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

В маркетинговых изображениях может применяться изображение тематическое.

Структурные картинки

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

Пример структурной графики на сайте Vilka.com.ua:

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

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

Структурная графика более других видов картинок связана с принципами Гештальта.

Контентная графика

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

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

Иконная графика

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

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

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

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

Пример иконной графики в глобальной навигации сайта Est.ua:

Вывод

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

Что дальше?

1. Закажите юзабилити услуги через простую форму обратной связи.
2. Читайте другие статьи: Словарь исследователя поведения пользователей (ч. 3) Первый юзабилити-семинар Humanize it состоялся День Google в Украине: необычный отчет от посещения	3. Подпишитесь на ленту или по электронной почте: Вперед!