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

Аудит юзабилити №430

Дата аудита: ноябрь 2016 года

Объем отчета: 25 страниц 

 

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ошибки в юзабилити логотипа

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

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

Ошибки в юзабилити логотипа

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

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

Ошибки в юзабилити логотипа

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

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

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

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

Нет ссылки на главную страницу

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

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

Анализ карты кликов

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

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

Ошибки в юзабилити

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

Ошибки в текстах сайта

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

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

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

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

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

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

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

Ошибки в главном меню сайта

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

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

Ошибки в навигации по сайту

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

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

Ошибки в юзабилити сайта

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

Ошибки в текстах сайта

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

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

Ошибки в юзабилити сайта

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

Ошибки в текстах сайта

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

Ошибки в текстах сайта

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

Неправильная компоновка макета главной страницы

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

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

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

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

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

Белый текст на светлом фоне

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

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

Ссылки или обычный текст

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

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

Ошибки в макете страницы

Ошибки в макете страницы

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

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

Ошибки в текстах сайта

Ошибки в текстах сайта

Ошибки в текстах сайта

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

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

Не уникальные фото

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.

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

Ошибки в email

Ошибки в email

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

Сомнительным является применение слова «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 в ссылках

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

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

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

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

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

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

Ошибки в верстке списков

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

Нет заголовка H1

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

Ошибки в верстке сайта

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

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

Get new case studies by email:

More Case Studies

See all