Дизайн интерфейса для сайта с инструкциями

ManualMachine — сайт с инструкциями к бытовой технике.

Бизнес-задача

Вывести pet-проект на следующий уровень.

Заказчик хотел сделать сайт с инструкциями к бытовой технике простым, доступным и удобным.

Главная

Мобильная версия

Дизайн-задача

Нащей задачей было спроектировать дизайн интерфейса.

1. Для этого мы провели небольшое юзабилити-тестирование с тем, чтобы выяснить, насколько существующий сайт соответствует потребностям пользователя и чего им не хватает.

2. Руководствуясь результатами исследования, составили польлзовательские сценарии, описывающие основные варианты взаимодействия пользователя с системой.

Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть модуль дизайн-задачника «Сценарии взаимодействия» для тех, кто хочет научиться их использовать в дизайне интерфейсов.

3. Нарисовали макеты интерфейса, соответствующие пользовательским сценариям.

Как определить модель

Как определить модель. Мобильная версия

Аналитика

Юзабилити-тестирование с участием 5 респондентов показало, что все пользователи уверенно справляются только с одной из возможных задач взаимодействия с системой. Все респонденты легко находили инструкцию, если название бренда и модели находилось в видимой части списка. А, например, найти инструкцию в скрытой части списка смог только один пользователь из пяти.

С наиболее важной задачей — найти инструкцию к собственной технике — тоже справился всего один респондент, а ведь это основной сценарий использования сайта.

Основной вариант использования

Шаги основного сценария:

1. Пользователь ищет на главной странице название бренда интересующей его техники. Находит название, кликает по нему и переходит на страницу с моделями выбранного бренда.
2. На странице с моделями ищет и находит свою модель, переходит на страницу с инструкцией.
3. Открывается страница с инструкцией. Пользователь просматривает инструкцию.
4. Читает на сайте или скачивает.

Инструкции. Мобильная версия

Страница брендов

Дизайн

Мы дали задачу на три концепта трем разным дизайнерам. Заказчик выбирал один из трех концептов, и мы отрисовали остальные страницы в соответствии с этим концептом.

Собрали UI-kit, с помощью которого заказчик в дальнейшем сможет развивать сайт самостоятельно.

Фрагмент UI-kit’а

Результат

Макеты приняты заказчиком.

Страница модели с одной с инструкцией

Страница модели с несколькими инструкциями. Нераскрытый список

Вариант страницы инструкции с рекламным модулем и со ссылкой на личный кабинет в шапке