guideline for user interface

1. 第11章
楽しい BADUI の世界
岩崎聖夜

2. BADUI とはなんだろう
2
GOODUI
直観的でわかりやすい
BADUI
直観的にわかりにくい

3. UI における重要な要素
3
一貫性
フィードバック
対応関係
グループ認識 慣習・習慣
手がかり
制約
メンテナンス
BADUIはこれらの要素が不足している

4. BADUIはなぜ生まれるのか
4
第1章～第10章
- UIにおける重要な要素を学んだ
- BADUIはそれらの要素が不足している
どのような点に気をつけてUIを設計すべきか知る
第11章
- どのような点に気をつければ良いのか分かっている
- では、なぜBADUIが生まれてしまうのか
BADUIが生まれる理由を知る

5. BADUIが生まれる理由
5
予算的な都合 納期的な都合
トップダウン
の問題
ボトムアップ
の問題
- BADUIが生まれる原因には
大きく分けて４つの理由がある

6. 1. 予算的な都合
6
BADUI GOODUI
現実 理想
- お金がなくて理想とするUIが実現できなかった

7. 2. 納期的な都合
7
調査 検討 開発
調査 検討 開発現実
理想
時間が足りないから
面倒で手間なことは
全部すっとばそう！
- 時間がなくて理想とするUIが実現できなかった

8. 3. ボトムアップの問題
8
BADUI GOODUI
フィードバック
フィードバック
フィードバック
フィードバック
フィードバック
フィードバック
フィードバック
フィードバック
- ユーザからのリクエスト（フィードバック）を
何でもかんでも受け入れることでBADUIとなってしまう

9. 4. トップダウンの問題
9
● 狭すぎる自転車道 ● 電信柱に突っ込むの！？
- 上司の現場やユーザを見ていない無茶なリクエストによって
BADUIとなってしまう

10. BADUIを生まないためには
10
① 他の人に見てもらおう
- UI の分かりやすさ、分かりにくさを客観的に測るのは困難
- その人のフィードバックを生かす
② UI 設計のガイドラインを参考にする
- UI 設計における重要な要素がまとめられている
- Jakob Nielsen 『 10ヒューリスティックス 』

11. UI 設計のガイドライン(1)
11
10ヒューリスティックス BADUIはUIの教科書
1. システム状態の視認性
2. システムと実世界の調和
3. ユーザコントロールと自由度
4. 一貫性と標準化
5. エラーの防止
3章：フィードバック
6章：慣習とのギャップ
7章：一貫性と標準化
3章：状態・状況の可視化
10章：非常出口の重要性

12. UI 設計のガイドライン(2)
12
10ヒューリスティックス BADUIはUIの教科書
6. 記憶していなくても
見れば分かるように
7. 柔軟性と効率性
8. 美的で最小限のデザイン
9. ユーザによるエラー認識、
診断、回復のサポート
10. ヘルプとマニュアル
10章：記憶力が試される
BADUI
10章：おせっかいなBADUI
8章：制約
3章：エラーメッセージ
3章：エラーメッセージ

13. BADUIが生まれてしまったら
13
BADUI U I
対応関係が
分かりづらくて
使いにくい
手がかりを
付け足して
解決しよう
- BADUI は DIY 的に改善することができる

14. BADUIのDIY的改善例(1)
14
● 何のボタンなのかよくわからない
● キャンセルシールが付け足されている

15. BADUIのDIY的改善例(2)
15
● センサの反応が悪いので、
水が出ないと勘違いされる
● 赤色のマークとそこまで
手を出して下さいという
案内が付け足されている
- 改善の形跡はBADUIを探す手がかりにもなる！

16. BADUIを上手く活用する
16
不便益 – 川上浩司 先生（京都大学）
- 便利になったことで失われた益が
あるのではないかという考えが出発点
- オートマよりもミッションの方が楽しい
というのも身近な不便益なのでは
あえて不便にすることで楽しみを与える

17. BADUIを上手く活用した例(1)
17
● 実際に取り出すことはできない
● 取り出せそうで取り出せない楽しさ

18. BADUIを上手く活用した例(2)
18
● 直線を含むピースが
この間にはまりそう…
● 全く直線を含まない
ピースがはまった！
あえてパズルとしては不便にすることで
楽しみを向上させている

19. UI に関する書籍
19
● 誰のためのデザイン - ドナルド・ノーマン
- 20年以上前の本だが、デザインを学ぶ上で必読
● ほんとに使えるユーザビリティ – エリック・ライス
- 様々なBADUIを紹介しつつ、
WebのUIはどうあるべきか書かれた本
● デザイニング・インタフェース - Jenifer Tidwell
- ユーザインタフェースの様々なパーツについて
分解して事例をベースとして紹介してくれている本
● 認知インタフェース
- 人の認知について深く知ることができる本

20. おわりに
20
● UI の使いやすさは人に依存する
- 人によってそれをBADUIと思うかどうかは異なる
● BADUI に出会ったら、そうなった理由を考えてみよう
- 自分がUIを設計する際に生きてくる