Как сделать концепцию сайта
Как создать концепцию: опыт и принципы
За полтора года существования 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 это или редизайн.
Концепция — это про дизайн ценностей, про то, как и с помощью каких инструментов они транслируются и какое место занимают в жизни пользователя.
Концепция сайта: как и зачем её создавать
Концепция сайта — это первый результат дизайна сайта в широком смысле этого слова (в дальнейшем я буду употреблять его именно так, понимая под ним процесс проектирования и создания сайта). И первое, что, на наш взгляд, необходимо оценивать (не в коммерческом смысле этого слова, а в смысле «получить качественную оценку»).
В прошлой статье про обработку результатов исследования я предложил следующее содержание концепции: каким будет сайт, чем он будет отличаться от конкурентов, каковы будут этапы развития сайта. Далее я расскажу, зачем, на наш взгляд вообще нужна концепция, в чём польза от её создания, как она влияет на процесс, а также как её оценивать.
Задачи концепции
Об оценке идей я расскажу подробнее далее в разделе «Оценка концепции».
Формирование идеологической базы — вещь исключительно важная как для результата, так и для процесса. Общее видение довольно трудно потрогать, проверить или измерить, но его отсутствие очень хорошо ощущается на важных этапах создания сайта: проектировщик создаёт не те функции, дизайнер рисует не то, что нужно.
Ключевые моменты при создании концепции
Поскольку концепция — это начало дизайна, главной её задачей является формулировка базовых идей и гипотез. После неё следует моделирование — синтез идей и выработка решений. Этот процесс аналогичен работе мозга, который сначала получает и анализирует информацию, а потом отдаёт указание нам действовать тем или иным образом.
Детали в концепции имеют второстепенное значение, если только они не определяют бизнес-логику. Например, в концепции сайта бутика ХХХ нам не важно, как будет устроен поиск в каталоге или какие характеристики будут у товара. Важно, что каталог будет разделён на две принципиально разные категории — для мужчин и женщин, и что товар надо показать максимально красиво (требование к качеству фотографий и интерфейсу в виде идеи).
Более того, необходимо отдавать себе отчёт в том, что часть концепции будет постулировать основополагающие вещи, а другая часть — гипотезы, которые нам предстоит проверить, в том числе на этапе тестирования концепции, а затем в дизайне и в процессе работы сайта. Например, в концепции сайта бутика ХХХ мы предполагаем, что посетители будут пользоваться предзаказом одежды, и предлагаем им такую возможность. Будут ли они — покажет только время. На решение основных задач сайта это вряд ли повлияет: всё равно покупка делается в бутике, а не на сайте, а задача сайта — привести человека в бутик.
Так как концепцию будут читать клиент и будущие пользователи, её нужно писать на их языке и никак иначе. Старайтесь избегать любых технических или специальных терминов, пишите просто и бодро, чтобы её можно было дочитать до конца, не делая над собой усилие. Иначе вы не получите правильный отклик.
Мы не можем точно сказать, насколько эффективным будем следующий совет, но нам он точно помогает. При создании концепции подключите ещё одного проектировщика или просто человека из вашей команды и проведите мозговой штурм, в результате которого вы: а) сформируете набор идей; и б) отберёте наиболее подходящие идеи. На наш взгляд, такой подход позволяет избежать замыленности взгляда основного проектировщика, особенно, если новый проект похож на один из предыдущих, что случается не так и редко.
Оценка концепции
Зачем это нужно?
Я советую проверить вашу концепцию на реальных пользователях сайта, с которыми вы проводили интервью в процессе исследования. Зачем?
Во-первых, это даст вам полезную обратную связь о том, учли ли вы их главные пожелания, такой ли сайт им нужен. Это не следует учитывать буквально, но принять к сведению стоит.
Во-вторых, вы получите эмоциональный отклик на ваши идеи. Эмоциональная составляющая крайне важна для оценки сайта, каким бы содержательным и функциональным он не был, как бы прекрасно он не решал задачи. Особенно это касается прекрасной половины ЦА.
В-третьих, вы таким образом покажете своё уважение — что вам важно мнение пользователя и вы готовы его учитывать, — что будет очень полезно на этапе реального тестирования сайта, когда вам потребуются мотивированные (и, желательно, бесплатные) пользователи для последующего тестирования готового сайта.
Что мы хотим услышать
Предъявлять концепцию необходимо, как минимум, двум сторонам — клиенту и пользователям; в ряде случаев — экспертам.
От клиента мы ждём, что он утвердит общие идеи, то, как мы будем решать его задачи. Как правило, поскольку проектирование идёт в очень тесном взаимодействии с клиентом, разногласий по концепции не возникает. Фактически, мы просто делаем контрольную проверку, чтобы не сделать серьёзную ошибку (а простые ошибки легко исправляются в процессе прототипирования и разработки).
От пользователя мы ждём примерно того же, но нас уже интересует, решает ли предложенная концепция их задачи, как они её оценивают эмоционально, нравится ли она им.
От эксперта мы ждём, что он оценит соответствие концепции текущей ситуации (на рынке, в среде существования проекта) и её перспективность.
Как проводить оценку
Оценка концепции, прежде всего, отвечает на вопрос «Это лучший способ решения наших задач?». Выглядеть она, на наш взгляд, должна следующим образом.
Для начала узнайте, как лучше воспринимают информацию ваши респонденты — на слух или в виде текста. Спросите это прямым текстом — как правило, люди знают об этом — или же проанализируйте свои наблюдения во время интервью. Далее выдайте визуалам текст концепции, а аудиалам — прочитайте её.
После необходимо задать ряд вопросов, которые с одной стороны покажут отношение к концепции, с другой проверят информацию, полученную в результате исследования.
Важный момент: целевые группы могут довольно сильно отличаться, поэтому им, возможно, понадобится давать на оценку разные части концепции, которые имеют отношение именно к ним.
Что делать с полученным откликом
Отклик от клиента невозможно проигнорировать. Во-первых, потому что иначе он не примет у вас работу. Во-вторых, если вы не решаете задачи клиента, то зачем вы делаете сайт?
Отклик от пользователя — тут всё намного сложнее. Если пользователи критикуют (не принимают) какую-то идею, это не означает, что не надо её реализовывать. Но необходимо учитывать, что первая реакция при посещении сайта будет именно такой, и что, возможно, эту идею необходимо посетителю обосновать, указать на её полезность.
Отклик от эксперта важен для понимания, насколько проект современен, насколько он отвечает требованиям среды, чем выделяется среди конкурентов. Например, если задача отстроиться от конкурентов стоит, а по результатам опроса экспертов оказывается, что проект ничем не отличается или отличается в худшую сторону, это повод внести изменения в концепцию.
«Одной достаточно?» Сколько дизайн-концепций сайта сделать, чтобы решить задачу клиента
На старте работы над сайтом клиенты приходят с запросом: «Сделайте нам три-четыре варианта на выбор». Однако из опыта Digital-агентства «Атвинта» одной концепции будет достаточно в большинстве случаев.
В статье расскажем, почему одной достаточно и в каких ситуациях лучше сделать больше вариантов.
Обычно мы делаем только один максимально проработанный вариант концепции. Дорабатываем и развиваем его, когда переходим к проектированию и разработке дизайна внутренних страниц сайта.
Об этом договариваемся на этапе переговоров: сейчас предлагаем только одно решение, а если предложенная идея совсем не подойдет, будем подбирать другие варианты.
Однако после защиты первой концепции новых вариантов делать не приходится. Рассказываем, почему так получается.
Ситуация: компания обращается в агентство за редизайном или разработкой сайта с нуля. Одним из первых этапов в работе будет создание дизайн-концепции. На этом этапе дизайнеры проработают визуальную идею под бизнес-задачу клиента. А клиент сверит свое видение проекта с командой агентства и опробует сотрудничество на небольшом отрезке работы.
Клиент еще не знает подхода агентства и команды, поэтому просит несколько вариантов концепции, чтобы оценить работу и иметь возможность выбрать.
За этим желанием обычно скрываются рациональные доводы, которые сводятся к трем типичным пунктам:
Из этих аргументов очевидно: клиенту важно не количество концепций, а понимание, что агентство действительно решит его задачу.
Несколько концепций на старте дают ощущение уверенности, что задача будет решена так, как нужно клиенту. Однако это ощущение обманчиво.
Вероятно, идея о нескольких концепциях пришла в веб-дизайн из логомейкерства. В этой сфере обычная практика — предоставить клиенту несколько вариантов.
Но тут важно понимать разницу между дизайном логотипа и дизайном интерфейса.
Логотип — это один элемент, за которым скрывается одна метафора. Интерфейс — это несколько визуальных идей и интерактивные взаимодействия, которые связаны в единую систему. Полноценная проработка такого комплекса дизайнерских решений для сайта потребует гораздо больше времени, чем нескольких метафор для логотипа.
Отсюда идет дилемма: за одно и то же время можно сделать несколько набросков сайта или одну детально проработанную концепцию.
И дальше будет один из сценариев:
В обоих случаях клиент будет выбирать из потенциально «неполноценных» вариантов. Это может привести к тому что, у компании будет визуально красивый сайт, но работать на бизнес-показатели он не будет. Ведь клиент не обязан досконально разбираться в дизайнерских решениях и может выбрать не самый эффективный вариант. А дизайнер переложит ответственность за результат на клиента: ведь именно он сделал финальный выбор.
Клиент обращается за решением задачи. Работа агентства и дизайнеров состоит в том, чтобы досконально разобраться, подобрать лучшее решение и затем обосновать, почему оно лучшее. Тогда концепция будет подходить именно этому клиенту, решать именно его задачу и отражать имидж именно этой компании.
Для разработки одной хорошей концепции придется погрузиться в потребности заказчика и пользователей сайта, исследовать бизнес-процессы, разобраться в пользовательских сценариях, болях, желаниях и страхах аудитории.
Так, когда делали концепцию редизайна для американской CRM-системы, мы сначала взяли демо-доступы, протестировали основные пользовательские сценарии и нашли узкие места в UX. И уже на фундаменте из этой информации построили концепцию.
Например, обнаружили так называемые Zero Data Screens. Это когда пользователь попадает на пустой экран без информации, но с интерфейсным текстом: «Сначала выберите клиента» или «Выберите период». Такие экраны тратят время пользователей и невероятно раздражают. Лучше сразу выдать нужную информацию списком и разместить фильтры для уточнения запроса. На это сделали упор в концепции.