『iOSヒューマンインターフェイスガイドライン』はUI解説書の枠を越えている

iOS、実質的にはiPhoneのアプリケーションを作る際に参照してくださいと言う事で配布されている「iOSヒューマンインターフェイスガイドライン（以下iOS_HIG）」

弊社のシステムを真剣にスマートフォン対応にするために読み始めたのですが、この内容が、ただのインターフェイスのガイドラインだけではなく、さらに踏み込んだ内容になっていて驚きました。

Appleのサードパーティアプリに対する姿勢、サードパーティアプリケーションがiPhoneの大きな魅力であるという認識が、このガイドラインからはにじみ出ています。

App開発者以外もぜひ見ておくべき

これはぜひ、WEBに関わる方は見て頂きたいです。

WEBサイトの設計にも役立つことは間違いないです。
Ajaxやいずれ普及するHTML5を考えると、WEBAppとWEBサイトの距離はどんどん縮まっています。

ここからはそれぞれの章の中で気になった部分をピックアップしていきます。

私の言葉に直している部分も多いので、ぜひ全文ご覧下さい。

「▼ダウンロードはこちらから」

日本語訳系の文書はこちらから「iOS Developers Library 日本語ドキュメント」

プラットフォームの特徴

• iPhoneではホーム画面が縦表示（Portfolio）なので、
  アプリケーションはまず縦表示で見る設計になっていることを期待される
• iPadはどちらでもありうるので、どちらでも対応できるようにしておく
• 直感的で使いやすくする、言い換えるとヘルプがいらないようにする

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

• 優れたユーザインターフェイスは、デバイスの機能ではなく、
  ユーザがどの様に考え、どのように作業するかに基づいた、ヒューマンインターフェイスの設計原則に従う

一貫性が大事

• アプリケーションの性格と、外観の整合性。
  例えば生産性アップのアプリケーションは質実剛健で余分な装飾はあるべきではない、とユーザは考えている。
  これが破られると、このアプリケーションに対して不信感や悪い気持ちが生まれる、
• アプリケーションない及びiOSとの一貫性。
  システムのコントロールUIとスタイルを使用しているか、同じアイコンは常に同じ事を意味しているか。
• ユーザが別の場所で同じアクションを実行するときに、何が起きるかを予測できるか
• 独自の外観であったとしても、それの中で統一性は取れているか

現実を利用する（メタファー）

• 行ったアクションに対するフィードバックが大事
• 直感的に分かりやすくするには、現実世界の物やアクションを表すメタファーが効果的（フォルダなど）
• 特にiOSは指先で操作するので、リアルとデバイスの境目が非常に曖昧

アプリケーション設計戦略

アプリケーション定義ステートメントの作成

この章はアプリケーションのマーケティングに近い内容なので、今回は飛ばします。

しかし

新機能を追加すべきかを検討するときは、アプリケーションの主目的と対象ユーザにとって不可欠
かを自問します。

UIの外観と動作を検討するときは、ユーザがシンプルでスリムなスタイルを評価するのか、よりはっ きりとテーマを表現するスタイルを評価するかを自問します。

こういうことまでガイドラインに書いてあるというのは、素直に驚きです。

デバイス向けアプリケーションの設計

• WEBサイトのユーザエクスペリエンスではなく、iOSアプリケーション上のユーザエクスペリエンスを与える必要がある
  なぜなら、iOSユーザは組み込みアプリケーション（SafariやらMapやらMailやら）の外観と動作に慣れているから
• iOSユーザは、WEBサイト訪問時よりもっと強く、「やりたいことをすぐに実行したい、見たい物をすぐ見たい」と考える傾向がある
• WEBサイトと異なり、スクロールが楽なため、最上部（ファーストビュー）に探している物がなくとも、下まで見てくれることは多い。
  ファーストビューにこだわるあまり、詰め込みUIになって使いづらくなるよりは、縦長にした方がいい。
• UIのことを忘れてもいいくらいにすべし（操作の手を止めて使い方について考えさせてはいけない）

iOSへの移行

• iPhoneユーザなどのiOSユーザは、外出中、気の散るような環境で使用することが多い。
  そのため、ユーザに対して「応答性の高い、魅力的な体験」がより必要。
• 必要なときだけ使用可能にする
• Apple純正アプリ、メールやKeynoteなどのMacOS版とiOS版の比較が有用

ユーザ体験ガイドライン

• ユーザは、以下のようにデバイスを持つことが多い。これを前提にコントロールを配置
  　1.利き手ではない方の手で持ち、利き手で操作
  　2.片手で持ち、持っている手の親指で操作
  　3.両手で挟むように持ち、両方の親指で操作
• ユーザの目線は上から下に進むので、表示される情報は上から下に「概略的な情報から詳細な情報へ」「上位の情報から下位の情報へ」配置するべき。
• 殆どの場合において、ユーザに対してひとつの画面でひとつだけ道筋を提供する（戻るは除く）
• ユーザが使う言葉遣いを使用する。専門用語や難解な言い回し、ソフトウェア側の言い回しは避ける
• ユーザの混乱を避けるため、標準のボタンやアイコンにほかの意味を持たせない
• 集中して閲覧されるようなものについては、アニメーションによって思考の妨げにならないように注意する

まとめ

これ以外にもたくさん示唆に富む内容が詰まっています。

WEBサイトに関わる人には是非おすすめですので、一度ダウンロードしてご覧下さい。

▼iOS Developer Library

▼日本語版：[ MobileHIG.pdf]

関連リンク

• iPadヒューマンインターフェイスガイドライン
• 有志の方のガイドラインチェックシート（Googleスプレッドシート）
• Apple開発関係日本語ドキュメンテーション

無料「ウェブ解析ガイドブック」のご案内

アクセス解析やウェブサイトの現場での運用について書いた初心者向けガイドブック、『「現場で使える」WEB解析入門』をリリースしました。

企業でウェブ解析を内製化したい!ノウハウを溜めたい！というあなたにぴったりです。約3万文字、ぜひ会社に一冊どうぞ。

無料でダウンロードできますので、ぜひお持ち帰り下さい。印刷も自由です。(^-^

→ 無料ダウンロードはこちらから

メールマガジンのご案内

この連載や他の運営ブログの内容にプラスして、ここには書いていない情報をメールマガジンで発行予定です。記事として書いていない情報を配信します。

ご興味のある方は、下記フォームからご登録下さい。