UIデザインの前提理解【本での理解編④】

今回は「UIデザインの教科書」の第5章「階層と構造」です。Webもアプリも1ページ・1画面で完結することはなく、ページの遷移をいくつもします。一直線に行って、一直線に戻るといった動きは殆どなく、トップページから一覧に行って、詳細を見て、一覧に戻って、また詳細を見て、更に詳細を見て、といったように複雑に遷移します。

そうした動きを前提にUIデザインを考えると下記のような形の工夫が効果があると書かれています。

【現在地を明確に表示する】
1.今、どのページにいるかを明確に把握する為にヘッドに見出しを付ける
2.遷移する際に「スライド」するようにページ動かす
3.「戻る」ボタンは一つ前の階層ページの見出しにする
4.パンくずリストや現在地表記(文字色・太さ・大きさや背景色や目印)を入れる(例.Gmailの未読)
5.ページ内での現在地を表示する(文章が長い時、今どの辺にいるかが分かるように表示)

【階層を浅く広くする】
1.都心の狭い高層ビルよりも郊外の広いショッピングセンター(例.価格.com)
2.MECE(漏れなく重複なく)にラベリングする
3.トップ>一覧>詳細のシンプル3階層が基本
4.一覧ページは「絞り込み」「並び替え」「切り替え(表示方法)」の3機能
5.詳細ページから「不随する」「同じタイプ」の関連ページに繋げる

【分からないをなくす】
1.分からないは「場所(どこにいるか)が分からない」か「操作が分からない」の2つ
2.場所は「現在地を明確に表示する」で解決
3.操作は「動作と表示の一貫性」を持たせる(これを押すとこれが出てくるが同じ)

上記を踏まえると、前回にも書いたように、より規格化されたデザインやページ構成を意識して設計することが、人間の認知の観点においても操作する人にとって頭の負荷が少なくUIデザインとしては良いということのようです。

関連記事

  1. UIデザインの前提理解【本での理解編②】

  2. CSS/UIフレームワークに対応したAdobe XDのUIキット一覧

  3. UIデザインを検討して気づいた事

  4. UIデザインの前提理解【本での理解編⑤】

  5. UIデザインの心構え【Google検索編】

  6. 「姑獲鳥の夏」から学ぶデータ入力

  7. アプリ設計におけるUI検討の難しさとAdobe XD

  8. UIデザインの前提理解【本での理解編⑥】

PAGE TOP