– Если нужно расположить рядом очень контрастные цвета, не помещайте красный вместе с зеленым, а желтый вместе с синим.
– Не используйте серый цвет в тексте или схемах, которые несут важную информацию.
– Поскольку в глазах меньше всего рецепторов для восприятия синего цвета, то мелкий текст или схемы, выполненные тонкими линиями, лучше окрашивать в другой цвет.
– Некоторые сочетания цветов могут причинять головную боль, вызывать эффект дрожания картинки, появления фантомных теней и прочие оптические казусы восприятия у посетителей. Постарайтесь не использовать вместе цвета, расположенные друг напротив друга на цветовом круге (например, синий и красный), а также чистые цвета (например, чисто синий и чисто желтый).
Вы можете проверить, насколько хорошо дизайн учитывает интересы людей с нарушением цветовосприятия. Для этого сначала переведите каждую страницу сайта в оттенки серого и посмотрите, как она будет выглядеть. Затем оставьте лишь черный и белый цвета – в такой вид могут перевести сайт технологии, обеспечивающие специальные возможности для людей с нарушенным цветовосприятием. Выдержит ли ваша архитектура убеждения такие преобразования?
Цвет – важное условие привлекательности сайта. Но при разработке дизайна на него нельзя полностью полагаться, раз столько людей по-разному его воспринимают. Запомните слова известного художника и преподавателя Джозефа Альберса:
Если один человек скажет о цвете «красный», а еще пятьдесят человек его услышат, то в уме каждого из них появится свой оттенок красного. И можно с уверенностью утверждать, что все они будут разными.
Алекс Уокер, еще один гуру веб-дизайна, предлагает начинать процесс создания макета в цвете следующим образом:
Возьмите лист бумаги и выпишите прилагательные, которые подходят для характеристики вашей деятельности. Каков стиль вашей работы? Какое чувство вы хотите передать клиентам? Что можно сказать о целевой аудитории сайта? Перенесите на лист все слова, что всплывут в памяти. Из этого списка выберите пять, которые покажутся лучшими из лучших. Они-то и будут главным ориентиром при выборе цветов и изображений для сайта.
Посмотрите красивые иллюстрации с видами природы, выберите из них те, что по цветовой гамме близки вашему сайту. Отсканируйте самое подходящее изображение, затем, используя инструмент «Пипетка» любого графического редактора, перенесите основные цвета на элементы графического дизайна.
Цвета создают определенную атмосферу на сайте, вызывают разные чувства и вообще о многом говорят посетителю. Чтобы учесть эти моменты, попробуйте вызвать в воображении пять лучших слов, выбранных вами ранее. Какие цвета возникли перед вашим мысленным взором? Насыщенный зеленый? Желтовато- коричневый? Мягкие голубые тона? Волнующий красный? Выберите два или три, максимум четыре оттенка. Мы встречали бесподобные сайты, выполненные в одном цвете! Если вы оставите минимальное количество оттенков, то клиенты будут лучше воспринимать информацию и меньше уставать. В интернет-бизнесе всегда действует правило: чем меньше цвета, тем лучше.
Нельзя, чтобы оформление сайта сводилось к цветовому наполнению. Уокер напоминает нам, что существует шесть одинаково важных составляющих эффективного дизайна:
1) линия;
2) форма;
3) тон (светлый, темный, тени);
4) пустое пространство;
5) текстура/узор;
6) цвет.
Цвет может играть разную роль. Он помогает визуально организовать сайт, притягивая взгляд клиента к самой важной информации и делая менее заметным остальное содержимое страницы. Иногда стоит окрасить в разные цвета элементы меню первого, второго и прочих уровней. С их помощью можно привлечь внимание к различным характеристикам продаваемых продуктов, подсветить скидки на товар и выделить специальные предложения.
Прежде чем сделать первый шаг на пути к процветающему интернет– бизнесу, необходимо:
– определить, какой настрой несет в себе ваш бизнес;
– выбрать палитру из небольшого количества запоминающихся цветов;
– сделать цвет неотъемлемой частью дизайна;
– продумать, как использовать цвета для организации информации на сайте.
Главное – использовать цвет с умом. Ведь это очень мощный инструмент влияния на покупателя.
5. Макет на HTML
Закончив макет в цвете, можно приступать к подготовке HTML-документа. Здесь главное – определить, какие элементы дизайна следует перевести на язык HTML, а какие оставить в виде картинки. Это трудная задача, но именно здесь становится видно отличие между веб-дизайнером и художником, работающим в графическом редакторе. Хороший программист способен перевести на язык кода любой дизайн. Но если веб-дизайнер хорошо знает ограничения, налагаемые HTML, то он сможет создать такой сайт, в котором будут учтены все интересы пользователя. Вот что вам необходимо продумать:
– время загрузки;
– совместимость с разными браузерами;
– использование CSS для упрощения кода;
– включение в сайт таблиц с учетом порядка индексации ячеек поисковыми роботами;
– выбор шрифтов, позволяющих с легкостью читать текст с экрана.
Как достичь успеха среди всеобщих неудач
Когда менеджеров компании Newport News спросили, как им удалось добиться рекордных продаж по сравнению с другими магазинами модной одежды, они ответили, что все дело в новом подходе к представлению продукции на сайте.
Вместо того чтобы выводить на страницу одежду по категориям (рубашки, брюки, обувь и так далее), компания полностью перешла на показ коллекций товаров, каждая из которых собирается в соответствии с каким-нибудь модным трендом. Например, следуя последним тенденциям, продиктованным ведущими дизайнерами мира, компания представляет коллекцию Shades of Summer, в которую входят различные предметы одежды, не имеющие между собой ничего общего, кроме ярких расцветок.
Такой подход привлекает множество случайных покупателей. А продажа модной одежды как раз и рассчитана на то, что товар купят под воздействием импульса. Вряд ли кто-то просыпается, имея твердое желание приобрести красное платье с коротким рукавом. Впрочем, на сайте предусмотрено все необходимое и для тех пользователей, которые точно знают, чего хотят.
Менеджеры Newport News хорошо понимают, какой дизайн нужен бизнесу, рынку и покупателям. И их результаты говорят сами за себя.
Когда интернет-торговля только зарождалась, очень немногие сайты приносили прибыль. Почему? Потому что их владельцы не хотели тратить время на бизнес- планирование и разработку маркетинговой стратегии. Их не слишком заботило доверие клиентов и их насущные потребности. Они почти не уделяли внимания созданию контента и графического оформления, которые были бы интересны пользователю и убеждали его сделать следующий шаг. Вместо этого владельцы сайтов нанимали дизайнеров, программистов и ждали, что прибыль наконец покроет все расходы. Когда неудача становилась очевидной, они нанимали специалистов по юзабилити и надеялись, что те исправят все ошибки, допущенные ранее. Как правило, дело заканчивалось банкротством.
Специалисты по юзабилити наблюдают за поведением пользователей в лабораториях (то есть в непривычной для них среде), но не проявляют особого интереса к показателям веб-аналитики, которые как раз и дают статистически значимую информацию о поведении многочисленных посетителей на сайте. Однако лаборатория не имеет ничего общего с реальностью. Спрашивать пользователей, что они собираются делать, не имеет смысла – они и сами чаще всего этого не знают (например, человек говорит, что хочет правильно питаться, но все равно съедает больше, чем нужно). Наблюдать за поведением пользователя нужно в настоящих условиях, когда его отвлекает и с ним взаимодействует весь окружающий мир.
Например, однажды мы решили узнать, как влияет шрифт на конверсию сайта. Стандартные тесты свидетельствовали, что коэффициент конверсии от внешнего вида текста почти не зависит. Однако одновременно мы провели A/B-тестирование, которое оказалось более достоверным. Целевым группам были разосланы письма, набранные разными шрифтами. Также мы подготовили несколько версий сайта, и в каждой использовался свой шрифт. Оказалось, внешний вид текста довольно сильно влияет на коэффициент конверсии. Мы даже узнали, что, сменив в почтовой рассылке Arial на Comic Sans, можно увеличить продажи почти на 30 %.
Начертание текста редко имеет значение, однако его размер может запросто повлиять на конверсию.
Внешний вид текста должен соответствовать характеру повествования. В предыдущем примере содержание писем было простым и неофициальным. Шрифт Comic Sans очень подошел для того настроения, которое мы хотели создать.
Ниже представлены главные условия успеха сайта:
– юзабилити: важно;
– хороший код: необходим;
– продающий текст и дизайн: имеют решающее значение;
– равновесие между задачами бизнеса и потребностями клиентов: очень существенно;
– удовлетворение покупателей и прибыль сайта: бесценны.
Завоюйте любовь покупателя простотой своего сайта
Простота – один из главных принципов архитектуры убеждения. Ключ к успеху сайта – это не сложный, а, напротив, очень простой дизайн, однако создать его на самом деле очень нелегко (подозреваю, что вы и без меня отлично это знаете). Хорошо продуманная простота – это то, что определяет успех интернет- магазина. Вот несколько советов, которые, будучи воплощенными в жизнь, помогут посетителю облегчить работу с сайтом.
– Уменьшите время загрузки.
Хороший сайт грузится менее чем за 10 секунд. И поверьте, никто не станет ждать появления страницы больше 30 секунд. Вы хотите, чтобы сайт понравился почти всем пользователям?
– Посетитель должен сразу увидеть понятный и хорошо продуманный текст.
Попадая на сайт, пользователь ищет прежде всего нужные слова, а не картинки. Получив информацию к размышлению, он может подождать, пока загрузятся другие элементы страницы.
Используйте картинки только там, где это действительно необходимо и где нельзя обойтись текстовым описанием. Выбирайте минимальный размер файлов изображений, чтобы они быстро загружались.
– Обеспечьте простое и выдержанное в одном стиле меню навигации. Обычно пользователи успевают посмотреть две или три страницы сайта перед тем, как его
