1. ホーム
  2. コラム
  3. WEBサービスの理想UIの状態までの道筋を設計する

WEBサービスの理想UIの状態までの道筋を設計する

みなさんこんにちは。
UXデザインユニットでUIデザインを担当している山本です。

WEBサービスには理想UIというものがあります。サービス提供者が考える、ユーザーにとって一番価値を感じてもらえるUIの状態のことを指すのですが、例えばfacebookでは知り合いの投稿が沢山流れている状態。食べログなら行った・行きたいリストに情報が沢山追加してあり、自分の書いたコメントにいいねが沢山付いている状態などが理想のUIの状態の1つと言えると思います。
サービスのデザインを検討する時に一番力を入れるべき理想のUIの状態ですが、そこへ至る道筋も重要です。
そこをおろそかにすると理想UIに至らず、サービス提供者の伝えたい価値に気づいてもらえないまま使ってもらえなくなるということになってしまいます。

そこで今回は理想UIへの道筋を設計する際に考えていることをご紹介します。

カスタマージャーニーマップに代表されるようにUXはコンテキストが重要になるため時間軸で語られることが多いのですが、実際のサービスを作るときには利用中のUXである、webサイトを実際に使っている状態を特に意識してUIデザインを行っています。
では利用前、利用後のUXはUIデザインに反映されないのかというとそんなことはありません。

実際にはユーザーはサービス提供者の考えるスタートからゴール(サービスの価値を感じる理想の状態)までを一通り体験してから離脱する訳ではなく利用中と利用後を細切れに行ったり来たりしてるからです。
理想UIに至る前に離脱し二度と戻ってこないことを防ぐためには道筋を設計する必要があります。

利用時間全体

引用:UX白書(日本語訳版)

理想UIまでの道筋を考える時に必要なのは、画面ごとに今ユーザーがどの状態にいるのかを把握することです。
その時に必要になってくるのがUI Stackという概念です。


利用中のUXをUI Stackに置き換える

UI Stackとは下記の5つのUIの状態をいいます。
・エンプティステート:ユーザーが初めてプロダクトを使った時などデータが入っていない状態
・ロードステート:読み込みをしていたり待っている状態
・パーシャルステート:理想ステートまでの途中経過の状態
・エラーステート:何かが間違っている時の状態
・理想ステート:本記事の理想UIを指します。

UI Stack

引用:
How to fix a bad user interface

利用中のUXをUI Stackで置き換えるとユーザーの状態がわかりやすくなります。


理想ステートへの道筋を考えてUIを設計する

facebookは理想ステートである「タイムラインに沢山のユーザーの投稿が流れている状態」になるべく早く移行してもらうためにホーム画面に行く前に友達登録をさせます。登録をせずに進むとタイムラインには投稿は表示されない状態(エンプティステート)になりますがそこでも友達追加を促しています。

facebookのエンプティステート

仮にエンプティステートで離脱した場合、再度流入した時に友達登録の動線が目立つ位置になければそのユーザーが理想ステートへ至ることは少なくなくなるでしょう。
Pinterestではタイムラインにユーザー全体の新着情報を流すことでそもそもエンプティステートを作らないようにしています。

エラーステートとロードステートに関してもこのステートのまま離脱されてしまうと再流入しても同じ場所でつまずいて進んでもらえなくなるかもしれません。この場合は読み込み速度が遅かったり、読み込み中、エラーが起きている状態であることを気づいてもらえていない可能性があるのでUIの工夫が必要です。

1.ユーザーが今どのステートにいるか。
2.仮にどのステートから離脱しても、再度流入したページは理想ステートへ至ることができる画面になっているか。
UI Stackの遷移を意識して理想の状態までの道筋を設計することで、価値を感じる前に使わなくなってしまうということを防ぐことができると思います。

サービスの価値をターゲットに提供したいという方がおりましたらUXデザインユニットまでご相談ください。


■もっと詳しく知りたい! と思った方はこちら

■UXコラム一覧はこちら

カテゴリ: UXデザイン
2017年07月26日

RSS