Введение в разговорный дизайн (и 3 выдающихся примера)

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

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

Давай поговорим!

Введение в разговорный дизайн

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

Это один из примеров разговорного дизайна. С другой стороны, когда люди говорят о диалоговых пользовательских интерфейсах (UI), они имеют в виду текстовые интерфейсы, такие как чат-боты и Slack.

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

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

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

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

3 примера веб-сайтов, использующих разговорный дизайн

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

1. Студия Buzzworthy

На веб-сайте Buzzworthy Studio есть удобная форма обратной связи, обеспечивающая индивидуальный подход. Как только вы попадете на страницу контактов, вы можете нажать на призыв к действию НАЧАТЬ ПРОЕКТ :

Затем на странице вас спросят, над каким проектом вы хотите приступить:

Например, если мы нажмем на опцию « Маркетинг» , мы сможем выбрать из SEO , PPC-кампаний или того и другого:

После того, как вы сделали свой выбор, веб-сайт предоставит вам приблизительный бюджет и график, который варьируется в зависимости от него:

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

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

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

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

2. Landbot

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

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

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

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

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

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

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

3. Коди

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

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

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

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

Заключение

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

Давайте еще раз взглянем на некоторые из наших любимых примеров разговорного дизайна:

1. Buzzworthy Studio: с помощью персонализации вы можете сделать даже контактные формы более увлекательными.
2. Landbot: Предлагает захватывающий пример диалогового интерфейса.
3. Коди: Этот простой чат-бот отлично справляется с задачей заставить вас почувствовать, что вы разговариваете с реальным человеком, а не с машиной.

Как вы думаете, как лучше всего реализовать разговорный дизайн на сайте? Поделитесь с нами своими мыслями в комментариях ниже!

Миниатюра изображения статьи Art Alex / shutterstock.com