Как создать концепцию: опыт и принципы

За полтора года существования Madebymad мы поработали с десятком разных команд и проектов над продуктами, которые только запускались или требовали переосмысления. В обоих случаях нашей задачей было создание концепции, на которую в дальнейшем сможет опираться команда.

В этой статье мы собрали основные принципы, которые помогут в разработке концепции продукта.

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

Когда перед командой стоит задача заложить дизайн-концепцию, которая должна не только отвечать требованиям IT-отрасли, но и отражать все смыслы, которые находятся под капотом продукта, а также иметь запас прочности для дальнейшего роста, легко потеряться во взаимоотношениях бизнеса и пользователя — и сложно нащупать то, от чего можно оттолкнуться, чтобы найти точки соприкосновения между разными слоями продукта.

Мы описали основные шаги в создании дизайн-концепции — они и послужат опорой для дизайнера и команды в условиях неопределенности ранней стадии.

• Заложить принципы масштабирования продукта от версии к версии, чтобы избежать грубого редизайна и ошибок в архитектуре.

• Собрать все смыслы в единую картину и подчеркнуть с помощью UX/UI-дизайна ключевые ценности и преимущества продукта.

• Сопоставить ожидания от продукта и договориться внутри команды, в том числе с инвесторами.

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

Сформулируйте дизайн-принципы

Чтобы концепция требовала меньше разъяснений (в том числе для пользователя) и делала продукт еще более ценным, выделяющимся на фоне конкурентов, сформулируйте качества, которым она должна соответствовать. В большинстве случаев опорой в этом служат миссия и ценности продукта. Для упрощения их трансляции пользователям можно использовать три излюбленных вопроса: Why? How? What?

Например, вы разрабатываете сервис по доставке продуктов на дом. Сервис обещает своим клиентам доставлять свежие продукты, экономя время на походах в магазин. Но с точки зрения процесса вы не можете обеспечить выбор продуктов самим клиентом, что в свою очередь выступает цифровым барьером для него. Какие помидоры мне положат? С каким сроком годности привезут йогурт? — Соответственно можно сформировать дизайн-принцип «прозрачности» сервиса, согласно которому, контент и функционал должны стремиться имитировать привычный опыт клиента в выборе продуктов.

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

Используйте метафоры

Мозг человека пытается категоризировать окружающую информацию, чтобы быстрее её обрабатывать и принимать решения. Таким же образом формируются привычки — враги всего нового. Если с помощью метафоры воссоздать знакомый контекст в новом для пользователя решении, то осознание ценности придёт быстрее, и продукт увеличит свои шансы стать новой привычкой.

Метафора не обязательно должна имитировать физический объект — это может быть эмоция, процесс, язык, эффект — все что угодно, если это знакомо пользователю и найдет первый отклик в его ментальной памяти. Скевоморфизм — метафора, голосовые ассистенты — метафора общения с человеком (именно поэтому ассистенты пытаются шутить, хотя, казалось бы, незачем), чат — метафора. Каким будет ваш основной инструмент коммуникации с пользователем — дашборд, чат, лента или что-нибудь новенькое (как когда-то карточки у Tinder)? Выбор метафоры определяет то, насколько легко пользователь будет находить информацию и ориентироваться в продукте.

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

Имейте ввиду, что метафоры могут увести не в ту сторону — в погоне за созданием знакомой среды, можно упустить уже сложившийся пользовательский опыт взаимодействия с цифрой. Важно держаться середины, где метафора не спорит с удобством.

Старайтесь превзойти ожидания

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

Представим клиента, который открыл холодильник и понял, что ему нужно купить продукты домой. Основываясь на своём опыте, клиент представляет для себя стандартные шаги — Что купить? Сколько? Где? Сколько денег необходимо? Сколько времени займет?

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

Как можно чаще задавайтесь вопросом «Как?», он поможет вам выделить ключевые преимущества продукта, на которых стоит сконцентрироваться.

Используйте данные и персонализируйте

Допустим, что идея с холодильником возможна — тогда как онлайн-среда может нам помочь, чтобы спроектировать идеальное решение?

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

Онлайн позволяет нам ближе узнать пользователя, а значит и помогает приблизить решение к идеальному — сделав продукт более персонализированным мы сформируем дополнительную ценность, упростив взаимодействие с продуктом.

Опираясь на чек клиента мы можем акцентировать внимание на товарах из его рациона, а также сортировать их на основе данных о частоте их покупки. Таким образом мы можем превзойти ожидания клиента, сделав первый экран максимально полезным — при заходе в приложение, клиент будет видеть уже знакомые продукты отсортированные в порядке от самых необходимых, например, туалетной бумаги и средства для мытья посуды, которые часто забывают купить, до редких.

«Концепт» опирается на «концепцию», но понятия различаются. Концепция — это система, которая объединяет в единое целое смыслы, которые несет в себе продукт для пользователя. Концепция может выражаться словами, например, в виде принципов или же во взаимоотношениях в виде диаграммы. Концепт же — это то, что уже приобрело очертания продукта: машина, дом или как в нашем случае — интерфейс. Концепт можно нарисовать на салфетке (что-то вроде «parti diagram») или можно создать готовый прототип (аля «concept-car»). Степень детализации может быть любой, задача — донести идею понятно и до конца и дать возможность команде ее протестировать.

Состав

Чтобы UX/UI-концепт стал ориентиром, он не должен вызывать вопросов, связанных с архитектурой и настроением продукта, поэтому в качестве концепта можно подготовить High-Level Wireframe основного сценария и на примере основных экранов показать интерфейс, максимально близкий к тому, каким его увидят пользователи. Так вы заложите плацдарм для дальнейшего масштабирования продукта. Если вы знаете план развития продукта, то этап концепции отлично подходит для того, чтобы подумать над тем, как будет расширяться архитектура по мере увеличения функциональности.

Реализуемость

Чтобы UX/UI-концепт не стал просто очередным amazing shot на Dribbble — важно его протестировать на реальных пользователях и начать подключать технического лида для верификации своих идей на предмет реализации уже на ранних стадиях (чуть ли не на «салфетках»). Если в мире еще нет технологий, позволяющих реализовать задуманное, то это может послужить определением вижена — если технология есть, но разработка говорит, что это долго и сложно — не спешите отказываться от идеи, скорее всего это можно будет реализовать позже. То же и с тестированием — когда-то люди не понимали, как можно пользоваться телефоном без кнопок, а теперь у iPhone нет даже кнопки Home.

Уникальность

Этап концепции подразумевает, что вы выделяете дополнительное время и деньги ради «уникального» продукта, который позволит не только заработать больше, но и сэкономить время и деньги в будущем. Значит — не надо копировать ваших конкурентов и подключать к решению задачи людей, которые не занимались до этого запуском продуктов. Не надо сразу бросаться рисовать паттерны в Figma без подтвержденных инсайтов и подготовительной работы — тех же принципов и ценностей. Ищите, придумывайте и тестируйте идеи, уделите подготовительной работе время.

О важности и сложности этапа можно найти несколько статей на Medium, среди авторов которых — Julie Zhuo, ex. Product Design VP at Facebook и Fabricio Teixeira, founder of UX Collective. В поисках релевантной информации натыкаешься на понятие Conceptual Model, которое тесно связано с терминами Generalization и Mental Model. Термин был предложен в близкой к UX области — инженерной психологии английским психологом А. Т. Велфордом в 1961 г.

О подходе построения концептуальных моделей и их связи с пользователем можно узнать из статьи Alana Brajdic. Принципы моделирования широко используются в построении цифровых продуктов, их знание играет важную роль на стадии, когда дизайн только должен появиться, неважно — MVP это или редизайн.