以下はアラーム機能のボタンを示したものですが、どの様な状態を示しているでしょうか。

Image for post
Image for post
オフ状態?押せない状態?

アラームがオフになっている状態にも見えますし、ボタンが押せない状態になっている様にも見えます。上記の様な場合はボタンを押してみて動作を確かめなければいけませんが、確かめずに理解できる方が望ましいです。

Image for post
Image for post
色がついたアイコン

色をつけました。ボタンを押して色に変化があれば機能がオンになったと理解できます。

この表現で十分でしょうか。まずは、いくつかあるボタンの状態表現を見ていきたいと思います。

1.押せる・押せないボタン

押せない状態(ディスエイブル)としてよく使われる表現にグレーアウトがあります。表現的には、モノクロにしてコントラストを下げる表現です。コントラストの低いアイコンは押せない感じがします。

例えば下記の場合、右のボタンは押せない様に見えます。

Image for post
Image for post
モノクロ化による対比表現

下記の場合、右のボタンが押せないように見えます。

Image for post
Image for post
線画化による対比表現

同じモノクロ化したボタンでも押せる様に見えたり押せない様に見えたりします。このことから比較して弱い表現の方が押せなく感じると言えます。

いくつかボタンが押せない状態の表現を見ていきます。

Image for post
Image for post
Safariの戻る進むボタン(低コントラスト化)

以下は押せるボタンには色を付けています。押せないボタンはモノクロ化してコントラストを下げています。

Image for post
Image for post
Safariのツールバー(モノクロ化+低コントラスト化)
Image for post
Image for post
メモ帳のツールバー(モノクロ化+低コントラスト化)

以下の例はモノクロ化はしていませんが押せない様に見えます。

Image for post
Image for post
ツイッターのツールバー(低コントラスト化)

以下の例は、モノクロにしてコントラストを下げて塗りを線画に変えています。

Image for post
Image for post
電話帳のボタン(モノクロ化+低コントラスト化+線画化)

表現方法は多様ですが押せる押せないの表現は、
・モノクロ化
・低コントラスト化
・線画化
が併用されていますが、どの例でも低コントラスト化が共通しています。つまり押せる・押せないの表現に最も効果的なのは低コントラスト化と言えます。

2.オン・オフのボタン

オン・オフ状態の表現にもグレーアウトの表現が用いられますが、押せない状態だと見間違われる可能性があります。そこで色だけでなく、形の違いで表現されることがあります。

例:アラーム機能の表現

Image for post
Image for post
色 のみの表現

色のみの表現だとオン状態なのか、押せない状態なのか判別がつきにくいです。なので、下記の様に形を変える工夫が考えられます。

例:アラーム機能の表現

Image for post
Image for post
色 + 形 の表現

例:スイッチの表現

Image for post
Image for post
色と形を使うことによる表現
Image for post
Image for post
さらにコントラストを落とすと…

例:チェックボックスの表現

Image for post
Image for post
色と形を使うことによる表現

上記の様にオン・オフ状態は、色だけでなく形を用いるのがわかりやすいです。

3.選択中・非選択中ボタン

タブバーの様に複数の項目がある時、現在どれを選んでいるのかを表現する例です。

Image for post
Image for post
Twitterのタブバー(モノクロ化+線画化)
Image for post
Image for post
時計のタブバー(モノクロ化)
Image for post
Image for post
インスタグラムのタブバー(線画化)

押せる押せない表現と似ていますが、低コントラスト化をしない所がポイントです。また、タブバーの場合、複数ある項目の中で一つだけ表現の異なるボタンがアクティブであると判断できます。

(アイコンのハイライトについては下記ブログにわかりやすく書いていあります)

まとめ

ボタンの状態として以下の3つを挙げました。

1)押せる・押せないボタン
2)オン・オフボタン
3)選択中・非選択ボタン

表現の要素は下記がありました。

・モノクロ化
・線画化
・低コントラスト化
・形の変化

各ボタン状態の表現のポイントをまとめると以下の様になります。

1)押せる・押せない
低コントラスト化がポイント

2)オン・オフ
形を変えるのがポイント

3)選択中・非選択
モノクロ化、線画化がポイント

以上、ボタン状態の表現の話でした。


リチャード・ソール・ワーマンは情報の整理方法としてLocation、Alphabet、Time、Category、Hieralchyの5つを挙げています。これら5つの情報分類は頭文字を取ってLATCHと呼ばれています。

Image for post
Image for post
LATCH5つの分類

Location:場所

Image for post
Image for post
Location

Locationは地図、路線図、座席表など位置に倣った情報の並べ方です。

Alphabet:あいうえお順

Image for post
Image for post
Alphabet

Alphabetは50音順、アルファベット順など辞書やレコード屋さんなどの並べ方です。

Time:時間順

Image for post
Image for post
Time

Timeはテレビ番組表、スケジュール表、年表、時刻表などの時間に沿った並べ方です。

Category:種類別

Image for post
Image for post
Category

Categoryは音楽ジャンルなら邦楽、洋楽、ロック、ポップなどの括り方です。種類ごとに分類されます。

Hieralchy:階層化

Image for post
Image for post
Hieralchy

Hieralchyは背の順、番号順、重さ順などの並べ方です。もともとはContinuum(連続量)とされていましたがゴロを良くするために、Hieralchyに置き換えられました。連続量に従い順番に並べるものとなるとHieralchyより、Continuumの方がしっくりくるのですが…。

1.情報を整理する効果

そもそも情報を整理するのは何故でしょうか。情報の数が少ない場合は、探すことが容易なため整理する必要性は低いです。しかし、情報の量が増えて来ると目的の情報を探すための労力が増え、効率的に探せなくなります。そのため検索効率を上げるためには、情報を並べたり、余分な情報をフィルタリングし整理することが必要になります。

1)並べることによる効果

情報が並んでいると、目的の情報まで探索をスキップすることができます。あいうえお順に本が並んでいれば、一冊一冊の本を探さなくても該当の本の近くまでスキップすることができます。

Image for post
Image for post
一つ一つ探索する必要がなくなる

2)分類することによる効果

情報を分類することにより不要な情報は見る必要がなくなります。該当する分類のみ探すだけでよくなりますので効率良く探すことができます。

Image for post
Image for post
特定のカテゴリだけ探せば良くなる

2.情報の並べ方

1)居住地選択の例

アンケートなどで居住地を選択することがあります。この時、多くのアンケートでは北から順番に都道府県の選択肢が並べられます。これはLocationに従い並べられています。Webアンケートでよくある選択肢ですが、並び順が違うと探しにくくなります。

Image for post
Image for post
どちらが探しやすいですか?

では都内の住所選択ではどうでしょう。市区町村を北から並べるのはいまいちです。他にはあいうえお順に並べる方法もありますし、23区と市区町村で分けるケースもあります。市区町村に分ける方法はcategoryの分類になります。

Image for post
Image for post
どちらが探しやすいですか

さらに進めて中野区内はどうでしょうか。ここまで来るとあいうえお順で並んでいることが多いです。これはAlphabetの分類方法です。

2)LocationとCategoryは経験の影響が強い整理方法

都道府県の並び順はLocationによる並べ方がされていましたが、Locationによる探し方は探す人の経験による影響が大きそうです。日本の地理を知らない人は北から並んでいても探しにくいでしょう。このことから、Locationの分類は経験や知識に影響することがわかります。

Image for post
Image for post
経験の影響が強い分類

他にもCategoryも経験や知識に影響します。市区町村の例で言えば、東京の場合は23区と23区外は知っていなければ探しにくいです。音楽ジャンルも知識がなければ自分が探しているアーティストがどこに分類されるか判断しにくくなります。

厳密に言えばAlphabet順はAlphabetの知識が必要となります。アルファベットの並び順を知らなければ探しやすくないでしょう。

3)序列により並べられる整理法

Image for post
Image for post
経験の適用が必要ない分類

Alphabet、Time、Hieralchyは全ての情報を一つのルールで順番に並べることが出来ます。(序列)

しかし、序列だけでは情報量が多い場合検索効率が悪くなります。そこで分類などにより、情報のフィルタリングをします。

4)分類によるフィルタリング

Categoryは不要な情報をフィルタリングするのに役立ちます。レコード屋でROCK、CLASSIC、JAZZ、HIPHOP、POPが全て一カテゴリに分類されていますが、これらを一つにまとめAlphabet順に並べる場合、検索効率が悪くなります。そこでCategoryによる分類をしてフィルタリングを行える様にしています。

5)情報整理の入れ子構造

レコード屋では邦楽、洋楽などのジャンル別に分類しているのを見かけます。これはCategoryの分類方法です。邦楽の中ではあいうえお順にアーティストが並べられています。

Image for post
Image for post
レコード屋の棚

例の様にCategoryの中にAlphabet順に並べられています。情報の分類方法は入れ子になって用いられることがあります。

Image for post
Image for post
入れ子になっている

7)Categoryの重複(こうもり問題)

Categoryによるフィルタリングは効果的ですが、どっちつかずの厳密に分けられない情報が出てきます。POPを探していたが、ROCKに分類されていたということはよくあります。この様にCategoryの分類はどっちつかずの問題をはらんでいます。在庫と店内スペースに余裕があれば両方のカテゴリーに置く方法も考えられますが、管理が煩雑になる面もあります。

8)こうもり問題を解決するタグ

Categoryはコンピュータ上に置き換えるとフォルダ分けの行為と同じです。フォルダ分けにはどっちつかずの問題が必ず付いて回ります。そこで、タグという考え方を使います。タグは情報の分類は重複するものだという考え方に基づいています。タグの考え方は項目をフォルダに入れるのではなく、項目にラベルをつける考え方です。

ROCKにもPOPにも分類されるものには、両方のタグを付けます。ただし、これはコンピュータの中でしかできません。

3.文脈により分類を変える

1)イベント情報の例

コンサート、ライブなどのイベント情報はどの様に整理すれば良いでしょうか。LocationでもTimeでもCategoryでも並べられそうです。さてどの並び順にすべきでしょうか。

適切な並び順は情報を探す文脈によって変わりそうです。いくつか例を考えてみたいと思います。

例えば今夜これからのイベントを探したい場合はどうでしょうか。

Image for post
Image for post
時間によって情報を並べる?

日付で今日を探し、夜の時間を探します。この様な探し方の場合はTimeが良いでしょう。

では、明日以降のイベントがないか探すときはどうでしょう。Timeで探すことも有効ですが、時間的な制約は先ほどの例より弱まります。日付よりも自分が見たいイベントが重視されるのでCategoryでも良いでしょう。

Image for post
Image for post
興味のあるジャンルで分類する?

移動を伴う場合、地域的な制約がある場合などはLocationが良いでしょう。

Image for post
Image for post
地域によって情報を分類する?

これらのケースから考えると文脈によって探し方を変えられることが望まれます。

2)困ったときのシーン別

イエローページは職業別電話帳のことで、店舗や企業を探したいときに、電話番号を探すことができるものです。あいうえお順ではなく、困った時のシーン別に電話番号を記載する方法を取っています。この整理方法は今や当たり前ですね。

多くの自治体のウェブページは困った時のシーン別にリンクが整理されています。LATCHに当てはめればCategoryの整理方法ですね。

3)時間地図(杉浦康平氏の作品)

地図はLocationによって配置されるものですが、このLocationの配置をTimeによって再配置したものです。有名なもので言えば杉浦康平氏の時間地図です。

まとめ

情報の整理は探しやすさのためと冒頭で書きましたが、それだけではなく新しい情報、物の見方との遭遇とも言えそうです。

情報整理方法を変えるとこれまでに無かった表現方法のアイデアが出てきそうです。


下記はウィンドウを閉じようとした時のダイアログです。

Image for post
Image for post
Excelの保存しますか?のダイアログ

このダイアログでは「保存…」のボタンが青くなっており、Enterキーを押すとそのボタンが選択される様になっています。この初期選択のことをデフォルトフォーカスと言います。

デフォルトフォーカスはマウスによるポインティング動作を省略できるため、操作効率が良くなります。ダイアログが表示された時にはどちらかを選ばなければいけませんが、推奨する選択項目を強調表示により示すことで操作に迷いにくくすることができます。

デフォルトフォーカスの考え方

デフォルトフォーカスの考え方はいくつかあります。

1)被害の少ない方を選ぶ

下記は誤って拡張子を書き換えてしまった時のダイアログです。

Image for post
Image for post
拡張子を保持する方が選ばれている

”.html”を保持する方が初期選択されています。ファイル名を変更した時に拡張子を書き換えてしまい、ファイルを開けなくなってしまうことを防ぐためにこの様な確認の画面が表示されます。

冒頭で紹介した「保存しますか?」のダイアログもこの考え方にあてはまります。このダイアログによりこれまでの作業がなくなってしまうことを防止します。

Image for post
Image for post
保存が選ばれている

2)進んで欲しい方を選ぶ

下記はゴミ箱を削除する時のダイアログです。

Image for post
Image for post
意図的な行為に沿った選択肢が選ばれている

こちらは選択した時に被害のある方にデフォルトフォーカスがありますが、ゴミ箱を削除するコマンドを入力した時に表示されるため、実行しようとした行為の方が選ばれています。

スマートフォンの場合

スマートフォンではEnterキーはありませんが、考え方は同じです。下記は、アプリがカメラへのアクセスを求めた時の画面です。

Image for post
Image for post
キャンセルが選ばれている

デフォルトフォーカスの選択肢が強調表示されています。OKを選択することによって、セキュリティ的に危うい方向になることを懸念し、キャンセルの方にデフォルトフォーカス(太字)が当たっています。

下記はAndroidの画面です。

Image for post
Image for post
OKが強調されている

Androidの場合は、セキュリティ系の質問は危ない方に傾いています。安全性よりも利便性の方に傾けています。

ダイアログはうっとうしい?

操作の度に確認画面が表示されるのは鬱陶しく、エクスペリエンスを低下させます。うっかりミスを未然に防ぐことも必要ですが、やり直し出来るように設計しておくことが良いです。

About

みのわようすけ

UIに関係するメモを書いておきます

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store