Введение

Данный отчёт содержит анализ веб-сайта компании «Транс-лайн» (http://www.tl-online.ru/). Анализ произведен специалистами Центра Высоких Технологий с целью исследования качества профессиональной разработки ресурса и оценки следующих характеристик: удобства использования, структуры и наполнения, общего дизайна и вёрстки сайта.

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

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

Анализ удобства использования сайта

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

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

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

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

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

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

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

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

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

Анализ структуры и наполнения сайта

Главное меню

Главное меню сайта компании «Транс-лайн» имеет 9 пунктов:

1. О нас
2. Услуги
3. Цены
4. Спецпредложения
5. Клиенты
6. Контакты
7. Рекомендации
8. Скидки
9. Корпоративным клиентам

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

Учитывая, что сайт не пресыщен наполнением, было бы идеально, на наш взгляд, разместить всё содержание сайта в 3 главных раздела:

1. О компании
2. Услуги
3. Цены

В разделе «О компании» логично разместить страницы «Клиенты», «Рекомендации», «Контакты».

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

А раздел «Цены» идеально подходит для «Спецпредложений» и «Скидок».

И надо не забыть про пункты технической навигации:

4. Главная
5. Контакты
6. Карта сайта
7. Поиск

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

Графические ссылки

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

Мы предлагаем расширить их «ассортимент». Например, на главной странице сайта можно разместить 2 крупных красиво оформленных блока-«фильтра»: «Корпоративным клиентам» и «Частным лицам». В каждый блок вынести те разделы, которые будут полезны целевой аудитории. Для корпоративных клиентов может оказаться важной информация «Офисный переезд», а частным лицам важнее «Квартирный переезд». Таким образом в разделе «Корпоративным клиентам» могут располагаться страницы «Офисный переезд», «Цены» «Скидки», «Спецпредложения», «Сделать заказ», а в блоке «Частным лицам» -«Квартирный переезд», «Цены», «Сделать заказ».

Новости

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

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

Ещё один способ обозначить актуальность представленной информации — это указать даты действия «Специального предложения». Мы понимаем, что на самом деле оно не столько специальное, сколько вечное. Но, возможно, стоит его уже перефразировать. Скажем, так: «с 1сентября действует специальное предложение». В дальнейшем, на этом же месте можно предлагать что-то новое, но делать это не реже раза в месяц и с обязательным указанием даты.

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

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

Анализ дизайна и вёрстки сайта

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

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

Сетка

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

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

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

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

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

Оформление

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

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

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

Текст

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

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

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

Вёрстка

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

В частности, нас весьма удивило неразумное использование технологии CSS. Автор явно поленился внимательно пробежаться по дизайну и составить единую полноценную таблицу стилей на все случаи жизни. В результате, в тексте часто встречается тэг «<a>», в котором стиль, заданный атрибутом «style» перебивает значение стиля, заданного атрибутом «class». Очень часто цвет фона и текста элементов вёрстки задаётся атрибутом «bgcolor» или «style», в то время, когда это можно было оформить отдельным классом в таблице стилей. Более того, есть моменты когда в одном и том же тэге присутствуют два атрибута «bgcolor» с разными значениями.

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

Верстальщику не мешало бы выучить полностью все возможности технологии CSS, а также познакомиться поближе с такими макроопределениями, как «&copy;», «&nbsp;», «&laquo;», «&raquo;», «&mdash;» и им подобными.

Резюме

Предложения по улучшению удобства использования сайта

• Сделать различным оформление активных и неактивных пунктов меню любого уровня.
• Указать размер текста в относительных единицах (процентах).
• Добавить статусную строку.
• Снабдить иллюстрации альтернативными текстами.
• Добавить кнопку «Наверх».
• Разместить на всех страницах форму «Сделать заказ».

Предложения по навигации и структуре сайта

• Сократить количество пунктов главного меню. Предлагаемая структура:
1. О компании
• Клиенты
• Контакты
• Рекомендации
2. Услуги
• Квартирный переезд
• Офисный переезд
• Такелажные работы
• Упаковочный материал
• Сделать заказ
3. Цены
• Спецпредложения
• Скидки
4. Сделать 2 больших блока:
• Частным лицам
• Корпоративным клиентам
• Добавить техническую навигацию:
• Главная
• Контакты
• §Карта сайта
• Поиск

Предложения по дизайну сайта

Дизайн и вёрстку необходимо тщательно переработать. Основные предложения таковы:

• Сделать 3-колонную сетку: 1-я и 3-я колонки занимают по 20% ширины страницы, 2-я колонка — 60% ширины. Таким образом, сайт будет пропорционально менять свою ширину в зависимости от размера монитора у пользователей.
• Увеличить размер всех полей между блоками, также меняющий свою ширину в зависимости от разрешения.
• Привести оформление всех блоков к единообразию — закруглить всем углы.
• Сделать более выделяющимся оформление главной навигационной панели.
• Разместить графические ссылки «Офисный переезд», «Квартирный переезд» и «Такелажные работы» (уменьшив их в размере) в шапке между логотипом и телефоном компании.
• Нарисовать новый пропорциональный дизайн графической ссылки «Специальное предложение».
• Сделать название страницы крупным, тем самым визуально выделить заголовок от остального текста.
• Мы настоятельно рекомендуем при наборе текста использовать специальные программы-типографы, автоматизирующие рутинный процесс исправления минусов на тире и «лапок» на «ёлочки».
• Тщательно переработать таблицу стилей. Кроме итогового уменьшения размера страницы и морального удовлетворения от качественно проделанной работы, в результате мы получим возможность очень оперативно менять настройки вёрстки: достаточно будет подправить необходимые характеристики в одном месте, а не искать необходимые места по всем страницам (или шаблонам страниц).

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

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

Сравните с тем, что есть на самом деле:

Заключение

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