Введение

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

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

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

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

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

Структура сайта

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

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

А теперь ещё посмотрим визуально на разброс меню по экрану на главной и внутренних страницах:

Теперь, если вглядеться во всё это, то станут абсолютно очевидны и без того явные недостатки навигации:

• Пункты 1-8, 16-18, 20 и 22 пропадают внутри сайта.
• Пункты 19, 23-25 отсутствуют на главной странице.
• Пункты 9-14 на внутренних страницах дублируются, причём в верхней части страницы они оформлены в виде подменю, выпадающем из меню «Каталог продукции». Это единственное выпадающее подменю на всём сайте.
• Пункт 19, оказывается, содержит в себе пункт 16, 18, 20 и 22. В этом легко убедиться, если выбрать этот пункт в навигации внутренних страниц.
• Пункты 15 и 21 на внутренних страницах превратились в графические ссылки («ушки»).

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

Главная страница

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

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

• Название компании (веб-сайта).
• Cлоган или краткое описание компании.
• Основные направления деятельности компании.
• Контактная информация.
• Новости.
• Поиск.

Теперь рассмотрим главную страницу сайта «Купол-Старки».

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

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

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

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

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

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

Внутренние страницы сайта

Страница «О компании»

Этот раздел очень важен для потенциальных партнеров и клиентов. Здесь размещается общая информация о компании: история, направления деятельности, успехи и достижения, необходимые лицензии и сертификаты, контактная информация.

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

Страница «Для клиентов»

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

Раздел «Каталог»

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

Раздел «Контактная информация»

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

Страница «404»

Её просто нет. Сегодня это считается дурным тоном.

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

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

1. Текст на страницах набран слишком мелким кеглем и его размер не меняется в соответствии с желаниями посетителей. Из-за этого люди даже с хорошим зрением испытывают неудобства, а значит, не смогут в полной мере изучить содержание сайта, и, следовательно, выбывают из числа потенциальных клиентов.
2. Анатомия человека устроена так, что он не может читать без чувства дискомфорта текст шириной более 16 см. На больших мониторах ширина основного текста увеличивается настолько, что читателю становится сложно следить, где закончилась одна строка и начинается следующая.
3. Названия страниц на рассматриваемом ресурсе тщательно спрятаны и замаскированы под основной текст. Пользователям требуется слишком много времени на то, чтобы понять, как называется текущая страница.
4. Новости являются важным индикатором жизнедеятельности веб-ресурса для новых посетителей и удобным подспорьем для постоянных, которые узнают обо всем новом, что появилось на сайте, тем самым не теряя своего драгоценного времени на просмотр сайта с самого начала. Чтобы узнать новости предприятия «Купол-Старки» посетители вынуждены несколько раз переходить от страницы к странице.
5. На сайте предприятия функция поиска отсутствует как класс. Об этом уже упоминалось выше.
6. Неправильно расставлены ссылки в тексте. Пользователям сайта предлагается часть материалов скачать для сайта. Например, в предложении «Прайс-лист на 3-й квартал 2005 года. Скачать в формате xls, zip» ссылкой являются лишь «xls» и «zip». Очень трудно попасть курсором в 3 маленькие буквы.
7. Часто встречается информация, представленная в виде таблиц. Важно не переусердствовать с их количеством и использовать по мере необходимости. На страницах «Наши клиенты» и «Наши дилеры» оформление текста с помощью таблиц лишь затрудняют восприятие, увеличивая «визуальный шум».
8. Таблицы с данными по продукции оформлены безобразно: в них слишком много пустого места, числовые колонки выровнены по центру, в то время, как все числа в колонках надо выравнивать по десятичным разрядам чисел, отсутствуют тысячные разделители (пробел). Особые претензии к указаниям размеров в таблицах: три уровня информации в одной строке таблицы делают хуже даже то плохое оформление до которого додумались разработчики.
9. Правила написания знаков препинания в русском языке складывались веками. Для русской типографики характерно наличие некоторых символов, используемых в написании, и отсутствующих в других языках (например, в английском). Так, в виде кавычек используют «елочки», а не “лапки”, и вместо тире «—» не пишут минус «-», для выделения маркированных списков используют «пульки» («•»), а не минусы («–»). Список ляпов, допущенных при оформлении текстов, можно продолжать ещё очень долго.
10. На сайте имеется страница, озаглавленная словом «Download», предназначенная вероятно для посетителей свободно владеющих немецко-фашистким языком.
11. Разделы главного меню представлены не в виде текста, а виде картинок, у которых отсутствуют альтернативные тексты. Это приводит к тому, что посетители, в чьих браузерах отключена функция просмотра картинок, лишены какой-либо возможности передвигаться по сайту.
12. Технические разделы сайта «На Главную», «Карта сайта», «Контакты» представлены в виде пиктограмм. Не все посетители смогут сразу понять смысл этих рисунков, поэтому лучшим выходом стало бы дублирование этих разделов в текстовом виде. Ссылки этих пиктограмм перепутаны: так, пиктограмма, обозначающая контактную информацию, на самом деле является ссылкой на «Карту сайта», а если посетители, находясь на странице «Карта сайта», нечаянно нажмут на одноименную пиктограмму, они окажутся на главной странице. К тому же, посетители ресурса лишены явной возможности вернуться с любой внутренней страницы в начало сайта, т.к. ссылка на главную страницу присутствует только в логотипе и одноименной пиктограмме.
13. Телефонные номера написаны не в том формате, в каком это обычно принято: «ХХ-ХХ-ХХ». Написание телефонов в другом формате имеет смысл только тогда, когда цифры номера образуют хорошо запоминающиеся сочетания («505-505» или «9999-66»).
14. В «Фотогалерее» в разделе «Оборудование для деревообработки» отсутствуют увеличенные фотографии камеры вакуумной сушки.
15. Ну и проблемы с навигацией, описанные ранее.

Дизайн

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

К сожалению, к дизайну сайта тоже есть претензии, перечисленные ниже.

Иллюстрации

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

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

Цвет

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

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

Верстка

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

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

На фоне неоправданно широкого текста поля страницы имеют слишком маленький размер.

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

Пользование сетью Интернет стоит денег, и ничто так не раздражает посетителя, как напрасное ожидание загрузки пустых страниц «Выставки» и «СМИ», «Полезные ссылки».

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

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

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

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

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

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

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

Исходя из всего этого, мы предлагаем:

• Разместить навигационную панель на одном и том же месте на всех страницах сайта. Определиться с названиями разделов и придерживаться их на всех страницах. Расположить элементы меню в определенном порядке и также придерживаться его на всех страницах сайта.
• Отказаться от выпадающего меню 2-го уровня, т.к. оно не дает пользователям сразу представление о содержании раздела и плохо индексируется поисковыми системами.
• Отказаться от выпадающего меню, разместив в логическом порядке разделы 2 и 3-го уровней.
• На главной странице данного раздела необходимо вынести полный список позиций каталога, что позволит пользователям оценить весь ассортимент предлагаемых товаров. Каждая позиция должна раскрываться на новой странице, где представлена развернутая информация о данном оборудовании, с полный техническим описанием, иллюстрацией и т.п. Каталог должен иметь удобную систему поиска и подбора по параметрам. 
• Раздел «О компании» следует поместить на его законное место в основном меню.
• В основное мену нужно также поместить раздел «Для клиентов».
• Сделать активные пункты навигации отличными по цвету от остальных. Уделить больше внимания оформлению всех пунктов меню.
• Поместить на сайте статусную строку.
• Кроме редизайна навигационного меню, имеет смысл изменить расположение некоторой информации на сайте:
• На главной странице нужно продублировать логотип в верхней части (слева или в центре). Удачным решением будет размещение логотипа в одном и том же месте абсолютно на всех страницах сайта.
• На главной странице нужно разместить небольшой по объему, но развернутый по содержанию текст о самом предприятии.
• Необходимо разместить к каждому разделу «Каталога» краткий текст о ключевых характеристиках предлагаемой продукции. Это даст посетителям дополнительный стимул и лучшее представление о том, что они обнаружат, перейдя по заинтересовавшей их ссылке. Для дополнительного привлечения внимания потенциальных клиентов было бы не плохо проиллюстрировать тексты небольшими фотографиями предлагаемой техники.
• На всех страницах сайта, а особенно на главной, необходимо размещение рядом с номером телефона также адреса электронной почты. В идеале: почтовый адрес предприятия и ссылка на страницу с более развернутой контактной информацией.
• Также необходимо размещать на страницах копирайт и название компании-разработчика сайта.
• Важно регулярно обновлять свой сайт и поддерживать его актуальность. Для этого нужно вынести свежие новости на стартовую страницу и не забывать обновлять их хотя бы раз-два в неделю.
• Страница фотогалереи, представляющая набор небольших по размеру картинок предварительного просмотра, снабженный заголовками и подписями, избавит посетителей от лишних переходов от страницы к странице в поисках интересующей фотографии.
• Необходимо предоставить пользователю возможность поиска по материалам сайта.
• К сожалению, не все потенциальные клиенты могут владеть в совершенстве иностранными языками, поэтому названия разделов важно переводить на русский язык.
• Если по каким-то причинам раздел не содержит никакой информации, то лучше его скрыть, нежели демонстрировать пустую страницу или текст «на реконструкции: страница находится в стадии заполнения».
• Карту проезда надо полностью создать заново, обязательно соблюдая масштабы и местности и строений, а также искривления дорог. Вместо уменьшенного варианта этой карты мы предлагаем нарисовать уменьшенную карту города Ижевска, на которой следует отметить крестиком или сноской часть города, где находится предприятие. Таким образом, иногородние клиенты сначала поймут, куда вообще следует ехать в Ижевске, после чего смогут подробно изучить подъезды к территории предприятия.
• Нужно сделать страницу «404».

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

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

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

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

Заключение

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