По прочтению этой статьи вы узнаете эффективный способ, как за несколько часов оформить свою IT-идею в интерактивный прототип, и уже начать собирать обратную связь от потенциальных пользователей.

UX, ПРОЕКТИРОВАНИЕ

10 апр 2020

Перед тем, как начать рисовать картинки, хотя бы тезисно опишите портрет ваших потенциальных пользователей: возраст, контекст, в котором они будут использовать приложение. Опишите проблему или потребность, с которой они сталкиваются. Опишите, каким образом они решают её сейчас, и как им будет помогать решать её ваш сервис. Если есть конкуренты или продукты-заменители, тоже их выпишите. По статистике, если не заимствовать устоявшиеся решения на рынке, а делать всё с нуля, то такой интерфейс редко «заходит» пользователям, и в конечном итоге все равно приобретает аналогичный им вид. Всё это сильно поможет при проектировании.

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

С точки зрения инструментов, всё, что нам потребуется: Shape, Текст и Карандаш. У каждого есть небольшие нюансы.

Shape. А именно прямоугольники и круги (кнопки R и O). Лично мы в прототипах для квадратов немного скругляем углы. Это придает интерфейсу живости. Никаких теней и эффектов. Всё после первого раунда обратной связи.

Текст (T). Из шрифтов лучше выбрать один универсальный, вроде Roboto, а для разнообразия комбинировать его в разной степени жирности. Так пользователь не начнёт в них вглядываться. Вообще, тексты в прототипе — это главное. Не скупитесь потратить время, чтобы написать подходящие слова, вместо того, чтобы вставлять текст-рыбу. Также имейте ввиду, что текст — отличный заменитель для иконок.

Pencil (Shift+P). Многие почему-то недооценивают «Карандаш», хотя в Figma он позволяет за секунды рисовать схематичные изображения без графического планшета, одной только мышкой. Для прототипа это просто находка. Так вы можете нарисовать условные иконки, которые планируете в будущем вставить, и даже ключевые визуалы, которые придумали из головы, аналогов которых нет в интернете. Крутость «карандаша» в том, что вы можете нарисовать линию достаточно криво, но программа автоматически её более-менее выровняет. И ещё раз напомню, что это полностью SVG. То есть дальше вы можете крутить свою каляку-маляку как вам угодно, и менять её размеры, и жирность линий.

Владислав Гетманенко

Design Lead

Следующим шагом после того, как вы схематично оформили арт-борды вашего будущего IT-продукта, идёт их связывание между собой. Для этого мы переходим в раздел Prototype, после чего наводим на элемент, который будет отвечать за переход с одного экрана на другой, например, иконка «на главную», зажимаем на появившийся кружок рядом с ней, и ведём стрелку на соответствующий экран. Далее по аналогии связываем все оставшиеся элементы.

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

Два слова, почему Figma. Во-первых, она всем доступна: не требовательна к системе, и бесплатна для всех пользователей Windows и Mac. Скачать можно по этой ссылке. Во-вторых, в ней вы работаете сразу с векторными (SVG) элементами. И в-третьих, не отходя от дизайна, она позволяет создавать прототипы — то, что нам и нужно, чтобы тестировать свою IT-идею.

Есть всего 3 эффективных варианта, как можно собирать обратную связь по вашему продукту:

1. Личный контакт. Если у вас приложение — скачиваете на смартфон Figma Mirror — сервис, который будет дублировать изображение с Figma на телефон. Если у вас платформа или другой IT-продукт, то просто нажимаете на предпросмотр, и даёте ваш компьютер пользователю. Рассказать стоит только коротко о сути продукта. Никаких других комментариев давать не стоит. Просто сидите и молча наблюдайте, словно за экспериментом. По итогу, фиксируйте замечания пользователя, и задавайте уточняющие вопросы по типу: насколько вероятно, что они бы этим пользовались, что можно было бы улучшить, и чего не хватает.

2. Дать ссылку или сверстать. Ссылкой на предпросмотр можно поделиться. Сопроводительным сообщением также коротко укажите суть продукта, и как вариант, можете предложить пользователю сценарий. Например, «твоя задача найти такой-то товар, и заказать его». После прохождения, вы можете уточнить, насколько легко ему было пользоваться интерфейсом, и где возникли сложности. Ещё один вариант — это сверстать прототип на Tilda или любым другим способом. Скидывайте ссылку на сайт, предварительно привязав к нему Яндекс.Метрику, после чего отсматривайте Вебвизор, карту кликов, и уже на основе этих данных делайте выводы.

3. Реклама и сервисы. Сервис для тестирования гипотез Яндекс.Взгляд, классическая таргетированная реклама Вконтакте, Facebook, Instagram, а также профильные форумы, блоггеры, группы, телеграм-каналы и пр. Упакуйте вашу идею, создайте креативы и придумайте оффер, что вы можете дать взамен, если человек пройдет тест пользовательского поведения. Иногда получается сделать так, чтобы люди соглашались независимо от предлога, потому что им просто понравился интерактивный опрос, который вы создали, или интересна сама идея. В любом случае, это один из самых быстрых способов массово собрать обратную связь за небольшие деньги.

После отсечки, например, в 30 обратных связей, вы уже сможете выявить повторяющиеся замечания. Далее важно не усложнить. Фильтруйте предлагаемые доработки на предмет сложности. Всегда выбирайте самые простые способы, как улучшить продукт. Не нагромождайте функционал. После изменений проведите второй раунд сбора обратной связи, затем третий, и так далее, пока вы не увидите живые запросы в духе «а когда этим можно будет пользоваться?» — это верный признак спроса на ваш продукт ещё до его запуска.

20 авг. 2021

КЕЙС