10章 スケッチとプロトタイプ
大まかな全体構造を、費用をかけずに考える
フローダイアグラム
ユーザーの手順を書く。重要なものに絞った方がよい
絵コンテ
分岐を無視し、インタラクションの詳細に焦点を当てる
↓
スケッチ
いきなり細かいプロト作成をしないで、ラフに各画面の基本デザインを感がる
↓
ワイヤーフレーム
枠組み、大きさを考える。テキストも考え始める
↓
モックアップ
視覚系の細部を考える
プロトタイプツールでモダンでビジュアルにやらなきゃ！（形から入ろうとする）
変更が追いつかない
面倒でパワポに戻る。レガシーでインビジブルな生活
プロトタイプツールでモ(無限ループ)
とならないために箇所を絞ったり工夫は要るだろう
11章 ペーパープロトタイプテスト
スケッチ、ワイヤーフレーム or モックアップを用意する
上記で見えた問題点を中心にテストするタスクを選定する
※小チームが広範囲にやるのはお勧めしないと書かれている
※しかし余裕があればとても有用だとも書かれている
ペーパープロトタイプを作る
・使いそうな画面を漏れなく用意する
・周辺のUI要素も並べる
テスト準備
・3-4人
・テストとテストの間に2hくらい空けて、場合により問題点を即修正
・録画してメモを取り、メモには時間をつけると再生が省力化できる
テスト実施
・コンピューター役がプロトタイプ画面を更新する
・ファシリテーターはヒントを与えて影響してしまわないように注意
・質問は頻繁にせずテスト後まで待つ方がよい
こうしたほうがいいよと提案してもいやこうじゃないと、となれば従うわけだけど
それは業務を熟知したあなたがたの感覚であって、
世に出してみたら意見が違ってやっぱり戻して・変えてというパターンは多い
12章 リアリズム
記号はリアルにしすぎない
実物を再現するとメンタルモデルを形成しやすい
やりすぎ注意 デジタルの自由度も活かそう
最近のアイコンが全部ボタンに見えて押してしまうんだけど
たまに違う
13章 ナチュラルUI
ものに対して直接操作するデザインは分かりやすい
ジェスチャー(スワイプなど)にはただちにフィードバックを
取り消し操作も考慮する
→ナチュラルUIで実現するには？
→現実世界に倣う・普及しているアプリを参考にする・ユーザビリティテストで反応を調べる
14章 フィッツの法則
移動時間、距離、対象の大きさの関係を定義したもの
- クリックしやすくしたいものは大きく、そうでないもの（破壊的操作など）は小さく
- 端はとてもクリックしやすい(タッチパネルは違う)
- カーソル移動に長辺を合わせるとクリックしやすい(横移動なら横長）
- 小さい対象物同士は間を空ける
左上のハンバーガーメニュー何とかならないかね
親指の付け根が痛い(右手方手持ち)
15章 アニメーション
目的
- 状態変化に気付かせるために使う
- メンタルモデルを構築してもらうために使う
注意
- 重要でないものに使わない
その他ポイント
- 移動距離がある（目安自身の半分)ときはものを伸ばしたりぶれさせたりすると効果がある
- 誇張もあり
- 加速減速もあり
13章と併せ控えめ・効果的に使いたいところ。
16章 一貫性
- 何をするかすぐにわかれば、要素の見た目を同一にする必要はない
- 動作は、標準的なもの(OSなどの)との一貫性を持たせる
ユーザーは既知のメンタルモデルを適用するから - 標準と違う動作をするものは、標準と違うデザインにする
17章 発見可能性
ユーザーが機能を見つけられるか、について
- 隠す要素を決め、重要な要素にウェイトを付ける
- いつ見せるかも考慮。特定の場面だけ使う機能はダイアログ、など
見せ方
- 色や大きさ
- メンタルモデルに合致するような置き場所
- 検索機能を提供する
- アニメーション
あれもこれもに応えざるを得ない結果、並べれば分かりにくい・ひっこめれば気付かないの繰り返し(ジレンマ)
18章 集中を妨げない
- 緊急でないことで割り込み・意思確認をしない
- 次の操作が明らかならユーザーの代わりに決定する
- できなければなるべくまとめて意思確認する
19章 取り消し機能
- 警告は読まれないことが多い
- 取り消せたほうがよい
- 実装できないときは、実行遅延で一時的な取り消しを可能にする
20章 モード
アプリケーションやウィンドウの状態
- 自明でないものは混乱を招く→視覚効果・アニメーションで補う
- 予期せぬものは混乱を招く
割り込んできたモーダルダイアログのデフォルト動作、など - 解除方法が不明なものは混乱を招く
- 上記に注意してモードを使うと使い勝手は良くなる
- 疑似モード(キーを押している間だけ、といったユーザーに意識させ続けるもの)も視野に入れる
凝ったjs求められて作ってても混乱することしばしば