ДЕНЬ 38
Про подходы к прототипированию
Вчера мы разбирали общие вопросы методологий BI «по аджайлу» и прошлись по циклу работы с данными.
СЕГОДНЯ
Остановимся на важном пункте из этого цикла — прототипах.
День приблизительных маршрутов, когда можно никуда не бежать, а просто сделать грубый набросок идеи пути, остаться в уютном кресле и полистать издания по скетчингу и изучать чужие прототипы дашбордов. Пробуем разные инструменты для прототипирования дизайна, соберем советы и пойдем тренироваться на своих данных, чтобы навык прижился для будущего использования. Побежали.
СЕГОДНЯ
Остановимся на важном пункте из этого цикла — прототипах.
День приблизительных маршрутов, когда можно никуда не бежать, а просто сделать грубый набросок идеи пути, остаться в уютном кресле и полистать издания по скетчингу и изучать чужие прототипы дашбордов. Пробуем разные инструменты для прототипирования дизайна, соберем советы и пойдем тренироваться на своих данных, чтобы навык прижился для будущего использования. Побежали.
РАЗБИРАЕМСЯ
Прототипы дашбордов
Зачем нужно прототипирование
Макет, мокап, прототип дашборда… Неважно, как вы это назовете. Как и неважно, ГДЕ вы его сделаете — на салфетке, маркерной доске, презентации Power Point или в профессиональном инструменте (например, Figma или Miro). Это способ сформулировать и развить идею дашборда, а также «дешево» изменить его, если в процессе обсуждения оказалось, что первоначальная идея не решала своей задачи.
Прототипирование — часть цикла
разработки дашборда
1 Определяем требования
- Цель и задачи дашборда.
- Источники и типы данных.
- Аудитория и контекст.
2 Прототипируем
- Выбор подходящих визуализаций.
- Создание графического наброска дашборда.
- Получение обратной связи от будущих пользователей.
3 Реализуем
- Подготовка и обработка данных.
- Настройка дизайна и интерфейса дашборда.
- Тестирование и отладка.
4 Внедряем
- Публикация и распространение дашборда.
- Мониторинг и анализ использования дашборда. (Пиарьте свои дашборды!)
- Внесение изменений и улучшений в дашборд.
С помощью макета мы прорабатываем детали — фильтры и механику их действия, цветовое кодирование, подписи, типы визуализаций. А главное — тестируем, все ли понятно конечному пользователю и всего ли хватает. Например, бизнес-пользователь может быть незнаком с некоторыми типами визуализаций. Изменить их на более понятные в макете будет проще и быстрее, чем уже на разработанном дашборде.
Процесс создания прототипа
- Определение начальных требований. Уточняем цель и задачи дашборда, источники и типы данных, которые мы будем использовать.
- Разработка первого варианта прототипа, который может содержать только основные элементы. Например, можно набросать несколько метрик, а потом уточнить, какие стоит добавить, чтобы раскрыть их значение.
- Этап изучения прототипа заказчиком и конечным пользователем. Получение обратной связи о необходимых изменениях и дополнениях.
- Переработка прототипа с учетом полученных замечаний и предложений.
Лучшие практики
Начинайте с общей постановки задачи
Можно использовать технику user story. Это простой шаблон, который позволяет понять, что же пользователь будет делать с аналитикой. Это выглядит так:
Как [рабочая роль],
мне нужно [увидеть *перечисление показателей*],
чтобы я мог(ла) [принять решение о…].
мне нужно [увидеть *перечисление показателей*],
чтобы я мог(ла) [принять решение о…].
Пример
Как начальнику отдела маркетинга,
мне нужно оценить конверсию в разных каналах привлечения,
чтобы я мог(ла) спланировать маркетинговый бюджет на следующий квартал.
Как начальнику отдела маркетинга,
мне нужно оценить конверсию в разных каналах привлечения,
чтобы я мог(ла) спланировать маркетинговый бюджет на следующий квартал.
Задача будет яснее, если мы знаем, для кого собираем будущий дашборд (и его прототип).
Не показывайте данные, показывайте реальные тексты
Если вы быстро прототипируете что-то, лучше всего делать это не на реальных данных, а на общих, верхнеуровневых.
Можно даже заменить цифры на условные обозначения вроде ХХХ. Но стоит использовать реальную длину, чтобы лучше рассчитать пространство. Например, вместо 10 000 использовать ХХ ХХХХ.
Важно
Если клиенты видят информацию, которая выглядит реальной, они концентрируются на данных, а не на идее прототипа.
Что точно должно быть реальным в вашем прототипе, так это заголовки и подписи. Так вы сможете «докрутить» формулировки в процессе обсуждения макета и рассчитаете пространство на текст.
Используйте чек-лист вопросов
Когда заказчик или вы сами формулируете общую идею, важные детали могут остаться упущенными. Поэтому стоит просто иметь под рукой этот чек-лист.
Не переусердствуйте с деталями
Задача макета или прототипа — ускорить разработку. Поэтому он не должен в точности соответствовать реальному дашборду.
Начинайте с малого
Начинайте с нескольких KPI для каждой группы пользователей. Убедитесь, что вы решаете их текущие проблемы, с которыми они сталкиваются сейчас, а затем поэтапно улучшайте функционал.
По мере появления результатов, пользователи наберутся опыта и начнут задавать новые вопросы.
Полезные программы
Мокапы прототипов дашбордов можно рисовать и на бумаге, и при помощи графических программ и сервисов.
Balsamiq
Balsamiq — это отличный инструмент для разработки прототипов с нуля для новичков и не дизайнеров. Взаимодействие с объектами через drag-and-drop и простой интерфейс позволяют проектировать быстрый макет в оригинальном стиле. Можно импортировать изображения. Есть и веб-версия, и десктоп-приложение.
Это действительно простой и эффективный инструмент, в котором сложно сделать детальную настройку макета, но можно быстро разобраться в его функционале и получить результат.
Это действительно простой и эффективный инструмент, в котором сложно сделать детальную настройку макета, но можно быстро разобраться в его функционале и получить результат.
Figma
Figma — онлайн-инструмент для прототипирования интерфейсов систем, в основном для мобильных приложений, но в целом предметная область прототипирования ничем не ограничена. В нем хорошие возможности по созданию точных, детальных мокапов, однако работа в Figma требует более уверенных навыков, чем Balsamiq.
В Figma есть совместная работа в командах, возможность импорта своих изображений, отрисовки векторных элементов.
В Figma есть совместная работа в командах, возможность импорта своих изображений, отрисовки векторных элементов.
Adobe Illustrator
Adobe Illustrator — программа из семейства Adobe, которую в сообществе используют для создания не только рисунков и иллюстраций, но и для инфографики, проектирования интерфейсов и макетов дашбордов. Причина — векторная графика, в которой вы можете изменить каждый пиксель.
В Illustrator есть и «chart tool» (инструмент графиков), в который вы можете загружать данные в табличном виде и визуализировать их в диаграммах. Естественно, с форматированием.
Это идеальный инструмент для продвинутых пользователей, которым нравится работать с графикой и настраивать каждую деталь.
В Illustrator есть и «chart tool» (инструмент графиков), в который вы можете загружать данные в табличном виде и визуализировать их в диаграммах. Естественно, с форматированием.
Это идеальный инструмент для продвинутых пользователей, которым нравится работать с графикой и настраивать каждую деталь.
Примеры
Всякая точная наука основывается на приблизительности.
// Неизвестный Автор
// Неизвестный Автор
ПРАКТИКУЕМСЯ
О датасете
Объявления о продаже легковых автомобилей в Беларуси, Москве и Московской области. Выборка состоит из б/у автомобилей, зарегистрированных на территории Беларуси и России с 2007 по 2022 гг.
Задание
На основе датасета создайте макет дашборда, который позволит проанализировать автомобильный рынок. Предусмотрите интерактивность.
Исследуемые разрезы:
Скачать задание в виде книжки Tableau
Исследуемые разрезы:
- количество предложений;
- средняя стоимость;
- средний пробег;
- распределение предложений по стоимости и пробегу (с сегментацией по году выпуска);
- характеристики предложений (тип кузова, топливо и т.д.).
Скачать задание в виде книжки Tableau
ВДОХНОВЕНИЕ
Полезные ссылки по теме
Сегодня подборка ссылок на практические ресурсы с шаблонами и обучением.
Шаблоны дашбордов для Figma
От Setproduct
Советы по прототипированию
От Prototypr
Проект обучения дизайну прототипов от Balsamiq
С подборкой статей, курсов, форумов
МАТЕРИАЛЫ
Книги
Потрясающе полезное издание на полке сегодня. Всем пробовать делать свои скетчи.
В этой книге описывается методология структурированного эскиза, которая поможет вам создать альтернативные идеи дизайна и набросать их на бумаге. Метод действует как контрольный список задач, чтобы помочь вам продумать проблему, создать новые идеи и задуматься о пригодности каждой из них.
Итоги этапа
Кратко о цикле разработки дашборда. Закрепляем
Накалякали наброски скетчей своих будущих Tableau-шедевров. Прислушались к советам. Изучили подходы по созданию структурированного эскиза. Не только изучили, но и попрактиковались на данных авто-барахолки!
Готовимся рассказывать истории, основанные на данных. Виз-виз ура!!!
Готовимся рассказывать истории, основанные на данных. Виз-виз ура!!!
Бежим Марафон в команде!
С менторством и в компании единомышленников.
Нажимая кнопку, вы соглашаетесь на обработку персональных данных. Мы используем их, чтобы оставаться на связи. Подробнее здесь.
