Юзабилити в Интернет: Комплексный анализ одного сайта

26.04.2004

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

Итак, жила была одна московская фирма ТИСЭ... Ее название — аббревиатура "Технология Индивидуального Строительства и Экология". Технология очень интересная даже мне, далекому от строительства человеку. И был у фирмы сайт. Всеми забытый, малопосещаемый. И в одни прекрасный день фирма решила: с этим надо что-то делать.

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

Старый сайт находится по адресу http://www.tise.ru/old/. Новый лежит здесь: http://www.tise.ru/.

Итак, приступим...

Комплексный анализ сайта фирмы ТИСЭ (юзабилити, дизайн, контент, серверная часть) и разработка концепции редизайна

Навигация

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

1. Выпадающее меню

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

В принципе, я не против от использования выпадающих меню в качестве навигации, однако при редизайне сайта я полностью от него отказался. Оно мне не нравится по четырем причинам:

а) для того, чтобы перейти на другую страницу, приходится делать как минимум целых 3 щелчка:

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

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

Утомительно, не правда ли?

б) при использовании этого меню посетитель не видит все разделы сайта одновременно, что затрудняет возможности выбора

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

г) И, наконец, САМОЕ ГЛАВНОЕ. Пункты выпадающего меню не совпадают с разделами левой вертикальной панели навигации! Это способно сильно запутать пользователя, особенно если учесть, что при большом количестве информации на сайте его логическая структура (в первоначальном варианте) вовсе не отличается простотой!

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

2. Вертикальная панель навигации

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

Вообще, теоретически все это достаточно удобно, однако практическая реализация в нашем конкретном случае явно подкачала.

Во-первых, выбранная логическая структура сайта излишне горизонтальна: на втором уровне (первый уровень это главная страница) слишком много разделов — целых 12, поэтому в них очень легко запутаться. Да и не логично, что, скажем, раздел "Вентиляция" находится на одном уровне с разделом "Цены" - это ведь разного поля ягоды.

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

Поэтому я предложил более естественную и удобную (и более вертикальную) структуру 2-го уровня: описание технологии | цены | контакты. Все!

Чем это лучше? Вся информация, касающаяся самой технологии, находится в соответствующем разделе и не отвлекает пользователей от таких крайне важных разделов, как "Цены" и "Контакты". При появлении на сайте, скажем, форума, ссылка на него будет находится на втором уровне, на котором вместе с ним будет 4 раздела, что тоже совсем не много. Т. е. благодаря вертикальной структуре сайт становится легко масштабируемым без ущерба в удобстве его использования.

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

• или сразу на главную страницу (ссылки в каталогах, офф-лайновая реклама: визитки, рекламные модули...)
• или на любую внутреннюю страницу (огромный поток посетителей с поисковых серверов, по ссылкам с других сайтов, переходы по закладкам...)

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

Навигация на исходном сайте справляется с этим плохо. Посмотрим, например, на страницу с описанием процесса возведения стен. У панели навигации (слева) развернулось подменю раздела "Стены" (5 пунктов). И панель навигации в целом стала очень громоздкой: она состоит теперь из 17 (!) пунктов. Теперь при разрешении 800х600 при большом шрифте она с едва помещается на 3-х (!) экранах и приходится несколько раз прокручивать страницу, чтобы увидеть всю навигацию целиком!

Ситуация усугубляется тем, что размер шрифта у пунктов подменю и у названий разделов одинаковый и не понятно на первый взгляд, какой раздел важнее: утепление стен или "Коммерческие предложения".

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

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

А теперь посмотрите, как просто все эти проблемы решены на новом сайте.

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

Проблема определения посетителем своего месторасположения и вопрос навигации на любом уровне структуры решена с помощью механизма так называемых "хлебных крошек". Вот как они выглядят на той же странице:

Главная > Описание технологии > Стены > Возведение стен.

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

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

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

Дизайн

Дизайн — вещь вообще достаточно щекотливая: сколько посетителей у сайта, столько и мнений о его внешнем виде. Однако у анализируемого сайта есть ряд просчетов, которые не понравятся никому:

• при увеличении размера шрифта в браузере текст меню и основной текст почему-то вылезают из своих границ, что выглядит как-то неряшливо.
• каркасом страниц являются таблицы с фиксированной шириной, что приводит к появлению широкого пустого пространства справа при высоких разрешениях экрана
• вообще, дизайн сайта несколько старомоден. Хотя, повторюсь, кто-то любит арбуз,...
• техническая деталь: сайт не использует концепцию CSS (Cascaded Style Sheets), что делает его негибким к изменениям и неудобным при поддержке из-за большой "засоренности" HTML-кода.

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

Обращаю внимание, что все страницы разбиты на 2 таблицы: в одной из них — шапка страницы, а в другой — ее смысловая часть. За счет этого процесс загрузки страниц превращается в осмысленное слайд-шоу:сначала загружается верхняя часть страницы с логотипом и flash-роликом с навигацией по основным разделам, а потом — остальное. (При использовании одной общей таблицы посетитель перед загрузкой странцы сначала достаточно долго созерцал бы пустой экран, что не особенно приятно)

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

Контент

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

Однако, то, что мне не совсем нравится, является очень важной, критичной частью сайта — это главная страница. На ней есть пустая болтовня. Ну сами подумайте, может ли человеку, пришедшему на сайт с целью ознакомится с технологией ТИСЭ и принять решение о покупке, быть прежде всего интересна информация о дате создания фирмы? Дипломы тоже не важнее технологии, для них запросто можно создать новый раздел под названием, скажем, "Наши награды"

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

Посмотрим на новый вариант главной страницы. Все, что находится на ней, служит для объяснения того, о чем этот сайт.

Логотип. Логотип фирмы ТИСЭ находится в правом верхнем углу — стандартное, привычное для всех место для логотипа. Заметим, что в логотипе хорошо отражена деятельность фирмы, и даже взятый в отдельности он способен передать то, что деятельность фирмы связана со строительством.

Слоган. Одно из самых ценных мест на начальной странице — это пространство, которое находится сразу рядом с логотипом сайта. Когда мы видим текст, визуально примыкающий к логотипу, то мы знаем, что это слоган сайта, который мы воспринимаем, как описание всего сайта. В нашем случае удачно подобранный слоган ("НАРОДНАЯ ТЕХНОЛОГИЯ") находится как раз там, где нужно.

Тест приветствия. В тексте приветствия размещается краткое описание сайта. Обратите внимание, оно оформлено в виде заметного текстового блока (выделение шрифтом и цветом), размещено на видном месте и видно целиком без прокручивания экрана.

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

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

Технологии (серверная часть)

Первоначальный вариант сайта сделан на статическом HTML без использования каких-либо серверных технологий. Для таких сайтов с достаточно большим количеством страниц это совершенно не удобно.

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

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

Конечно, такими вещами уже давно никто не занимается (разве что сайт состоит из 3-х страниц). Для этого используются специальные программы (называемые "движками" сайта), которые выполняются на сервере и формируют содержание сайта. При их использовании, например, новый раздел добавляется только в одном месте и автоматически появляется на всех страницах сайта.

Движок обновленного сайта сделан на технологии SSI (Server Side Includes) + CGI/Perl, что обеспечивает работоспособность на многих платформах, и в то же время гарантирует легкую маштабируемость и управляемость контента. На мой взгляд, эта технология является на данный момент оптимальным решением для сайтов такого класса именно благодаря ее массовости.

Перспективы развития сайта, его продвижение

Итак, редизайн сайта проведен и встает вопрос: А что делать дальше?

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

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

Ниже я расскажу, что еще нужно делать с сайтом ТИСЭ.

Прежде всего, давайте наконец определимся, для чего вообще фирме ТИСЭ нужен сайт? Я считаю, что только для одной цели — увеличить количество продаж. Из этого и будем исходить.

Для того, чтобы отвечать этой цели, сайт должен:

1. популяризовывать технологию ТИСЭ (рассказывать, в чем суть этой технологии и как это все прекрасно)
2. предоставить посетителям возможность без проблем заказать продукцию
3. обеспечить обратную связь с клиентами и техподдержку

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

Заказ продукции

Одно из базовых правил в Internet-маркетинге: Должно быть ясно, как заказать товар, и сделать заказ должно быть ЛЕГКО. Об этой очевидной вещи часто забывают, как это и произошло на сайте ТИСЭ.

То, что продукцию можно получить наложенным платежем, написано мелким шрифтом (!) в середине страницы посреди другого текста (!) в разделе "Коммерческие предложения", который находится на одном уровне с такими разделами, как "Фундамент", "Стены" и совершенно теряется среди них. С этим обязательно надо что-то делать, причем в первую очередь!

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

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

Web-форум

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

В Interent'е на сайте одного из строительных журналов есть форум, на котором активно обсуждается технология ТИСЭ. Почему же нет форума непосредственно на сайте ТИСЭ? Ведь это точно приведет на него посетителей! В обсуждениях могли принимать участие не только посетители сайта и клиенты фирмы, но и авторы технологии, которые могут давать пользователям советы, отвечать на вопросы, вообще получать обратную связь.

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

Форум — это второе, что нужно сделать на сайте.

Рассылка e-mail.

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

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

Зачем это нужно? Рассылка — очень мощный инструмент маркетинга. Сервер, который занимается поддержкой рассылок (посмотрите, как работает например, http://subscribe.ru), анонсирует новые рассылки на своей главной странице и в своем новостном письме. Это означает, что о технологии ТИСЭ сразу узнают сотни тысяч человек! Также рассылка храниться в архиве этого сервера, и любой, кто будет искать рассылку по строительной тематике, на нее наткнется.

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

Т. е. рассылка — это третье, что я бы сделал на сайте.

Flash-ролик

Что-то я все о серьезных форумах, да о рассылках... А ведь люди очень часто покупают под влиянием эмоций, а не логики. Известно правило (мой вольный перевод с английского): "Создайте практичный, полезный, "логичный" продукт. А теперь делайте ту рекламу, которая использует эмоции, чтобы его продать. "

Давайте не будем забывать, что клиенты ТИСЭ — частники, а не корпорации. Именно из этих соображений было принято решение о размещении flash-презентации на каждой странице сайта.

Так вот, эту презентацию стоит сделать еще более интересной. Пусть, например, человечек появляется не сразу стоящим на своем месте, а выходит из-за края экрана! Пусть меню появляются не одновременно, а поочереди! Можно даже использовать звук: человечек может выйти и сказать: "Добро пожаловать на сайт фирмы ТИСЭ! " Да мало ли чего можно придумать для того, чтобы народу понравилось!

Итак, на сайте надо доработать flash-ролик.

Часто задаваемые вопросы

Вернемся от высокого искусства flash-анимации к прозе жизни. Наверное, среди вопросов, которые клиенты задают по телефону и e-mail (а потом будут спрашивать и в форуме), есть повторяющиеся. Так вот, вопросы, которые часто встречаются и интересуют многих стоит вместе с ответами опубликовать на сайте в разделе "Часто задаваемые вопросы ".

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

Итак, следующим шагом надо добавить на сайт раздел "Часто задаваемые вопросы".

Отзывы клиентов

Публикация положительных (если хотите, восторженных, благодарных...) отзывов клиентов — сильное средство для повышения привлекательности технологии, и, как следствие, продаж.

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

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

И, напоследок, один из ВАЖНЕЙШИХ ПУНКТОВ:

Стилистика текста

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

Как я уже и говорил, одна из важнейших функций сайта — рассказать пользователям о преимуществах технологии ТИСЭ и склонить их к покупке. А первоначальный сайт — это всего лишь достаточно сухое руководство по использованию этой технологии.

Такой сайт будут читать в основном те посетители, которые уже знают, что ТИСЭ — уникальная в своем роде технология, заслуживающая внимания. А поймут ли это люди, впервые оказавшиеся на сайте? Вряд ли.

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

Итак...

Броские заголовки

Это одно из важных правил успеха. Выбор слов в заголовках — более 70% эффективности текста. Поэтому очень важно правильно подобрать заголовки

Короткие слова, короткие предложения, короткие параграфы

Прежде всего надо забыть, что нам говорили в школе. При написании текста надо помнить, что 2 вещи посетители должны сделать просто: ПРОСТО понять, и ПРОСТО заказать. Для этого надо использовать короткие слова, короткие предложения и короткие параграфы. Да, я помню, что в школе учитель русского языка учил меня не делать параграфы из 2-х предложений, но много ли он знал про Interenet-маркетинг?

Будьте проще, и люди к вам потянутся! В тот момент, когда людям становится что то непонятно, их внимание и ваши продажи пропадают

Фразы должны быть конкретными, но не общими

Пусть текст будет конкретным. Не надо писать: "С помощью технологии ТИСЭ стены возводятся быстро!" Вместо этого пишем: "С помощью опалубки ТИСЭ стены 2-х этажного коттеджа площадью 50 кв. м. возводятся всего за 2 недели!" Чувствуете разницу? То-то же.

Когда факты конкретны, люди больше им верят. Когда есть только общие фразы, люди думают: "Это они просто утверждают, что это так. А как на самом деле, трудно сказать..."

Заострим внимание на преимуществах, а не на функциях

Иногда кажется, что эти две вещи — одно и то же, но это далеко не так. Между ними такая же разница, как между успехом или провалом рекламной функции текста на сайте.

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

Функции это то, что относится к продукту и вращаетс вокруг него. А вот преимущества ориентированны уже на покупателя. Соответственно, текст на сайте должен быть ориентирован именно на покупателя, а не на продукт.

Использование местоимений

Конечно, я снова рассержу своего учителя русского языка, но использование "Я", "Мы", "Он", "Она" в тексте на сайте увеличит продажи. Люди начнут лучше и ближе воспринимать мысли, изложенные в тексте.

Тестирование, тестирование, тестирование...

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

Тестирование никогда не заканчивается. Нельзя оставлять ничего "на авось". Надо постоянно тестировать и улучшать, улучшать и улучшать все, что читают, видят и делают посетители сайта — ваши потенциальные клиенты

Что дальше?

Перечисленное выше — далеко не все, что можно сделать с сайтом фирмы ТИСЭ. В процессе работы с ним при более глубоком изучении вопроса обязательно возникнет еще множество идей.