Александр Левитас - бизнес-консультант и бизнес-тренер

«Я знаю, что Ваш бизнес может приносить больше денег»

Александр Левитас

Бизнес-консультант и бизнес-тренер

Рассылка «Почему Ваш бизнес-сайт не работает?»

Выпуск №19 (12-07-2005). Copyright © Александр Левитас

Добрый день, уважаемый читатель!

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

Разбор сайта Astrohit.Com
Часть вторая

Шаг четвертый. Мусор.

Вверху страницы размещены две ссылки - «добавить в избранное» и «сделать стартовой». Почему то неопытные вебмастера обожают размещать эту пару ссылок на своих сайтах. Если ссылка «добавить в избранное» еще имеет хоть какой-то смысл, то вторая в 99% случаев выглядит как издевательство над посетителем. Подумайте сами, с чего бы ему всякий раз, когда он заходит в Интернет, начинать свою работу именно с Вашей страницы? Это имеет смысл для новостных сайтов, тематических порталов, поисковых машин, может быть, для почтовых сайтов. Если же Вы на своем сайте продаете холодильники или предлагаете фотосъемку свадеб и похорон, нет никакой причины наведываться к Вам каждый день. Поэтому я бы на месте владельца сайта отказался от этой ссылки, а может и от обеих. Или же, наоборот, разместил бы на сайте астрологические прогнозы «на сегодня» или «на завтра», чтобы тем самым дать потенциальному клиенту причину заходить на «Астрохит» снова и снова.

Шаг пятый. Внешний вид. Цвета.

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

Какие цвета годятся для сайта астрологии? Всяко не то сочетание зеленого, желтого и бежевого, которое можно увидеть на сайте сейчас - думаю, если бы кто-нибудь провел опрос о предпочтительных цветах, эти три оказались бы в самом конце списка. Мне кажется, что наиболее ассоциирующиеся с астрологией цвета - это тёмно-синий цвет, традиционно ассоциирующийся с мудростью, «мистический» фиолетовый цвет и, может быть, голубой цвет неба. Ну и, разумеется, черный там, где это нужно. С этой точки зрения мне куда больше нравится цвета, использованные в шапках сайтов www.astrolog.ru и www.junona.org. Только, разумеется, основной текст сайта должен быть чёрным на бёлом фоне (или же цвета текста и фона должны приближаться к чёрному и белому), а тёмные тона лучше оставить для шапки сайта, заголовков, меню и т.п.

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

Шаг шестой. Внешний вид. Форма.

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

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

Я считаю, что владельцу сайта стоило бы переделать страницу так, чтобы новый дизайн хотя бы отчасти был основан на кривых линиях, как это сделано на сайтах www.classen.ru и www.brussel.ru. Хочу особо подчеркнуть, что я ни в коем случае не предлагаю заимствовать или копировать дизайн этих сайтов, а лишь предлагаю их как пример «не совсем прямоугольного» дизайна. Если же нет возможности столь кардинально изменить дизайн, проблему можно попытаться решить за счет скругления углов у прямоугольных блоков, как это сделано на сайтах www.publicplace.ru или www.blogger.com, а также за счет правильного использования пустого пространства.

Шаг седьмой. Внешний вид. Пространство.

Мало того, что страница сайта astrohit.com составлена из прямоугольников - так эти прямоугольники ещё и «браво и плотно сомкнули ряды, как пули в обойме, как карты в колоде». В результате на странице банально не хватает «воздуха» - пустого пространства.

«Задыхаюсь! Дайте воздуха!»
Copyright © 2005, Александр Левитас

Как Вы думаете, чем (кроме качества бумаги) в первую очередь отличается страничка дешевой рекламной газетенки из серии «Просьба перед использованием прочитать» от страницы более респектабельного издания того же формата?

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

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

Взгляните на эти примеры:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Пример 1: Мало «воздуха»

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Пример 2: Рамки съедают остатки «воздуха»

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Пример 3: Достаточно «воздуха»

Как видите, текст, в котором не хватает «воздуха», читать довольно тяжело. А плотно прилегающие к тексту рамки лишь усугубляют проблему, «съедая» остатки «воздуха».

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

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

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

Вот так, например, можно показать, что заголовок логически относится к следующему за ним абзацу:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Неправильно
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.

Правильно

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.

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

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

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

Об авторе: Александр Левитас (a-l@kursy.ru), разработчик сайтов с 12-летним опытом, даёт консультации по повышению прибыльности коммерческих сайтов, а также ведёт рассылку «Почему Ваш бизнес-сайт не работает?», в которой разбирает проблемы бизнес-сайтов, принадлежащих подписчикам рассылки.

Если Вы владелец сайта, рассылки или бумажного СМИ, и Вы хотите разместить у себя эту статью - Вы можете это сделать при соблюдении двух простых условий:

  • Сохраните текст статьи неизменным (включая абзац "Об авторе" в конце статьи). Если Вы публикуете статью в Интернете, пожалуйста, сохраните также действующие ссылки.

  • Сообщите мне о размещении статьи у Вас.

Как со мной списаться

Пишите мне на адрес a-l@kursy.ru. Если же письмо осталось без ответа или вернулось (что иногда случается из-за ошибок спам-фильтров), Вы можете послать мне письмо через форму на этой странице - такие письма я получаю всегда.

Пишите мне. Предлагайте свои идеи для рассылки. Делитесь своим опытом. Задавайте вопросы. Рассказывайте о себе и своём бизнесе. Пишите!

Подпишитесь бесплатно на эту рассылку

Вам понравились мои советы? Хотите бесплатно подписаться на мои электронные газеты? Сделайте это прямо сейчас! Отметьте галочками названия тех электронных газет, которые Вы хотите получать, укажите свой адрес электронной почты - и нажмите кнопку «Подписаться».

Почему Ваш бизнес-сайт не работает?
Боевые говоруны
Школа продаж Левитаса
Больше денег от Вашего бизнеса!

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

Всего доброго!

С уважением,
Александр Левитас,
бизнес-консультант и бизнес-тренер.

Если Вы хотите нанять меня для подробного платного анализа Вашего бизнес-сайта – пожалуйста, не забудьте ответить в своём письме на следующие вопросы (без этой информации я едва ли смогу Вам помочь):
  • Адрес сайта?
  • Какова главная задача сайта?
  • Каких людей Вы хотите привлечь на сайт?
  • Какие конкретные действия они должны совершить в результате посещения сайта?
  • Являетесь ли Вы владельцем или менеджером сайта?
  • С какими проблемами Вы столкнулись?
  • Что Вы делали или делаете сейчас для решения этих проблем?
Анализ будет касаться как дизайна сайта, так и его эргономичности (юзабильности), эффективности продающих текстов, оптимальных способов рекламы и так далее.

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