会話型デザインの紹介（および3つの優れた例）

公開: 2018-08-05

最近はほとんどの人がウェブサイトを持っているので、目立たせたいのなら、デザインに関してはAゲームを持参する必要があります。人々は、特定のニーズに合わせて調整され、重要であると感じさせるサイトを望んでいます（彼らはそうです！）。その経験を提供できない場合は、ビッグリーグに出場できない可能性があります。

会話型デザインとは、ユーザーごとに調整され、ユーザーのニーズを予測するWebサイトを作成することです。この記事では、会話型Webデザインの簡単なクラッシュコースを提供し、いくつかの例について説明します。

話そう！

会話型デザイン入門

会話型のWebデザインに関しては、重要な違いがあります。人々がこの概念について話すとき、彼らは主にハイパーパーソナライズについて言及しています。たとえば、Facebookアカウントにログインすると、プラットフォームはあなたが何を考えているか/感じているかを尋ね、名前であなたを参照します。

Facebookのタイムライン。

これは会話型デザインの一例です。一方、会話型ユーザーインターフェイス（UI）について話すときは、チャットボットやSlackなどのテキスト駆動型のエクスペリエンスを指します。

いずれにせよ、会話型デザインという用語は多くの分野をカバーしています。ただし、これらすべてに共通する点が1つあります。それは、ユーザーによりパーソナライズされたエクスペリエンスを提供するという目標です。これが良いことである理由は次のとおりです。

それはあなたが信頼を築くのを助けることができます。 会話型のデザインは、ユーザーが歓迎されていると感じるのに役立ちます。これにより、信頼が高まり、より多くのコンバージョンにつながる可能性があります。
収集したデータを有効に活用できます。 最近のほとんどのWebサイトは、ユーザーから個人情報を収集しています。会話型デザインで、このデータを実用化できます。

どのWebサイトが会話型デザインを採用することで利益を得ることができるかについては、訪問者に提供するインタラクションのレベルによって異なります。ユーザーが何らかの方法でサイトを操作する必要がある場合は、会話型のデザインを検討して、よりパーソナルなエクスペリエンスを提供することを検討する必要があります。

次のセクションでは、会話型WebデザインとUIの例をいくつか紹介します。彼らが正しく何をしているのか、そしてあなたが彼らのアプローチをあなた自身のウェブサイトにどのように適用できるのかについて話します。

会話型デザインを使用するウェブサイトの3つの例

会話型デザインは広大な分野であるため、Webサイトに実装する方法はいくつかあります。このセクションでは、パーソナライズと会話型UIにそれぞれ異なるアプローチを使用する3つの例について説明します。

1. Buzzworthy Studio

Buzzworthy StudioのWebサイトは、高度にパーソナライズされたエクスペリエンスを提供する優れたコンタクトフォームエクスペリエンスを備えています。連絡先ページが表示されたら、[プロジェクトの開始]をクリックして行動を起こすことができます。

新しいプロジェクトを開始します。

次に、このページでは、どのようなプロジェクトに着手したいかを尋ねられます。

起動するプロジェクトのタイプを選択します。

たとえば、[マーケティング]オプションをクリックすると、 SEO 、 PPCキャンペーン、またはその両方から選択できます。

マーケティングキャンペーンを開始します。

あなたが選択をすると、ウェブサイトはあなたに大まかな予算とそれに応じて異なるタイムラインを提供します：

プロジェクトの大まかな予算とスケジュール。

連絡先ページに関する限り、この経験は私たちが遭遇した中で最も魅力的なものの1つです。予算を立てる前にいくつか質問することで、フリーランサーを雇う前に会話をしているような気分になります。

さらに、より徹底的なプロジェクト提案を行う前に、知りたい詳細を追加できる簡単なフォームも含まれています。

プロジェクトの詳細を尋ねる簡単なフォーム。

会話型のデザインと連絡先のページは、特にポートフォリオページの場合、天国で行われた一致です。最大の課題の1つは、潜在的なクライアントに安心感を与えることです。ページをクライアントに合わせて調整することは、これを行うための優れた方法です。

よりインタラクティブなクライアントオンボーディングエクスペリエンスを作成することに挑戦したい場合、それを行うための1つの優れた方法はTypeformを使用することです。少し前に、プラットフォームを使用してスタイリッシュな調査を作成する方法について説明しましたが、この例のように、プラットフォームを使用して潜在的なクライアントに質問することもできます。

2.ランドボット

2番目の例では、会話型UIについて説明します。 Landbotなどのプラットフォームは、完全にテキストインタラクションを中心に構築されているため、非常に文字通りの方法で会話型デザインの概念にアプローチします。

Landbotは前の例ほどよく知られていないかもしれませんが、それは彼らがテーブルに何か面白いものを持っていないという意味ではありません。つまり、このサービスを使用すると、チャットボットベースのランディングページを作成できます。 Facebookを利用したチャットボットをWordPress用にセットアップする方法については前に説明しましたが、このプラットフォームは使い始めるのがはるかに簡単です。

Webサイト自体は、会話型UIのマスタークラスです。それはすべて、クリーンでモダンなデザインを使用する単一のチャットを中心に構築されています。

Landbot.ioのホームページ。

会話の各段階で、チャットボットへの返信方法を選択できます。事前に定義されたオプションを使用しているため、チャットボットのプログラミングははるかに簡単です。これは、会話型UIが退屈である必要がないことを示す優れた例でもあります。

Landbotの会話型デザインへのアプローチから取り除くべき2つの際立ったポイントがあります。まず、Webサイトに会話型UIを含めたい場合は、それらを人目を引くようにする必要があります。色、フォント、さらには入力時にユーザーに表示される小さなアニメーションで遊んで、注目を集めるものを作成します。

Landbot.ioチャット。

次に、会話型UIは、コンバージョンを促進するのに最適です。たとえば、チャットボットを使用すると、強力な召喚状（CTA）を提供することで、ユーザーが希望するアクションを実行できるようになります。

チャットボットを介して配信されたCTAのいくつかの例。

これらのタイプの機能を実装するには、ある程度の技術的知識が必要になる場合がありますが、その結果は努力する価値があります。いつでも独自のLandbotチャットボットを作成し、それを使用してユーザーをWebサイトに誘導したり、その逆を行ったりすることができます。

3.コーディ

最後の例として、別の会話型UIを見てみましょう。 Codyは、ChopChopエージェンシーのシンプルなチャットボットのショーケースです。彼らのビジネスはチャットボットの作成を中心に構築されているため、彼らが何ができるかを誇示したいのは当然です。

Landbotの例とは異なり、Codyは明白なマーケティングにあまり向いていません。代わりに、重要な情報を提供しながら、友達と会話しているような気分にさせようとします。たとえば、Codyは、サイトでCookieを使用してもかまわないかどうかを尋ねます。これは、通知に大きなひねりを加えたものです。

動作中のCodyチャットボット。

ここでの会話型UIは非常にシンプルです。背景はきれいで、テキストの泡は非常に控えめです。これは、コンテンツを損なうことなく、プロのWebサイトに追加されたチャットボットのタイプです。

ここで重要なポイントは、会話型UIをマーケティングだけに集中させる必要がなく、チャットボットにセンスを加える方法がたくさんあることです。たとえば、顔と名前を付けて、ユニークで個性的な感じにすることができます。同様に、使用する言語を最適化して、会話をよりカジュアルに感じさせ、Googleに質問しているように感じさせないようにすることができます。

結論

ウェブデザインに関しては、購読できる考え方がたくさんあります。マテリアルデザイン、流動的な形状、手描きの要素などがあります。ただし、会話型Webデザインは単なるトレンドではありません。訪問者のそれぞれに合わせて独自に調整されたエクスペリエンスを提供できれば、ほとんどのサイトに匹敵することができないという利点があります。

会話型デザインのお気に入りの例をもう一度見てみましょう。

Buzzworthy Studio：パーソナライズを使用すると、連絡先フォームでさえもっと楽しく感じることができます。
Landbot：会話型UIの目を引く例を提供します。
Cody：このシンプルなチャットボットは、機械ではなく実際の人と話しているように感じさせるのに最適です。

ウェブサイトに会話型デザインを実装するための最良の方法は何だと思いますか？ 以下のコメントセクションで私たちとあなたの考えを共有してください！

アートアレックス/shutterstock.comによる記事画像のサムネイル