Sociomedia
ヒューマンインターフェース ガイドライン

機能や情報を厳選し、できるだけ要素を少なくする。あらゆるデザインジャンルにおける基本原則。

操作対象となる要素が見えていて、その意味が一目でわかるようにしておく。ユーザーがすでに知っている表現や自明な形状などを用いて使い方を示唆する。例えば、押せるものは押せそうに、押せないものは押せなさそうに見せる。

操作する所と結果が反映される所の対応を把握できるようにする。そのために、位置関係、形、色、記号などによって手掛かりを与える。

配色、形状、配置、振る舞い、などに一貫したルールを適用する。同じ性質のものは同じ表現、違う性質のものは違う表現にする。一貫性はそのデザインにおける論理の体現であり、ユーザーがシステムの使い方を推測したり学習したりするための基本的な手がかりとなる。

人の知覚は対象要素を個別に認識するのではなく全体的な枠組みから規定される（ゲシュタルト心理学）。この特性を利用し、近接、類似、閉鎖といったパターン（プレグナンツの法則）を用いてレイアウトし、要素同士のグループ関係を効果的に示す。

インターフェース上で使う文言は、システム内部の技術用語や運営者の業界用語ではなく、ユーザーが普段使っている一般的な表現を用いる。

先人がすでに見つけている最適値をプリセットにしたり、デザインの過程で再利用する。例えば、炊飯器のめもり、電子レンジの料理別タイマー、AT車の変速タイミング、ウォシュレットの的、プログラムの各種アルゴリズムなど。

パソコンで画面上の要素をマウスなどで指し示すのには、現在のポインターからの距離が小さくターゲット面の奥行きが大きいものほど短い時間で済み、ポインターからの距離が大きくターゲット面の奥行きが小さいものほど長い時間がかかる。つまり近くて大きいものほどポイントしやすく、遠くて小さいものほどポイントしにくい。

GUI において、アイコン、選択可能項目、各種コントロール、ペインやウィンドウなど、画面上のすべてのオブジェクトは、自身の状態を視覚的かつリアルタイムに体現し続けなければいけない。ユーザーはそれを、インタラクティブな操作を通じて変化させながら、作業内容を目標状態に近づけていく。

各グラフィック要素の間で、色調・彩度・明度、グラデーションのつけ方、ボーダーのつけ方、影のつけ方、角の取り方、塗りと線のあり方、線の太さ、カラー／シルエット、具象的／抽象的、などの度合いを揃える。

オブジェクトの存在や状態を視覚的に把握できるようにし、文字情報でそれを補足する。アイコンを使って項目の性質を表現しラベルで明確化する。情報をグラフィカルに表現し数値などで詳細を伝える。

アイコンはそれが象徴するオブジェクト（名詞）、あるいはそれを選んだ結果として得られる状態（形容詞）をモチーフにする。処理（動詞）は絵で表すのが難しいので、いくつかの一般的なものを除いて無理にアイコンにしない方がよい。

画面上で現在操作可能な要素や選択可能な項目はすべて、ユーザーのタスクにとって何らかの意味を持っている必要がある。意味のない要素は存在しているだけでタスクの阻害要因になるので、ディスエーブルや非表示にする。

入力項目はユーザーにとって意味のあるグループにまとめる。項目の並び順は、ユーザーにとって身近なことや単純なものを先にし、複雑なものを後にする。

視覚ゲシュタルトを利用したグルーピングやストーリー性のある項目配置によってユーザーの視線と操作を誘導する。アクションボタンは流れの終点を示唆する（ボタン重力という）のでユーザーがそこまでのパスを見出せるようにする。

既定項目の選択、数値入力、日付入力など、入力可能な内容に制限がある場合は、ラジオボタン、ドロップダウンメニュー、ステッパー、スライダー、ピッカー、などの制限コントロールを用いて有効な値のみが入力可能となるようにする。

選択肢の文言はできるだけ肯定文にする。特にラジオボタンやチェックボックスのようにオンオフを切り替える選択コントロールでは、ラベルが否定形であると選択行為が「否定を肯定する」という意味になりわかりにくい。

入力すべき値の書式に合わせて入力欄を分割または制限コントロール化する。それにより、ユーザーに入力内容を示唆し、入力操作を効率化し、エラーを減らす。ただし単純なテキストボックスに比べて操作効率が下がる場合もあるので、入力する情報の性質や利用シーンを考慮する。

モーダルなダイアログやフォーム画面では、デフォルトボタン（一番主なボタン）のラベルに、「OK」や「はい」ではなく、「保存」や「消去」など、そのボタンで実行されるアクションを表す具体的な動詞を用いる。

ラジオボタンは選択肢からの単数選択に用いる。デフォルト値が必要。チェックボックスはひとつひとつが独立したオンオフ項目。選択肢からの複数選択にも用いる。AかBかの場合はラジオボタン、真か偽かの場合はチェックボックス。

ひとつのボタンでオンとオフを切り替える場合、ラベルが現在の状態を表すのか押した後の状態を表すのかわかりづらいことをフリップフロップ問題という。状態表現とラベルを分離してこの問題を回避する。

タイピングは負荷が大きく、ユーザーは自分で入力するよりも選択肢から選ぶことを好む。途中まで入力したところで「入力しようとしていたこと」や「価値のある入力値」を選択肢として提示して、ユーザーの行為を効果的に支援する。

縦に長い画面をユーザーにスクロールして見てもらいたい場合、スクリーンの下端にちょうどコンテンツの切れ目があるとスクロールできるように見えない。コンテンツの切れ目の位置を調整するなど、続きがありそうに見せる。

オブジェクトのスタイル変更やツールの選択時に、その結果として得られる状態のプレビューを選択肢として提示する。プロパティを適用する前にその結果を見ることができれば、ユーザーの試行錯誤の効率が高まる。