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