Что не забыть, принимая макет сайта от дизайнера, или мелочей не бывает

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

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

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

Начинаем взаимодействовать с сайтом и «всплывают» все те места, про которые дизайнер «забыл» или, что хуже, «забил».

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

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

Итак, берем высланный дизайнером макет (сайта, страницы, приложения – нужное подчеркнуть), включаем режим «зануда» и поехали:

Что проверяем в макете сайта, принимая его от дизайнера

1. Файлы макета

   Если говорить кратко, их должно быть несколько. Один-единственный PSD-файл в папке с макетом – подозрительно. Но допустимо, если вы заказывали дизайн одной страницы (или вообще одного блока) без адаптивности и особых «изысков».

   В остальных же случаях папка с готовым дизайном содержит много интересного и нужного:

   

   Здесь мы видим не только PSD-шник, но и сопутствующие файлы – пока просто перечислим их, а затем пройдемся по каждому пункту:

   • Макеты для всех необходимых страниц

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

   • Макеты для адаптивности

     Если вы заказали адаптивный дизайн, то макеты будут, как минимум, в трех вариантах – под десктопы, под планшеты и под мобильные. Если нужны какие-то конкретные размеры экранов, обязательно указывайте их в ТЗ дизайнеру.

   • Макеты в формате JPG (или PNG)

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

   • Шрифты

     Если в макете используются нестандартные шрифты (читай «которых нет в Google Fonts»), то здесь должна быть папка с файлами этих шрифтов в форматах ttf, eot, woff. Также здесь может храниться шрифт с используемыми на сайте иконками (например, с IcoMoon).

   • Иконки в SVG

     SVG – это векторная графика для веба, такие иконки одинаково хорошо смотрятся как на десктопах, так и на мобильных (обычные растровые иконки в форматах jpg/png будут «размыты» на мобильных).

   • Дополнительные картинки и логотипы

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

   • Фавикон

     Если в ТЗ дизайнеру было оговорено создание favicon – проверьте его наличие.

   • Пояснительная записка

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

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

   • Гид по стилям (style guide)

     Style Guide – это дополнительный PSD-файл, в котором собраны все элементы разрабатываемого сайта (интерфейса), например, заголовки, кнопки, поля ввода, выпадающие меню, таблицы и т.д.

     Как правило, это редкость. Если вы хотите получить от дизайнера стайл гайд, нужно обязательно указать это в ТЗ – и вполне возможно, что за его создание дизайнер возьмет дополнительную плату. Хотя при разработке масштабных сайтов или приложений дизайнеру и самому не обойтись без стайл гайда.

   Теперь идем по этим пунктам подробно.

2. В макете для каждой страницы:

   1. Прорисовано поведение элементов при действиях с ними

      Что это за элементы:

      • Ссылки

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

        

      • Кнопки

        Обычное состояние, наведение мыши, нажатие кнопки (и так для каждого вида кнопок):

        

      • Меню

        Обычное состояние пунктов меню, при наведении мыши, активный пункт, выпадающее меню:

        

      • Табы (вкладки)

        Аналогично меню – обычное состояние, наведение мыши, открытый таб:

        

      • Разворачивающиеся списки или блоки

        Обычное состояние и развернутое; если кнопка «Развернуть» меняется – оба ее состояния:

        

      • Всплывающие подсказки

        Знак, обозначающий наличие подсказки, и сама подсказка:

        

   2. Прорисованы всплывающие (модальные) окна

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

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

      
      

   3. Прорисованы необходимые элементы форм

      • Основные элементы форм

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

        

        Проверьте, чтобы для элементов форм были прорисованы основные состояния:

        • Для текстовых полей: состояние по умолчанию и при фокусе (курсор в поле).

        • Для чекбоксов и радиокнопок: состояние по умолчанию и с выставленной галочкой.

        • Для кнопок: по умолчанию, наведение, нажатие.

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

      • Сообщения об ошибках

        Будут показываться, если не заполнено обязательное поле или поле заполнено с ошибкой – их тоже нужно отрисовать.

        

      • Сообщения после отправки форм

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

        

        Все эти элементы и их поведение дизайнер размещает в скрытых слоях в макете для конкретной страницы. Если вы проверяете макеты в формате JPG (а не в фотошопе), попросите дизайнера дополнительно сохранить макеты, где поведение элементов показано.

   4. Блоки страницы не завязаны строго на длину контента

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

      Например, здесь дизайнер вынес категории каталога товаров в горизонтальное меню:

      

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

      Такую ситуацию стоит продумать сразу – либо убрать категории в вертикальное меню, либо предусмотреть ссылку «Еще».

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

   5. Слои в PSD-макете подписаны и структурированы

      Если верстальщик получает PSD-файл с вот такой организацией слоев, его желание работать с макетом неизбежно стремится к нулю:

      

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

      

      Если у вас нет фотошопа, то открыть psd-файл для проверки можно в онлайн-редакторе, например, в Photopea.

3. Макеты для всех необходимых страниц

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

   В остальных случаях макетов будет как минимум два – главная страница и внутренняя (стандартная) страница.

   

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

   • Каталог товаров – список категорий, список товаров, карточка товара.

   • Прочие страницы интернет-магазина: корзина, оформление заказа, личный кабинет покупателя.

   • Список услуг.

   • Список новостей и отдельная новость (аналогично статьи, акции).

   • Страница 404-й ошибки.

   • Страница с результатами поиска и т.д.

   Проверьте, что все оговоренные в ТЗ макеты присутствуют.

4. Макеты для адаптивности

   Если доля посещений вашего сайта с мобильных устройств (планшетов и смартфонов) превышает 20-30% – без адаптивности вам уже не обойтись. Если сайт только разрабатывается, смотрите на целевую аудиторию – для людей до 35-40 лет выходить в сеть с мобильных (а иногда и только с них, вообще без десктопа) становится обыденностью.

   В случае разработки адаптивного дизайна каждый макет будет в трех вариантах:

   • для ширины экрана 320 пикселей (смартфоны, телефоны)

   • для ширины экрана 768 пикселей (планшеты, ноутбуки)

   • для ширины ширина экрана от 1200 пикселей (ноутбуки, компьютеры)

   
   
   

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

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

   

5. Шрифты

   Удобнее брать свободные шрифты, например, с Google Fonts. Какие плюсы – они легко встраиваются на сайт и грузятся с серверов Гугла (с ближайшего к пользователю сервера, что иногда выходит быстрее, чем грузить шрифты с самого сайта). За минусы можно опять же посчитать то, что они грузятся с серверов Гугла – а вдруг с Гуглом что случится и шрифт не будет загружаться – но это все-таки маловероятно. Как компромисс – с Google Fonts можно скачать файлы шрифтов и разместить их на своем сервере.

   Если дизайнер выбрал какие-то другие шрифты (и за платные лучше платить, а не пиратствовать) – нужно загрузить в отдельную папку файлы этих шрифтов в форматах ttf, eot и woff.

   В случае использования в макете иконок из готового иконочного шрифта – его тоже нужно приложить к макету.

   

6. Иконки в SVG

   Если на сайте будут использоваться иконки в обычном PNG-формате, то на многих мобильниках такие иконки окажутся «размытыми». Качество теряется из-за того, что мобильное устройство пытается увеличить картинку в несколько раз (это происходит из-за повышенной плотности пикселей экранов мобильных). Наиболее простой выход – использовать иконки в SVG-формате. Это векторный формат, поэтому он масштабируется без проблем.

   

   Также svg-иконки можно сохранить в иконочный шрифт – в таком варианте тоже не будет проблем с размытостью.

   Единственное замечание – использовать SVG стоит только для простой графики (иконки, логотипы), так как сложное изображение будет слишком много «весить».

7. Дополнительные изображения и логотипы

   Если в макете есть слайдеры, фотогалереи, товары и прочие списки с изображениями – картинки для них должны лежать в отдельной папке и в единых размерах.

   Например, в папке «Слайдер в шапке» четыре картинки, каждая картинка размером 1920 на 600 пикселей, с необходимой коррекцией яркости и пр. А в папке «Партнеры» все 30 логотипов партнеров для соответствующего слайдера (в макете их будет показано штуки 4, но верстальщику нужны они все).

8. Фавикон

   Если заказываете разработку или редизайн сайта, не забудьте прописать в ТЗ создание favicon – иконки для вкладки в браузере. Иначе получите такую ситуацию:

   

   Хорошо, если иконка будет в двух форматах:

   • Стандартный favicon.ico (64 на 64 пикселя):

     

   • Иконка для мобильных – apple-touch-icon-precomposed.png (114 на 114 пикселей):

     

9. Пояснительная записка

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

   Также полезны комментарии вида:

   • «Такие-то ссылки открываем в новом окне, а такие-то – в модальном»

   • «После отправки формы выдаем такое-то сообщение»

   • «По клику на этой кнопке прокручиваем страницу к вот этому блоку»

   • «Подменю разворачиваем по наведению мыши на десктопах, а на мобильных – по клику» и т.п.

10. Гид по стилям (style guide)

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

    
    

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

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

Итог

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

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

Дарья Севостьянова

Дизайн и SEO

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

Встречают по одежке

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

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

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

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

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

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

Рационализм в дизайне

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

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

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

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

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

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

Столкновение интересов

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

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

Также не стоит использовать Flash-технологии в избытке. Хотя сейчас современные поисковики успешно индексируют Flash, но не все платформы поддерживают его. Выход – использование альтернативных технологий HTML5, которые более предпочтительны с точки зрения SEO, либо дублирование таких элементов обычным HTML-кодом.

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

Выводы Удачный дизайн сайта – одна из составляющих его успеха, поэтому ему надо уделить немало внимания. Но при этом не переусердствуйте – сточки зрения внешнего вида коммерческий ресурс должен быть удобным и привлекательным, а не перегруженным сайтом для демонстрации возможностей крутого дизайнера. Также следите за тем, чтобы различные технологии не вредили оптимизации сайта – лучше отказаться от них и найти менее привлекательную, но более удобную альтернативу. В качестве пособия по дизайну читайте книгу Якоба Нильсена , а также смотрите ток-шоу о дизайне и юзабилити «Фактор человека» на канале SeoPult.TV.

На что люди обращают внимание при просмотре сайта

Перевод статьи 29 Eye-Tracking Heatmaps Reveal Where People Really Look, авторы: Гус Лубин и Хэйли Гудзон.

---

Говорят, что глаза могут рассказать всё. Теперь это легко понять благодаря технологии отслеживания внимания. Отслеживание движений глаз, так называемый Айтрекинг, может дать нам полезные идеи для рекламы и дизайна, поможет узнать что-то новенькое о человеческом поведении.

Несколько наших любимых примеров:

1. В рекламе Dolce & Gabbana большинство людей фокусируются на лице Скарлетт Йоханссон:

   

2. На этих анимациях хорошо прослеживается направление взгляда за изображением, отличающимся от привычного:

   
   
   

3. Люди сразу обращают внимание на мясо. Затем читают этикетку и проверяют наклейку:

   

4. Это изображение показывает различие мужского и женского восприятия. Мужчины больше рассматривают изображение, в то время как женщины читают рекламу:

   

5. Обратите внимание, мужчины совсем не смотрят на обувь:

   

6. При просмотре монументальной росписи «Тайная вечеря» люди в первую очередь смотрят на изображение Иисуса и апостолов. А также обращают внимание на задний план: пространство между двумя задними окнами:

   

7. Покупатели в супермаркете чаще интересуются ценами:

   

8. Эта сюжетная линия показывает, как люди осматривают полки с шампунем:

   

9. Кажется никого не заботит Porsche. Все предпочитают читать:

   

10. Внимание мужчин сосредоточено больше на торсе бейсболиста, в отличие от женщин, которые смотрят только на лицо. Цветом обозначена длительность взгляда, от черного к ярко-красному (черный – низкая степень фиксации взгляда, красный – самый длительный контакт):

    

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

    

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

    

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

    

14. На этой версии домашней страницы The New York Times расположено много элементов. В борьбе за внимание выигрывают изображения и выделенные текстовые блоки:

    

15. Бутылка воды оказалась в центре внимания рекламы Smartwater, но люди не остались равнодушными к плечу модели:

    

16. Реклама Sunsilk доказывает, что мало поместить просто красивое лицо модели рядом с продуктом, но также важно направление ее взгляда:

    

17. Бутылка с газировкой так же привлекательна, как и женское лицо:

    

18. Обратите внимание, как много людей сфокусированы на ювелирных украшениях:

    

19. На этом изображении показана потенциальная проблема баннерной рекламы, «баннерная слепота»:

    

20. В Google большинство взглядов сосредоточены на первой пятерке объявлений поисковой выдачи. Всё остальное на странице теряется:

    

21. На Facebook фотографии притягивают больше внимания:

    

22. А вот на что люди смотрят во время футбольного матча. Они ориентированы на игрока, бросающего мяч, и на область его прицела:

    

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

    

24. Женское внимание, как правило, сосредоточено на лице и торсе:

    

25. В то время как мужчины смотрят ниже:

    

26. На что люди обращают внимание, когда смотрят на улицу Вегаса? Их взгляд направлен далеко вперед, затем возвращается и поворачивает левее:

    

27. За 6 секунд просмотра резюме работодатели сосредотачиваются на имени, текущих и прошлых должностях, датах и названиях мест обучения:

    

Заключение от автора перевода

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

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

Это наталкивает на мысль, что мужчины интуитивно сравнивают себя и мужчину на плакате. Но разглядывая представительниц противоположного пола, мужчины внимательны только к женщинам, им не интересна женская реклама. Что правильно: зачем мужчинам женские товары?

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

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