悩めるWEB担当者様のための最新ノウハウをお届け

UI Stackに基づいた状態変化に強いUIを作ろう!

thumbnail_uistack

こんな思いをしたことはありませんか?
「ページの読み込みに時間がかかっているけど、画面が真っ白で読み込み中なのかエラーなのかわからない…」
「ブログの記事数が少なくて、ページとしては寂しい…」
「404ページがサイトのデザインと異なっていて、びっくりした…」

ユーザーに不安な気持ちを与えるページを作っていませんか?
ページの構成・デザインを考える時は「UI Stack」を基準に考えるとユーザビリティの高いページを作成できます。

UI Stackとは

UI Stackとはアメリカのデザイナー Scott Hurffさんが提唱した、「UIの考慮すべき5つの状態」という考え方です。

出典:How to fix a bad user interface

5つの状態とは

  • Ideal State(理想ステート)
  • Empty State(エンプティステート)
  • Error State(エラーステート)
  • Partial State(パーシャルステート)
  • Loading State(ローディングステート)

この5つの状態を示したものです。

UI Stackに則ってデザインを作成することで、誰もが安心して使用できるUIを作成することができるだけでなく、エンジニアとのコミュニケーションロスを防ぎやすくなります。

Ideal State(理想ステート)

ideal-state01

すべてのコンテンツが充分にある状態

すべてのコンテンツが十分に存在した、理想とされる状態です。
デザインを作成する際に一番最初に考えられる状態です。
ここを基に他の状態を考えていくとスムーズに作成できます。

Empty State(エンプティステート)

はじめてサービスを利用した際の登録情報がない場合や、検索結果が0件だった場合などのコンテンツの中身が空の状態です。

アプリやサービスの場合、ユーザーに次のアクションを起こさせるような設計を考えなくてはなりません。

empty-state02

記事件数が少ない際もイラストを表示させて質素な印象を薄くしている。

「検索結果0件」というテキストだけでなく、他へのリンクを掲載することで目的のページへたどりつきやすくなる。

「検索結果0件」というテキストだけでなく、他へのリンクを掲載することで目的のページへたどりつきやすくなる。

またサイト内検索をした際、スペルミスや誤字などで検索結果が見つからなかった!という場合もあります。
何もない状態にせず、類似の検索ワードやよく検索されているワードなどを表示することで、ユーザーが求めているものにたどり着きやすくなります。

Error State(エラーステート)

404ページやフォームの入力エラーなど、ユーザーが意図しない動きをした際の状態です。
どちらもユーザーの「ミスをした」という心的ショックを和らげる必要があります。

error-state01

イラストを掲載してショックを和らげ、検索フォームやリンクを掲載することで目的の記事へ辿り着きやすくなる。

error-state02

エラーの項目を具体的に記載することで、入力時のハードルを下げる。

404ページでは文章を工夫する、イラストを掲載する、時にはゲームを実装するなどでショックを和らげるとともに、他のページへの導線なども設計すると離脱を防ぎやすくなります。

フォームで入力エラーが出た際、ただエラーが出ていることを表示するのではなく、どこが間違っているのか、どういうミスをしているのかを表示することでユーザーが入力しやすく離脱しにくいフォームを作成できます。

Partial State(パーシャルステート)

コンテンツがわずかにある場合の状態です。

ユーザーに次の行動を起こさせるための設計や、がっかりさせないための設計が必要です。
サービスの場合、ユーザー登録状況をパーセンテージや分数で表示させたりして、入力を喚起させる作りにすることが大切です。

アプリに登録したばかりの状態。チュートリアルを表示することで次へのアクションも起こしやすくなる。

アプリに登録したばかりの状態。チュートリアルを表示することで次へのアクションも起こしやすくなる。

Loading State(ローディングステート)

通信環境が良くない状態やデータの量が膨大で待ち時間が発生する際の状態です。

「Loading」というテキストを配置することや、スピナーを配置することで、「読み込み中」という状態が一目でわかり、「何もないのでは」という不安を払拭することができます。
インジケーターを使うことで、あとどれくらい時間を要するのか一目で理解できるようになります。

loading-state02

読み込み状態がパーセンテージで表示されているため、どの程度待てば良いのかわかりやすくなる。

ブログサイトなどでよく見る、サムネイルやテキストのエリアがグレーアウトされた設計は、読み込まれた後のコンテンツに意識を割くことができ、どのくらいのページ量があるかあらかじめ理解させることができます。

loading-state-1

スケルトンスクリーン。どの程度コンテンツの量があるか理解させることができ、コンテンツに意識を向けることができる。

読み込み時間そのものを少なくすることも大切ですが、合わせて設計することでユーザーに不安を感じさせず飽きさせないUIを作ることが可能です。

まとめ

以上の5つの状態を意識して設計を行うことで、ユーザーがストレスなく使用できるUIを作ることができます。
いきなり全部を設計するのは難しいかもしれませんが、少しずつ改良していくことでユーザビリティを高めていきましょう!

この記事はDigital Identity Creative Div. Advent Calendar 20211日目の記事です。
明日の担当は牧野さんです!

広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

関連記事

Keywords