потребности покупателей, вы способствуете увеличению конверсии.
3. Графический макет
Закончив набросок сайта, приступайте к созданию макета в одном из графических редакторов (Photoshop, Illustrator, Freehand, Visio или любом другом). Сейчас ваша задача – сделать сайт красивым. В конце концов, почти половина пользователей (46,1 %), участвующих в исследованиях Stanford Persuasive Technology Lab, оценивают надежность сайта исходя из первого впечатления, которое производит дизайн.
Создавая макет в цвете, помните, что сайт – это интерактивный инструмент убеждения, а не яркий рекламный фантик. Дизайн сайта преследует следующие цели:
1) оставить впечатление об интернет-магазине в памяти посетителя;
2) придать сайту профессиональный вид;
3) способствовать убеждению клиента.
Свидетельствует ли каждый элемент дизайна о надежности вашей компании и высоком качестве товаров? Способствует ли он убеждению посетителей?
Дизайнеры ненавидят всякого рода ограничения. Вместе с тем они чаще всего не знают, какие приемы способствует высокой конверсии. При этом большинство неэффективных сайтов преподносится как «последнее слово в дизайне». Но если вы объясните, что дизайн в интересах конверсии приносит огромную пользу сайту и ничуть не ограничивает творческий полет мысли, дизайнер обязательно возьмет этот подход на вооружение. Ниже представлены основные правила, которым нужно следовать при создании графического макета.
Один стиль для всех страниц сайта
Часто бывает, что на сайт нельзя зайти, не посмотрев интро-страницу (флеш– ролик). Считается, что она радует глаз и способствует популярности бренда. Но интро-страница по стилю резко отличается от всех остальных страниц сайта, и это сбивает посетителя с толку. Если человек зашел на сайт под воздействием минутного настроения, то, просматривая интро-страницу, он наверняка забудет, что хотел найти. Зачем нужно это препятствие на пути к покупке? Иногда на интро- странице у посетителя спрашивают, что он собирается делать на сайте. Но обеспечить каждому пользователю подходящий сценарий – задача, лучше всего решаемая средствами информационной архитектуры.
Иногда страница с оформлением заказа выглядит совсем иначе, нежели весь сайт (такое часто бывает при использовании готовых шаблонов, предоставляемых хостинг-провайдером). В этом случае лучше убрать с нее ненужные элементы дизайна, иначе пользователь может просто опешить от столь резкой перемены и отказаться от покупки.
Контраст
Изображение либо сливается с содержимым страницы, тем самым усиливая общее впечатление, либо выделяется на ее фоне, привлекая внимание к нужному элементу. Каким образом дизайнер может повлиять на решение посетителя? С помощью контраста! Именно благодаря ему взгляд пользователя останавливается там, где нужно. Контраст помогает интуитивно понять, что делать дальше. Робин Вильямс в своей книге «Дизайн для недизайнеров»[16] пишет:
Читатель ни в коем случае не должен напрягаться, чтобы понять, куда смотреть в первую очередь, как организован материал, какова цель сайта. Все это он должен осознать в первую же секунду. И совсем не сложно сделать так, чтобы страница при этом выглядела красиво.
Вильямс перечисляет шесть категорий контрастности:
1) размер: большой – маленький;
2) толщина: толстая – тонкая;
3) структура: чередование толстых и тонких штрихов;
4) форма: прямоугольная – круглая;
5) начертание: прямое – наклонное;
6) цвет: теплый – холодный.
Призывы к действию должны выделяться на общем фоне. Не заставляйте посетителя гадать, что делать и куда смотреть. Сможете ли вы увидеть призывы к действию на веб-странице, отойдя на два метра от компьютера? Не подумайте, что мы шутим.
Тянущийся или фиксированный дизайн
Ваши покупатели пользуются разными браузерами и устанавливают разное разрешение экрана. Дизайнер никак не может повлиять на их действия. Нужно это понять и принять все необходимые меры для оптимального отображения сайта на любом компьютере. (Но не пытайтесь получить контроль над всем. Это только навредит делу.) Прежде всего решите, какой дизайн больше подходит вашему сайту: тянущийся (резиновый) или фиксированный. У каждого есть свои недостатки. Сайт с фиксированным дизайном всегда выглядит одинаково. Но некоторые посетители читают вашу веб-страницу из окна браузера, которое может быть меньше или больше, чем вы предполагаете. Поэтому они увидят только часть страницы, а на широкоформатном экране сайт покажется крошечным. Тянущийся дизайн автоматически приводит страницу в соответствие с размерами экрана или окна браузера. Однако если сильно сжать или растянуть окно, сайт будет выглядеть довольно нелепо. Хорошо продумайте, какой вариант вам больше подходит, но в любом случае проверьте, как будут выглядеть страницы сайта при изменении размера окна, а также в разных браузерах и на разных мониторах.
Помните: в Интернете пользователь может делать все, что захочет
Интернет – это совместно используемая, свободная информационная среда. Посетители не только сами решают, что смотреть, но и как смотреть. Пользователь может многое:
– выбрать размер страницы и разрешение экрана;
– изменить размер шрифта;
– отключить показ картинок на сайте;
– выбрать, отображать ли цвета вообще (некоторые браузеры дают возможность изменить цветовую палитру);
– просматривать сайт с различных устройств, в том числе с экрана компьютера (каждая операционная система может отображать сайт по-своему), смартфона, сотового телефона. И у каждого устройства есть свои особенности вывода графики.
Вы должны быть уверены, что сможете убеждать пользователя, даже если дизайн сайта будет выполнен в черно-белом цвете. Нельзя полностью полагаться на цвет. Он может добавить убедительности сайту, но вряд ли донесет до пользователя главную мысль.
Воспринимайте дизайн в целях конверсии как трудную, но интересную задачу, а не как набор правил, сдерживающих творческий порыв. Внешний вид сайта влияет на чувства посетителей. А это, как все мы знаем, и есть главное условие убеждения.
Эффективность беглого просмотра
Вы долго трудились и в итоге составили убедительный продающий текст. Как же сделать, чтобы посетители его прочитали? Законы рекламы здесь уже роли не играют, мы подошли к вопросу о юзабилити сайта. Специалисты в этом случае используют два расплывчатых термина: беглое прочтение и быстрый просмотр (skimming and scanning).
Если пользователь не получит нужных сведений сразу, как только попадет на сайт, он вряд ли станет искать их дальше. Это нас не устраивает. Между беглым прочтением и быстрым просмотром есть много общего, но они по– разному влияют на удобство работы с сайтом, и рассматривать их нужно отдельно. Изучив эти термины, мы также сможем лучше понять результаты некоторых серьезных исследований в области юзабилити сайта.
Прежде чем думать, как заинтересовать посетителя в первую минуту нахождения на сайте, необходимо разобраться, в чем состоит разница между этими двумя понятиями. Согласно американскому словарю идиом:
Scan (просмотреть) – быстро и методично просматривать; наскоро пролистывать.
Skim (бегло прочитать) – быстро и поверхностно прочитать, рассмотреть или обдумать; бросить взгляд.
Эти слова похожи, но смысл у них разный. Оба действия производятся с целью сбора информации. Люди совершают их быстро, не задумываясь. Но у каждого действия свой механизм и своя задача.
Давайте проведем аналогию. Представьте, что находитесь на Диком Западе в незнакомой местности. Ваш конь поднялся на вершину холма. Впереди раскинулась бескрайняя прерия. Какая опасность может вас там подстерегать? Вы пытаетесь охватить взглядом огромное пространство. Это аналог быстрого просмотра веб- страницы. Слева от вас густые заросли, спереди – смутные очертания озера, слабый дымок струится над невысоким холмом, недалеко справа виден деревянный частокол. Осмотрев местность и не найдя ничего подозрительного, вы пускаете лошадь рысью. На заборе белеет какой-то плакат. Это объявление: «Разыскивается живым или мертвым».
Спешившись и подойдя ближе, вы бросаете взгляд на текст, пробегаете глазами самые заметные слова. Вы хотите знать, стоит ли тратить на него свое время. Это аналог беглого прочтения текста на веб-странице.
Прибыв на сайт, пользователь сначала быстро просматривает страницу. Он старается охватить ее взглядом и понять, туда ли он попал, куда хотел. Глаза останавливаются лишь на самых заметных элементах. Посетитель думает, это ли он ожидал здесь увидеть. Вместе с тем он оценивает сайт в целом: читаемость текста, организацию меню и удобство работы. Здесь на первый план выходят размер шрифта, расположение элементов на странице и цветовое оформление. Вам нужно, чтобы клиент как можно меньше времени потратил на поиск и сортировку информации и как можно быстрее включился в процесс конверсии. Если он найдет отличные ориентиры, то сразу поймет, что попал туда, куда хотел; если же ему будет сложно разобраться в обстановке, он «запрыгнет обратно в седло» и «умчится» на другой сайт.
Беглое чтение – второе по порядку, но не менее важное действие. Достаточно изучив окружающую местность, пользователь начинает интересоваться текстом. Он еще не готов остановиться и полностью прочитать страницу, поскольку не уверен, что дело того стоит. Для начала он пробегает глазами содержимое страницы. Взгляд останавливается на ключевых словах и заголовках, они направляют мысли посетителя в нужное русло. На данном этапе ключевые слова, маркированные списки, первое и последнее предложения каждого абзаца, шрифты и ссылки имеют первостепенное значение.
Зная особенности быстрого просмотра и беглого прочтения, вы сможете сделать продающий текст более убедительным и улучшить сайт в целом.
Обеспечьте посетителю максимальное удобство в первые секунды пребывания на сайте. Но помните: не все сведения для него одинаково важны. Вы расположили информацию на сайте именно там, где покупатель ожидает ее увидеть? Везде ли, где необходимо, есть призывы к действию? При создании интернет-магазина подумайте о том, чтобы разместить кнопку «Добавить в корзину» в нескольких местах. Она обязательно должна присутствовать после длинного текста с описанием товара.
Следуйте за курсором
Вы можете столкнуться со следующей проблемой. Нажав на ссылку с призывом к действию, пользователь попадает на новую страницу. При этом курсор
