Илья Александров написал о своём опыте создания прототипов: аппарат по продаже симкарт, экран в кабине грузовика, процесс настройки «лайтпака» (аналог Philips Ambilight), звуковая индикация в носимом устройстве — всё кроме сайтов и приложений.
Зачем эти прототипы потребовались, как помогли сэкономить время, сдвинуть проект с мёртвой точки и создать более качественный продукт.
#prototype
Зачем эти прототипы потребовались, как помогли сэкономить время, сдвинуть проект с мёртвой точки и создать более качественный продукт.
#prototype
Medium
8 историй о прототипах
Об интересных прототипах из своей работы и жизни: носимые устройства, компьютерные игры, автомобили, книги и другое.
Олег Удалов рассказал об интерактивных прототипах.
— Интерактивный прототип симулирует взаимодействие пользователя с продуктом;
— У прототипов может быть разная детализация: от вайрфреймов (можно проверить сценарии взаимодействия) до готовых макетов (становятся основной для разработки продукта);
— Состав прототипа и уровень детализации можно адаптировать под текущие задачи, например: составить представление о будущем продукте, увидеть возможные проблемы предлагаемого решения и потерянные сценарии и экраны, оценить и протестировать удобство интерфейса, получить обратную связь и новые идеи от заказчика или целевой аудитории;
— Прототип создаётся до написания кода и позволяет быстро вносить изменения. Как следствие, сокращаются срок и стоимость разработки;
— Инструменты для создания: Figma, Invision, Protopie, Principle, Framer. От себя добавлю: Axure.
#prototype
— Интерактивный прототип симулирует взаимодействие пользователя с продуктом;
— У прототипов может быть разная детализация: от вайрфреймов (можно проверить сценарии взаимодействия) до готовых макетов (становятся основной для разработки продукта);
— Состав прототипа и уровень детализации можно адаптировать под текущие задачи, например: составить представление о будущем продукте, увидеть возможные проблемы предлагаемого решения и потерянные сценарии и экраны, оценить и протестировать удобство интерфейса, получить обратную связь и новые идеи от заказчика или целевой аудитории;
— Прототип создаётся до написания кода и позволяет быстро вносить изменения. Как следствие, сокращаются срок и стоимость разработки;
— Инструменты для создания: Figma, Invision, Protopie, Principle, Framer. От себя добавлю: Axure.
#prototype
Хабр
Чем так хороши кликабельные прототипы
Интерактивные прототипы создаются во время разработки на стадии аналитики и дизайна. В статье объяснили, почему этот артефакт так важен при создании новых программных продуктов. Пример...
Маргарита Романова показала, как без больших трудозатрат повысить интерактивность прототипов в Фигме.
— Выделение строки таблицы, отображение раскрывающегося списка действий со строкой, изменение статуса строки — с помощью интерактивных компонентов;
— Для раскрывающегося списка настройка Absolute position позволяет игнорировать Auto layout компонента, в котором он находится;
— Для Auto layout таблицы настройте Canvas stacking: First on top. Так верхние строки расположатся в слоях выше, и нижние строки не будут перекрывать раскрывающиеся списки действий;
— Отображение в таблице большого количества тултипов;
— Component properties позволяет работать с текстом, не переходя на конкретный слой с текстом. Функция Expose properties from Nested instances позволяет редактировать текст тултипа прямо в свойствах инстанса родительского компонента;
— Чтобы редактировать текст тултипов, которые отображаются с помощью интерактивного компонента, для состояния компонента без тултипа надо добавить тултип с нулевой прозрачностью.
#figma #prototype #table
— Выделение строки таблицы, отображение раскрывающегося списка действий со строкой, изменение статуса строки — с помощью интерактивных компонентов;
— Для раскрывающегося списка настройка Absolute position позволяет игнорировать Auto layout компонента, в котором он находится;
— Для Auto layout таблицы настройте Canvas stacking: First on top. Так верхние строки расположатся в слоях выше, и нижние строки не будут перекрывать раскрывающиеся списки действий;
— Отображение в таблице большого количества тултипов;
— Component properties позволяет работать с текстом, не переходя на конкретный слой с текстом. Функция Expose properties from Nested instances позволяет редактировать текст тултипа прямо в свойствах инстанса родительского компонента;
— Чтобы редактировать текст тултипов, которые отображаются с помощью интерактивного компонента, для состояния компонента без тултипа надо добавить тултип с нулевой прозрачностью.
#figma #prototype #table
Medium
Прототипирование в Figma: Work smarter, not harder
Хорошо сделанный нелинейный прототип — это залог проведения качественного юзабили исследования с классными инсайтами. Ответственный…
Екатерина Бессчётнова написала о подготовке прототипа для пользовательского тестирования.
— Прототип строится вокруг сценария тестирования — вопросов и заданий, предлагаемых респондентам;
— Задания следуют из гипотез. Гипотеза: при подборе товара людям неудобно использовать фильтр по цене. Задания: подберите товар Х удобным способом; подберите товар Х не дороже 10 рублей;
— Продумайте точки входа в тестируемый сценарий, чтобы он не начинался для пользователя внезапно;
— Отобразите все граничные случаи, с которыми пользователь может столкнуться, например, сообщение об ошибке, если заполнены не все поля. Страницу с 404-й ошибкой добавлять не надо;
— Добавьте максимум путей решения задачи, чтобы увидеть, куда пользователи на самом деле пойдут, и сравнить эффективность главного и второстепенного пути;
— Добавьте ошибочные пути, чтобы не было гарантии, что все респонденты выполнят задания. Так можно узнать, когда они заметят ошибку и как будут её исправлять. Активны должны быть не все развилки, а только вызывающие сомнения;
— Проработайте не только линейный путь вперёд по сценарию, но и способы вернуться назад;
— Чем ближе прототип к финальному продукту и реалистичнее взаимодействие с элементами интерфейса, тем лучше: визуальные акценты, реалистичный текст и релевантный контент, соответствие тону голоса и так далее;
— Если пользователи должны вводить данные, поля должны быть активны и не заполнены. Если это не прототип в Axure, поля можно заполнять по нажатию. Проверьте, что контент адекватен выполняемому заданию;
— Скройте отображение кликабельных областей и, насколько возможно, служебный интерфейс прототипа;
— Некликабельные элементы, с которыми предположительно могут взаимодействовать респонденты, должны реагировать на наведение курсора и, например, приводить к изменению курсора;
— Учитывайте разрешение устройства, на котором будет проходить тестирование;
— Перед тестированием на респондентах, проверьте прототип внутри команды.
#prototype #user_testing
— Прототип строится вокруг сценария тестирования — вопросов и заданий, предлагаемых респондентам;
— Задания следуют из гипотез. Гипотеза: при подборе товара людям неудобно использовать фильтр по цене. Задания: подберите товар Х удобным способом; подберите товар Х не дороже 10 рублей;
— Продумайте точки входа в тестируемый сценарий, чтобы он не начинался для пользователя внезапно;
— Отобразите все граничные случаи, с которыми пользователь может столкнуться, например, сообщение об ошибке, если заполнены не все поля. Страницу с 404-й ошибкой добавлять не надо;
— Добавьте максимум путей решения задачи, чтобы увидеть, куда пользователи на самом деле пойдут, и сравнить эффективность главного и второстепенного пути;
— Добавьте ошибочные пути, чтобы не было гарантии, что все респонденты выполнят задания. Так можно узнать, когда они заметят ошибку и как будут её исправлять. Активны должны быть не все развилки, а только вызывающие сомнения;
— Проработайте не только линейный путь вперёд по сценарию, но и способы вернуться назад;
— Чем ближе прототип к финальному продукту и реалистичнее взаимодействие с элементами интерфейса, тем лучше: визуальные акценты, реалистичный текст и релевантный контент, соответствие тону голоса и так далее;
— Если пользователи должны вводить данные, поля должны быть активны и не заполнены. Если это не прототип в Axure, поля можно заполнять по нажатию. Проверьте, что контент адекватен выполняемому заданию;
— Скройте отображение кликабельных областей и, насколько возможно, служебный интерфейс прототипа;
— Некликабельные элементы, с которыми предположительно могут взаимодействовать респонденты, должны реагировать на наведение курсора и, например, приводить к изменению курсора;
— Учитывайте разрешение устройства, на котором будет проходить тестирование;
— Перед тестированием на респондентах, проверьте прототип внутри команды.
#prototype #user_testing
Хабр
Чеклист для прототипов
Если вы когда-нибудь занимались тестированием прототипов на респондентах, то наверняка замечали, что люди подсознательно сразу воспринимают прототип как готовый продукт и не «делают скидку» на все его...
Кирилл Шерстобитов написал о подготовке прототипа к тестированию.
— Определите, что вы хотите проверить с помощью прототипа;
— Чтобы увидеть проблемы и сформулировать гипотезы, часто проводят модерируемые тесты, для которых подходят даже недоработанные прототипы — модератор может смягчить связанные с ними негативные эффекты;
— Для проверки интерфейсных гипотез лучше подходят количественные методы (от 100 человек на тест). Здесь модератор уже не поможет, поэтому важны понятное задание и работоспособность прототипа (в том числе быстрая загрузка);
— Чтобы проверить навигацию на удобство и понятность, не обязательно делать прототип, можно провести First click test;
— Прототипом можно проверить сценарии поведения в интерфейсе, взаимодействие с интерактивными элементами;
— Разбивайте интерфейс на короткие сценарии под конкретные задачи. Так проще будет готовить прототип, и грузиться он будет быстрее;
— Оптимизируйте прототип для более быстрой загрузки: убирайте лишние скрытые элементы, используйте облегчённые изображения вместо хайрезов;
— Часть советов повторяет статью Екатерины Бессчётновой, которая уже была в UX Notes.
#prototype #user_testing
— Определите, что вы хотите проверить с помощью прототипа;
— Чтобы увидеть проблемы и сформулировать гипотезы, часто проводят модерируемые тесты, для которых подходят даже недоработанные прототипы — модератор может смягчить связанные с ними негативные эффекты;
— Для проверки интерфейсных гипотез лучше подходят количественные методы (от 100 человек на тест). Здесь модератор уже не поможет, поэтому важны понятное задание и работоспособность прототипа (в том числе быстрая загрузка);
— Чтобы проверить навигацию на удобство и понятность, не обязательно делать прототип, можно провести First click test;
— Прототипом можно проверить сценарии поведения в интерфейсе, взаимодействие с интерактивными элементами;
— Разбивайте интерфейс на короткие сценарии под конкретные задачи. Так проще будет готовить прототип, и грузиться он будет быстрее;
— Оптимизируйте прототип для более быстрой загрузки: убирайте лишние скрытые элементы, используйте облегчённые изображения вместо хайрезов;
— Часть советов повторяет статью Екатерины Бессчётновой, которая уже была в UX Notes.
#prototype #user_testing
vc.ru
Чеклист для тестирования прототипа: 5 пунктов, которые нужно учесть, чтобы не потратить ресурсы впустую — Дизайн на vc.ru
В прошлой статье рассказал, почему не люблю тесты прототипов на Figma и предложил альтернативу. Здесь расскажу о подготовке любых прототипов к тестированию. Чеклист составил по наблюдениям за сотнями проектов на Fastuna. Бонус: прохождение двух тестов.
Иван Мрачко написал о пользе прототипов в заказной разработке.
— Прототип интерфейса — схематичный макет интерфейса разной степени детализации. Это вайрфреймы, но часто их называют прототипами;
— Низкодетализированные помогают быстро набросать идею и показать связь между экранами, они хороши для брейншторма;
— Высокодетализированные показывают актуальный контент, элементы интерфейса и логику взаимодействия и помогают оценить пользовательский путь;
— Они могут быть статичными и интерактивными, когда пользователь может полноценно взаимодействовать с интерфейсом (например, нажимать на кнопки и переходить по ссылкам);
— Прототипы помогают синхронизироваться на ранней стадии разработки и быстро внести правки, если вскрылось недопонимание;
— Позволяют сначала согласовать логику и состав страниц, не уходя в детали, и таким образом двигаться быстрее;
— В сложных проектах они могут стать отправной точкой в создании дизайн-системы и проработке нужных интеграций системными аналитиками (и быстро дорабатываться при выявлении технических ограничений);
— Интерактивный прототип с актуальным контентом можно тестировать на пользователях, чтобы проверить адекватность пользовательского пути.
#prototype
— Прототип интерфейса — схематичный макет интерфейса разной степени детализации. Это вайрфреймы, но часто их называют прототипами;
— Низкодетализированные помогают быстро набросать идею и показать связь между экранами, они хороши для брейншторма;
— Высокодетализированные показывают актуальный контент, элементы интерфейса и логику взаимодействия и помогают оценить пользовательский путь;
— Они могут быть статичными и интерактивными, когда пользователь может полноценно взаимодействовать с интерфейсом (например, нажимать на кнопки и переходить по ссылкам);
— Прототипы помогают синхронизироваться на ранней стадии разработки и быстро внести правки, если вскрылось недопонимание;
— Позволяют сначала согласовать логику и состав страниц, не уходя в детали, и таким образом двигаться быстрее;
— В сложных проектах они могут стать отправной точкой в создании дизайн-системы и проработке нужных интеграций системными аналитиками (и быстро дорабатываться при выявлении технических ограничений);
— Интерактивный прототип с актуальным контентом можно тестировать на пользователях, чтобы проверить адекватность пользовательского пути.
#prototype
vc.ru
Почему вам предлагают какие-то прототипы, когда вы хотите дизайн? — Дизайн на vc.ru
Или как прототипы и этап проектирования помогают клиенту и команде проекта в заказной разработке. Рассказывает Иван Мрачко, руководитель отдела аналитики и проектирования в Notamedia.Agency.
Я написал, как быстро сделать в Фигме прототип формы, поля которой можно заполнять в любом порядке.
— С этим помогут локальные переменные (Variables) и условия (экшен Conditional);
— Если их не использовать и просто переводить пользователя с одного экрана на другой, для формы из 4 полей потребуется 16 экранов (включая полностью заполненную форму и полностью незаполненную);
— Поля, с которыми будет взаимодействовать пользователь, надо заменить на локальные компоненты с вариантами «Не заполнено» и «Заполнено»;
— Когда пользователь заполняет поле, это надо сохранять в локальную переменную;
— При отображении формы надо проверять переменные и переключать компоненты заполненных полей на нужный вариант: триггер After delay, повешенный на компоненты конкретных полей, плюс экшен Conditional.
#figma #prototype #form
— С этим помогут локальные переменные (Variables) и условия (экшен Conditional);
— Если их не использовать и просто переводить пользователя с одного экрана на другой, для формы из 4 полей потребуется 16 экранов (включая полностью заполненную форму и полностью незаполненную);
— Поля, с которыми будет взаимодействовать пользователь, надо заменить на локальные компоненты с вариантами «Не заполнено» и «Заполнено»;
— Когда пользователь заполняет поле, это надо сохранять в локальную переменную;
— При отображении формы надо проверять переменные и переключать компоненты заполненных полей на нужный вариант: триггер After delay, повешенный на компоненты конкретных полей, плюс экшен Conditional.
#figma #prototype #form
Хабр
Переменные и условия: как быстро сделать в Фигме нелинейный прототип
Например, прототип формы, поля которой можно заполнять непоследовательно. Иногда сценарии и механики перехода между экранами (или состояниями одного экрана) получаются такими сложными, что для...
Маргарита Романова написала первую статью из серии об эффективном прототипировании в Фигме.
— Нелинейный прототип позволяет пользователю отойти от идеального сценария, совершить ошибки. Взаимодействие становится реалистичнее, а инсайты — качественнее;
— Можно проверить интерфейсы, в которых к цели ведут несколько путей;
— В Фигме есть экшен Navigate to, но его лучше использовать для переходов между страницами, а не состояниями одной и той же страницы. Иначе получится куча связанных фреймов, и редактировать такой прототип больно;
— Для возвращения назад используйте экшен Back, он сразу добавляет обратную анимацию;
— Экшен Change to переключает инстанс компонента в заданное состояние. Его достаточно, когда взаимодействие ограничено этим инстансом. Например, пользователь навёл курсор на кнопку, и она изменила цвет;
— С помощью переменных, привязанных к слоям и компонентам, можно сделать так, чтобы действие запускало событие (экшен Set variable), которое будет определённым образом модифицировать эти слои и компоненты;
— Но в этом случае без Smart animate, только Instant;
— Один триггер (например, нажатие на элемент) может приводить к комбинации экшенов. Например, Navigate to и Set variable;
— Популярная ошибка: с помощью Change to настроить, чтобы нажатие на чекбокс ставило или снимало флаг. Если в конкретном сценарии нажатие на него должно делать что-то ещё (разблокировать кнопку), будет 2 конкурирующих набора экшенов, срабатывающих на один триггер (нажатие на чекбокс);
— В этом случае сработают экшены инстанса в сценарии, то есть кнопка в форме разблокируется, а флаг в чекбоксе не появится;
— Решение: сделать интерактивный компонент, но логику привязать к переменной, а не триггеру.
#figma #prototype
— Нелинейный прототип позволяет пользователю отойти от идеального сценария, совершить ошибки. Взаимодействие становится реалистичнее, а инсайты — качественнее;
— Можно проверить интерфейсы, в которых к цели ведут несколько путей;
— В Фигме есть экшен Navigate to, но его лучше использовать для переходов между страницами, а не состояниями одной и той же страницы. Иначе получится куча связанных фреймов, и редактировать такой прототип больно;
— Для возвращения назад используйте экшен Back, он сразу добавляет обратную анимацию;
— Экшен Change to переключает инстанс компонента в заданное состояние. Его достаточно, когда взаимодействие ограничено этим инстансом. Например, пользователь навёл курсор на кнопку, и она изменила цвет;
— С помощью переменных, привязанных к слоям и компонентам, можно сделать так, чтобы действие запускало событие (экшен Set variable), которое будет определённым образом модифицировать эти слои и компоненты;
— Но в этом случае без Smart animate, только Instant;
— Один триггер (например, нажатие на элемент) может приводить к комбинации экшенов. Например, Navigate to и Set variable;
— Популярная ошибка: с помощью Change to настроить, чтобы нажатие на чекбокс ставило или снимало флаг. Если в конкретном сценарии нажатие на него должно делать что-то ещё (разблокировать кнопку), будет 2 конкурирующих набора экшенов, срабатывающих на один триггер (нажатие на чекбокс);
— В этом случае сработают экшены инстанса в сценарии, то есть кнопка в форме разблокируется, а флаг в чекбоксе не появится;
— Решение: сделать интерактивный компонент, но логику привязать к переменной, а не триггеру.
#figma #prototype
Дзен | Статьи
Эффективное прототипирование в Figma
Статья автора «Дизайн диктатура» в Дзене ✍: Создание высокодетализированных прототипов не всегда является любимым этапом процесса продуктового дизайнера.