---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-04-24
publishYear: 2016
name: Аквафор
title: UX-аудит интернет-магазина и имиджевого сайта
excerpt: Нашли интерфейсные недостатки и предложили точечные исправления.
context: |
Каждый UX-прокол в непроработанном интерфейсе — дыра, в которую утекают и время с вниманием пользователя, и недополученная прибыль бизнеса. [Компания «Аквафор»](https://www.aquaphor.ru/) решила убедиться, что их сайты не протекают.
isNew: true
image: ~/assets/images/portfolio/aquaphor/main.png
imageAlt: Собака Павлова • Аквафор • UX-аудит интернет-магазина и сайта
thumbnail:
src: ~/assets/images/portfolio/cards/aquaphor.svg
alt: Собака Павлова • Аквафор • UX-аудит интернет-магазина и сайта
logo:
src: ~/assets/images/portfolio/aquaphor/logo.svg
alt: Аквафор • Логотип
link: https://www.aquaphor.ru/
tags:
- ec
- ux-audit
- mass
- cjm
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
Провести [UX-аудит], как в этом кейсе. И [многое другое](/services).
collection: services
page: ux-audit
- text: |
### Наша экспертиза
368 интерфейсных проектов и более [140 проектных кейсов](https://sobakapav.ru/portfolio).
### Наши статьи о UX-исследованиях и CJM
collection: post
page: ux-audit-by-principles
- collection: post
page: criticize-then-suggest
- collection: post
page: everyday-information-architecture
- collection: post
page: qualitative-methods-in-ux-studies
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: zapovednik
- collection: portfolio
page: domotech
- collection: portfolio
page: goodwood
- collection: portfolio
page: avito
- collection: portfolio
page: okey
- collection: portfolio
page: petrovich
- collection: portfolio
page: sportmaster
director: Заказчик увидел сайты глазами пользователя.
result:
- text: К сожалению, не можем выложить результаты — NDA.
metadata:
canonical: https://sobakapav.ru/portfolio/aquaphor
title: Дизайн интерфейса • UX-аудит интернет-магазина и сайта
description: "Нашли интерфейсные недостатки и предложили точечные исправления."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/aquaphor/main.png'
width: 1680
height: 1130
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Задача](#anchor1) • [Начало](#anchor2) • [Портреты пользователей](#anchor3) • [Интернет-магазин: пользовательское тестирование](#anchor4) • [Основной сайт: пользовательское тестирование](#anchor5) • [Финал](#anchor6) • [Результат](#anchor7) • [Вывод](#anchor8) • [Отзыв, цены, сроки](#anchor9)
</TOC>
## <a name="anchor1" />Задача
У компании «Аквафор», которая продает фильтры для воды, два сайта. Так исторически сложилось.
На [красивом имиджевом сайте](https://www.aquaphor.ru/) можно почитать про компанию, узнать, чем хороши ее товары, подобрать фильтр. Но ничего нельзя купить, хотя есть и каталог, и карточки товаров.
<a href="/images/portfolio/aquaphor/1.png" target="_blank"></a>
_Из отчета. Главная страница имиджевого сайта_
Купить фильтр можно только [в интернет-магазине](https://spb.shop.aquaphor.ru/). Это отдельный сайт с совершенно другим дизайном.
<a href="/images/portfolio/aquaphor/2.png" target="_blank"></a>
_Из отчета. Главная страница интернет-магазина_
«Аквафор» заказал нам UX-аудит этих сайтов. Мы должны были провести usability-тестирование и выяснить, нуждаются ли сайты в редизайне интерфейсов.
## <a name="anchor2" />Начало
Нам нужно было понять, какие задачи должны решать сайты, насколько они с этим справляются и что мешает справляться лучше.
Мы исходили из того, что у основного сайта две цели: вызывать доверие и вести в интернет-магазин за покупкой. Задача интернет-магазина, очевидно, — продавать.
А чтобы узнать, насколько хорошо сайт выполняет свою задачу, надо понять, кто и как им пользуется (составить портреты пользователей) и что ему мешает (сформулировать гипотезы).
Эти этапы могут показаться скучными и не особо нужными. Зачем возиться с воображаемыми пользователями, если можно сразу посадить к монитору настоящих — и вперед?
Можно-то можно, но если, например, сайт для родителей тестировать на юных студентах, а веганский магазин — на мясоедах, выйдет смешно и неловко. Менее очевидные несоответствия тоже обессмыслят тестирование, только вы об этом даже и не узнаете. Потому и нужны портреты.
Еще важно выяснить не только кто пользуется сайтом — но и кто не пользуется, хотя вроде бы никаких препятствий к тому нет. К примеру, мы обнаружили, что женщины очень редко покупают что-нибудь в интернет-магазине «Аквафора». Отчего бы это?
<a href="/images/portfolio/aquaphor/3.png" target="_blank"></a>
_Из отчета. Имиджевый сайт, страница «О компании»_
Гипотезы же — чтобы знать, на что смотреть особенно внимательно. Пользователь не просто так пришел на сайт, а чтоб решить какую-то задачу. Какую именно? Как он ее решает? Может ли интерфейс ему помешать? Каким образом? А во время тестирования становится ясно, работает гипотеза или нет.
Мы сформулировали несколько предположений, которые предстояло проверить об пользователей. Очевиднее всего была гипотеза о необходимости объединить сайты. Забегая вперед, скажем, что она подтвердилась.
## <a name="anchor3" />Портреты пользователей
Мы начали с интернет-магазина, потому что видно было невооруженным глазом, что проблемы с usability там есть.
<a href="/images/portfolio/aquaphor/4.png" target="_blank"></a>
_Из отчета. Интернет-магазин, пользователь ищет фильтр_
Посмотрели статистику сайта и google-аналитику: [группы пользователей](https://drive.google.com/drive/u/1/folders/1UwPgyHjvKUn7SXQ_7P0L2RN9gXmhXyEf), пол, возраст, точки выхода. Выделили три основных паттерна поведения.
- Пользователь 1: ищет фильтр-кувшин, покупает, иногда возвращается за расходниками.
- Пользователь 2: покупает встраиваемый фильтр, потом регулярно приходит за сменными модулями.
- Пользователь 3: покупает дорогую систему очистки. Очень придирчив, хочет знать детали, понять, как ее устанавливать и не испортит ли она ремонт.
Поведение коррелировало с возрастом: Пользователю 1, например, от 25 до 35 лет. Логично: квартира, скорее всего, съемная, где вряд ли можно врезать стационарный фильтр. А Пользователю 3 — не меньше 45 лет. Тоже объяснимо: склонен больше тратить на здоровье, да и доход это позволяет.
<a href="/images/portfolio/aquaphor/5.png" target="_blank"></a>
_Из отчета. Интернет-магазин, пользователь сравнивает товары_
Поговорив с заказчиком, мы выделили еще одну группу пользователей.
- Пользователь 4. Вероятно, молодая семья с маленьким ребенком. Фильтры нужны и для питьевой воды, и для купания. Очень придирчивы, выбирают любой товар долго и тщательно, обязательно выясняют, подходит ли он для детей.
<a href="/images/portfolio/aquaphor/6.png" target="_blank"></a>
_Из отчета. Интернет-магазин, пользователь оформляет покупку_
## <a name="anchor4" />Интернет-магазин: пользовательское тестирование
Подобрали людей под портреты пользователей и начали тестировать интернет-магазин.
Наши гипотезы полностью подтвердились. Пользователи сами решали, куда пойти и что делать на сайте, но вели себя в точности так, как мы изначально предположили.
А еще мы заметили, что поведение человека на сайте чаще всего можно описать одной фразой: «Мне нужна помощь», «Мне нужна экспертная оценка», «Сам разберусь, нужно просто больше информации» и т. п.
Тестирование показало, что проблем у сайта немало. Во-первых, беда с текстами — перегружены профессиональными терминами.
К примеру, можно было подобрать фильтр по параметрам, но никто этого не делал — разобраться было слишком сложно. Как пользователю понять, нужны ли ему обратный осмос и семейство трио и жесткая ли у него вода?
Специалисты часто не сознают, что их профессиональный язык понятен не всем. Это нормально. И вполне поправимо — нужно просто научиться переводить тексты с профессионального языка на язык пользователя.
<a href="/images/portfolio/aquaphor/7.png" target="_blank"></a>
_Из отчета. Интернет-магазин, подбор фильтра по параметрам_
Во-вторых, мобильная версия оказалась очень неудобной, пользователям вообще ничего не было понятно. Купить кувшин или сменный модуль было проще в обычном магазине, чем со смартфона.
<a href="/images/portfolio/aquaphor/8.png" target="_blank"></a>
_Из отчета. Мобильная версия интернет-магазина_
В-третьих, и это самое главное, — недостаточно информации для принятия решений. А ведь покупатели дорогих систем очистки и родители могут просто покинуть сайт, если не сумеют выяснить, соответствует ли товар их критериям.
<a href="/images/portfolio/aquaphor/9.png" target="_blank"></a>
_Из отчета. Одна из страниц интернет-магазина_
Вот тут мы и поняли, отчего у сайта непропорционально мало пользователей-женщин. Покупательницы находили интерфейс более неудобным, чем покупатели, — в том числе из-за отсутствия критично важной информации. В частности, выяснить, подходит ли фильтр для ребенка, было очень нелегко.
## <a name="anchor5" />Основной сайт: пользовательское тестирование
Группы пользователей основного сайта — те же, что у интернет-магазина, портреты остались прежними, только сценарии другие. Поэтому мы сразу перешли к тестированию.
Имиджевый сайт, как мы и предполагали, оказался заметно удобнее интернет-магазина, хотя с текстами на нем было не очень хорошо.
Профессиональный язык, сложные технические термины, слишком общие маркетинговые фразы всегда мешают пользователям узнать что-то нужное, но это легко исправить.
<a href="/images/portfolio/aquaphor/10.png" target="_blank"></a>
_Из отчета. Фрагмент карточки товара_
Например, модули для встроенных фильтров нужно менять раз в два месяца. Интернет-магазин не напоминал их купить, а это было бы очень уместно. Система уведомлений — только на имиджевом сайте, да и там она хорошо спрятана.
<a href="/images/portfolio/aquaphor/11.png" target="_blank"></a>
_Из отчета. Карточка товара. Можно включить напоминание о замене модуля, но эта опция прячется под заголовком «Зарегистрировать» — и ее никто никогда не находит_
Мобильная версия оказалась удобней, чем у интернет-магазина. Хотя все равно нашлись мелкие, но существенные недостатки интерфейса.
<a href="/images/portfolio/aquaphor/12.png" target="_blank"></a>
_Из отчета. Мобильная версия имиджевого сайта_
С задачей вызывать доверие имиджевый сайт справлялся, а вот приводить к покупкам — не получалось. И главным препятствием была сама система из двух сайтов.
При попытке купить выбранный фильтр посетитель попадал в интернет-магазин. Другой сайт, другой дизайн — пользователей это раздражало, и они уходили.
## <a name="anchor6" />Финал
Потом мы сами, то действуя по сценариям, то усложняя и расширяя их, протестировали оба сайта. Экспертная оценка по большей части совпала с тем, что говорили пользователи.
Взяли все это — наши и пользовательские результаты тестирования — и написали отчет. По структуре — старый добрый [CJM](https://medium.com/@copylove/customer-journey-map-8a5ac61d6b5e) (Customer Journey Map, карта путешествия клиента). Пользователь попадает на главную страницу, пытается понять, что это за компания, что она предлагает, найдется ли товар для него. Переходит в каталог, пытается понять, какие есть категории товаров. Подбирает категорию, выбирает товар, изучает его, потом покупает.
<a href="/images/portfolio/aquaphor/13.png" target="_blank"></a>
_Из отчета. Имиджевый сайт, общий каталог фильтров_
Все плюсы и минусы, все удачные и неудачные решения, все наши рекомендации мы для наглядности отметили прямо на скриншотах страниц.
<a href="/images/portfolio/aquaphor/14.png" target="_blank"></a>
_Из отчета. Имиджевый сайт, раздел с фильтрами одного типа_
В результате отчет не просто описывал путешествие покупателя, а показывал все препятствия на этом пути и рассказывал, как сделать его быстрей и удобней.
## <a name="anchor7" />Результат
Заказчик доволен нами, а мы довольны заказчиком. Никогда раньше не видели такой быстрой реакции на usability-тестирование: получив отчет, заказчик немедленно внес наши рекомендации в ТЗ.
## <a name="anchor8" />Вывод
Некоторые вещи нужно делать регулярно: менять модули встроенных фильтров, проводить аудит интерфейса. По одной и той же, в общем-то, причине: и в фильтрах, и в интерфейсах со временем накапливаются неполезные штуки. И для пользователя неполезные, и для бизнеса.
Так что usability-тестирование интерфейса, если по уму, не одноразовый глобальный проект, а постоянное сопровождение.
## <a name="anchor9" />