23
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

1人フロントエンドAdvent Calendar 2022

Day 12

残念なUI設計を行わないために考慮すべき5つの状態(UI Stack)

Posted at

はじめに

UIの設計を行うときに理想とする状態だけを作成したために、実装の段階でローディング中のUIが足りないことに気づき改めてUIの設計を考え直したことはありませんか。私は似たような経験が何度かあります。この記事ではそのような手戻りや実装漏れをなくすために設計時に心がけると良い5つの状態を紹介します。

この記事はscotthurffの記事を参考に記述しています。利用した画像の幾つかはこちらの記事から拝借しています。

UI Stack

読み込み中に何の画面も表示されずユーザーが今どのような状態になっているか分からず不安になってしまうことがあります。このような現象はあるルールに従うことで起きにくくなります。その一つとしてUI Stackというルールがあります。
ui-stack.jpg
UI StackではUI設計を行うときに忘れてはいけない5つの状態があります。

  • Blank State: 空の状態
  • Loading State: 読み込み中の状態
  • Partial State: 中途半端な状態
  • Error State: エラー中の状態
  • Ideal State: 理想的な状態
    UI設計時に全ての状態を含める必要はありませんが、これらを考慮することで良い設計ができます。

Blank State

Blank Stateには3種類の状況が存在します。ユーザーが初めて利用したとき、ユーザーが能動的にデーターを空にしたとき、検索などの結果で表示するデータが存在しなかったときです。

初めて利用したとき

この状況はデータが存在したときに表示されるものの説明、データ作成などの行動促進、行動をすることでどのようなメリットを得られるかを説明できるチャンスです。この方法によってそのアプリもしくは機能の第一印象を与えます。
具体的な設計として以下のようなものが考えられます。

  • ユーザーがその画面でしばらく行動を起こさなかった場合画面の端でヒントを出す
  • 起こして欲しい行動をジェスチャーで表示しつつアプリケーションの紹介をする
  • ダミーデータをおいてユーザーに行動後のイメージを想起させる

データを空にしたとき

この状況は起きにくいように考えられますが、通知を空にしたときやTODOリストを空にしたときなど意外とよくあります。このようなケースでは空にしたことに対して褒めることや次にして欲しいことを紹介することでユーザーが満足感得たりや次に行う行動を知ることができます。

結果が存在しない

この状況はユーザーが何かを探した結果存在しなかったことを意味するので、ユーザーが探したかった何かをサポートすることが良い手法です。AmazonやGooglでは結果が存在しなかった場合は類似した単語で検索した結果を表示するようにしています。他にもそもそも結果が存在しない状態を作らないためにタグなどを設定して定型文でのみ検索できるようにすることでBlank Stateを作らないように対策することができます。

Loading State

データを読み込んでいるとき、インターネットに接続しているとき、ページの遷移しているときなどの状況で読み込み中の状態を設計する必要があります。

部分的に読み込ませる

データを読み込んでいるときにページ単位でSpinnerなどで読み込み中の状態を表現するのではなく、データを必要としている部分だけをSkeltonに置き換えて用意出来次第表示させるような表現にします。下の例はmateril uiのサンプルを拝借しました。データが準備できた記事から表示させていくようなものとなっています。
スクリーンショット 2022-12-11 18.39.33.png

これによってどのようなコンテンツが表示されるのかが分かりやすくなることや、読み込みが不要な部分や完了した部分へのアクセスが可能となりユーザーからの印象が大きく変わります。

ユーザーの行動を即時反映させる

例えばTwitterの機能であるいいねをユーザーが押したときにサーバーに送信して結果が返ってきてからユーザーの画面に反映するのではユーザーは行動に対する結果をすぐに得ることができず、満足な体験を得ることができません(Twitterの実装が実際にどうなっているか確認したものではありません)。ユーザーの行動をユーザーの画面ですぐに反映し、裏側でサーバーとの通信を行わせることでユーザーのストレスが少ない状態で利用させることができます。これLoading Stateをユーザーに悟らせないようにするための戦略です。

Partial State

この状態が一番想像しづらい状態だと考えています。この状態はBlank StateとIdeal Stateの中間のような状態を指します。例えばアカウントに登録して欲しい項目として名前、誕生日、住所があったときに、名前と誕生日しか登録されていない状態がPartial Stateです。この状態ではユーザーにIdeal Stateにするために導くための設計が必要となります。必要なタスクと完了したタスクを一覧にして表示したり、どの段階まで進んだかを表す進捗表示を行うことでユーザーに対してIdeal Stateになるための行動の促進を行うことができます。

Error State

この状態はフォームデータが正しくない、ネットワークやサーバーに接続できない、タスクを完了せずに次の状態に進もうとしたときなど様々なケースがあり、さらに複合して行われることも考慮しなければいけないので複雑な状態となります。Error Stateにするためにユーザーのデータを失うような設計やエラーの静的な検出はできるだけ避けた方が良いです。また、曖昧な表現や技術的な専門用語、画面の大きな変更は避けるべきで、何をすれば良いかを簡潔に分かりやすく伝えるような表現にすると良いです。

Ideal State

アプリや機能の最終的な状態で作り忘れることはない状態です。この状態に関して記述することはほとんどないですが、他の状態から遷移と他の状態への遷移を考慮して作成すると画面の変化が少ないストレスない画面を構成することができます。

最後に

UI Stackを意識した設計を行なって、より良い価値を迅速にユーザーに届けられるようにしていきたいですね。

23
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?