Sociomedia ヒューマンインターフェースガイドラインを自分なりに理解する
どうもフロントエンドエンジニアのoreoです。
みなさんソシオメディアのヒューマンインターフェースガイドラインをご存じでしょうか？
このガイドラインには、UIデザインの基本となる100のルールが記載されています。
普段の業務では、デザイナーさんが作成したデザインに則って実装をしていますが、根拠を持って自分からデザインの提案がしたいと思い、このガイドラインを読み始めました。何か形にしないとすぐに忘れてしまうので、一つ一つを自分なりにoutputし、理解したいと思います。
UIデザインの基本を学びたい人、根拠を持ってデザインの提案がしたい人などの参考になれば幸いです！
ヒューマンインターフェースガイドライン
1 シンプルにする
機能や情報をできるだけ少なくし、シンプルにする。
2 簡単にする
利用方法を効率化して、目的達成までの手順をできるだけ減らす。
ex
右の例は、アクション選択→実行と二つの手順がある。左の例は、アクションを選択するだけで良いのでこちらの方がbetter。
3 メンタルモデル
ユーザーが想像する利用方法にあった構成と挙動にする。また、ユーザーに学習してもらえるような挙動にする。設定で歯車にアイコンを使うように、メタファーを使って概念や機能性を伝える。
メンタルモデルとは👇。平たく言うと、ユーザーがイメージするシステムの動き。
特定の状況で、ものがどのように振る舞うかを経験的に記憶し、必要に応じて取り出せるまでに形成された心理的なモデル。同じような状況下での物事の判断や理解に利用することができる。例えば見たことのない道具を使う場合、人はその形状などから内部機構を瞬時に想像して（メンタルモデルを得て）使い方を推測する。逆に実際の機構とかけ離れたメンタルモデルを持たせるデザインは、ユーザーにとって利用しにくくなる恐れが強い。
出典：https://www.sociomedia.co.jp/318
参考
4 シグニファイア
ユーザーが既に知っている表現や形状を用いて、操作対象となる要素の使い方の示唆を与え、それの意味が一目でわかるようにしておく。
ex
押せるボタンは左の例のように押せそうにする。押せないボタンは、右の例のように押せなさそうにする。
シグニファイヤに関しては、👇ご参照
5 マッピング
操作する要素と結果が反映される要素の対応を把握できるようにする。
ex
左の例は、スイッチと五徳(火が出るとこ)の対応が取れている良い例。
6 一貫性
配色、形状、配置、振る舞い、などに一貫したルールを適用する。
7 ユーザーの主導権
システム都合で強要する操作は減らし、行動の制限はしない。ユーザーが常に自分の意志で選択し、作業を進められるようにする。
ex
このようなシステム都合で強要する操作はなるべく減らす。
8 直接操作
オブジェクトに直接触れて操作しているような感覚を与える。操作に追従してリアルタイムに表示を更新し(フィードバック)、逆の操作で戻せるようにする(可逆性)。
ex
左の画像のようにオブジェクトを直接操作できるのが良い。右上の画像はフィードバック、右下の画像は可逆性の例。
9 モードレス
できるだけモードをなくし、むやみにモーダルダイヤログなどは使わない。UIにおけるモードとは、ある操作の持つ意味が状況に依存して変化し、それによってユーザーに対して、現在可能な操作を限定したり、操作の順序を固定的に強制する状態のこと。
モードレスとは、👇。
モードがない状態。ユーザーインターフェースをデザインする際に目指すべき状態。状況に依存した機能制限がなく、自由な手順でタスクを進行することができ、かつ特定の操作がシステムによって常に一定に解釈される状態。
出典：https://www.sociomedia.co.jp/326
一方で、モーダルとは👇
モードがある状態。つまり、システムが特定の機能の使用に制限された状態。ユーザーが自由に操作を行えなくなることと、モード別に機能の意味や振る舞いが変化することから、ユーザーインターフェースのデザインでは、できる限りモードを設けないほうがよいとされる。
出典：https://www.sociomedia.co.jp/1320
ex
なんでもモーダルダイヤログ使わず、モードレスを心がける。
10 視覚ゲシュタルト
人の知覚は対象要素を個別に認識するのではなく全体的な枠組みから規定される（ゲシュタルト原則）。
ゲシュタルト心理学では、グループとして認識される法則が以下のようにいくつも存在する。これらの法則が複数存在する時、人はより簡潔に認識できる法則を優先する(プレグナンツの法則)。このような法則を効果的に用いてレイアウトする。
- 近接
- 距離が近いものは、それぞれの要素が異なっていても「関係があるもの」として認識すること
- 類同
- 色や形、向きが同じものは、それぞれの要素が異なっていても「関係があるもの」として認識すること。
- 連続
- 連続しているものは1つのまとまりとして認識すること。
- 閉同
- 閉じた領域は1つのまとまりとして認識すること。
- 共通運命
- 同じ方向に動く・同じ周期で点滅する複数の要素は、同じグループだと認識すること。
- 面積
- 重なっている図形では面積が小さい方が主になるもの・手前にあるものとして認識すること。
参考
11 ユーザーの言葉を使う
業界用語ではなく、ユーザーが普段使っている一般的な言葉を用いる。
12 ユーザーの記憶に頼らない
システムが表示するメッセージの内容やプロパティの値などについてユーザーが覚えていることを前提にしてはいけない。参照すべき情報はそれが必要となるその場で参照できなければいけない。
ex
右の例では、モーダルでエラー文を出しているが、エラー文をユーザーを覚えれるとは限らない。左の例のように、入力データを修正する際にエラー文が参照できるように表示する方が良い。
13 コンストレイト
誤操作を減らしたり有効な使い方を促すために、ユーザーの行動を部分的にあえて制限する。例えば、ハサミは、持ち手を制限して、正しくキレるように制限している。
14プリコンピテーション
炊飯器のメモリのように、既に存在する最適解を利用する。
15 エラーを回避する
操作ミスを起こしにくくし、エラーが発生しないように工夫する。
ex
パスワードを入力しないと、Log inボタンを押せないようにして、エラーが発生しないようにする。
16 フィッツの法則
フィッツの法則により、パソコンのスクリーンでは、以下の順番で指し示しやすいと言える。
- 現在ポインターがある場所
- スクリーンの四隅
- スクリーンの上下左右の端
- 面積が大きくポインターから近いもの
- 面積が小さくポインターから遠いもの
フィッツの法則とは👇。
ユーザーインターフェース設計における普遍的な法則。画面上で、マウスなどの入力装置を使ってものを指し示すときにかかる時間を計測するモデル。ターゲットオブジェクトのサイズと距離に基づき、以下の計算式で算出される。面積が大きく、現在のポインター位置から近いものほど、指し示しやすい。
T = a + b log2 (D/W + 1)
T = ターゲットまでポインターを動かすのにかかる時間
D = ポインターとターゲットの中心までの距離
W = ターゲットの大きさ（ポインターから見た奥行き）
a = ポインター移動の開始・停止時間（実験をもとにした定数）
b = ポインターの速度（実験をもとにした定数）
なお、通常、ポインターはスクリーンの端よりも外へは移動できないため、スクリーンの端にあるものは、その面積（ポインターから見た奥行き）に関わらず、容易に指し示すことができる。Mac のスクリーン上部に固定されたメニューバーの利点はそこにある。
以上のことから、スクリーン上で指し示しやすいのは、「現在ポインターがある場所」「スクリーンの四隅」「スクリーンの上下左右の端」「面積が大きくポインターから近いもの」と言える。
出典：https://www.sociomedia.co.jp/349
17 ヒックの法則
ユーザの意思決定の時間は選択肢の数に比例して増える。
18 複雑性保存の法則
プロセスを減らそうと思っても限界がある。最小限の複雑性に行き着くと、その複雑性を移動することしかできない。
操作性を高めるには、複雑性(プロセス)をユーザー側からシステム側にできるだけ移動させた設計にする。例えば、メール送信に置いて、送信者アドレスと宛先アドレスの数は減らせないが、入力補完機能などをシステム側で用意することで、ユーザーの操作性が高まる。
19 タスクコヒーレンス
ユーザーが、昨日行ったことを今日も行う可能性は高い(タスクコヒーレンス)。アプリケーション再開時に、前回終了した時の状態を再現することは有効。
20 メジャーなタスクに最適化する
大多数のユーザーが行うタスクに合わせて必要な情報や機能を前面に出し、メジャーな要求への対応を優先する。80%のユーザーは全機能の20%しか使わない（パレートの法則)ので、多くのユーザーが目的と機能を前面に出す。
21 パースエージョン
使用方法のガイド表示、商品レコメンド、商品の価格比較表示など、説得的な画面を作成し、ユーザーの行動を促す。ただし、説得しすぎるとユーザーの行動を制限してしまうので注意。また、ユーザーの自由意志を不当に抑制したりしないように、倫理性が必要である。
参考
22 ショートカットを用意する
キーボードショートカット、ブックマークなどを使って、操作を短縮する方法を提供する。
23 オブジェクトベースにする
要求から、オブジェクト(操作の対象)を抽出してそれをUIに反映させる。オブジェクトを選んでから、アクション(操作)をする。オブジェクト指向ユーザーインターフェース（OOUI）と呼ばれる設計思想。
ex
右の例は、アクション(操作)がメインでUIが構成されている一方で、左の例は、オブジェクト(本、筆者)がメインでUIが構成されている。
24 ビューはオブジェクトを表象する
インターフェースは、オブジェクトを表象するビューによって構成される。また、一つのオブジェクトは複数のビューによって異なる表現を持つ。
ex
オブジェクト(L-306:ユーザー)は、アイコンビュー、一覧ビュー、詳細ビューとして異なる形で表現を持っている。システムはそれらビューの組み合わせで全体像が作られている。
25 オブジェクトは自身の状態を体現する
画面上のオブジェクトは、自身の状態を視覚的かつリアルタイムに体現し続けなければならない。
ex
選択状態など、オブジェクトの状態がわかるようにする
26 名詞→動詞 の操作順序
オブジェクト(名詞)を選んでからアクション(動詞)を選ぶようにする。
ex
名詞→動詞の方が工数が少なくなることが多い。
27 グラフィックのトーン＆マナーを揃える
各画面で、色調・彩度・明度、グラデーションのつけ方、ボーダーのつけ方、影のつけ方、角の取り方、塗りと線のあり方、線の太さ、カラー／シルエット、具象的／抽象的、などの度合いを揃える。
28 データよりも情報を伝える
データ(数値)をそのまま伝えるのではなく、その意味を伝える。例えば、音楽プレーヤーであれば、容量ではなく、何曲入るかを記載する。
29 ユーザーがとれる操作がひとつしかないなら自動化する
入力の種類が1種類なのであれば、それをユーザーに選択させるまでもなく、自動化する。
30 ペンは紙の近くに置く
ツール類は処理対象の近くに配置する。その場でモードレスに操作して逐次結果を確認できるようにする。
ex
処理対象の近くで結果を逐次確認できるようが操作しやすい
31 視覚的に何であるかを示し文字で説明する
オブジェクトは、視覚的なアイコンなどで把握できるようにして、文字情報でそれを補足する。
32 前提条件は先に提示する
前提条件は、手続きの途中や最後に表示するのでなく、必ず手続きの最初にする。
33 ナビゲーション項目は名詞にする
ナビゲーションの項目は動詞ではなく、具体的な名詞にする。動詞でナビゲーション項目を作ると抽象度が高くなり分かりづらくなる、且つ同じような画面が増える。
34 アイコンは名詞または形容詞を表す
オブジェクト(名詞)または結果として得られる状態(形容詞)をモチーフにしたアイコンにする。処理（動詞）は絵で表すのが難しいので、いくつかの一般的なものを除いて無理にアイコンにしない方がよい。
ex
ペン(名詞)や太字(形容詞)をアイコンにする
35 データをバインドする
同じデータを複数のビューで見ている時は、そのデータの状態が同期的に変更されるようにする。
36 ゼロ・ワン・インフィニティ
要素の存在可能な個数は個数は基本的に0か1か無限とする。ツールバーなど、ユーザーが自由に増やせるものは数の制限を設けず、どれだけ増えてもUIが破綻しないように設計する。
37 すべての操作可能な要素は意味を持つ
画面上で、操作可能なオブジェクトはすべて、ユーザーのタスクにとって何らかの意味を持つようにする。意味のないオブジェクトは、タスクの阻害になるので、表示させないが、操作できないようにする。
38 ユーザーが入力したものはユーザーのもの
ユーザーが入力した値や設定した内容は基本的にすべて保存されるべき。また、それらの削除や変更をユーザーができなければならない。
39 整合性を損なうような操作をユーザーに求めない
情報の整合性が損なわれる可能性がある操作をユーザーに求めない。
ex
例えば、生年月日と年齢を両方入力させると、入力間違えによりデータの整合性が合わなくなるので、生年月日を入力させて、年齢は自動算出されるようにする。
40 入力フォームにはストーリー性を持たせる
入力項目はユーザーにとって意味のあるグループにまとめる。項目の並び順は、ユーザーにとって身近なことや単純なものを先にし、複雑なものを後にする。
41 操作の流れを作る
グルーピングやストーリー性のある項目配置によってユーザーの視線と操作を誘導する。アクションボタンは流れの終点を示唆する（ボタン重力という）のでユーザーがそこまでのパスを見出せるようにする。
ex
42 よいデフォルト
ユーザーの入力項目には、妥当性の高いデフォルト値を与える。よいデフォルト値とは、よりユーザーのリスクの少ないもの、より一般的なもの、より中立的なもの、現在の状態を反映したもの、ユーザーの操作履歴を反映したものなど。
43 制限コントロール
入力値に制限がある場合は、ドロップダウンなどで、有効な値のみが入力可能とする。
44 選択肢の文言は肯定文にする
選択肢の文言は、「~しない」などの否定文ではなく肯定文にする。
45 値を入力させるのではなく結果を選ばせる
ユーザーは選択肢から選ばれることを好むので、設定値を自分で決めさせるよりは、設定後の結果を視覚的に示して選ばせる。
46 入力欄を構造化する
入力すべき値の書式に合わせて入力欄を分割または制限コントロール化することでエラーを減らすことができる。
ex
入力欄の例
47 デフォルトボタンには具体的な動詞を用いる
モーダルなダイアログやフォーム画面では、デフォルトボタン（一番主なボタン）のラベルに、「はい」などではなく、そのボタンで実行されるアクションを表す具体的な動詞を用いる。
キャンセルするためのボタンには汎用的な「キャンセル」を用いる。ただし文脈的に誤解を与えそうな場合にはより説明的な表現によってアクションを明確にする。
ex
右下の例では、文脈的に誤解を与えそうなので、「キャンセル」は使わない
48 ラジオボタンは単数選択、チェックボックスはオンオフ
ラジオボタンは選択肢からの単数選択に用いる。チェックボックスはひとつひとつが独立したオンオフ項目で、選択肢からの複数選択にも用いる。AかBかの場合はラジオボタン、真か偽かの場合はチェックボックス。
49 フリップフロップ問題を避ける
フリップフロップ問題とは、ひとつのボタンでオンとオフを切り替える場合、ラベルが現在の状態を表すのか押した後の状態を表すのかわかりづらくなること。これを回避するために、状態表現とラベルを分離する。
ex
50 ユーザーに厳密さを求めない
半角と全角、ひらがなとカタカナなどの表記揺れは、内部で自動的に整形・補完し、システムの都合による入力書式の制約をできるだけ減らす。
51 入力サジェスチョンを提示する
ユーザーは、選択肢から選ぶことを好む。入力サジェスチョンを利用して、ユーザーの行動を支援する。
52 スクロール画面では続きがありそうに見せる
縦長の画面で、ユーザーにスクロールしてもらいたい場合、スクリーの下端にはコンテンツの切れ目を見せず、続きがあるように見せる。
ex
右の例では、下端にコンテンツの切れ目が位置している為、コンテンツがそこで終わりのように見える。
53 プロパティの選択肢でプレビューを見せる
オブジェクトのスタイル変更などをする際は、その結果として得られる状態を選択肢として提示する。
54 フォールプルーフよりフェールセーフ
フォールプローフ(間違えない)よりも、アンドゥコマンド、ブラウザの戻るボタンなどのフォールセーフ(間違えても戻れる)の方が重要。
55 エラー表示は建設的にする
ユーザー向けのエラー文は、何が起きたのか的確に知らせ、そこからどうすればよいのかを示す。プログラマー向けのエラー番号などは対ユーザーには役に立てない。
56 可能性と確率を区別する
滅多にない事を考慮しすぎて通常の利用を面倒にしてはいけない。プログラマーはエッジケース(ユーザーが遭遇する可能性のあるまれなバグ)を重視し、デザイナーはメインケースを重視する。
57 黙って実行する
ユーザーの操作にいちいち確認したりしない。また処理が正常に完了したことを不必要に報告しない。操作の状況と処理の結果はダイアログではなく画面の変化で伝える。不可逆的かつデータ消失の恐れがある場合にのみ実行前の意思確認をする。
58 ガッツを見せる
デザイン上の要求をすべて満たそうとしない。クレームなどを恐れて網羅性や論理性や厳密さを優先しすぎると、複雑性が増し、デザインがわかりずらくなる。
59 ウェイファインディング
ユーザーが迷子にならないように、現在地、次進める場所、戻る方法など、一貫したナビゲーションスキームを用いて、全体像を把握できるようにする。
60 エスケープハッチ
いつでも最初の場所に戻れるようなボタンなどのエスケープハッチを用意する。iphoneで言うホームボタンのようなもの。
61 即座の喜びを与える
ユーザーが製品を使い始めて数秒以内に成功体験を得られるように基本作業やオブジェクトをできるだけ早い段階で表示する。不必要に長いサインイン画面などは使わない。
62 回答の先送り
はじめにユーザーに全ての回答を求めず、必要最小限のもの以外は回答を先送りできるようにする。
63 画面の変化をアニメーションで表す
画面の広い範囲を変化させる際には、トランジションのアニメーションをつけて、状態遷移の連続性をユーザーが把握できるようにする。変化前の状態と変化後の状態の中間過程を0.1〜0.5秒程度で段階的に示す。
64 トランジションは両方向につける
状態A→状態Bへの変化にトランジションのアニメーションをつける際は、その逆方向状態B→状態Aへの変化にもトランジションのアニメーションをつける。こうすることで、ユーザーは情報空間の概念的構造を正しくイメージできる。
65 ユーザーの操作に対して0.1秒以内に反応を返す
ユーザーの操作に対しできるだけ早く反応を返す。システムの反応が瞬時に行われていると感じる限界は0.1秒と言われている。反応が遅れても考えの流れが妨げられない限界は1秒。待つことに集中できる時間は10秒。それ以上時間がかかる処理には進捗率や残り時間の表示が必要。
66 操作の近くでフィードバックする
ユーザーの操作に応じてシステムの状態変化を示す時には、ユーザーが注目している場所(操作したオブジェクト)の近くでフィードバックする。
67 プログレッシブ・ディスクロージャ
最初は高度な機能を隠し、それが必要になった時になった時にUIを追加表示すること。これによりユーザーは、段階的な学習が可能になる。
ex
68 アイコンのモチーフは特定の文化に依存させない
特定の文化で使われる記号や言語依存の慣用表現などを元にした記号を国際的なサービスの中では使わない。
69 多言語化を想定したUIではラベルの長さの違いを考慮する
言語によって単語の文字数は異なるので、ラベルが短くなる場合、長くなる場合を簡易的にテストするのが良い。
70 ◯(マル) ✕(バツ) △(サンカク)等の記号を安易に使わない
これらの記号が持つ意味は文化圏によって違うので、国際的なインターフェースで用いると伝わらない恐れがある。例えば、✕ は日本とは異なり、肯定的なニュアンスで用いられることもある。
71 直観的より慣用的に
UIは、直感的よりも慣用的にする。初めは操作方法がわからなくてもユーザーが学習し、それを慣用的に使えるようになること。
慣用的とは👇。
それが普通のものとして広く扱われているさま、事実として用いられているさま、などを意味する表現。
出典：https://www.weblio.jp/content/慣用的#:~:text=それが普通のもの,などを意味する表現。
72 肯定／否定ボタンの順序はプラットフォームのルールに従う
ダイアログの肯定 ／ 否定ボタンの並びは、プラットフォームのルールに従う。明確なルールがない場合は、一般的な感覚に従って、左が否定、右が肯定にする。ただし、アラビア圏などの一般的な感覚は、左が肯定、右が否定なので注意。
73 メニュー項目の位置を変化させない
アクションやナビゲーションの項目が並ぶメニューでは、項目同士の位置関係が状況によって変化しないようにする。
ex
74 ハイライト表現は構成要素をひとつだけ変化させる
複数の同列項目の中でハイライト表現を行う場合、その項目の構成要素を一つだけを変化させるか、項目を一つ追加する。
ex
75 錯視を考慮する
要素のスタイルを統一しても、画面構成によっては、目の錯覚によって、意図しない見え方になる場合がある。様々な錯覚のパターンを知り、目視で調整する。
76 空間的に記憶できるようにする
デスクトップなどでは、ユーザが任意の場所にオブジェクトをおいて空間的に記憶できるようにし、次回起動時に再現できるようにする。
77 プロスペクティブメモリー
ユーザーが未来の自分のために手がかりを残せるようにする。ユーザーが後から参照できるように、ブックマークを付けたり、下書き保存したりできるようにする。
78 タッチ操作する要素の大きさは 7mm 以上にする
タッチスクリーンで操作するオブジェクトは、指で押しやすいように、7〜10mm 四方以上の大きさにする。また、オブジェクト同士の間をあけて、押し間違いを防ぐ。
79 ジェスチャはコマンド式ではなく直接操作式にする
特定の入力動作の組み合わせををジェスチャという。ジェスチャに対する画面の反応は、できるだけ、一連の入力動作に対して対象の要素が直接的に追従するような振る舞いにする。対象要素の追従などがない場合は、ユーザーは学習しずらい。
ex
80 ドリルダウンは上→下、左→右
ナビゲーションのために、画面を階層化するときは、上で選択した項目の内容が下に、左で選択した項目の内容が右に表示されるようにする。ただしアラビア語などでは左右関係を逆にする。
ex
81 左が戻るで右が進む
水平方向で、画面遷移の方向性を示す場合、左を戻る（過去）に、右を進む（未来）に対応させる。アラビア語などでは左右関係を逆転させる。
82 モバイルでは包括的より階層的に
デスクトップアプリケーションでは作業空間の全体像を包括的に現すのが良いが、モバイルでは一度に見せる情報を限定して階層的に見せるのが良い。
多量コンテンツを持つ情報システムの設計では、階層を減らすために一度に見せる選択肢を増やすか、選択肢を減らして階層を増やすかの判断が必要。モバイルアプリでは後者を採用すの役割を限定的にしてシンプルに見せる。
ex
83 単純なものは単純なままに
製品が多機能化しても、シンプルな機能はシンプルなまま実行できるようにする。
84 色やフォントを使いすぎない
色やフォントで特定の要素を強調できるが、色やフォントの種類が増えると画面が散らかるので、注意。
85 整然とレイアウトする
画面要素は、グリッドに沿って配置し、余白や揃え方に反復性と一貫性を持たせる。
86 カスタマイズ機能に頼らない
ユーザーごとに要求が少しずつ異なることへの対処としてカスタマイズ機能を拡張することは、システムを複雑にし、学習のしやすさや保守性を低下させる。ベストなUIをまず決定し、カスタマイズ機能は慎重かつ控えめに提供する。
87 ユーザーの道具にする
システムは提供者のものではなく、ユーザーのものとして構築する。ユーザー目線で、何が必要かを考え、優先順位をつけてシステムを作る。
88 ユーザーが自分なりの方法で作業を遂行できまたそれを改善できるようにする
マニュアルレス（手順が覚えやすい）よりも、モードレス（手順が固定されていない）な道具を作る。
優れたシステムに対してユーザーが「マニュアルを読まなくても使える」と感じるとすれば、それは手順が覚えやすいからではなく、そもそも手順が固定されていないからなのだ。
ユーザーがシステムを効率よく学習し、自分なりの使い方を工夫してその有効性を高めていけるようにすることが、デザインの役割となる。
89 ユーザーを教育するのではなくユーザーが学習できるようにする
インターフェースに操作説明を書くのではなく、インターフェースを自己説明的にして使い方が自明になるようにする。
ex
90 UIをロックしない
GUI では、①ユーザーのアクション → ②プログラム処理 → ③結果の表示、の繰り返しで作業が進む。UIがロックされるとは、②に時間がかかって③がなかなか起こらず、UIが次のアクションを受け付けない状態になること。重たい処理は、非同期化or並列化することで、UIがロックされるのをできるだけ避ける。
91 ゲームを持ち込まない
ゲームアプリでない限り、ギャンブル性のあるゲームのようなインターフェイスを含めない。
92 動かしたままに動くのではなく動かしたいように動く
ユーザーに思い通りコントロールできていると感じさせるためには、入力をそのまま反映するのではなく、適切な「あそび」や経験則からの「補正」を含める。
例えば、iPhone では、スクリーン上でユーザーが実際に触れた座標に補正をかけてアプリケーションに値を渡している。スクリーンの上の方ほど、上方向への補正が大きくなる。これによりスクリーンをやや下から見た姿勢で思いどおりに画面要素をタッチできる。
93 ホットスポットを広げる
ホットスポットとは、タップ・クリック可能な範囲のこと。ボタンなどについて、表示されている長方形よりも広い範囲をタップ・クリック可能にすることで、見た目のバランスと押しやすさを両立できる。しかし、対象要素とホットスポットを分離しないようにする。
94 音声読み上げに対応する
スクリーンリーダーや音声ブラウザなどで利用できるよう、画像などの非テキスト情報には代替テキストをつけ、アクセシビリティを高める。
95 文字の拡大に対応する
文字の表示サイズを大きくして利用できるよう、プラットフォームやブラウザのテキスト拡大機能に対応するようにする。
96 色に依存させない
色の見え方は人によって違うので、インターフェースを色に依存した表現にしない。濃淡のコントラスト、枠線や下線による装飾、形状や位置関係によるマッピング、文字による補足、などを用いて、色がなくても情報が伝わるようにする。色に依存していないか確認するために、インターフェースをグレースケールで表示してみて確認するのが良い。
97 ユーザーが自分のペースで作業できるようにする
操作に時間制限を設けたり、タイミングによって操作の有効性を変化させない。
98 ユーザーイリュージョンをもたらす
コンピューターはその容量とスピードによって、内部的に計算量が違うものであっても、ユーザーはその違いをほとんど気にせずに、システムを使うことができる(ユーザーイリュージョン)。このことは、ソフトウェアのユーザーインターフェースが持つ圧倒的な自由度につながっており、新しい世界観を構築する上で、計算処理の量にかかわらず、ユーザーにとってその世界がどうあるべきかという視点からデザインを決めることができる。
99 デザインは新しい意味を提案する
多くの革新的なデザインは、ユーザーニーズの把握や行動履歴の調査など外的な状況を手がかりにしながらも、本質はデザイナーの内的な熟考による意味の提案として現れる。デザインは問題を解決するだけでなく、物事の新しい捉え方を導くものである。ウォークマン、Wii、Street Viewなどは、どれも新しい体験を生み出した。
100 人類にポジティブな影響を与える
デザインは、ユーザーの一時的な目的達成だけのためにあるのではない。人が持つ短所を寛容し、長所を増進することで、生活を豊かにするためにある。また我々は、デザインの中に蓄積された文化を引き継ぐことができる。
最後に
改めて一つ一つ見ていくと、なるほどと納得できる内容ばかりです。背反するルールもあるので、その時折の最適解を考えながら、応用していきたいなーと思います。
Discussion