こんな思いをしたことはありませんか？
「ページの読み込みに時間がかかっているけど、画面が真っ白で読み込み中なのかエラーなのかわからない…」
「ブログの記事数が少なくて、ページとしては寂しい…」
「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（理想ステート）
すべてのコンテンツが充分にある状態
すべてのコンテンツが十分に存在した、理想とされる状態です。
デザインを作成する際に一番最初に考えられる状態です。
ここを基に他の状態を考えていくとスムーズに作成できます。
Empty State（エンプティステート）
はじめてサービスを利用した際の登録情報がない場合や、検索結果が0件だった場合などのコンテンツの中身が空の状態です。
アプリやサービスの場合、ユーザーに次のアクションを起こさせるような設計を考えなくてはなりません。
記事件数が少ない際もイラストを表示させて質素な印象を薄くしている。
「検索結果0件」というテキストだけでなく、他へのリンクを掲載することで目的のページへたどりつきやすくなる。
またサイト内検索をした際、スペルミスや誤字などで検索結果が見つからなかった！という場合もあります。
何もない状態にせず、類似の検索ワードやよく検索されているワードなどを表示することで、ユーザーが求めているものにたどり着きやすくなります。
Error State（エラーステート）
404ページやフォームの入力エラーなど、ユーザーが意図しない動きをした際の状態です。
どちらもユーザーの「ミスをした」という心的ショックを和らげる必要があります。
イラストを掲載してショックを和らげ、検索フォームやリンクを掲載することで目的の記事へ辿り着きやすくなる。
エラーの項目を具体的に記載することで、入力時のハードルを下げる。
404ページでは文章を工夫する、イラストを掲載する、時にはゲームを実装するなどでショックを和らげるとともに、他のページへの導線なども設計すると離脱を防ぎやすくなります。
フォームで入力エラーが出た際、ただエラーが出ていることを表示するのではなく、どこが間違っているのか、どういうミスをしているのかを表示することでユーザーが入力しやすく離脱しにくいフォームを作成できます。
Partial State（パーシャルステート）
コンテンツがわずかにある場合の状態です。
ユーザーに次の行動を起こさせるための設計や、がっかりさせないための設計が必要です。
サービスの場合、ユーザー登録状況をパーセンテージや分数で表示させたりして、入力を喚起させる作りにすることが大切です。
アプリに登録したばかりの状態。チュートリアルを表示することで次へのアクションも起こしやすくなる。
Loading State（ローディングステート）
通信環境が良くない状態やデータの量が膨大で待ち時間が発生する際の状態です。
「Loading」というテキストを配置することや、スピナーを配置することで、「読み込み中」という状態が一目でわかり、「何もないのでは」という不安を払拭することができます。
インジケーターを使うことで、あとどれくらい時間を要するのか一目で理解できるようになります。
読み込み状態がパーセンテージで表示されているため、どの程度待てば良いのかわかりやすくなる。
ブログサイトなどでよく見る、サムネイルやテキストのエリアがグレーアウトされた設計は、読み込まれた後のコンテンツに意識を割くことができ、どのくらいのページ量があるかあらかじめ理解させることができます。
スケルトンスクリーン。どの程度コンテンツの量があるか理解させることができ、コンテンツに意識を向けることができる。
読み込み時間そのものを少なくすることも大切ですが、合わせて設計することでユーザーに不安を感じさせず飽きさせないUIを作ることが可能です。
まとめ
以上の5つの状態を意識して設計を行うことで、ユーザーがストレスなく使用できるUIを作ることができます。
いきなり全部を設計するのは難しいかもしれませんが、少しずつ改良していくことでユーザビリティを高めていきましょう！
この記事はDigital Identity Creative Div. Advent Calendar 20211日目の記事です。
明日の担当は牧野さんです！
広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。
【2024年4月法改正】ウェブアクセシビリティ状況、診断してみませんか？
株式会社デジタルアイデンティティでは、ウェブアクセシビリティ診断サービスを提供しています。
2024年4月、障害者差別解消法の改正施行に伴い、2024年6月から一般企業にも「合理的配慮」が義務化されます。
これに伴い、努力義務である「環境の整備」に含まれるウェブアクセシビリティについても、対応を進める企業が増えています。
こんなお悩みはありませんか？
- どこからウェブアクセシビリティ対応に手をつければ良いかわからない…
- 今のサイトで問題のあるページを一覧化して欲しい…
- ウェブアクセシビリティの具体的な改善方法を知りたい…
WCAG2.2に準拠した診断項目・達成基準で、問題のあるページをリスト化してページ単位で問題点をリストアップ。
課題点が明確になるので、具体的な改善アクションに繋げることができます。
また、診断後の改善作業を弊社にワンストップでご依頼いただくことも可能です！
ぜひお気軽にご相談ください！
![[無料] webサイトに関するお悩みを解決! webサイト診断【期間限定】「UI/UX分析」「EFO診断」「ページ表示高速化診断」詳しくはこちら](https://digitalidentity.co.jp/blog/wp/wp-content/themes/gorgeous_tcd013-child/img/common/bnr/sidebar-website-sindan.jpg)
