Экспресс-аудит юзабилити сайта музыкальной школы

Логотип

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

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

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

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

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

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

Рекомендуем избегать дублирования одинаковых элементов интерфейса – это вводит пользователя в заблуждение.

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

Рекомендуем сделать логотип ссылкой на главную страницу сайта.

Компоновка макета страницы

Не согласован размер верхнего отступа логотипа и блока с адресом школы.

Рекомендуем выровнять верхние границы данных блоков по одной линии.

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

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

Надпись «Школа-студия» находится справа над вторым логотипом.

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

Верхняя часть используется не эффективно. Основное пространство занимает фоновая картинка, которая не несет полезной смысловой нагрузки.

Рекомендуем сделать данный блок в виде интерактивной галереи с прокруткой из 4-5 элементов. В ней необходимо разместить привлекательные баннеры с информацией о цене уроков, скидках и подарочных сертификатах.

Оформление текстов

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

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

На странице «О нас» http://mus-life.ru/sample-page/ меняется размер и начертание шрифта. При этом также используется два цвета для одинаковых текстовых блоков. Ниже представлен скриншот:

Рекомендуем придерживаться единого стиля оформления основного текста на всех страницах сайта.

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

Рекомендуем использовать одинаковые маркеры списков на всех страницах сайта.

Подчеркивание используется для обычного текста, который не является ссылкой. Например, на странице http://mus-life.ru/poleznaya-informaciya/.

Аналогичная проблема и на странице http://mus-life.ru/reklama-na-sajte-i-sovmestnaya-reklame/ .

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

Шрифты

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

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

По ссылке https://yadi.sk/d/MltVjyzEqszkZ представлен скриншот страницы на котором пронумерованы разные шрифты и их варианты начертания.

Рекомендуем привести к единому шрифтовому оформлению все типовые элементы сайта (текстовые блоки, заголовки, списки, таблицы и т.д.)

Доступность контактной информации

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

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

Рекомендуем явно указать, что школа-студия работает в г.Москва.

Контактный адрес электронной почты привязан к другому доменному имени musiclife-school.ru. Это отрицательно сказывается на юзабилити.

Рекомендуем привязать адрес почты к домену mus-life.ru.

Схема проезда выполнена в виде обычной статичной картинки, а не интерактивной карты.

Рекомендуем использовать интерактивную карту на базе сервиса Яндекс.Карты.

Макет страницы контактов отображается неверно – боковая колонка съехала вниз. Это показано на скриншоте по ссылке https://yadi.sk/i/DkTOOeEeqodt8.

Отсутствует в явном виде форма для отправки сообщений со страницы «Контакты» – есть только типовая форма «Добавить комментарий». Это отрицательно сказывается на юзабилити.

Рекомендуем добавить форму отправки сообщения прямо со страницы контактов.

Отдельно стоит отметить, что отсутствует возможность связи и отправки сообщений с помощью альтернативных каналов связи – например, Viber, Skype онлайн-чата и т.д.

Рекомендуем рассмотреть возможность использования комплесного решения для связи с администрацией. Например, krible.com.

Оформление рекламных блоков и баннеров

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

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

К сожалению, в данный момент это требование не выполняется.

Данный рекламный баннер ведет на страницу http://mus-life.ru/canadian-brass-amazing-grace/ , а не на полную ленту новостей.

На главной странице информация о стоимости и количестве уроков по подарочному сертификату находится по текстовой ссылке и ведет на открытие изображения http://mus-life.ru/wp-content/uploads/2013/11/%D0%9F%D0%BE%D0%B4%D0%B0%D1%80%D0%BE%D1%87%D0%BD%D1%8B%D0%B9-%D1%81%D0%B5%D1%80%D1%82%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%82-%D0%BD%D0%B0-4-%D0%B7%D0%B0%D0%BD%D1%8F%D1%82%D0%B8%D1%8F-%D0%BC%D1%83%D0%B7%D1%8B%D0%BA%D0%BE%D0%B9_%D0%B2%D0%BE%D0%BA%D0%B0%D0%BB%D0%BE%D0%BC.jpg

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

Рекламные баннеры на странице http://mus-life.ru/uroki-i-ceny/ расположены внизу страницы и большинство пользователей их не видят. Это подтверждается и данными карты скроллинга страницы. Верхнюю часть страницы просмотрели 58 посетителей, блок с сертификатами – 28. Карту кликов можно увидеть по ссылке https://yadi.sk/i/A9-iB_K8qt2w3.

Дизайн этих рекламных блоков не проработан – используется большое количество вариантов начертания текста, разные размеры шрифтов и цвет текста. Это отрицательно сказывается на внешнем виде и привлекательности рекламы для посетителей. Скриншот можно увидеть по ссылке https://yadi.sk/i/W4zZETbpqohZW.

Видео и интерактивные материалы

Видеоролик на главной странице представляет собой фактически фотогалерею с сопровождающим текстом.

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

На странице http://mus-life.ru/fotovideo/ есть только три видео. Этого мало, чтобы привлечь внимание к школе и преподавателям.

Рекомендуем разместить 8-10 видеороликов с занятиями учеников по всем основным направлениям школы.

Также есть призыв добавлять свои фото и видео занятий в школе, но абсолютно непонятно, как это можно сделать на сайте.

Рекомендуем сделать форму добавления видео с модерацией администратором сайта.

Страница «Преподаватели»

Невозможно просмотреть всех преподавателей в верхней части страницы и перейти к интересующему педагогу. Необходимо пролистывать достаточно большую страницу вниз и читать заголовки. Это подтверждается и данными карты скроллинга https://yadi.sk/d/JM-km_h6qt3NQ страницы – чем ниже размещен преподаватель, тем меньше просмотров.

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

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

Рекомендуем использовать для текстов выравнивание по левому краю.

Разное оформление одинаковых текстов.

Рекомендуем придерживаться единого стиля оформления заголовков и основного текста.

Отсутствует вертикальный отступ между текстовыми блоками.

Рекомендуем использовать одинаковые вертикальные отступы между текстовыми блоками страницы.

Страница «Вопросы»

http://mus-life.ru/category/voprosi-po-shkole-studii-music-life

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

К сожалению, в данный момент есть только пост с вводной текстовой информацией. Чтобы найти ленту с вопросами и ответами необходимо перейти по ссылке на подстраницу http://mus-life.ru/osnovnye-zadavaemye-voprosy/.

Рекомендуем разместить вопросы и ответы непосредственно на странице без перехода в подразделы.

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

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

Рекомендуем добавить на страницу форму для отправки вопроса.

Страница «Уроки и цены»

http://mus-life.ru/uroki-i-ceny/

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

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

В верхней части страницы находится список направлений работы студии. Но рядом с конкретным направлением не указана стоимость занятий (одного или за месяц). Это отрицательно сказывается на конверсии сайта.

Рекомендуем в данном списке явно указать стоимость занятий.

Непонятно, для чего три раза дублируется практически один и тот же заголовок «Уроки».

Рекомендуем избегать дублирования одной и той-же информации – это создает визуальный шум и отрицательно сказывается на юзабилити.

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

Данная таблица не масштабируется при уменьшении ширины окна браузера. Появляется горизонтальная полоса прокрутки. Это не соответствует требованиям правильного отображения сайта при любом разрешении экрана. Это показано на скриншоте по ссылке https://yadi.sk/i/GR736d9MqsrkH.

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

Для примера, по ссылке https://yadi.sk/i/I1nYDhfEqss6v показан вид данной страницы при просмотре на экране iPhone.

Рекомендуем все таблицы верстать в табличной форме с помощью HTML тега <table>.

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

Рекомендуем использовать одинаковые горизонтальные и вертикальные отступы в ячейках таблицы размером 10-15 пикселей.

Общие замечания по компоновке страниц сайта

Стоит отметить, что в данный момент сайт работает на блоговой платформе Word Press с шаблоном, который соответствует блоговой подаче материалов.

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

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

Верстка сайта

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

Минимальная ширина сайта жестко зафиксирована и составляет 940 пикселей.

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

По ссылке https://yadi.sk/i/ah2KlGh2qsv3Z показано отображение главной страницы на мобильных устройствах и планшетах разного разрешения.

Рекомендуем обеспечить корректное отображение всех страниц сайта независимо от разрешений экрана.

Тексты сайта перенесены из Word с помощью визуального редактора Word Press без очистки HTML кода и приведению его к требованиям стандартов.

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

Для примера по ссылке представлен скриншот исходного кода главной страницы. Лишний HTML код обведен красным цветом https://yadi.sk/i/CUZAI1QdqswcD.

Аналогичные проблемы наблюдаются и на других страницах сайта.

Рекомендуем очистить HTML код всех страниц сайта от служебных фрагментов кода и избыточного форматирования.

Также HTML код страниц содержит CSS стили оформления элементов, которые не вынесены во внешние CSS-файлы. Это также отрицательно сказывается на работе сайта и его поисковом продвижении.

Для примера, по ссылке https://yadi.sk/i/Vm08zzVEqsxeL приведен код страницы, стили оформления внутри HTML кода выделены красным.

Рекомендуем все стили оформления элементов вынести во внешние CSS-файлы.

Источники трафика

Базой для хорошей конверсии является наличие качественного тематического трафика на сайт.

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

При этом большинство запросов напрямую не относятся к тематике сайта и предлагаемым услугам. Это показано на скриншоте по ссылке https://yadi.sk/d/GyVUPh_9qsy8w.

Детальный отчет в табличной форме можно увидеть по ссылке https://yadi.sk/i/kYqDdyylqsyLE.

С радостью отвечу на Ваши вопросы по результатам аудита по email, skype или телефону.