Почему Ваш бизнес-сайт не работает?

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

Я вернулся из очередной поездки – на этот раз в Азербайджан. Мне и раньше доводилось бывать в Баку, но предыдущие поездки были связаны с участием в международных чемпионатах по «Что?Где?Когда?», а на этот раз я проводил там семинары по партизанскому маркетингу и по личной эффективности руководителя.

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

Моя книга снова в продаже

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

А счастливые обладатели книги прислали мне кучу историй о том, как книгу зачитывали, крали с рабочего стола, отбирали начальники, перекупали за тройную цену коллеги, как целым отделом записывались в очередь «на почитать», как ксерили её... вот разве что от руки не переписывали. И ещё – истории о том, как удалось поднять свои доходы на 20%, 40%, 90% и даже 150%, использовав приёмы из книги.

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

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

P.S. Новинка для занятых людей, у которых нет времени читать книги – специально для них издательство выпустило аудиоверсию книги в MP3 – восемь с половиной часов полезных советов по рекламе, продажам, увеличению суммы покупки, удержанию клиентов и так далее. Слушая этот диск в машине по дороге в свой офис или магазин, всего за несколько дней Вы сможете изучить около двух сотен приёмов увеличения прибыли.

Разбор сайта «RusTalk»

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

Сайт «RusTalk»

Содержание

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

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

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

Рекомендации: не лениться и на входной странице подробно объяснить, что речь идёт о системе, предназначенной для коммерческих сайтов, и позволяющей менеджеру, обслуживающему клиентов, общаться с посетителем сайта в режиме реального времени, что гораздо удобнее обычных «Наш телефон» или «Напишите нам». Дать перечень преимуществ этого способа перед обычными: телефоном, ICQ и электронной почтой – и тут же перевести эти преимущества на язык клиентской выгоды, рассказав о том, какую конкретную пользу можно получить от использования этой системы.

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

Рассказать о том, кто вы такие, чем занимаетесь... Одним словом, объяснить, почему вам можно доверять.

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

Доменное имя

Проект находится по адресу http://rustalk.net/ – несмотря на русскоязычность сайта, его зачем-то засунули в доменную зону .net вместо того, чтобы использовать напрашивающееся .ru

Почему это плохо? Дело в том, что русскоязычные пользователи Интернета привыкли искать русскоязычные же сайты в зоне .ru, так что набирая адрес по памяти, они более чем в 90% случаев будут набирать rustalk.ru – и попадут на сайт, состоящий из объявлений вроде «Simple Easy Ways To Talk Dirty To Your Woman During Hot Sex».

А те, кто не бросит поиски после такой неудачи, выберут в качестве второго наиболее вероятного варианта... правильно, они выберут сайт rustalk.com – и смогут полюбоваться фотографиями спортивных автомобилей.

Только самые настойчивые доберутся до правильного варианта rustalk.net и попадут на интересующий их сайт. Но пока это произойдёт, значительная часть менее целеустремлённых людей отсеется по дороге.

Рекомендация: выкупить для проекта доменное имя в зоне .ru. Если такой возможности нет – поскольку проект стартовал совсем недавно, стоит взвесить изменение его доменного имени на какой-нибудь вариант, который можно будет зарегистрировать на себя в зоне .ru. А ещё лучше – сразу в нескольких зонах: и в .ru, и в .com, а возможно, и в .net с .biz

Название

По какой-то глубоко непонятной мне причине создатели проекта, предназначенного для русскоязычной части Интернета, дали своему детищу имя на английском – «RusTalk». Возможно, для того, чтобы оно совпадало с доменом rustalk.net

Само по себе это не страшно. Любой, кто изучал английский хотя бы на уровне пятого класса сельской школы, без труда переведёт корни «Rus» и «Talk» на русский язык. Но вот дальнейшие действия создателей сайта ставят меня в тупик: они с упорством, заслуживающим лучшего применения, называют своё детище словом «Русток»: «Добро пожаловать на Русток», «С помощью программ Рустока...» и т.п.

С чем ассоциируется у русскоговорящих слово «Русток»? Росток, листок, мосток, водосток... Одним словом, с чем угодно, но не с высокими технологиями и не с разговорами. Бессмысленное слово, звучание которого тоже не способствует нужным ассоциациям. Чем такое название поможет продвижению проекта?

И, наконец, сколько человек из ста, услышав или прочитав слово «Русток», смогут правильно набрать адрес сайта? Полагаю, добрых три четверти отправятся прямиком на rustok.ru или на rustok.com, а ещё половина оставшихся – на rustoсk.ru

Рекомендация: всегда, во всех текстах называть свой проект только по полному доменному имени (английскими буквами) и никак иначе. Если адрес домена не будет изменён, следует ссылаться на проект только как на «RusTalk.Net» либо «rustalk.net» и избегать написания русскими буквами, а тем более в русской транскрипции.

Удобство для пользователя

Сайт достаточно понятен, навигация простая.

Есть значительный перевес элементов оформления над содержанием. Текст мелкий и слепой, зато графика, в основном состоящая из огромных кнопок и фоновых геометрических фигур (овалов и скруглённых параллелограммов) крупная.

На головной странице есть угадайка для посетителя: из трёх одинаковых на вид «кнопок» одна – причём находящаяся как раз там, где ожидаешь ссылку  – просто картинка.

Рекомендации: сделать содержание и ссылки более заметными, а оформление – наоборот. Если вам нужна эта крупная левая колонка на головной странице, то не стоит её повторять и на остальных, особенно тематических, где главное – содержание, а не продолжение саморекламы. Сделайте её меньше и скромнее везде, кроме головной страницы. Можно добавить контактную информацию на головную страницу. Добавьте к неработающей «кнопке» на головной странице ссылку, либо уберите эту кнопку совсем – у вас и так уже там есть стрелка.

Совместимость

Совместимость достаточная, но не без огрехов.

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

Сайт в разрешении 800 на 600 точек безобразно режется прямо по текстовой колонке:

Дизайнер рассчитывал на ширину окна не менее 980 пикселей и не предусмотрел никакого запасного варианта для меньшего экрана.

Сайт на мобильном телефоне читается почти хорошо, только левая колонка заняла три-четыре первых экрана:

Однако текст, сделанный графикой, искажён:

На печати сайт не имеет явных искажений, но кроме текста печатается и вся рекламно-ссылочная левая колонка.

Страшный недочёт – чрезмерное использование изображений вместо текста. Вот вид сайта без изображений:

Комментарии тут, я полагаю, уже не нужны. Ни один текстовый браузер этот сайт не покажет и ни один голосовой не прочитает. А также его не разберёт Google.

Рекомендации: после перехода с таблиц на CSS, сделать версии CSS для печати и мобильных устройств. Версия для печати должна скрывать левую колонку и оставлять только логотип (желательно уменьшенный) и собственно текстовое содержание страницы. Хорошо, если версия для мобильных устройств будет показывать левую колонку после содержания или вообще не показывать. Заменить графику на текст везде где только возможно, особенно в ссылках.

Oформление

Оформление на тройку. Текст везде, кроме головной страницы, мелкий. Явный перевес оформления над содержанием.

Композиция сумбурная, особенно на первой странице:

Композиции, собственно, просто нет – «накидано». У дизайнера явные проблемы с пустым местом. Он им не пользуется, как полагается, для разграничивания материала и ведения глаза по странице. Он его, похоже, боится. Всё, что было, он рассовал куда попало. Отсюда и вбитая влево от слогана подпись, и связанные визуально, но никак не связанные по смыслу меню и кнопка регистрации, и т. п.

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

Результат – при достаточно большом окне всё на странице видно сразу, но в виде этакого тетриса. Ничего не понять.

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

Я не уверен, что именно на странице – логотип. «Кнопка» с надписью «RusTalk» или стрелка с надписью «превращаем»? Логотип должен быть ясный. Или хотя бы выделяться из общего фона графики.

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

Также явно злоупотребление сливным текстом без межстрочного просвета. (Господа, ваш дизайнер – не Родченко. Что тому было можно, вам делать не стоит. Этот эффект делается не так, не в таких случаях, и не таким шрифтом.)

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

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

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

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

Сама светотень сделана топорно. Явно руками, и явно небрежно.

Рекомендации: переверстать всё немедленно. По логике. По сетке. С грамотными пробелами и выравниваниями. Чтоб всё было видно сразу и друг другу не мешало.

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

Остановитесь на одном стиле кнопок и стрелок, а не на трёх.

Графику дать профессионалу переделать под корень. То, что у вас есть, разит работой младшей секретарши.

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

Tехническое качество

Техническое качество вёрстки соответствует технике 1998 года, когда не было средств вёрстки и всё делали при помощи злоупотребления таблицами. Пользоваться таблицами без крайней необходимости для чего угодно, кроме показа таблиц – не для 2008 года.

Технология CSS для оформления частично используется, но стили вписаны прямо в текст страницы. Лучше их вынести в отдельный подключаемый файл.

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

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

Рекомендации: переверстать всё без таблиц и жёсткой разметки, с максимальным применением CSS – с выносом стилей во внешний файл. Графику где возможно заменить на текст, если особо важен шрифт – используйте подгружаемый шрифт либо технологию sIFR 2. Странности со ссылками в MAP надо заменить на обычные ссылки.

Соответствие стандарту HTML

Код сайта был выборочно проверен стандартным валидатором HTML веб-консорциума, по адресу http://validator.w3.org

Валидатор показывает отклонения от заявленного стандарта HTML в любом документе. Поскольку код страниц сайта не содержит объявления использованного стандарта, сайт проверялся на соответствие с тандарту HTML 4.01 Transitional по умолчанию.

Выборочные результаты:

http://rustalk.net/ – 20 ошибок
http://rustalk.net/reg.html («Регистрация») – 29 ошибок
http://rustalk.net/n.html («Агентство недвижимости») – 16 ошибок

Кроме отсутствия объявленного стандарта, всё это пропущенные описания (ALT) на входящих в оформление картинках.

Вывод: Сайт почти соответствует стандарту. Сам стандарт не заявлен и определяется «на вид», что не запрещено, но нежелательно.

Рекомендации: Добавить ко всем картинкам атрибуты ALT. Все страницы должны первой строчкой иметь объявление стандарта (элемент !DOCTYPE).

Общие рекомендации

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

Также следует поменять всю «физическую» разметку («как это выглядит») на логическую («что это»).

Таблицу убрать, вместо них использовать логическое разбиение элементами DIV. Всё, касающееся внешнего вида, как можно полнее вынести во внешний файл стиля styles.css.

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

Также сайт должен без ошибок проходить проверку валидатором веб-консорциума.

Поскольку стандарт HTML 4.01 Transitional морально устарел, рекомендую привести сайт к современному стандарту XHTML 1.0.

P.S. от Александра Левитаса

Если Вам нужен подобный анализ вашего сайта, детальные рекомендации и конкретные советы по устранению проблем – Вы можете заказать подробный разбор вашего сайта.

Читайте другие мои материалы

• Школа продаж: Анекдот про Наташу Ростову. «Страх продажи» - что это такое, чем он обусловлен и как с ним бороться.
• Больше денег от Вашего бизнеса: Пять шагов к безупречной работе персонала. «Рука сама тянется к пистолету» Способы, которые не помогут. Решение, которое работает.
• Бо евые говоруны: Публичное выступление - что делать, когда Вас пытаются сбить с толку? Кто с мечом к нам придёт, от меча и погибнет. Приём «Объяснитесь, пожалуйста». Приём «Как Вы сказали?» Приём «А ещё очки надел...» Приём «Вопрос должен звучать так...»
• Блог Алекс андра Левитаса: Правило трёх точек опоры
• Блог Александра Левитаса: Два мешка брюквы и личная эффективность
• Блог Александра Левитаса: Про телеигру и страх ошибки
• Блог Александра Левитаса: Полезные книги не совсем о маркетинге

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

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

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

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

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

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

Copyright © Александр Левитас, 2008-07-22. Письма, присланные автору рассылки, могут быть опубликованы в рассылке - в полном объёме или частично - без предварительного уведомления. Если Вы не хотите, чтобы Ваше письмо было опубликовано - пожалуйста, явно укажите это в начале письма. Спасибо.