Onboarding UXを改善するシンプルなUIハック[OCD]

UIモックアップとスケッチは、ユーザーデータが既に存在することを前提としています。たとえば、次のモックアップは、ユーザーがチャットする連絡先、通知、さらにはチャットスレッドを持っていることを前提としています。

この無料のスケッチリソースを使用して構築されたシンプルなメッセンジャーUI

しかし、ユーザーがサインアップするときは決してそうではありません。最初はデータがないので、空の連絡先列と空のチャットウィンドウがあります。

光沢のあるUIデザインにより、情報を簡単に利用でき、その情報の作成方法に焦点を合わせることはありません。

Dribbbleの多くを浸して、b2bアプリケーションのダッシュボードを設計するときに、この困難な方法を学びました。 Sketchでは見栄えがよかったのですが、顧客は自分の道を見つけることができませんでした。

悪いUXは、オンボーディングとサポートコストを増加させ、収益に直接影響します。また、ピクセルパーフェクトなデザインを消費するのに苦労しているユーザーを見るのは気分が悪い。失敗したことを思い出させます。

既存のソリューション

解決策の1つは、インターフェイスのようなスライドを使用して事前にオンボーディングを行うことでした。これはモバイルアプリの標準のようです。

SlackのスライドベースのオンボーディングUX

スライドアプローチの問題は、コンテキストの欠如です。スライド上で伝えることができるのはそれほど多くありません(ユーザーがどれだけ保持しているかは別の質問です)。

製品の概要を説明するのに最適ですが、製品の仕組みを説明するのにはあまり役立ちません。製品の複雑さを数枚のスライドに要約することはできなかったため、私のユースケースには関係ありませんでした。

また、特定の手順をユーザーに案内するツールチップベースのソリューションもありました。このオプションは、Webアプリでより一般的です。これらのフローを構築するのに役立つ多くの優れたJavaScriptライブラリがあります。

introjs.com/のツールチップベースのオンボードデモ

ツールチップベースのソリューションに関する限り、私はそれらが迷惑であることがわかり、ほとんどの場合「スキップチュートリアル」をクリックしました。 Canvaのような大企業は、オンボードのツールチップを使用していますが。 AppCuesという製品を使用すると、これらのツールチップをコードなしできれいに設計できます。

また、ビーコンスタイルのアプローチも存在します。このスタイルでは、誤解されることが多い機能に、必要なときに関連情報を提供する光るビーコンが付けられます。

これが最も目立たない方法です。 17ステップのチュートリアルを喉に押し込んで実際に必要なときに消えるツールチップとは異なり、このホットスポットベースのアプローチは準備ができたときに情報を提供します。

Slackが3つのフォームすべてを使用していることに言及する価値があります。ユーザーが固執するのも不思議ではありません。これは、保持がオンボーディングの容易さに直接比例するという事実を何らかの形で示唆しています。

OCD別名オンボーディング中心の設計

私は物に名前を付けるのが好きです。名前は、心の中でアイデアを具体化するのに役立ちます。したがって、このオンボーディング中心のデザインと呼びましょう。

私は解決策が欲しかった:

  • 文脈に関連していた
  • 迷惑ではありませんでした(機能がどのように機能するかを学ぶために17のステップを取ることを好む人はいませんでした)
  • 目立たない(ビーコンのように)
  • 使いやすい(ツールチップは使いにくい)

結果

私は単に状態の設計を始めました。この記事を読み始めたときに見たチャットのデザインは、3つの状態でデザインできます。

状態1:連絡先が存在しません

状態2:連絡先は存在するがチャットはない

状態3:チャットと連絡先の両方が存在する

各状態の目標は、ユーザーを次の状態に進めることです。ユーザーが状態3に進むと、正常にオンボーディングされます。チャットのモックアップを考慮すると、各状態の目標は次のとおりです。

状態1の目標:連絡先を追加する主なユーザー

以下のモックアップには、行動を促すフレーズが1つだけあります。これは、ユーザーが新しい連絡先を追加できる青いプラスボタンです。グラフィックとテキストは両方とも、ユーザーがそのアクションを実行できるように準備します。

状態1 —連絡先を追加するためにユーザーを準備します(undraw.coによる図)

連絡先が追加されたら、2番目の目標を開始できます。

状態2の目標:チャットを開始する主なユーザー

以下のモックアップには、チャットを開始するためのグラフィカルな入門書があります。使用可能な機能の概要を明示的に示しています。繰り返しますが、今できることは1つだけです。つまり、メッセージを送信します。このUIで呼び出しを行うこともできますが、これらのアクションは両方とも同じ目的を果たします。ユーザーをステップ3に導きます。

状態2 —連絡先が追加され、チャットを開始する準備ができました

状態3の目標:なし、ユーザーはオンボードされています-すべてのキューが消えるはずです

そして最後に、ユーザーがこのプロセスを数回繰り返すと、ユーザーのUIが当初の意図どおりに見え始めます。

状態3 —ユーザーは正常に搭乗しています

このアプローチの利点

  • 手順1のスライドアプローチと比較して、Onboarding Centric Design(OCD)はコンテンツをチャンクで表示します。この情報は、意思決定の時点で入手できます。
  • このアプローチは、モバイルデバイスとデスクトップデバイスの両方で使用できます。このUIはシンプルですが、複雑なUIの場合、ホットスポットでOCDを使用してCTAを高めることができます。
  • このアプローチは、ユーザーの旅路について考えることを強制することにより、そもそもUXを改善します。
  • Reactを使用してフロントエンドを作成する場合、このアプローチはそのコンポーネントアーキテクチャにうまく適合します。

だから、経験則として:

状態のモックアップを設計します。
各状態には1つの目標があります-次の状態への進行。
最後の状態は、ユーザーがオンボードされているときです。

読んでくれてありがとう :)

こんにちは。この記事が気に入って、最新情報を知りたい場合は、Medium、Github、Twitterをフォローしてください。

私は、スラックコミュニティ(2018年10月6日時点で18人のメンバーがいます)を運営しています。そこでは、他の人を助けたり、フロントエンド、バックエンド、および開発全般に関するヘルプを受けることができます。こちらから参加できます。