Дизайн

Зачем нужно прототипирование интерфейсов

Данил Шклярский
UI/UX-дизайнер

Оглавление

Не бывает идеального дизайна для всех пользователей и не бывает идеальных решений с первого раза. Поэтому всей команде разработки приходится создавать гипотезы, проверять их и придумывать новые, если прежние не привели к нужному результату. Это не всегда оправданный путь, так как разработка цифрового продукта стоит дорого. В такие моменты на помощь приходит прототипирование, о нём сегодня и поговорим.

Что такое прототипирование

Прототипирование — это процесс в работе дизайнера, когда он создаёт «иллюзию» рабочего интерфейса на базе нарисованных макетов или вайрфреймов в короткие временные сроки. Это и будет являться прототипом интерфейса.

С помощью прототипа можно взаимодействовать с продуктом и проводить пользовательские тестирования. И всё это без написания кода. Магия? Нет, обычный опыт работы с инструментами прототипирования и чёткое понимание, какой конечный результат необходимо получить.

Прототипирование экономит денежные затраты на разработку того, что может не сработать. И даёт возможность посмотреть на «рабочее приложение» до того, как программисты начнут писать код.

Как использовать прототипы

    Исходя из того, что прототип — это возможность предоставить функционирующий продукт на обозрение, я могу подобрать такие кейсы использования:
  • демонстрация клиенту; 
  • демонстрация пользователям для сбора качественных и количественных данных; 
  • демонстрация коллегам для получения обратной связи; 
  • демонстрация разработчикам для объяснения логики любого пользовательского пути в интерфейсе.

Я могу перечислять примеры ещё очень долго, думаю, суть понятна.

Всегда важно держать в голове цель — что именно необходимо проверить. Не всегда стоит прорабатывать прототип до мелочей, ведь не все функции будут использоваться в рамках тестирования гипотезы. Как и не каждое решение просуществует до финальной версии продукта.

Как выглядит прототип

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

    Перечислю некоторые инструменты для создания прототипов:
  • Figma 
  • Adobe XD 
  • Framer

Буду честен, чертёж на салфетке во время презентации с заказчиком вряд ли сработает. Но иногда это помогает быстро объяснить коллеге во время обеда, куда должна вести кнопка «Личный кабинет» на сайте.

Пример прототипа

Наша компания работает с большими и сложными цифровыми решениями, где прототипы помогают протестировать интерфейс на пользователях и учесть всю логику проекта. Покажу один кейс — Тренажёр английского, для которого мы собирали прототип. Этап прототипирования помог нам понять, правильно ли мы ведём пользователя по сайту, начиная с момента попадания на главную страницу и заканчивая взаимодействием с самим Тренажёром английского языка.

Заказчик принимал активное участие в разработке, и у него было своё представление, как выглядит путь пользователя. Мы собрали прототип, и стало понятно, что первоначальная схема сложная, поэтому мы доработали её и продумали новую логику. Таким образом удалось сэкономить бюджет проекта, не потратив его на лишнюю работу.

Покажу прототип одной из первых версий проекта

Почему важно помнить о прототипировании

Прототип помогает не тратить время на разработку непроверенного функционала. Вы показываете прототип пользователям, они дают вам обратную связь за короткое время. А разработчики не отвлекаются на лишнюю работу.

Поделюсь кейсом. Во время работы над проектом ЮФУ мы изучали, как действует целевая аудитория. И на этапе проектирования часто задавались вопросом, какая из наших идей лучше сработает. Мы не стали играть в «угадайку» и создали несколько прототипов для одного сценария, провели исследование на пользователях и выявили, какой интерфейс понятнее и удобнее. Этим мы сэкономили бюджет на часах программистов и передали им уже рабочий вариант.

Если нужно дёшево и сердито проверить работоспособность интерфейса, прототип — ваш помощник в ситуациях, когда неизвестно, какое дизайн-решение приведёт к желаемым результатам.


Оставьте заявку

Расскажите о проекте — мы его реализуем

Мы свяжемся с вами в течение 4 часов: обсудим цели проекта, требования к нему и составим план сотрудничества.
Не обязательно