---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-01-28
publishYear: 2019
name: ManualMachine
title: Дизайн интерфейса для сайта с инструкциями
excerpt: Спроектировали дизайн интерфейсов сайта с инструкциями к бытовой технике
context: |
[ManualMachine](https://manualmachine.com/) — сайт с инструкциями к бытовой технике.
logo:
src: ~/assets/images/portfolio/manualmachine/logo.svg
alt: ManualMachine • Логотип
link: https://manualmachine.com/
image: ~/assets/images/portfolio/manualmachine/main.png
imageAlt: Собака Павлова • ManualMachine • Дизайн интерфейса для сайта с инструкциями
thumbnail:
src: ~/assets/images/portfolio/cards/manualmachine.svg
alt: Собака Павлова • ManualMachine • Дизайн интерфейса для сайта с инструкциями
tags:
- ec
- ux-design
- mass
- mob
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design), [редизайн интерфейса](/services/redesign), [продуктовые исследования](/services/research) и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим создавать удобные интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: nlmk
- collection: portfolio
page: boracase
result:
- text: Покажем из рук в руки и расскажем ещё больше
link: 'mailto:we@sobakapav.ru'
budget: 100 000 ₽
time: '1 неделя'
review:
text: |
Все хорошо, все понравилось.
person: Михаил Сергеев
position: Product owner
metadata:
canonical: https://sobakapav.ru/portfolio/manualmachine
title: UX-дизайн • Дизайн интерфейса для сайта с инструкциями
description: 'Спроектировали дизайн интерфейсов сайта с инструкциями к бытовой технике'
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/manual-machine/badge.png'
width: 1200
height: 630
---
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) •
• [Результат](#anchor5) • [Отзыв, цены, сроки](#anchor6)
</TOC>
## <a name="anchor1" />Бизнес-задача
Вывести pet-проект на следующий уровень.
Заказчик хотел сделать сайт с инструкциями к бытовой технике простым, доступным и удобным.
<a href="/images/portfolio/manualmachine/1.png" target="_blank" alt="Дизайн интерфейса для сайта с иструкциями">
</a>
<em>Главная</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/manualmachine/7.png" />
<PhoneMockup image="/images/portfolio/manualmachine/8.png" />
</div>
_Мобильная версия_
## <a name="anchor2" />Дизайн-задача
Нащей задачей было спроектировать дизайн интерфейса.
1. Для этого мы провели небольшое юзабилити-тестирование с тем, чтобы выяснить, насколько существующий сайт соответствует потребностям пользователя и чего им не хватает.
2. Руководствуясь результатами исследования, составили польлзовательские сценарии, описывающие основные варианты взаимодействия пользователя с системой.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
3. Нарисовали макеты интерфейса, соответствующие пользовательским сценариям.
<a href="/images/portfolio/manualmachine/3.png" target="_blank" alt="Дизайн интерфейса для сайта с иструкциями">
</a>
<em>Как определить модель</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/manualmachine/9.png" />
<PhoneMockup image="/images/portfolio/manualmachine/10.png" />
</div>
_Как определить модель. Мобильная версия_
## <a name="anchor3" />Аналитика
Юзабилити-тестирование с участием 5 респондентов показало, что все пользователи уверенно справляются только с одной из возможных задач взаимодействия с системой. Все респонденты легко находили инструкцию, если название бренда и модели находилось в видимой части списка. А, например, найти инструкцию в скрытой части списка смог только один пользователь из пяти.
С наиболее важной задачей — найти инструкцию к собственной технике — тоже справился всего один респондент, а ведь это основной сценарий использования сайта.
<a href="/images/portfolio/manualmachine/14.png" target="_blank" alt="Дизайн интерфейса для сайта с иструкциями">
</a>
<em>Основной вариант использования</em>
Шаги основного сценария:
1. Пользователь ищет на главной странице название бренда интересующей его техники. Находит название, кликает по нему и переходит на страницу с моделями выбранного бренда.
2. На странице с моделями ищет и находит свою модель, переходит на страницу с инструкцией.
3. Открывается страница с инструкцией. Пользователь просматривает инструкцию.
4. Читает на сайте или скачивает.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/manualmachine/11.png" />
<PhoneMockup image="/images/portfolio/manualmachine/12.png" />
</div>
_Инструкции. Мобильная версия_
<a href="/images/portfolio/manualmachine/2.png" target="_blank" alt="Дизайн интерфейса для сайта с иструкциями">
</a>
<em>Страница брендов</em>
## <a name="anchor4" /> Дизайн
Мы дали задачу на три концепта трем разным дизайнерам. Заказчик выбирал один из трех концептов, и мы отрисовали остальные страницы в соответствии с этим концептом.
Собрали UI-kit, с помощью которого заказчик в дальнейшем сможет развивать сайт самостоятельно.
<a href="/images/portfolio/manualmachine/13.png" target="_blank" alt="Дизайн интерфейса для сайта с иструкциями">
</a>
<em>Фрагмент UI-kit'а</em>
## <a name="anchor5" /> Результат
Макеты приняты заказчиком.
<a href="/images/portfolio/manualmachine/4.png" target="_blank" alt="Дизайн интерфейса для сайта с иструкциями">
</a>
<em>Страница модели с одной с инструкцией</em>
<a href="/images/portfolio/manualmachine/5.png" target="_blank" alt="Дизайн интерфейса для сайта с иструкциями">
</a>
<em>Страница модели с несколькими инструкциями. Нераскрытый список</em>
<a href="/images/portfolio/manualmachine/6.png" target="_blank" alt="Дизайн интерфейса для сайта с иструкциями">
</a>
<em>Вариант страницы инструкции с рекламным модулем и со ссылкой на личный кабинет в шапке</em>
## <a name="anchor6" />