Инструменты концепт-дизайна: анализ конкурентов и интерфейсный коллаж
Привет, Хабр!
Я Павел Оларь, продуктовый дизайнер и дизайн-лид. Мне часто приходилось заниматься созданием концептов и редизайном самых разных продуктов. В этой статье я хочу поделиться связкой двух инструментов, которые применяю на этапе погружения в новый проект или в начале редизайна, когда важно окинуть взглядом то, что происходит на рынке и начать прикидывать и обсуждать канву будущего результата.
Инструмент №1: Поэкранный анализ конкурентов
Анализ конкурентов — известная и популярная практика, но она часто остается лишь в голове того, кто её проводил. Этот инструмент помогает во-первых, собрать в одном месте все экраны интересующих нас конкурентов, а во-вторых, позволяет делиться результатом своей работы с коллегами.
Как делать
Составляем список конкурентов
Определяем разделы, которые нас интересуют
Делаем скриншоты этих разделов
Раскладываем их в матрицу: Продукт / Раздел, по схеме ниже.
Преимущество такого расположения в том, что мы можем проводить анализ в двух направлениях: посмотреть все экраны одного продукта, либо посмотреть все похожие разделы разных продуктов.
Вот как выглядит результат на реальном проекте:
Когда все экраны будут собраны и разложены, очень удобно использовать их в дальнейшей работе: брейнштормить, проводить воркшопы, делиться с коллегами, дополнять новыми разделами или продуктами. Например, можно попросить участников команды приклеить стикеры к тем фичам, которые по их мнению достойны проработки или отсутствуют в нашем продукте.
Так же интересно обращаться к такому анализу спустя какое-то время, отмечая прогресс у его участников.
Инструмент №2: Интерфейсное коллажирование
Держа перед глазами общую картину того что имеют и как выглядят конкуренты, мы можем перейти к первым концептуальным наброскам дизайна. При этом мы не будем рисовать «вайфреймы/серые квадратики» или новые элементы интерфейса. Мы выберем удачные примеры из тех, что собрали на предыдущем этапе.
Процесс выглядит так:
Составляем список элементов/блоков/пунктов/объектов, которые минимально хотим видеть на странице;
Для каждого пункта готовим стикер;
Ищем среди конкурентов удачные с нашей точки зрения примеры и клеим стикер рядом с ними;
Вырезаем из экранов блоки, к которым приклеили стикеры;
Собираем блоки в одном месте;
Определяем частотность/важность собранных блоков;
Составляем коллаж в виде единой страницы.
Схематично процесс выглядит так:
Наверное, результат можно назвать «сборной солянкой» или «франкенштейном», это во-многом так. В результате этого упражнения мы конечно не получим идеальный дизайн, но на этом этапе он и не требуется. Задача быстрых концептов — провалидировать идеи, отмести совсем смелые/странные/несвоевременные, убедиться, одинаково ли их понимает команда, оценить перспективность различных подходов для дальнейшей проработки.
Поэкранный анализ конкурентов и интерфейсный коллаж — конечно не единственный способ создания дизайн-концептов. И конечно как и любой инструмент они имеют границы своей применимости.
Например, они плохо подходят для уникальных продуктов, где мало конкурентов, либо на них не стоит равняться. Их удобно использовать в зрелых и высококонкурентных нишах, где общий уровень продуктов и наполненности функциями довольно высок.
Кстати, в моём telegram-канале я выложил два скринкаста, где пошагово показал как использовал поэкранный анализ и интерфейсный коллаж на проекте, примеры которого использованы в статье.
