ДЕНЬ 38
Про подходы к прототипированию
СЕГОДНЯ:
День приблизительных маршрутов, когда можно никуда не бежать, а просто сделать грубый набросок идеи пути и остаться в уютном кресле полистать издания по скетчингу и изучать чужие прототипы дашбордов. Пробуем разные инструменты для прототипирования дизайна, соберем советы и пойдем тренироваться на своих данных, чтобы навык прижился для будущего использования. Побежали.
День приблизительных маршрутов, когда можно никуда не бежать, а просто сделать грубый набросок идеи пути и остаться в уютном кресле полистать издания по скетчингу и изучать чужие прототипы дашбордов. Пробуем разные инструменты для прототипирования дизайна, соберем советы и пойдем тренироваться на своих данных, чтобы навык прижился для будущего использования. Побежали.
РАЗБИРАЕМСЯ
Прототипы дашбордов
Зачем нужно прототипирование
Есть много ситуаций, когда вам нужно спланировать или проанализировать
ряд различных идей и стратегий. Часто изначально трудно понять, какой дизайн дашборда лучше использовать. Это, безусловно, относится к дата-художникам, когда они разрабатывают и развивают интерактивные интерфейсы, или инструменты визуализации, отображающие большие данные. Разработчикам необходимо часто рассматривать различные альтернативные конструкции и макеты, прежде чем они начнут создавать окончательный дашборд.
ряд различных идей и стратегий. Часто изначально трудно понять, какой дизайн дашборда лучше использовать. Это, безусловно, относится к дата-художникам, когда они разрабатывают и развивают интерактивные интерфейсы, или инструменты визуализации, отображающие большие данные. Разработчикам необходимо часто рассматривать различные альтернативные конструкции и макеты, прежде чем они начнут создавать окончательный дашборд.
Прототипирование решает задачу многообразия вариантов реализации. Это технология быстрого макетирования для демонстрации заказчику или проверки возможности реализации. На этапе прототипирования малыми усилиями создается работающая система – возможно неэффективно, с ошибками, и не в полной мере, но она создается.
Во время разработки прототипов смотрят на требования заказчика, на возможности исполнителя и инструмента. Результатом этапа прототипирования является мокап, или прототип дашборда.
Во время разработки прототипов смотрят на требования заказчика, на возможности исполнителя и инструмента. Результатом этапа прототипирования является мокап, или прототип дашборда.
Процесс создания прототипа
Процесс создания прототипа состоит из четырёх шагов:
- Определение начальных требований
- Разработка первого варианта прототипа, который содержит только пользовательский интерфейс системы
- Этап изучения прототипа заказчиком и конечным пользователем. Получение обратной связи о необходимых изменениях и дополнениях
- Переработка прототипа с учетом полученных замечаний и предложений
Советы
1. Попросите своих пользователей показать вам, чего они хотят
На начальных встречах попросите пользователей нарисовать или показать вам примеры, которые им нравятся. Попытайтесь задать столько вопросов, сколько вы сможете: "Какая информация вам нужна и какая форма вам нужна? Что вам нужно знать об этих данных? Что вам нравится или не нравится в этом примере?"
На начальных встречах попросите пользователей нарисовать или показать вам примеры, которые им нравятся. Попытайтесь задать столько вопросов, сколько вы сможете: "Какая информация вам нужна и какая форма вам нужна? Что вам нужно знать об этих данных? Что вам нравится или не нравится в этом примере?"
2. Не показывайте реальные данные сразу
Если вы быстро прототипируете что-то, лучше всего делать это не на реальных данных, а на общих, верхнеуровневых. Если клиенты видят информацию, которая выглядит реальной, они концентрируются на данных, а не на идее прототипа.
То же самое можно сказать и о других элементах дизайна дашборда, таких как цвет, шрифты и значки. Будьте минималистичны: ваш дашборд может выглядеть настолько "реальным", что пользователи могут погрузиться в детали дизайна и не оценивать общую идею и логику дашборда. Объясните, что у вас будут дополнительные встречи для завершения элементов дизайна, но в сейчас вы фокусируетесь на том, как это работает.
Если вы быстро прототипируете что-то, лучше всего делать это не на реальных данных, а на общих, верхнеуровневых. Если клиенты видят информацию, которая выглядит реальной, они концентрируются на данных, а не на идее прототипа.
То же самое можно сказать и о других элементах дизайна дашборда, таких как цвет, шрифты и значки. Будьте минималистичны: ваш дашборд может выглядеть настолько "реальным", что пользователи могут погрузиться в детали дизайна и не оценивать общую идею и логику дашборда. Объясните, что у вас будут дополнительные встречи для завершения элементов дизайна, но в сейчас вы фокусируетесь на том, как это работает.
3. Предлагайте идеи первыми
Если вы начинаете свои встречи с просьбой к клиенту, чего они хотят, без каких-либо указаний или отправной точки, они могут хотеть все – или вообще ничего.
С одной стороны клиенты могут попросить что угодно. С другой стороны, некоторые клиенты могут не знать, чего они хотят, и открытый вопрос будет только вставить их в тупик.
Если вы начинаете свои встречи с просьбой к клиенту, чего они хотят, без каких-либо указаний или отправной точки, они могут хотеть все – или вообще ничего.
С одной стороны клиенты могут попросить что угодно. С другой стороны, некоторые клиенты могут не знать, чего они хотят, и открытый вопрос будет только вставить их в тупик.
4. Не показывайте им готовый дашборд
Лучше избегать показа готового дашборда – на самом деле, чем меньше деталей, тем лучше. Если ваш дашборд выглядит законченным или если макет выглядит слишком хорошо, пользователи могут просто сказать, что дашборд выглядит хорошо, вместо того, чтобы думать действительно ли он отвечает на их вопросы.
Лучше избегать показа готового дашборда – на самом деле, чем меньше деталей, тем лучше. Если ваш дашборд выглядит законченным или если макет выглядит слишком хорошо, пользователи могут просто сказать, что дашборд выглядит хорошо, вместо того, чтобы думать действительно ли он отвечает на их вопросы.
5. Начинайте с малого
Начинайте с нескольких KPI для каждой группы пользователей. Убедитесь, что вы решаете их текущие проблемы, с которыми они сталкиваются сейчас, а затем поэтапно улучшайте функционал.
По мере появления результатов, пользователи наберутся опыта и начнут задавать новые вопросы.
Начинайте с нескольких KPI для каждой группы пользователей. Убедитесь, что вы решаете их текущие проблемы, с которыми они сталкиваются сейчас, а затем поэтапно улучшайте функционал.
По мере появления результатов, пользователи наберутся опыта и начнут задавать новые вопросы.
Полезные программы
Мокапы прототипов дашбордов можно рисовать и на бумаге и при помощи графических программ и сервисов.
Balsamiq
Balsamiq – это отличный инструмент для разработки прототипов с нуля для новичков и не дизайнеров. Взаимодействие с объектами через drag-and-drop и простой интерфейс позволяют проектировать быстрый макет в интересном стиле. Можно импортировать изображения. Есть и веб-версия и десктоп-приложение.
Это действительно простой и эффективный инструмент, в котором сложно сделать детальную настройку макета, но можно быстро разобраться в его функционале и получить результат.
Balsamiq – это отличный инструмент для разработки прототипов с нуля для новичков и не дизайнеров. Взаимодействие с объектами через drag-and-drop и простой интерфейс позволяют проектировать быстрый макет в интересном стиле. Можно импортировать изображения. Есть и веб-версия и десктоп-приложение.
Это действительно простой и эффективный инструмент, в котором сложно сделать детальную настройку макета, но можно быстро разобраться в его функционале и получить результат.
Figma
Figma – онлайн-инструмент для прототипирования интерфейсов систем, в основном для мобильных приложений, но в целом предметная область прототипирования ничем не ограничена. В нем хорошие возможности по созданию точных, детальных мокапов, однако работа в Figma требует более уверенных навыков, чем Balsamiq.
В Figma есть совместная работа в командах, возможность импорта своих изображений, отрисовки векторных элементов.
Figma – онлайн-инструмент для прототипирования интерфейсов систем, в основном для мобильных приложений, но в целом предметная область прототипирования ничем не ограничена. В нем хорошие возможности по созданию точных, детальных мокапов, однако работа в Figma требует более уверенных навыков, чем Balsamiq.
В Figma есть совместная работа в командах, возможность импорта своих изображений, отрисовки векторных элементов.
Adobe Illustrator
Adobe Illustrator – программа из семейства Adobe которую в сообществе используют для создания не только рисунков и иллюстраций, но и для инфографики, проектирования интерфейсов и макетов дашбордов. Причина – векторная графика, в которой вы можете изменить каждый пиксель.
В Illustrator есть и "chart tool" – инструмент графиков – в который вы можете загружать данные в табличном виде и визуализировать их в диаграммах. Естественно, с форматированием.
Это – идеальный инструмент для продвинутых пользователей, которым нравится работать с графикой и настраивать каждую деталь.
Adobe Illustrator – программа из семейства Adobe которую в сообществе используют для создания не только рисунков и иллюстраций, но и для инфографики, проектирования интерфейсов и макетов дашбордов. Причина – векторная графика, в которой вы можете изменить каждый пиксель.
В Illustrator есть и "chart tool" – инструмент графиков – в который вы можете загружать данные в табличном виде и визуализировать их в диаграммах. Естественно, с форматированием.
Это – идеальный инструмент для продвинутых пользователей, которым нравится работать с графикой и настраивать каждую деталь.
Примеры
Всякая точная наука основывается на приблизительности.
// Неизвестный Автор
// Неизвестный Автор
ВДОХНОВЕНИЕ
Полезные ссылки по теме
Сегодня подборка ссылок на практические ресурсы с шаблонами и обучением
От Setproduct
От Prototypr
С подборкой статей, курсов, форумов
МАТЕРИАЛЫ
Книги
Потрясающе полезное издание на полке сегодня. Всем пробовать делать свои скетчи.
В этой книге описывается методология структурированного эскиза, которая поможет вам создать альтернативные идеи дизайна и набросать их на бумаге. Метод действует как контрольный список задач, чтобы помочь вам продумать проблему, создать новые идеи и задуматься о пригодности каждой идеи.
Итоги этапа
Накалякали наброски скетчей своих будущих Tableau-шедевров. Прислушались к советам. Изучили подходы по созданию структурированного эскиза. Готовимся рассказывать истории, основанные на данных. Виз виз ура!!!
~
