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

エラー発生時にはわかりやすいメッセージによってユーザーの理解と行動を手助けする。何が起きたのか的確に知らせ、そこからどうすればよいのかを示す。プログラマー向けのエラー番号は一般ユーザーには役に立たない。過剰な表現は避ける。

画面の広い範囲を変化させる際には、トランジションのアニメーションをつけて、状態遷移の連続性をユーザーが把握できるようにする。変化前の状態と変化後の状態の中間過程を0.1〜0.5秒程度で段階的に示す。

画面の状態Aから状態Bへの変化にトランジションのアニメーションをつける際は、その逆方向の動きを状態Bから状態Aに戻る変化にもつける。このような展開と方向の対応によりユーザーは情報空間の概念的構造を正しくイメージできる。

ユーザーの操作に対しできるだけ短い時間で反応を返す。システムの反応が瞬時に行われていると感じる限界は0.1秒と言われている。反応が遅れても考えの流れが妨げられない限界は1秒。待つことに集中できる時間は10秒。それ以上時間がかかる処理には進捗率や残り時間の表示が必要。

ユーザーの操作に応じてシステムの状態変化を示す時には、ユーザーが注目している場所の近くでフィードバックする。選択したオブジェクトに対するアクションであればそのオブジェクト自体の変化で。単独のボタンであればそのボタンの近くで示す。

初級者が簡単に使い始められるように最初は高度な機能を隠しておき、それが必要になった時あるいは扱えるようになった時にUIを追加表示することをプログレッシブ・ディスクロージャ（進展的な開示）という。これにより段階的な学習が可能になる。

アイコンには記号的な表現を用いるのが普通だが、特定の文化圏でのみ使われるサインや言語依存の慣用表現などを元にした記号は国際的なサービスの中で使わないように注意する。

言語によって単語の平均文字数は異なる。一般にドイツ語は長いので（平均で英語の1.4倍）レイアウトを簡易的にテストするのに用いるとよい。逆に漢字やハングルはラベルが短くなるのでボタン等が押しにくくならないよう工夫する。

日本では ◯ と ✕ を「良い」と「悪い」の意味で使うが、これらの記号が持つ肯定／否定のニュアンスは文化圏によって異なるので、国際的なインターフェースで用いると意味が伝わらない恐れがある。例えば ✕ はチェックと同じ意味で肯定的なニュアンスで用いられることもある。

ダイアログにおける肯定／否定ボタンの並び順は、アプリ内の論理よりもユーザーの習慣を優先してプラットフォームごとのルールに従う。明確なルールがない場合は「左が戻るで右が進む」という一般的な感覚に従って右を肯定ボタンにする。

アクションやナビゲーションの項目が並ぶメニューでは、項目同士の位置関係が状況によって変化しないようにする。ユーザーはメニューの中で目当ての項目を空間的に記憶するので、位置関係が変わってしまうと学習できない。

複数の同列項目の中でハイライト項目を表す上では、その項目の視覚的な構成要素をひとつだけ変化させる。あるいはひとつだけ追加する。変化が大きすぎるとハイライトではなく別な種類の要素に見えてしまう。

グラフィックに一貫性を持たせるために、要素のサイズ、形、位置、色などを統一したり等分したりすることは重要だが、画面構成の状態によっては目の錯覚が生じて意図しない見え方になることがある。様々な錯視のパターンを知り、必要に応じて目視ベースで調整する。

デスクトップやスプリングボード、ウィンドウやパレットなど、ユーザーが2次元上の任意の場所にオブジェクトを置いて空間的に記憶できるようにする。システムはその位置情報を保存して次回起動時に再現する。システムの都合で勝手に変更しない。

タッチスクリーンでは、ボタンをはじめ各種UIコントロールの大きさを、指で十分に押しやすい 7〜10mm 四方以上の大きさにする。またタッチする要素自体が指で隠れてしまうので、要素同士の間隔をあけて押し間違いを防ぐ。

ナビゲーションのために画面をいくつかのペインに分割して階層化する場合、その位置関係は、上で選択した項目の内容が下に、左で選択した項目の内容が右に表示されるようにする。ただしRTL言語（アラビア語など）では左右関係を逆にする。

左が戻るで右が進む – 画面遷移の方向性を水平軸で示す場合、左を戻る（過去）に、右を進む（未来）に対応させる。ただしRTL言語（アラビア語など）では左右関係をすべて逆転させる。

配色や書体によって特定の要素を強調したり情報のグループを表すことができるが、種類を増やしすぎると画面が乱雑になってしまうので注意する。

画面要素は、グリッドに沿って整然と配置する。余白や揃えに反復性と一貫性を持たせる。これにより視覚的な安定感を生み出し、領域の包含関係、形状の連続性など、情報の構造を論理的に示す。

ボタンなどについて、表示されている矩形よりも広い範囲をタップ／クリック可能にする。そうすることによって視覚的なバランスと押しやすさを両立できる。ただし対象要素とホットスポットが分離していてはいけない。

スクリーンリーダーや音声ブラウザなどで利用できるよう、画像などの非テキスト情報には代替テキストをつける。プラットフォームや開発環境の標準的な仕様に従って実装し、アクセシビリティを高める。

文字の表示サイズを大きくして利用できるよう、プラットフォームやブラウザのテキスト拡大機能に対応する。標準的な仕様に従って文字列表示を実装し、アクセシビリティを高める。

インターフェースを色に依存した表現にしない。色がなくても情報が伝わるようにする。濃淡のコントラスト、枠線や下線による装飾、形状や位置関係によるマッピング、文字による補足、などを用いる。インターフェースをグレースケールで表示してみて確認するとよい。