---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-09-05
publishYear: 2021
name: МирБир
title: UX-аудит магазина для пивоваров
excerpt: Экспертная оценка и пользовательское тестирование интернет-магазина «МирБир»
context: |
[«МирБир»](https://www.mirbeer.ru/) — крупная сеть оффлайн-магазинов оборудования и аксессуаров для домашнего пиво- и сыроварения, виноделия, изготовления самогона и т.п. Интернет-магизин у них, конечно, тоже есть. В 2021 году обратилась к нам за его UX-аудитом.
isNew: true
logo:
src: ~/assets/images/portfolio/mirbeer/logo.svg
alt: «МирБир» • Логотип
link: https://www.mirbeer.ru/
image: ~/assets/images/portfolio/mirbeer/main.png
imageAlt: Собака Павлова • «МирБир» • UX-аудит магазина для пивоваров
thumbnail:
src: ~/assets/images/portfolio/cards/mirbeer.svg
alt: Собака Павлова • «МирБир» • Экспертная оценка и пользовательское тестирование интернет-магазина
tags:
- ec
- ux-audit
- mass
relatedPages:
-
text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн](/ux-design) и [продуктовые исследования](/ux-researches), независимо или [на аутсорсе](/ux-outstaff).
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
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: lab4u
- collection: portfolio
page: zapovednik
- collection: portfolio
page: qiwi
- collection: portfolio
page: domotech
- collection: portfolio
page: simetra
- collection: portfolio
page: etm
- collection: portfolio
page: onesoil
- collection: portfolio
page: okna-peterburga
- collection: portfolio
page: goodwood
- collection: portfolio
page: documedd
result:
- src: ~/assets/images/portfolio/miro.svg
text: Результаты аудита
link: https://miro.com/app/board/o9J_lW1RJTw=/
budget: "220 000 ₽"
time: "1 месяц"
director: "Неожиданное последствие этого проекта: менеджер, который за него отвечал, всерьез увлекся домашним пивоварением."
outcome:
title: Некоторые цифры
numbers:
- title: Проверили
number: "> 40 страниц сайта"
text: в десктопной и мобильной версиях
- title: "Оставили в Miro"
number: '> 130 комментариев'
text: "с интерфейсными проблемами и решениями"
- title: "Нашли и описали"
number: '> 100 проблем'
text: "мешающих пользователям"
metadata:
canonical: https://sobakapav.ru/portfolio/mirbeer
title: Дизайн интерфейсов • UX-аудит магазина для пивоваров
description: "Экспертная оценка и пользовательское тестирование интернет-магазина «МирБир»"
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/mirbeer/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Экспертная оценка](#anchor4) • [Пользовательское тестирование](#anchor5) • [Рекомендации](#anchor6) • [Работа с каталогом](#anchor7) • [Поиск](#anchor8) • [Фильтры](#anchor1) • [Полезный контент](#anchor2) • [Не только интерфейс](#anchor10) • [Отзыв, цены, сроки](#anchor11)
</TOC>
## <a name="anchor1" />Бизнес-задача
Оценить целесообразность инвестиций в развитие сайта.
## <a name="anchor2" />Дизайн-задача
Выявить проблемные места в интерфейсе, чтобы бизнес мог оценить необходимость и стоимость улучшений.
## <a name="anchor3" />Результат
Провели UX-аудит, состоящий из экспертной оценки и пользовательского тестирования.
Передали заказчику перечень интерфейсных проблемы и рекомендации по их решению.
<a href="/images/portfolio/mirbeer/1.png" target="_blank"></a>
_Результаты аудита оформили, как обычно, в Miro_
### <a name="anchor4" /> Экспертная оценка
Обсудили сайт с заказчиком: собрали бизнес-требования и основные сведения о пользователях. Зафиксировали первую версию пользовательских сценариев.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Затем эксперт прошел по сайту, оценивая проходимость основных сценариев.
<a href="/images/portfolio/mirbeer/0.png" target="_blank"></a>
_Проверка выполняемости ключевых задач пользователей на экранах сайта Mirbeer_
Артефакты:
- бизнес-требования,
- пользовательские сценарии,
- результаты экспертной оценки сайта
### <a name="anchor5" /> Тестирование сайта на пользователях
Серия тестирований сайта на пользователях:
- Разработали гайд для проведения тестирования
- Зафиксировали и обсудили требования к респондентам
- Подобрали респондентов для тестирования сайта
- Провели первый пул тестирований
- Зафиксировали и обработали результаты тестирований, внесли правки в гайд
- Провели второй пул тестирований, обработали результаты
<a href="/images/portfolio/mirbeer/2.png" target="_blank"></a>
_Главная страница сайта Mirbeer с комментариями_
Артефакты:
- гайд для тестирования
- результаты тестирования
- скриншоты интерфейса сайта с комментариями
<a href="/images/portfolio/mirbeer/3.png" target="_blank"></a>
_Одна из страница сайта. Комментарий про навигацию — экспертый. Комментарий про пивоварни цитирует пользователя_
### <a name="anchor6" /> Рекомендации
Сформулировали рекомендации по исправлению найденных интерфейсных ошибок и улучшению сайта.
Обычно во время [UX-аудита](/services/ux-audit) мы этим и ограничиваемся, дальше уже [точечный редизайн](/services/redesign), [UI-редизайн](/services/ui-redesign) или [полный редизайн по ключ](/services/ux-design).
Но в этом случа мы договорились с заказчиком, что нарисуем черновые макеты: варианты исправлений, которые можно сделать. И нарисовали.
<a href="/images/portfolio/mirbeer/4.png" target="_blank"></a>
_Черновые макеты мобильной версии_
Экспертная оценка и пользовательское тестирование выявили более сотни интерфейсных проблем (и одну критическую неинтерфейсную).
Основная часть интерфейсных проблем была связана с организацией каталога, фильтрами и поиском.
### <a name="anchor7" /> Работа с каталогом
**1.** В каталоге очень много разделов, в которые нужно внимательно вчитываться. Пользователи часто ошибаются и не могут понять, в какую категории отнесли нужный товар.
**Пример**: Респонденты затруднялись найти и подобрать пробки к бутылкам: не видели, что пробки и крышки могут находится в отдельном разделе каталога, "в моей картине мира крышка для бутылки — это не оборудование".
<a href="/images/portfolio/mirbeer/20.png" target="_blank"></a>
_Каталог_
**Решение**: Сделать разворачивающийся каталог, чтоб была возможность посмотреть все категории на одной странице.
<a href="/images/portfolio/mirbeer/2-1.png" target="_blank"></a>
_Одно из наших предложений: разворачивающийся каталог_
**2.** Один и тот же товар относится к нескольким категориям. Это существенно усложняет поиск по каталогу. Про поиске через поисковую строку можно открыть и пройтись по всем подразделам, которые нашлись.
**Примеры**: Ищем соковыжималку для яблочного сока, чтобы сделать сидр. Находим ее в товарах для виноделов. Без поисковой строки ее не найти.
Ищем спиртометр. Он есть в категории «Измерения» (пиво) и «Измерения и контроль» (самогон).
**Решение**: Упростить структуру каталога и по возможности исключить двойную категоризацию.
**3.** В каталоге есть два блока:
- первый группирует товары по хобби (пивоварение, самогоноварение, виноделие, кулинария)
- второй группирует на Пивоварни, Самогонные аппараты, Готовые наборы, Ингредиенты, Оборудование.
Второй не структурирован, фильтры в нем нелогичны и в целом он сбивает покупателей с толку.
**Решение**: Переосмыслить структуру каталога.
**4.** Под заголовком «Каталог» вместе с собственно каталогом включены пункты, которые к нему не относятся вообще («Новости», «Обзоры», «Рецепты» и т.п.) или относятся частично («Акции», «Уценка» и т.п.). Пользователи не ожидают их здесь увидеть.
**Решение**: Перенести пункты, не относящиеся к каталогу, наверх в шапку. Чтоб каталог стал еще компактней, можно убрать иконки.
<a href="/images/portfolio/mirbeer/2-2.png" target="_blank"></a>
_Один из наших черновых макетов: все лишнее — в шапку, иконки убраны_
**5.** Кнопка «Назад» работает как браузерная, возвращая не на предыдущую ветку каталога, а на страницу, просмотренную ранее (например, к ранее просмотренному товару). Хочется посмотреть все по очереди, но при переходе в раздел Бренда пивоварен остальные пропадают. Нужно возвращаться, чтобы посмотреть все. Некоторые страницы пивоварен пустые.
<a href="/images/portfolio/mirbeer/9.png" target="_blank"></a>
_Страница пивоварен_
**Решение**: Вместо кнопки «Назад» сделать предыдущую ветку каталога. При переходе в бренд пивоварни выделять его, но не скрывать остальные. Указывать количество товаров в бренде пивоварни, пустые выделять неактивным цветом.
<a href="/images/portfolio/mirbeer/9-1.png" target="_blank"></a>
_Исправить можно так_
### <a name="anchor8" /> Поиск
**1.** Не понятно, что вверху собраны мои последние запросы. Не видно кнопку «Найти».
<a href="/images/portfolio/mirbeer/5.png" target="_blank"></a>
_Поиск_
**Решение**: Подписать последние запросы и выделить кнопку «Найти».
<a href="/images/portfolio/mirbeer/5-1.png" target="_blank"></a>
_Вот так можно исправить_
**2.** Предварительные результаты не подсказывают запросов без перехода в категории.
<a href="/images/portfolio/mirbeer/6.png" target="_blank"></a>
_Найденные товары находятся в трех категориях, но не в общей «Солод»_
**Решение**: В начале подсказывать запросы, а затем запросы в категориях.
<a href="/images/portfolio/mirbeer/6-1.png" target="_blank"></a>
_Исправить можно так_
<a href="/images/portfolio/mirbeer/6-2.png" target="_blank"></a>
_Или так_
**3.** Результаты поиска по запросу показываются в одной из категорий, а не по всему каталогу.
<a href="/images/portfolio/mirbeer/7.png" target="_blank"></a>
_Результаты поиска_
**Решение**: Показывать все найденные результаты. В категориях сбоку пользователь сам сможет отфильтровать найденное.
<a href="/images/portfolio/mirbeer/7-1.png" target="_blank"></a>
_Наш вариант_
### <a name="anchor9" /> Фильтры
**1.** В разделе «Ингредиенты» респондентов смутило отсутствие структуры и все возможные фильтры, собранные в одном месте. Фильтры очень просто становятся взаимоисключающими. В «Ингредиентах» (и других категориях, которые не делятся на хобби) есть фильтры, подходящие только для пивоваров. Этими фильтрами не получится воспользоваться для поиска, например, виноделу.
**2.** В фильтре везде используются радиокнопки, хотя многие из них предполагают множественный выбор.
**3.** Не самый важный фильтр вынесен наверх.
<a href="/images/portfolio/mirbeer/8.png" target="_blank"></a>
_Фильтры_
**Решения**: 1. Убрать разделы, не относящиеся к хобби, или внутри категории добавить деление на хобби. До уточнения хобби показывать только общие фильтры. 2. Использовать чекбоксы для множественного выбора, а радиокнопки для выбора одного варианта из нескольких. 3. Изменить порядок фильтров.
<a href="/images/portfolio/mirbeer/8-1.png" target="_blank"></a>
<a href="/images/portfolio/mirbeer/8-2.png" target="_blank"></a>
_Варианты решения_
**4.** Сейчас на сайте используются 2 вида фильтров и сотрировки товаров:
- При переходе в каталог фильтр и сортировка располагаются над списком товаров. В фильтре тоже самое, что и в меню.
- При переходе из поиска фильтр и сортировка фиксируются внизу экрана.
Первый фильтр выезжает сбоку, второй открывается на весь экран. Второй выглядит понятнее: кнопка «Показать» всегда зафиксирована внизу, кнопка «Назад» возвращает на уровень выше.
<a href="/images/portfolio/mirbeer/21.png" target="_blank"></a>
_Два вида фильтров_
**Решение**: Унифицировать фильтры.
### <a name="anchor10" /> Полезный контент
**1.** Полезный контент вроде статей, калькуляторов, обзоров и видео не заметен. И включен в «Каталог».
Респонденты оценили наличие полезных материалов и их содержание. Но самостоятельно не нашли их. Двое постоянных покупателей также не знали об их существовании.
**Решение**: Вынести отдельно контент. Например, предложить его в карточке товара.
**2.** Почти все товары «Мирбира» сами по себе сложные и многосоставные, по отдельности никогда не используются. Для комфортной работы с сайтом нужно многое знать о пивоварении, поэтому постоянные покупатели справлялись с заданиями без особых сложностей.
Для начинающего не очевидно, что может понадобиться к его покупке, что нужно добавить и без чего не получится это использовать. Кроме того, новичку нелегко рассчитать, в каком соотношении нужно купить компоненты.
**Примеры**: 1) «Все время путаюсь, какие экстракты мне нужны, охмененные или неохмеленные. Там нелогично, что неохмеленными можно заменять декстрозу». 2) «Сколько мне нужно купить декстрозы для этого объема экстракта».
**Решение**: Отчасти проблема решена вариантами использования, рецептами в описании товара. Есть «Набор» — предложение добавить товары, но с мотивацией получить скидку. Этот блок все респонденты во время тестирования пропускали.
Тем не менее, можно это улучшить и добавить рекомендуемые товары к существующим (пробки нужного размера к бутылкам и т. п.). Предлагать подходящие рецепты, статьи и калькуляторы после описания товаров. Сделать блок «Вам потребуется» более заметным и указывать ссылки на товары, которые можно купить на сайте.
<a href="/images/portfolio/mirbeer/10-1.png" target="_blank"></a>
<a href="/images/portfolio/mirbeer/10-2.png" target="_blank"></a>
_Варианты решения_
### <a name="anchor11" /> Не только интерфейсные проблемы
Пользовательское тестирование выявило одну серьезную проблему сайта, не имеющую отношения к интерфейсам.
Дело в том, что на сайте про пиво пользователи пытались купить... пиво!
В оффлайн-магазинах «Мирбир» огромный выбор крафтового пива (а также сидра и медовухи) со всего мира. И конечно, ценители пива ожидают его увидеть и в интернет-магазине, забывая, что алкоголь нельзя продавть онлайн.
Это не интерфейсная проблема, но ее можно решить с помощью интерфейса: объяснить на видном месте, почему купить пиво с доставкой не получится, и предложить альтернативные способы добыть вожделенный крафт (например, выбрать и отложить в ближайшем «Мирбире» до самовывоза).
## <a name="anchor12" />