Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

ヒューマンインタフェースデザインをまとめた

Design

追記

読んで欲しい所をマーキングした。

はじめに

Appleヒューマンインタフェースデザイン: アップル ヒューマンインタフェースガイドライン を参考に、自分の解釈をまとめてみました。
ガイドラインとして使用できるように文章は簡潔にしたつもりで、デザイナー以外の人が使うことも想定して1番はじめに「0. 基本デザイン原則」を加えてみたけど、Appleのヒューマンインターフェイスデザイン内で被ってるところがある。

目次

  1. 基本デザイン原則を守る
    1-1. 近接
    1-2. 整列
    1-3. コントラスト
    1-4. 反復
  2. ヒューマンインターフェースデザイン原則
    1-1. 隠喩を用いて境界線を減らす
    1-2. ユーザーの思い描くモデルを反映させる
    1-3. 明示的な動作と暗黙の動作を分けて使用する
    1-4. 選択肢を減らさない
    1-5. 反応に対して伝達を行う
    1-6. 一貫性を保つ
    1-7. 眼に見えるものが手に入るようにする
    1-8. 寛容性を持つ
    1-9. 認識の安定感を与える
    1-10. サービスから複雑さを取り除く
  3. あなたのユーザを念頭に置く
    2-1. デバイスによる違いを意識する
    2-2. ユニバーサルアクセス性を意識する
  4. インタフェースを拡張する
    3-1. 既存のインタフェース上に作成する
    3-2. 既存のオブジェクトに新しいふるまいを割り当ててはいけない
    3-3. 新しいインタフェース要素は慎重に作り出せ

基本デザイン原則を守る

近接

関連性の深いものを近くに置き、浅いものは意識的に遠ざける。

整列

要素の揃える位置を一貫させ、視覚のばらつきを無くす。
Table内の日付や投稿者、Tableや画像内のCaption等、コンテンツ内で整列を外すものは初めに決めておく。

コントラスト

コントラストをつけるため、強調箇所は他の原則で統一させたものから敢えて外す。
強調させる箇所はページ内で多すぎてはいけない。もしページ内に1スクロール内(728px)で2つよりも多い強調があったらそれは強調ではなくなる。
強調の型を最初に決めておく。それがフォントの変更か、色の変更か、サイズか、または余白か。

反復

初めに決めた型を繰り返す。

ヒューマンインターフェースデザイン原則

隠喩を用いて境界線を減らす

想定するユーザーが持っている既成概念を自分たちのサービスに当てはめ、サービスを使うときに障壁を減らす。

ユーザーの思い描くモデルを反映させる

想定するユーザーが自分たちのサービスに思い描くモデルをサービスに反映させる。
ユーザーが思い描くモデルを掴むために以下の特徴に対応する。

  • 親しみ ・・・ ユーザーが持つ経験を基にする。
  • 単純さ ・・・ 作業の根本的な構成要素について合理化させることで、ユーザーに認識、注目させる。
  • 利用しやすさ ・・・ ユーザーの必要とする鍵となる機能、設定を見つけやすいように目にとまるところや階層の浅いところに置く。
  • 発見可能性 ・・・ ユーザーにアクションを使うきっかけを即すために、機能的な箇所は他と区別を付ける。

明示的な動作と暗黙の動作を分けて使用する

想定するユーザーの心のモデルに合わせて明示的な動作と暗黙の動作を使い分ける。
明示的な動作ではその動作の説明を挟むことを表し、暗黙の動作では追加した視覚情報や文脈だけで表す。

選択肢を減らさない

全ての選択肢をユーザーに与え、こちらの理由で選択肢を制限しない。例えとしては、フォームの入力文字や入力の取り消し動作がある。
例外として、新規で訪れるユーザーには自分たちのサービスを理解してもらうためにシンプルな使い方をこちらで制限して行うことができる。

反応に対して伝達を行う

ユーザーが起こしたアクションに対して伝達を行う。

一貫性を保つ

自分たちのサービス内でのデザインや文章の一貫性は勿論、ユーザーが他に日常的に触れているプロダクトとの一貫性を保つ。最低限の他のプロダクトを以下に示す。

  • 使用するデバイスとの一貫性
  • 以前の自分たちのサービスとの一貫性
  • 人々の想定事項(ユーザーの思い描くモデル)との一貫性

眼に見えるものが手に入るようにする

Webのものから他の媒体に出力するとき、例えばプリントアウトする時など、Webに表示されているままで行えるようにする。

寛容性を持つ

「選択肢を減らさない」にも記載したが、ユーザーの取り消し動作等は有効にする。ユーザーが取り消し動作を行おうとしたときは明示的に警告を示す。

認識の安定感を与える

最初に決めたオブジェクトで一貫させることでユーザーに認識の安定感を与える。

サービスから複雑さを取り除く

デザインを出来る限りシンプルに保つことがユーザーにとって使いやすいサービスになる。

あなたのユーザーを念頭に置く

デバイスによる違いを意識する

自分たちが使ってる機器をユーザーが使用しているわけではない。表示領域やキーボード、色の見え方を念頭に置き、可能な限りでテストをする。

ユニバーサルアクセス性を意識する

特定のユーザーが持つ視覚、聴覚、他の身体障害を想定し、重要な操作は複数の方法でユーザーに伝えるようにする。例えばユーザーにとって必要な画像情報にはalt属性を指定する。

インタフェースを拡張する

既存のインタフェース上に作成する

決めた型以外を使用する必要に迫られた場合は、既に決めた振る舞いを準拠して作成する。
他のサービスを参考にして、そのまま自分達のサービスに割り当ててはいけない。似ていると思っても他のサービスと自分達のサービスは大きく違う。他のサービスから参考にできるのは、それを作った考え方くらい。

既存のオブジェクトに新しいふるまいを割り当ててはいけない

同じインターフェース上で2つ以上の振る舞いは余計な複雑さをもたらし、ユーザーを不安にさせる。

新しいインタフェース要素は慎重に作り出せ

新しい振る舞いを追加することはサービス内に複雑さをもたらすことになる。どうしても追加する時は、チームに相談の上、追加した新しい振る舞いをガイドラインに明記する。