インタフェースデザインの実践教室

読むきっかけ

オライリー・ジャパンのサイトで知ったような。その後、どこかでまた見つけて、買って読みました。「実践教室」というぐらいだから、なにか踏み込んで書いているんじゃないか？という期待もあり。

読んでみて

「実践教室」というタイトルから、テクニックのようなことを想像するけれど、テクニックが書かれていることは、ほぼ無いです。また、目新しいことが書かれているわけでもないです。 ただし、個人的にはこれまで読んできた本のまとめ、という印象があります。文中でいくつか書籍からの引用があります。引用されいていることで、「そういえば…」と思い出すこともしばしばありました。いくつか読んできた書籍を実践的に活用するポイントを定義した一冊なんじゃないかと思います。

おすすめ

デザイナーの方には、もちろん。フロントエンドが気になる開発者のかたにも。

書籍

インタフェースデザインの実践教室 ―優れたユーザビリティを実現するアイデアとテクニック

関連書籍

小さなチーム、大きな仕事〔完全版〕: 37シグナルズ成功の法則

About Face 3 インタラクションデザインの極意

ユーザビリティエンジニアリング―ユーザ調査とユーザビリティ評価実践テクニック

誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書)

複雑さと共に暮らす―デザインの挑戦

ペーパープロトタイピング 最適なユーザインタフェースを効率よくデザインする

マンガ学―マンガによるマンガのためのマンガ理論

Inside Macintosh

フロー体験 喜びの現象学 (SEKAISHISO SEMINAR)

Web情報アーキテクチャ―最適なサイト構築のための論理的アプローチ

読書メモ

ヘンリー・フォード

人々に何が欲しいかと尋ねていたら、もっと足の速い馬だ、という答えが返ってきていだろう

• 普通は、問題の本質を考えない
• 問題の本質かわわからないから、どうすれば、問題の解決ができるかは、応えてくれない

Lynxの例

• Lynx → http://ja.wikipedia.org/wiki/Atari_Lynx
• 自分の欲しいモノは、わかっていない
  • ゲームボーイに負けたゲーム機の話。カラーのゲーム機のほうがイイ、ということではなく、携帯できるゲーム機が欲しかった
• 相手を訪問して、相手を観察しなくてはいけない
  • ユーザビリティエンジニアリングの本にも出てきた

ペルソナ

• About Face 3にも書かれている

活動中心のデザイン

• 活動、すなわち、何をしたいか？
• ドナルド ノーマン

付随資料の作成

• 説明しにくいところは、うまくデザインされていないから
• 何が出来るのかを語る
• 37signalsが、Getting Realの中で語っている
  • 東京スープストックでも、そうだった！
  • アップルでは、アプリケーション定義のステートメントの作成から作業をはじめる

文書のユーザビリティ

• Getting Realでも、 良い文章は、良いデザインである
• 文書は、読まれない
• ザッと、読まれる文書を書く

ヤコブニールセン、スキャンしやすい文書にする

• ユーザーが理解出来る言葉を使う
• 一つの段落に、一つの話題
• わかりやすい見出し
• キーワードを目立たせる
• 結論が先
• 短く、明快、誤解を招かない文書

インターフェイスデザインと、階層

• 参考文献に、情報アーキテクチャ、Web情報アーキテクチャ

メンタルモデル

• デザイン性に優れたユーザーインターフェイスとは、ユーザーの期待通りに動作するユーザーインターフェイス
• ユーザーの期待と、動作にギャップがある
• ユーザーが思い描くメンタルモデルは、正しくなくても良い。製品の動作と合致したら良い

三種のモデルがある

• ユーザーが思い描くメンタルモデル
• ユーザーに表現されるUIモデル
• 製品の実体そのもの。インプリメンテーションモデル
  • 理想的なら、三つが合致する

UIを単純にして、UXを向上させようとする。すると、インプリメンテーションモデルと、合致しなくなる

UIモデルは、メンタルモデルに近くなる。製作者は、インプリメンテーションモデルを知っている。製作者が知っている事を、ユーザーが知っているのが当然ではない

有効なメンタルモデルを思い描かせるためのUIデザインの七つの指針

• 単純さ
• 身近な物からの類推
• 記憶不要
• 柔軟性
• フィードバック
• 安全
• アフォーダンス

アフォーダンス

• 誰のためのデザイン
• 複雑さと暮らす
• 知覚可能なアフォーダンス

スケッチと、プロトタイプ

37signals より 建築家は、間取り図が決まってからでないと、浴室のタイルなどを考えない

スケッチ

UIをデッサンで表現したもの

ワイヤーフレーム

UIを静的に表現したもの

モックアップ

UIの表現に加えて、影や飾りの要素を加えてある

プロトタイプ

製品を実現したものだが、最終的な段階ではないもの

ユーザビリティ

ペーパープロトタイプテスト

• ペーパーでなくてもよい
• 最終製品の静止したスケッチや、モックアップを使ってユーザビリティテストを行う方法

ユーザビリティテスト

ユーザビリティテストは、UIを操作しているのを観察して、インタラクションデザインの不備を見つけること

• ペーパープロトタイピング 最適なユーザーインタフェースを効率よくデザインする

• ゲームストーミング

• シンボル

  • マンガ学 マンガによるマンガのためのマンガ理論
  • 画像に、ディテールを加えると普遍的ではなくなる

• 従来の実物を模倣したデザイン

  • スキューオモーフ
  • 物理的な制約も再現してしまう

ナチュラルUI（NUI）

• リアルなものを直接的かつ自然に操作する
• 魔法のジェスチャーは用いない
• ジェスチャーを認識したら、すぐにフィードバックを返します

フィッツの法則

http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%83%E3%83%84%E3%81%AE%E6%B3%95%E5%89%87

アニメーション

視覚変化は、画面上に起こっていることの意味をはっきり伝えるためにアニメーションを利用することができます

一貫性

• 見た目の一貫性だけじゃない
• 動作の一貫性
• 一貫性を持たせない方が意味のわかるデザインになるなら、その方がよい（Getting real）

発見可能性

• トレードオフがある
• どれを、なにを重視するか？
• 一般化している機能でも、次のような場合は、隠しておいてかまいません
  • ユーザーがその機能を知らなくても支障がない
  • 表示されてなくても、発見可能性が高い
  • どのアプリでも使われている

カラー

• モノクロよりも、カラーの方が効果的
• ただし、カラーに頼りすぎてはいけない

割り込みはマナー違反

メモがないけれど、着信通知とか...

受動的な遅延確認

• Gmailは、送信すぐは、キャンセルが可能だが、しばらくすると、キャンセルが出来なくなる

モード

• Inside Macintosh で一番最初に説明される
• モードは、インタフェースを複雑にする主な原因の一つ
• モードを自明のものにする
  • モードに入っていることを示す視覚的なフィードバック
  • 運動感覚的フィードバック
  • 視覚的な標識は見ないことも可能
  • 聴覚的な標識は、聞かないことは不可能
• モードは、必ずしも悪ではない
• よくないのは、モードが自明ではないとき

ヒューメンインタフェース

人に優しいシステムへの新たな指針

環境設定の種類

• セッティング（設定）
  • アプリの動作をユーザーが設定できる
• コンフィギュレーション（構成）
  • アプリが正しく動くために必要な設定
• プレファレンス（ユーザー設定）
  • ユーザーにとっては、変更を好むことがあるもの
• パーソナライゼーション（個別化）

プレファレンスがよくない理由

• 不必要な項目が増え、本当に必要な項目がさがしにくくなる
• プレファレンスにより、モードが導入され、動作の一貫性が損なわれる
• 間違った設定が出来る
• ユーザーにより、アプリについて、複数の選択肢ができ、サポートしなくてはいけない

プレファレンスを無くす方法

• ユーザーにノーと言う
• 自分自身にノーと言う
• 一貫性を持たせる
• ユーザービリティテストを実施
• 自分の意見を持つ
• 隠れたプレファレンス

階層化、空間、時間、外界の認知

階層を空間の様に扱う

機能の抑制

• ユーザーの目標を忘れない
• 5つの何故
  • 機能追加が必要と判断したユーザーに「なぜ？」と問い続ける
• 既存の機能改善
• 一つで複数の問題解決
• ユーザーの言葉に声を傾ける
• ユーザーの意見を聞きすぎない

すべてのユーザーが皆さんのユーザーとは限らない

• 市場を独占する必要はない。全ての人に全てのものを提供するのは不可能
• 小さなチーム、大きな仕事で、「それにより顧客をいくらか失うことになっても、残った顧客が我々の製品を熱狂的に指示してくれるなら、喜んで失おう。それが我々の譲れない一線なのだ」

機能を削除する

機能の評判や、使われ方についてきちんと把握すべき

• 非常に重要だが、稀にしか使われない
• UIが悪いから使われない？
• 機能が無視されるのは、機能がふようだから？

テレビゲームに学ぶ

• 「フロー」
• 「フロー体験 喜びの現象学」