Привет, Хабр!

Я Павел Оларь, дизайн-лид и автор канала Re:Дизайнер. В этой статье я хочу поделиться связкой двух инструментов, которые применяю на этапе погружения в новый проект или в начале редизайна, когда важно окинуть взглядом то, что происходит на рынке и начать прикидывать и обсуждать канву будущего результата.

Инструмент №1: Поэкранный анализ конкурентов

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

Как делать

Составляем список конкурентов,
Определяем разделы, которые нас интересуют,
Делаем скриншоты этих разделов,
Раскладываем их в матрицу: Продукт / Раздел, по схеме ниже.

Схема матрицы поэкранного анализа конкурентов

Преимущество такого расположения в том, что мы можем проводить анализ в двух направлениях: посмотреть все экраны одного продукта, либо посмотреть все похожие разделы разных продуктов.

Вот как выглядит результат на реальном проекте. Прошу прощения, что нет возможности приложить ссылку на сам документ в Miro.

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

Так же интересно обращаться к такому анализу спустя какое-то время, отмечая прогресс у его участников.

Инструмент №2: Интерфейсное коллажирование

Держа перед глазами общую картину того что имеют и как выглядят конкуренты, мы можем перейти к первым концептуальным наброскам дизайна. При этом мы не будем рисовать "вайфреймы/серые квадратики" или новые элементы интерфейса. Мы выберем удачные примеры из тех, что собрали на предыдущем этапе.

Процесс выглядит так:

Составляем список элементов/блоков/объектов, которые минимально хотим видеть на странице;
Для каждого пункта готовим стикер;
Ищем среди конкурентов удачные с нашей точки зрения примеры и клеим стикер рядом с ними;
Вырезаем из экранов блоки, к которым приклеили стикеры;
Собираем блоки в одном месте;
Определяем частотность/важность собранных блоков;
Составляем коллаж в виде единой страницы.

Схематично процесс выглядит так:

Схема процесса интерфейсного коллажирования

Наверное, результат можно назвать "сборной солянкой" или "франкенштейном", это во-многом так. В результате этого упражнения мы конечно не получим идеальный дизайн, но на этом этапе он и не требуется. Задача быстрых концептов – провалидировать идеи, отмести совсем смелые/странные/несвоевременные, убедиться, одинаково ли их понимает команда, оценить перспективность различных подходов для дальнейшей проработки.

Посмотреть что получилось (высокое изображение)

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

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

Инструменты концепт-дизайна: анализ конкурентов и интерфейсный коллаж