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

Разбор сайта Radiokanal.Ru
Часть первая

Поскольку на сайте уже начались работы по обновлению, здесь я размещу "фотографию" сайта на момент написания обзора:

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

Шаг первый. Дизайн в общих чертах.

Логотип

Не очень броский, но вполне приемлемый. Отторжения не вызывает. Всё в порядке.

Разные резолюции экрана

В разрешении 800х600 сайт выглядит не очень хорошо, он не помещается в экран, появляется полоса горизонтальной прокрутки. В принципе, такую резолюцию экрана имеет лишь один из каждых 8-10 посетителей Вашего сайта. Стоит ли пренебрегать их удобством, решайте сами. В качестве робкого предположения выскажу мысль, что среди этих людей большую часть составляют провинциалы.

"Воздух"

На некоторых страницах сайта, в частности на входной странице, не хватает «воздуха» - текст жмется к краям страницы вплотную. Желательно сделать поля у всех текстовых блоков. Как пример сайта, на котором воздуха достаточно, можно привести сайт http://www.sap.com/ Подробнее о «воздухе» и его важности читайте здесь.

Размер шрифта

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

Цветовая гамма

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

Шаг второй. Навигация.

Адрес сайта

Адрес radiokanal.ru достаточно запоминающийся, сделать ошибку при наборе тоже трудно. Всё в порядке.

Шапка

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

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

Обустроить шапку сайта можно разными способами. Например, с помощью «закладок». Наверху более крупный логотип и около него надпись о том, что и как фирма продает, а ниже меню из «закладок» в той манере, как это сделано на сайте http://amazon.com/ - «Радиостанции», «Радиотелефоны» и т.п. Или же можно превратить синюю табличку с названиями производителей в выпадающее горизонтальное меню, как, например, на сайте http://www.afes.ru/ или как на сайте Ваших конкурентов http://www.radiovertex.ru/. В строчку будет написано «Радиостанции», «Радиотелефоны» и т.п., а если навести курсор мыши на «Радиостанции», то открывается выпадающее меню с перечислением производителей.

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

Навигация

Навигация по сайту сделана немного непродуманно. В разных разделах сайта переход на подразделы устроен по-разному - где-то через рубрикатор, где-то через боковое меню.

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

Рубрикатор

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

   Радиостанции
      Производители: Vertex, Motorola, Kenwood, Icom, … Все производители
      Типы: Портативные, Автомобильные, Ретрансляторы, ... Все типы

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

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

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

Боковая колонка

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

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

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

Дополнительная навигация

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

Главная » Радиотелефоны » Радиотелефоны Senao » Радиотелефон Senao SN-258 Plus

Взгляните, как это реализовано на сайте Центра Дистанционного Обучения KURSY.RU - такая дополнительная навигация существенно упрощает жизнь посетителю, который зашел на сайт не через главную страницу, а через поисковую машину прямиком на страницу фирмы или товара.

Поиск по сайту

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

Конец первой части

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

Читайте в других моих рассылках

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

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

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

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

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

Адрес сайта?
Какова главная задача сайта?
Каких людей Вы хотите привлечь на сайт?
Какие конкретные действия они должны совершить в результате посещения сайта?
Являетесь ли Вы владельцем или менеджером сайта?
С какими проблемами Вы столкнулись?
Что Вы делали или делаете сейчас для решения этих проблем?

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

Сайты на бесплатных серверах вроде www.narod.ru в рассылке рассматриваться не будут, извините - размещение на бесплатном хостинге (со всеми его проблемами) уже само по себе является существенной ошибкой для бизнес-сайта.

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

Письмо автору

Архив рассылки

Подписаться

Подписка по Email

Отписаться

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

В избранное

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} {#if $P.login_register_tab == 1} <form class="authentication-form" method="post" action="/MEMBERLOGIN_authen_cred"> <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <h1>Войти на сайт</h1> {* {#include js_tmpl_auth_reg_button} *} {#include js_tmpl_auth_reg_action} <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones"><p>{#include js_tmpl_auth_reg_descr} </p></div> <div class="logreg_advice noPhones"> Если вы еще не с нами, то начните с <a href="#" onclick="rgNav('js_tab_reg');return false;" class="dashed" data-func="registr">регистрации</a> </div> <br><br> <a class="dashed auth-enter" href="/manage/author/"><b>Вход для авторов</b></a> </dt> </dl> </form> {#/if} {#if $P.login_register_tab == 2} <div class="rg_block_options"> <div id="js_tap_panel_auth"> <h1>Регистрация</h1> <div class="social_reg"> {* <div class="rg_description">{#include js_tmpl_soc_auth_reg_descr}</div> *} {#include js_tmpl_auth_reg_soc} <div class="rg_soc_auth_agree">{#include js_tmpl_auth_reg_agree}</div> </div> <div class="subscribe_reg"> {* <div class="rg_description"> #include js_tmpl_auth_reg_descr </div> *} {#include js_tmpl_auth_reg_action} </div> {* {#include js_tmpl_auth_reg_button} *} <div class="clr"> </div> <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones">{#include js_tmpl_auth_reg_descr} {#include js_tmpl_soc_auth_reg_descr} </div> </div> </div> {#/if} </div> {* <div class="gray_bg register_shadow"></div> *} </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_auth" class="{#if $P.login_register_tab == 1} rg_active_nav {#/if} rg_first_nav"><a onclick="rgNav('js_tab_auth');return false;" href="">Вход на сайт</a></li> <li id="js_tab_reg" class="{#if $P.login_register_tab == 2} rg_active_nav {#/if}"><a onclick="rgNav('js_tab_reg');return false;" href="">Регистрация </a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_action} {#if $P.login_register_tab == 1} {#include js_tmpl_auth_reg_soc} {#/if} <div class="rg_forms"> <input type="hidden" id="login_register_destination" value="{$P.login_register_destination}"/> {#if $P.login_register_tab == 1} <div class="rg_for_input"> <span class="rg_text_inner">E-mail или код подписчика</span> <input id="credential_0" class="js_keydown_selector rg_input_text" data-js_submit="no" data-js_next_input_name="credential_1" name="" type="text" /> </div> <div class="rg_for_input"> <span class="rg_text_inner">Пароль</span> <input id="credential_1" class="js_keydown_selector rg_input_text" data-js_submit="yes" data-js_action="js_loginFormBut" name="" type="password" onkeyup="showAttention(this,!!window.event.shiftKey)" /> <span class="pswd_attention" id="attention_pswd"> <span class="icon_attention"></span> <span class="pswd_attention-text" id="attention-text_pswd1">Русская раскладка клавиатуры!</span> <span class="pswd_attention-text" id="attention-text_pswd2">У вас включен Caps Lock!</span> <span class="pswd_attention-text" id="attention-text_pswd3">У вас включен Caps Lock и русская раскладка клавиатуры!</span> </span> </div> <div class="rg_for_input input-alien"> <span class="chk noPhones"><input id="chk_alien" name="" type="checkbox" /></span><label for="chk_alien" class="noPhones"> Чужой компьютер</label> <a class="forgot_pass" href="/member/totalrecall">Забыли пароль?</a> </div> <div class="rg_for_input"> <em id="auth_msg" class="reg_error"></em> <input id="lf_typeauthid" value="email" type="hidden"> <input type="submit" class="button button-red logreg_submit" id="js_loginFormBut" value="Войти">  <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} {#if $P.login_register_tab == 2} <div class="rg_for_input"> <span class="rg_text_inner">E-mail</span> <input id="arfemail" class="js_keydown_selector rg_input_text" name="" type="text" data-js_submit="yes" data-js_action="js_regFormBut"/> </div> <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a> </label> <br /> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_personal' type="checkbox" data-js_submit="yes" /></span> Нажимая на кнопку "Готово!", я даю <a class="link_txd logreg_accLink" href="/faq/persverordnung.html">согласие на обработку персональных данных</a> </label> </div> {* <div style="float: left;position: absolute;left: 11em;"> <img src="http://www.kupivip.ru/images/vip/logo.png?1604" style="width: 86px; vertical-align: middle;display: block;"> </div> <div class="rg_for_input rg_set_lineh"> <label class="js_tap_panel_checkbox"><input name="" id="js_tap_panel_checkbox_kupivip" type="checkbox" data-js_submit="yes"> Я хочу получать новости о скидках на одежду</label> </div> *} <div class="rg_for_input"> <em id="reg_msg" class="reg_error rg_for_input_wide"></em> <em id="reg_msg2" class="reg_error rg_for_input_wide"></em> <input id="rf_typeauthid" value="email" type="hidden"> <a class="button button-red logreg_submit" id="js_regFormBut" href="#">Готово!</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} </div> {#/template js_tmpl_auth_reg_action} {#template js_tmpl_auth_reg_agree} <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms_reg' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a></label> <em id="reg_msg_soc" class="reg_error rg_for_input_wide"></em> </div> {#/template js_tmpl_auth_reg_agree} {#template js_tmpl_auth_reg_button} <div class="rg_butons_socials"> {#if $P.login_register_tab == 1} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} {#if $P.login_register_tab == 2} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} </div> {#/template js_tmpl_auth_reg_button} {#template js_tmpl_auth_reg_descr} {#if $P.login_register_tab == 1} Для оформления подписки на выбранную рассылку, работы с интересующей вас группой или доступа в нужный вам раздел, просим авторизоваться на Subscribe.ru {#/if} {#if $P.login_register_tab == 2} Для регистрации укажите ваш e-mail адрес. Адрес должен быть действующим, на него сразу после регистрации будет отправлено письмо с инструкциями и кодом подтверждения. {#/if} {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_soc_auth_reg_descr} Или зарегистрируйтесь через социальную сеть. {#/template js_tmpl_soc_auth_reg_descr} {#template js_tmpl_auth_reg_soc} <div class="rg_soc"> {#if $P.login_register_tab == 1} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/login/vk/&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} {#if $P.login_register_tab == 2} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/join/vk&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} </div> {#/template js_tmpl_auth_reg_soc}

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div>  </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br /> <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}

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

Статистика

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

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