デザイン

デザイン

「5つ帽子の法則」を利用して効果的にユーザに情報を伝えよう!【必読!デザインの基本的考え方】

1,818 views

読了時間 : 約2分9秒

ユーザに分かりやすいよう、情報をきちんと整理したうえでユーザに提示することで、UXの向上を図ることができます。

データの見せ方は色々ありますが、中でも長年使われてきたのが「5つの帽子掛け」、別名「LATCHの法則」です。

LATCH(Location, Alphabet, Time, Category, Hierarchy)に基づいて情報を整理すれば、ユーザに知りたいことに適確に応えることができますよ。

 

 

LATCHのL:Location(場所)

 

情報を「場所」に基づいて整理します。

物理的な場所でも、概念的な場所でもかまいません。

場所に関する情報は、データが複数のソースを持つ場合、あるいは特定のUIインタラクションのトリガーやユーザの位置情報に基づいた通知に使いたい場合に重要になってきます。

1-i35FuSSZmi4YaZtP8gC9Kw

例:ポケモンGO

ユーザに対して、何かの相対的な位置関係を提示したいとき(例:マップの案内や現在の位置情報から一番近い○○を探すときなど)に有効ですし、「時間」に関する情報と組み合わせると、ユーザにより有益な情報提供が可能になります。

 

 

LATCHのA:Alphabet(あいうえお順)

 

ランダムなデータをあいうえお順に整理すると、膨大なデータも扱いやすくなります。

1-ujxEdW2nS0bcl4FpiZ_tew

例:電話帳

参照するような性質の情報(電話帳、辞書など)や、特定の情報に不定期にアクセスしたい時、他の整理方法が使えないときに有効です。

 

 

LATCHのT:Time(時間)

 

人がいちばん使っている情報整理の手法がこれではないでしょうか。

一定の期間内に起こったことを時系列順にならべる方法です。

1-7M1T0BzoIgI9z393w45nEA

例:カレンダー、スケジュール帳、メールの受信箱、プロジェクト計画、タイムライン、eコマースの注文履歴、等々

時系列順に情報をならべることで変化を把握しやすくなり、観察や比較がしやすくなります。

一定の期間何に起きた出来事を表示したり比較したりしたい場合や、何かの手順を説明する場合に有効です。

 

 

LATCHのC:Category(カテゴリー)

 

情報を類似性や関係性に基づいて区別します。

1-unzkrjcH6OsFGUpQu26fFA

例:買い物の商品カテゴリ、ハッシュタグなど

ユーザが自分の探しているものを見つけやすくなりますし、似たようなものを同じカテゴリに入れておけば他の物を勧めやすくなります。

あいうえお順に整理する方法と組み合わせるとより便利になります。

ここでひとつ注意したいのが、同じものでも人によっては違うカテゴリのものとして認識する場合があるということです。

特に情報のプロパティが複数のカテゴリをまたいでいる場合は要注意です。

ユーザがカテゴリーの分け方を理解しているか、しっかりと確認する機会を設けましょう。

また、情報量が多いと必然的にサブカテゴリーを設ける必要が出てきますが、あまり細かく分類してしまうとかえって探しにくくなるので注意しましょう。

 

 

LATCHのH:Hierarchy(ヒエラルキー)

情報を特定の基準に基づいて分類します。

1-FDO2AIgnLffoTAhf3J-f9w

例:小→大、低→高

共通の基準に基づいて情報を比較したいときに使います。

色やサイズを工夫して、視覚的に強弱をつけるとより分かりやすくなります。

 

 

上に挙げた5つの方法で情報を分類して、ユーザにも分かりやすい情報提供を心がけましょう。

複数の手法を組み合わせるとより柔軟で便利になりますよ。

 

 

※本記事は、Design principle: Organizing informationを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
eats-130v4g

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ