Разработка концепции что это

О чем штурмят веб-дизайнеры. Этапы создания дизайн-концепции

Арт-директор Аша Саакян и продюсер Алёна Титова раскрывают подход агентства Nimax к созданию дизайн-концепций сайтов.

Если вы когда-нибудь взаимодействовали с digital-агентствами или веб-дизайнерами, то наверняка слышали об этапе создания концепции. В этой статье мы поэтапно разберем создание дизайн-концепции сайта на основе подхода, который практикуем в Nimax. Материал не является руководством, он предназначен для общего понимания процессов и их важности.

Дизайн-концепция сайта формирует общее видение визуальной части проекта с учетом всех источников требований и пожеланий к дизайну:

Если кратко: дизайн-концепция помогает заказчику и исполнителю смотреть в одном направлении. Так дальнейшая работа над дизайном страниц сайта становится предсказуемой и прозрачной.

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

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

Также необходимо выбрать приоритетные страницы.

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

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

Весь процесс можно разделить на три основных блока: исследование, создание дизайн-концепции и ее презентация.

1. Этапы исследования: предпроектный аудит и информационная архитектура.

2. Этапы создания дизайн-концепции: мудборд и стайлборд, генерация идей, скетчи и выбор идеи и создание макетов.

3. Презентация концепции.

Чтобы приступить к дизайн-концепции сайта, всей команде необходимо получить понимание по многим пунктам:

бизнес-задачи и процессы клиента;

особенности целевой аудитории;

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

T-сессия — это групповая стратегическая сессия, где совмещается глубокая экспертиза заказчика в своей отрасли и широкая экспертиза агентства.

В результате предпроектного аудита команда получает ответы на вопросы:

Созданием полной картины проекта и выводами занимается стратег
или маркетолог, ему помогают специалисты разных областей.

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

1. Проводим интервью (одно или несколько) с заказчиком.

В ходе интервью у всей команды формируется представление о специфике бизнеса, о товарах, услугах и УТП компании, ЦА, конкурентах, бизнес-логике и процессах.

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

3. Формулируем выводы и задачи.

Понятно сформулированные выводы и поставленные задачи помогут исполнителю находиться в одном инфополе с заказчиком и уверенно перейти в следующий этап.

сформулированы задачи проекта;

составлено подробное описание проекта с выводами;

Инструменты, которые используем для предпроектного аудита:

Результатом этапа информационной архитектуры будут структурированные прототипы страниц будущего сайта с понятным контентом и пользовательскими сценариями.

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

Инструменты, которые используем для создания информационной архитектуры:

После этапов аналитики и информационной архитектуры у нас есть достаточное количество вводных по проекту, и мы можем приступать к созданию концепции.

Мудборд — доска, отражающая настроение проекта. Он может содержать текст, фотографии и иллюстрации. Мудборд не должен передавать стилистику проекта.

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

Стайлборд — доска, отражающая стилистическое направление проекта.

Дизайнер смотрит референсы, собирает идеи по стилям — формирует стайлборд. Референсы могут быть сгруппированы по направлениям:

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

Инструменты, которые используем при составлении мудборда и стайлборда:

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

На этом этапе вся команда уже погружена в процессы.

Чем больше информации и выводов, тем больше фильтров, которые приводят нас к правильным решениям для продукта, в том числе визуальным.

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

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

На этом скрине можно увидеть наброски идей в результате внутреннего штурма веб-дизайнеров Nimax.

Из разнообразия вариантов выбираются наиболее подходящие критериям оценки результата.

Инструменты, которые используем на этапе генерации идей:

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

Иногда одна идея дополняет другую и они объединяются в одно продуманное решение.

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

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

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

Инструменты, которые применяем на этапе выбора идей и создания макетов:

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

Мы всегда начинаем презентацию с формулировки задачи, краткого описания будущего проекта и его аудитории.

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

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

Если на презентации присутствует не вся команда заказчика, мы зачастую отправляем видеопрезентацию для удобства и корректной трансляции идеи концепции.

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

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

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

Подписывайтесь на телеграм-канал Школы Nimax — там вы найдете больше полезной информации о веб-дизйне, брендинге, маркетинге, digital PR и управлении трафиком.

Источник

Что такое концепция

Будучи дизайнером, вы наверняка часто говорили клиентам о том, что, работая над проектом, следует показать несколько концепций в течение какого-то промежутка времени, а будучи клиентом, слышали подобное от дизайнера или студии. Что ещё забавнее звучит, так как это немного не так.

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

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

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

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

Концепция — это система описательных характеристик проекта. Более детализированный вариант развития проекта.

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

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

Концепт необходим для построения видения проекта, например распространенным подходом является “референсный концепт” – это когда вы находите метафору (поиск ведется по гуманитарной формуле %Проект% как %что?%) и находя подходящую, используете уже существующие примеры подставляя их в контекст проекта, тем самым показывая клиенту как может это все выглядеть и работать, так можно существенно сократить время на проработку этого этапа.

Приведу пример из своей практики, я делал сервис для архитектурного бюро Меандр в 2019 году и показывал два концепта основанных на этом подходе. У нас уже были проведены все предыдущие этапы и я имел представление о контенте, аудитории и приоритетах сервиса. Сервис wrk.space нужен для того, чтобы понять как построить офис или переехать в новый, сколько это будет стоить, сколько на это нужно времени и так далее. К сожалению собственник пока не нашел подходящего времени на полноценный запуск и хоть и проект сдан, по факту он заморожен.

Так как сервис информационный и тем не менее даёт более или менее точную информацию для переезда и стройки, родилось две метафоры:

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

Я использовал в этом концепте иллюстрации Notion, чтобы показать стилистику и раскрыть метафору без отрисовки даже скетчей иллюстраций, тем самым сокращая время на проработку этапа.

Вторая метафора звучала как — “Сервис как команда помощников”. Где ответы на вопросы и просчеты дает не бездушный код, а команда помощников, которые персонифицировано решают проблемы каждого пользователя, тем самым показывая высокий уровень эмпатии сервиса к их проблемам. В плане визуализации, мы решили использовать стилистику 3D как раз вновь выходившую в тренды в то время, благодаря Pitch чьи иллюстрации и были использованы в качестве референсов. Второй концепт мы в итоге согласовали и запустили в продакшен.

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

Лучший пример из всех, что можно привести для понимания работы механизма. Все аспекты проекта выведены и представлены визуально, так и вы и клиент понимаете уровень целостности проекта. Многие дизайнеры назовут это дизайн-системой и будут правы лишь отчасти, так как концепция демонстрирует лишь систематизированные принципы для создания дизайн-системы но не её саму.

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

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

Если у вас есть вопросы, оставляйте комментарии или пишите мне в личку в телеграме @burhudar Возможно я знаю ответ на ваш вопрос. Кому интересно, могут подписаться на мой телеграм канал, где я регулярно или почти регулярно пишу нечто подобное @burhudar_ch

Источник

Концепция сайта: как и зачем её создавать

Концепция сайта — это первый результат дизайна сайта в широком смысле этого слова (в дальнейшем я буду употреблять его именно так, понимая под ним процесс проектирования и создания сайта). И первое, что, на наш взгляд, необходимо оценивать (не в коммерческом смысле этого слова, а в смысле «получить качественную оценку»).

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

Задачи концепции

Об оценке идей я расскажу подробнее далее в разделе «Оценка концепции».

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

Ключевые моменты при создании концепции

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

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

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

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

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

Оценка концепции

Зачем это нужно?

Я советую проверить вашу концепцию на реальных пользователях сайта, с которыми вы проводили интервью в процессе исследования. Зачем?

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

Во-вторых, вы получите эмоциональный отклик на ваши идеи. Эмоциональная составляющая крайне важна для оценки сайта, каким бы содержательным и функциональным он не был, как бы прекрасно он не решал задачи. Особенно это касается прекрасной половины ЦА.

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

Что мы хотим услышать

Предъявлять концепцию необходимо, как минимум, двум сторонам — клиенту и пользователям; в ряде случаев — экспертам.

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

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

От эксперта мы ждём, что он оценит соответствие концепции текущей ситуации (на рынке, в среде существования проекта) и её перспективность.

Как проводить оценку

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

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

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

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

Что делать с полученным откликом

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

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

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

Источник

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

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

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

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

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

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

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

Чтобы концепция требовала меньше разъяснений (в том числе для пользователя) и делала продукт еще более ценным, выделяющимся на фоне конкурентов, сформулируйте качества, которым она должна соответствовать. В большинстве случаев опорой в этом служат миссия и ценности продукта. Для упрощения их трансляции пользователям можно использовать три излюбленных вопроса: 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 г.

Концептуальная модель (англ. conceptual model) — это модель, представленная множеством понятий и связей между ними, определяющих смысловую структуру рассматриваемой предметной области или её конкретного объекта. Wikipedia

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

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

Источник