---
publishYear: 2020
name: Good Wood
title: Классический UX-аудит сайта
excerpt: Провели UX-аудит сайта компании, которая занимается строительством частных домов под ключ.
context: |
[Good Wood](https://www.gwd.ru/) — компания, которая проектирует и строит экологичные загородные дома в Москве и Санкт-Петербурге. Недешевые дома, ценой и качеством выше среднего. Однако продажи через интернет шли странно — приходящие на сайт покупатели не могли разобраться, по карману ли им продукция компании, можно ли построить дом в их регионе и т.п.
Сайт не давал ответов на эти вопросы, запутывая покупателей и заставляя компанию тратить время на нецелвую аудиторию.
Нашей задачей было — найти причины и переупаковать сайт так, чтобы пользователи быстро и легко находили ответы на свои вопросы.
isNew: true
logo:
src: ~/assets/images/portfolio/goodwood/logo.svg
alt: Good Wood • Логотип
link: https://www.gwd.ru/
image: ~/assets/images/portfolio/goodwood/main.png
imageAlt: Собака Павлова • Good Wood • Классический UX-аудит сайта
thumbnail:
src: ~/assets/images/portfolio/cards/goodwood.svg
alt: Собака Павлова • Good Wood • Классический UX-аудит сайта
tags:
- ec
- ux-audit
- mass
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-аудит](/services/ux-audit), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-audit
- text: |
### Наша экспертиза
368 интерфейсных проектов и более [140 проектных кейсов](https://sobakapav.ru/portfolio).
### Наши статьи о UX-аудитах и CJM
collection: post
page: ux-testing-results
- collection: post
page: before-interface-testing
- collection: post
page: professional-testing
- collection: post
page: ux-audit-by-principles
- collection: post
page: criticize-then-suggest
- text: |
### Хотите уметь так же?
Научим создавать и исследовать хорошие интерфейсы.
collection: promo
page: mio
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: zapovednik
- collection: portfolio
page: qiwi
- collection: portfolio
page: domotech
- collection: portfolio
page: lori
- collection: portfolio
page: documedd
outcome:
title: Некоторые цифры
numbers:
- number: 7 информантов
text: участвовали в тестирования
- number: 22 вопроса
text: в модели информационных ожиданий
- number: "> 70 комментариев"
text: с рекомендациями на доске Miro
review:
text: "Большое спасибо за работу, вдумчиво, профессионально, по делу, мы довольны."
person: Валентин Федотов
position: руководитель отдела digital-маркетинга
result:
- src: ~/assets/images/portfolio/miro.svg
text: Результаты аудита
link: https://miro.com/app/board/o9J_kiUy8sM=/
budget: "210 000 ₽"
time: "2 месяца"
metadata:
canonical: https://sobakapav.ru/portfolio/goodwood
title: Дизайн интерфейсов • Классический UX-аудит сайта
description: "Провели UX-аудит сайта компании, которая занимается строительством частных домов под ключ."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/goodwood/badge.png'
width: 1200
height: 630
type: website
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Отзыв, цены, сроки](#anchor4)
</TOC>
## <a name="anchor1" />Бизнес-задача
Скорректировать позиционирование, чтобы отсеять нецелевую аудиторию.
<a href="/images/portfolio/goodwood/2.png" target="_blank"></a>
_Один из домов компании_
## <a name="anchor2" />Задача «Собаки Павловой»
Провести аудит и предложить изменения.
В классический UX-аудит входят:
- Экспертная оценка интерфейса сайта.
- Тестирование интерфейса на реальных пользователях.
По результам экспертной оценки и пользовательского тестирования мы составляем отчет и предлагаем изменения.
<a href="/images/portfolio/goodwood/1-1.png" target="_blank"></a>
_Фрагмент отчета об аудите_
## <a name="anchor3" />Экспертная оценка
Вначале сайт оценивает наш эксперт, описывая основные интерфейсные ошибки и недочеты.
<a href="/images/portfolio/goodwood/4.png" target="_blank"></a>
_Меню.Технологии_
Например, в разделе меню «Технология» часть ссылок в меню выглядит как разделы блога. Кроме того, в этом разделе прячется очень важный пункт меню «Вопрос и ответ». Решение: сделать отдельные пункты меню «Блог», «Технологии» и «Вопрос и ответ».
## <a name="anchor3" />Пользовательское тестирование
Затем главное: пользовательское тестирование. Оно всегда начинается с того, что мы формулируем цель пользователя (в данном случае — «Изучить информацию о доме, купить») и его ключевые задачи:
1. Узнать, подходит ли мне эта компания?
2. Узнать, сколько денег я потрачу?
3. Выбрать дом.
4. (Когда выбор сделан) Связаться с компанией.
5. Найти ответы на другие вопросы.
Затем собираем из вопросов и ожиданий пользователей модель информационных ожиданий (МИО).
> Модель информационных ожиданий (МИО) — простая, но очень эффективная дизайн-практика, с помощью которой можно ответить на элементарные пожелания пользователя к интерфейсу сайта или приложения. На этом проекте мы придумали МИО, и с тех пор постоянно используем в дизайне интерфейсов. И вас [тоже можем научить](https://www.eduhund.ru/program/io/?utm_source=sobakapav&utm_medium=site&utm_campaign=page).
<a href="/images/portfolio/goodwood/10.png" target="_blank"></a>
_Модель информационных ожиданий сайта Good Wood_
Затем проводим пользовательское тестирование. Информанты (семь человек в данном случае) пытаются выполнить ключевые задачи и найти ответы на вопросы МИО. Мы фиксируем их удачи и неудачи, комментарии относительно затруднений и пожелания вида «Мне не хватает того-то», «А вот тут бы хотелось..».
Наши эксперты предалагают решения для каждой из найденных проблем.
<div class="flex gap-2 flex-wrap"><Image src="~/assets/images/portfolio/goodwood/11.png" alt="Классический UX-аудит сайта" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/goodwood/12.png" alt="Классический UX-аудит сайта" class="min-w-72 grow shrink basis-0" /></div>
На карточке проекта есть элемент, назначение которого остается непонятным пользователю: выглядит как «Добавить в избранное», на самом же деле это колочество построенных домов этого проекта. Пользователь может по ошибке нажимать на эти кнопки, желая собрать понравившиеся варианты в избранном.
Цитата пользователя: "Тут есть лайки, которые ни о чем, а сколько раз построили дом — очень круто. Тогда понятно, что этот проект люди выбирают и можно даже их найти, с ними пообщаться и получить честный отзыв. И есть большое количество жизненных ситуаций, которые этот проект закрывает."
Решения:
- разместить информацию о количестве построенных домов по этому проекту.
- вместо сердечка использовать «палец вверх», чтобы это не выглядело как «добавить в избранное».
- отдельно реализовать возможность добавления понравившихся домов в избранное.
## <a name="anchor3" />Результат
Рекомендации по точечным изменениям на сайте:
- Страницы, которые нужно перепроектировать.
- Тексты, которые нужно переписать.
- Навигационные элементы, которые следует изменить.
- Список работ, которые стоит провести.
- Сущности, которые желательно создать.
<a href="/images/portfolio/goodwood/3-1.png" target="_blank"></a>
_Главная страница_
Так, например, на главной странице пользователям сложно понять, сколько денег они потратят (нет информации о стоимости, решение — показать её) и какие дома предлагает компания (не хватает глобального поиска, например, для поиска проекта по названию).
Пользователю сложно понять, подходит ли ему вообще эта компания:
1. С первого экрана не совсем понятно, чем именно она занимается. Решение: выделить место на главном экране для краткого описания.
2. Карта РФ вводит в заблуждение. Пользователь может подумать, что Good Wood строит объекты по всей России. Решение:
- Определять местоположение пользователя и выводить карту его области (Московской или Ленинградской) с построенными объектами.
- Добавить контрол переключения между этими картами, для пользователей, у которых сайт не смог определить локацию.
3. Не совсем очевидно, что в сториз перечисляются преимущества компании. Решение:
- Визуализировать преимущества стоит другим способом. Наример, в виде пиктограм или выносов крупных цифр с текстом.
- Паттерн сторис использовать для других блоков: для вовлечения (интерактив), для превью публикаций блога и т.д.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/goodwood/5.png" />
<PhoneMockup image="/images/portfolio/goodwood/6.png" />
</div>
_Мобильная версия_
В мобильной версии пользователи, которые хотят сразу связаться с компанией, будут безуспешо искать конактную информуцию в шапке. Решение: вынести основные способы связи в шапку:
- вынести кликабельный номер телефона
- вынести кнопку «заказать звонок»
- вынести кликабельные иконки телефона, whatsapp и т.п.
- скомбинировать эти варианты
Кроме того, просматривая с телефона длинные страницы, нужно приложить много усилий, чтобы вернуться наверх. Решение: добавить фиксированную кнопку «наверх» в нижней части экрана.
В мобильной версии меню пользователя собьют с толку две близко расположенных кликабельных области:
- ссылка на разводящую страницу раздела (например, «Проекты»)
- контрол для раскрытия списка меню раздела
Из-за этого при попытке раскрыть аккордеон со списком меню, сайт ссылает пользователя на разводящую страницу раздела. Решение:
- Убрать ссылку на раздел из этого контрола, оставив кликабельную область только для возможности развернуть список меню.
- Ссылку на разводящую страницу можно разместить первым в разворачивающемся списке меню.
<a href="/images/portfolio/goodwood/7.png" target="_blank"></a>
_Проекты домов_
На разводящей странице проектов пользователю сложно понять, какие дома предлагает компания и сколько денег придется потратить:
1. 5 модулей выглядят однородными элементами интерфейса. Решение: Можно сделать 2 отдельных заголовка. Например: «материалы домов» и «типы проектов»
2. Непонятно, сколько денег может стоить тот или иной тип проекта. И как материал влияет на стоимость. Решение: Можно указать примерный диапазон цен.
<a href="/images/portfolio/goodwood/8-1.png" target="_blank"></a>
_Индивидуальные проекты_
На странице «Индивидуальные проекты»:
1. Выглядит так, будто большинство картинок — рендеры. На этой странице хочется увидеть примеры реализованных проектов.
Решение: добавить в фильтр опцию «проекты, реализации которых можно увидеть вживую» и\или добавить атрибут карточки «посмотреть построенный дом».
2. Из-за визуальной группировки с фильтрами кнопка «Индивидуальные проекты» выглядит как фильтр по индивидуальным проектам. Решения: переписать текст кнопки (например, «заказать индивидуальный проект») или перенести её в верхнюю часть страницы, примерно на уровень заголовка.
<a href="/images/portfolio/goodwood/9.png" target="_blank"></a>
_Услуги_
## <a name="anchor5" />