---
publishYear: 2022
name: Окна Петербурга
title: Экспертная оценка и пользовательский аудит сайта компании
excerpt: Экспертная оценка и пользовательский аудит сайта «Окна Петербурга»
context: |
Компания [«Окна Петербурга»](https://www.okna-peter.ru/) занимается производством и продажей пластиковых, деревянных окон и аксессуаров к ним.
isNew: true
logo:
src: ~/assets/images/portfolio/okna/logo.svg
alt: «Окна Петербурга» • Логотип
link: https://www.okna-peter.ru/
image: ~/assets/images/portfolio/okna/main.png
imageAlt: Собака Павлова • «Окна Петербурга» • Экспертная оценка и пользовательский аудит
thumbnail:
src: ~/assets/images/portfolio/cards/spbwindows.svg
alt: Собака Павлова • «Окна Петербурга» • Экспертная оценка и пользовательский аудит
tags:
- ec
- ux-audit
- mass
relatedPages:
-
text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-аудит](/services/ux-audit), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-audit
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: ot-vinta
- collection: portfolio
page: petrovich
- collection: portfolio
page: stroynastroy
- collection: portfolio
page: goodwood
result:
- src: ~/assets/images/portfolio/miro.svg
text: Результаты аудита
link: https://miro.com/app/board/o9J_lW1RJTw=/
budget: "150 000 ₽"
time: "1 месяц"
outcome:
title: Некоторые цифры
numbers:
- title: "Протестировали"
number: '4 сценария'
text: "поведения пользователей"
- title: "Оставили в Miro"
number: '> 200 комментариев'
text: "с интерфейсными проблемами и решениями"
- title: "Нашли и описали"
number: '8 сквозных проблем'
text: "влияющих на интерфейс в целом"
review:
text: "По итогам аудита много вещей пришлось переосмыслить. Подсветились узкие места, которые были не видны из-за профдеформации и замыленного взгляда."
person: Константин Лопошко
metadata:
canonical: https://sobakapav.ru/portfolio/okna-peterburga
title: Дизайн интерфейсов • Экспертная оценка и пользовательский аудит сайта компании
description: "Экспертная оценка и пользовательский аудит сайта «Окна Петербурга»"
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/okna/badge.png'
width: 1200
height: 630
type: website
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Отзыв, цены, сроки](#anchor4)
</TOC>
## <a name="anchor1" />Бизнес-задача
Повысить конверсию сайта «Окна Петербурга».
<a href="/images/portfolio/okna/1.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Главная страница сайта «Окна Петербурга»_
## <a name="anchor2" />Дизайн-задача
Провести UX-аудит сайта: экспертную оценку и пользовательское тестирование.
<a href="/images/portfolio/okna/2.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Главная страница сайта «Окна Петербурга» c экспертными комментариями_
## <a name="anchor3" />Результат
### <a name="anchor4" /> Экспертная оценка
Наши эксперты нашли и описали восемь сквозных интерфейсных проблем и около двух сотен мелких ошибок и недочетов. Найденные проблемы ранжировали по важности и предложили для каждой одно или несколько решений.
<a href="/images/portfolio/okna/3.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Фрагмент отчета о UX-аудите_
### <a name="anchor5" /> Пользовательское тестирование
<a href="/images/portfolio/okna/6.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Сценарий покупки окна_
<a href="/images/portfolio/okna/7.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Сценарий остекления балкона_
<a href="/images/portfolio/okna/8.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Сценарий покупки окон для загородного дома_
## <a name="anchor6" />Сквозные проблемы
У компании «Окна Петербурга» огромный опыт: они уже 12 лет делаю окна, и делают их хорошо. И как все обладатели уникальной экспертизы, они стремятся делиться этой экспертизой. Дело хорошее, но на продающем сайте это немного лишнее.
Большинство сквозных проблем «Окна» порождались как раз стремлением рассказать как можно больше, объяснить как можно подробней и уместить на сайте примерно все, что его создатели знают об окнах. А знают они очень много.
### 1. Сайт перегружен информацией
Пользователю хочется, чтобы ему рассказали про окна, помогли выбрать подходящее, обозначили понятный дипазон цен, показали путь от первого звонка до установки. И все это ему хочется быстрее, короче и проще.
<a href="/images/portfolio/okna/11.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_..а придется читать про фурнитуру_
А приходится многократно переходить между разными страницами, чтобы найти что-то нужное. Или знакомиться с информацией, не имеющей прямого отношения к выбору окон прямо сейчас.
<a href="/images/portfolio/okna/10.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_...и про сравнительную теплотерю окон_
**Решение**. Убрать все, что не имеет прямого отношения к пользовательским сценариям. Фанаты фурнитуры могут почитать про нее и на отдельной странице.
### 2. Интерфейс уводит на другие страницы
Необходимая (прямо сейчас, по ходу сценария) информация или действие, которое нужно совершить для заказа, наоборот, могут быть вынесены на другие страницы. Такая организация сайта уводит пользователя от его цели.
<a href="/images/portfolio/okna/12.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Чтобы сделать заказ, пользователю придется перейти на страницу выбранного вида окон. Из списка — невозможно_
**Решение**. Давать пользователю возможность совершить все необходимые для заказа действия в любом месте, где у него может возникнуть потребность их совершить (на главной, на страницах услуг, в списках, на страницах отдельных товаров и т.п.).
### 3. Путь пользователя постоянно прерывается
Из-за первых двух сквозных интерфейсных ошибок простой линейный сценарий «Хочу — Ищу — Покупаю» становится непростым и непрямым.
Навигация ветвит пользовательский путь, пользователя постоянно уводят в сторону.
> Пользователь: Хочу окно
> Система: Есть 15 вариантов. Чтобы выбрать, надо разобраться, вот статьи и информация
> Пользователь уходит изучать информацию, флоу покупки прерван.
> — после изучения информации —
> Пользователь: Хочу вот такое вот окно.
> Система: Есть 10 вариантов крепления. Чтобы выбрать, надо разобраться, вот статьи и информация.
> Пользователь уходит изучать информацию — флоу покупки прерван.
_Такие развилки есть в выборе каждого элемента: петель, материалов, стёкол, фурнитуры и пр._
<a href="/images/portfolio/okna/13.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Вместо заказа окон пользователь уходит читать про порталы и двери_
**Решение**. Упростить путь, убрать развилки.
### 4. Информация дублируется
Некоторые блоки появляются неизменными более чем на одной страние. Это путает пользователя и раздувает объем сайта. В одних и тех же разделах приходится читать одно и то же.
<a href="/images/portfolio/okna/14.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
<a href="/images/portfolio/okna/15.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Это пользователь уже много раз читал другими словами_
**Решение**. Убрать дубли.
### 5. Страницы дублируются
Про одну и ту же модель окна может быть две разные страницы, на которые можно попасть только с определённой страницы сайта. Это также может путать пользователя и мешать навигации по сайту.
**Решение**. Убрать дублирующие страницы.
### 6. Страницы неконсистентны
Например, каждая страница-описание вида окон выглядит по-разному, пользователю приходится переучиваться, у него не складывается паттерн использования сайта
<a href="/images/portfolio/okna/16.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Услуги тоже описаны по-зазному_
**Решение**. Унифицировать страницы.
### 7. Кнопки неконсистентны
Кнопки с одинаковым действием называются по-разному, пользователь может не понять, какая кнопка ему нужна
**Решение**. Унифицировать кнопки.
### 8. Нет пояснений и подписей к примерам и моделям
Это мешает пользователю ориентироваться на сайте.
<a href="/images/portfolio/okna/18.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Тут бы не помешали поясняющие подписи_
<a href="/images/portfolio/okna/19.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_И тут тоже не помешали бы_
**Решение**.
### <a name="anchor5" /> KPI
Одна из главных проблем была вне интерфейса, хоть и отражалась в нем самым прямым образом.
Мы обратили внимание, что сайт часто — по любому поводу и без повода вовсе — предлагает пользователю оставить свой номер телефона. Стали выяснять, отчего так. И выяснилось вот что.
<a href="/images/portfolio/okna/22.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Здесь предложение оставить контакты оправдано, хоть и не очень удачно сформулировано. Пользователь действительно может захотеть вызвать замерщика_
Команда маркетинга через сайт пыталась достигать своих KPI. А их KPI зависел не от продаж, а от количества пользователей, оставививших номер телефона для связи. Так в компании исторически сложилось. Поэтому сайт собирал у людей номера телефонов при любой возможности.
<a href="/images/portfolio/okna/20.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_А здесь сайт собирает телефон — вместо того, чтоб рассказать о ценах. Пользователя это только разозлит_
<a href="/images/portfolio/okna/21.png" alt="UX-аудит сайта «Окна Петербурга»" target="_blank">
</a>
_Так и вышло. Пользователь разозлился_
Пользователей это, конечно, раздражало, — мы убедились в этом во время тестирования. Телефоны собирались плохо. Маркетологам, пользователям, бизнесу — всем было плохо.
**Решение**. Перевесить KPI на продажи.
## <a name="anchor4" />Итог
---