Читайте наш Telegram-канал про ужасы интерфейсных проектов!
Главная / Портфолио / Дизайн интерфейса для сайта с инструкциями

2019

ManualMachine • Логотип

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

Спроектировали дизайн интерфейсов сайта с инструкциями к бытовой технике

Цена

100 000 ₽

Сроки

1 неделя
Собака Павлова • ManualMachine • Дизайн интерфейса для сайта с инструкциями

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

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

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

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

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

Главная

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

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

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

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

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

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

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

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

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

Аналитика

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

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

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

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

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

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

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

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

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

Дизайн

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

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

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

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

Результат

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

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

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

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

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

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

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

Отзыв заказчика

Все хорошо, все понравилось.
Михаил Сергеев
Product owner

Цена

100 000 ₽

Сроки

1 неделя

Пишите нам: @sobakapavpro