Аудит юзабилити сайта дизайн-студии интерьера квартир

Вводная информация

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

Перед просмотром дополнительных материалов их желательно скачивать на компьютер.

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

Красным текстом и красными маркерами выделены обнаруженные ошибки и важная информация.

Общая информация по статистике сайта.

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

Логотип и слоган

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

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

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

Изображение логотипа размыто и содержит видимые искажения.

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

Две буквы «Ю» сделаны слишком мелкими и плохо видны.

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

Шрифт в слове «Дизайн» размыт. Используется стандартное подчеркивание как для ссылок, хотя данный элемент ссылкой не является.

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

Не согласована величина верхнего и нижнего отступа блока с логотипом.

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

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

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

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

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

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

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

Два практически одинаковых элемента сайта в одном случае сделаны картинкой, во втором – текстом.

В тексте пропущены запятые. Он оформлен как ссылка, хотя таковым не является.

Навигация по сайту

Качественная навигация по сайту является основой для построения эффективного юзабилити.

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

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

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

• https://yadi.sk/i/WNOfc0ZryKzFy
• https://yadi.sk/i/fSsxp7n4yL2BT
• https://yadi.sk/i/x9oToToTyL3NT

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

При переходе по подразделам главного меню не выделяется текущий раздел сайта. Это продемонстрировано на видео по ссылке https://yadi.sk/i/-hUO3lGRyL3s3.

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

Непонятно, это одна ссылка или две на разные разделы:

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

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

Так же стоит отметить, что второе слово в ссылке должно быть написано с маленькой буквы:

Компоновка и юзабилити главной страницы

Данный текст теряется рядом с сиреневой фоновой плашкой.

Должно быть написано «на дизайн квартир».

Общепринятым является написание «500 руб./ кв.м» или «500 руб./м²».

Все пространство первого экрана сайта занимает изображение интерьера.

Но оно не принадлежит дизайн-студии, размещено в продаже на фотостоках и используется на множестве других сайтов. Например:

• http://www.shutterstock.com/ru/pic-301325462/stock-photo-living-room-with-big-and-exclusive-chandelier.html
• https://t4.ftcdn.net/jpg/00/88/07/55/240_F_88075502_TLMQBZmP44X3cJuUODvNVjoCzhuOf0nz.jpg
• http://www.losangelesscene.com/wp-content/uploads/2015/09/Electrician-Services-home-los-angeles.jpg

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

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

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

Также сомнительным с точки зрения дизайна является использование белого текста на светлом фоне:

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

Непонятно, это ссылки или обычный текст:

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

Не согласовано взаимное расположение текстов в соседних блоках:

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

В большинстве текстов неверно используется троеточие:

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

Например, данное фото встречается во множестве публикаций на сторонних ресурсах:

http://www.colors.life/post/273155/

http://www.pysaq.com/?image=http://4.bp.blogspot.com/-GgRk2lvNLfQ/Ub8M0sojVFI/AAAAAAAAT0I/nJKMEfJnlws/s1600/Contemporary_Style_Home_in_Burlingame_California_on_world_of_architecture_01.jpg&title=Modern%20Contemporary%20Home%20Style%20House&tag=modern%20interior%20design%20styles

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

Достаточно большое пространство главной страницы занимает раздел с портфолио.

Но его юзабилити имеет ряд недостатков.

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

Заголовки изображений также дублируются по 2-6 раз.

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

При открытии фото нет следующих общепринятых функций:

• Перехода к предыдущему или последующему фото;
• Иконки для закрытия фото;
• Управления прокруткой галереи с помощью клавиатуры;
• Максимального увеличения фото.

Также нет никакой дополнительной текстовой информации с описанием особенностей конкретного объекта (площади, количестве комнат, стиле, стоимости проекта, его дате и т.д.)

Все это снижает привлекательность портфолио для пользователей.

Рекомендуем добавить на сайт современный скрипт просмотра фотогалерей. Более подробную информацию можно найти, например, тут http://ruseller.com/lessons.php?id=1425&rub=32.

Также рекомендуем опубликовать подробную информацию о проектах.

Часть фото при увеличении не помещаются в экран. Это показано на видео по ссылке https://yadi.sk/i/RRuSWJljyLJu9.

При уменьшении ширины окна браузера работать с портфолио практически невозможно. Макет страницы не адаптируется под нужный размер, фото не масштабируются. Это показано на видео по ссылке https://yadi.sk/i/_-y1z_20yLL3m.

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

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

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

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

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

Недостаточная контрастность белого текста на белом фоне.

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

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

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

В оформлении списков допущены ошибки:

Строки должны разделяться точкой с запятой либо точкой.

Неверно оформлены сноски с поясняющей информацией:

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

Отдельно стоит отметить, что отсутствует какая-либо информация о:

• Сроках проектирования;
• Авторском надзоре;
• Профессиональном опыте сотрудников;
• Количестве завершенных проектов;
• Достижениях компании;
• Участия в выставках;
• Партнерах;
• Помощи в согласовании документации с разрешительными органами.

Все это крайне отрицательно сказывается на доверии пользователей к предоставленной информации и, как следствие – конверсии.

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

Непонятно, для чего рядом расположены практически одинаковые формы отправки заявки.

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

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

Используется неверный формат написания контактного номера телефона:

Рекомендуем использовать общепринятый формат вида +7(912)718-44-89.

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

Рекомендуем сделать адрес электронной почты ссылкой.

Сомнительным является применение слова «disign» вместо design и двух точек в адресе почты.

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

Рекомендуем привязать адрес почты к доменному имени сайта и названию компании. Например, использовать ящик вида info@uudesign.ru

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

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

Нет проверки правильности ввода данных в поля формы. Можно отправить форму с пустыми данными. Видео показано по ссылке https://yadi.sk/i/h2xQ50HByLWvS. Это отрицательно сказывается на юзабилити и безопасности сайта.

Поля для текста заявки или вопроса сделаны слишком маленькими по высоте. В них помещается только одна строка символов.

Рекомендуем сделать поле ввода текста сообщения с помощью textarea высотой в 3-4 строки.

Отдельно стоит отметить, что на сайте в данный момент полностью отсутствуют:

• Город и адрес офиса;
• Какие-либо реквизиты компании, дизайнера или юридического лица;
• Схема проезда к офису;
• Возможность задать вопрос менеджеру в онлайн-чате, через skype или viber;
• Возможность звонка с сайта.

Это крайне отрицательно сказывается на доверии к информации на сайте и как следствие – конверсии и количестве заявок.

Рекомендуем явно указать все контактные данные студии и рассмотреть возможность использования комплексного решения для захвата пользователей и организации каналов общения. Например, krible.com, cb-killer.ru или аналогичные.

Страница «О нас»

Данный текст теряется рядом с сиреневым фоном главного меню и тремя сиреневыми блоками ниже:

Элементы ведут себя как ссылки, хотя таковыми не являются. Это показано на видео по ссылке https://yadi.sk/i/ZU8rxwJ4yLxxH

Неверно используется заглавная буква:

Используется разный размер шрифта в одинаковых текстовых блоках:

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

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

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

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

Контентные страницы сайта

В данный момент сайт содержит ряд информационных страниц с идентичными проблемами.

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

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

Возможность просмотра увеличенного фото в данный момент отсутствует. Это показано на видео по ссылке https://yadi.sk/i/Gb_j39cnyM4Ez.

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

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

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

Качественная верстка сайта является обязательным требованием юзабилити.

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

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

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

Макет выполнен фиксированной ширины. Его ширина ограничена в коде 1324 пикселями.

Это приводит к появлению горизонтальной прокрутки при уменьшении ширины окна. Кроме этого, некорректно отображается навигационное меню, элементы сайта не помещаются в окне браузера и присутствуют другие проблемы. Видео показано по ссылке https://yadi.sk/i/GJ4szp_kyNzTG

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

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

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

Стили оформления находятся внутри HTML кода:

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

Списки сверстаны обычным текстом с тегом переноса строки, а не соответствующих тегов <ul> и <li>.

На главной странице в данный момент отсутствует тег заголовка первого уровня H1. Используется только теги заголовка второго уровня для выделения анонсов статейных страниц. Это крайне отрицательно сказывается на SEO.

Для оформления важных заголовков используется обычный блок div:

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

Готов ответить на все вопросы по результатам аудита в скайпе, email или по телефону.