10章スケッチとプロトタイプ

大まかな全体構造を、費用をかけずに考える

フローダイアグラム
　ユーザーの手順を書く。重要なものに絞った方がよい
絵コンテ
　分岐を無視し、インタラクションの詳細に焦点を当てる
↓
スケッチ
　いきなり細かいプロト作成をしないで、ラフに各画面の基本デザインを感がる
↓
ワイヤーフレーム
　枠組み、大きさを考える。テキストも考え始める
↓
モックアップ
　視覚系の細部を考える

プロトタイプツールでモダンでビジュアルにやらなきゃ！（形から入ろうとする）
変更が追いつかない
面倒でパワポに戻る。レガシーでインビジブルな生活
プロトタイプツールでモ(無限ループ)
とならないために箇所を絞ったり工夫は要るだろう

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

スケッチ、ワイヤーフレーム or モックアップを用意する
上記で見えた問題点を中心にテストするタスクを選定する
　※小チームが広範囲にやるのはお勧めしないと書かれている
　※しかし余裕があればとても有用だとも書かれている
ペーパープロトタイプを作る
　・使いそうな画面を漏れなく用意する
　・周辺のUI要素も並べる
テスト準備
　・3-4人
　・テストとテストの間に2hくらい空けて、場合により問題点を即修正
　・録画してメモを取り、メモには時間をつけると再生が省力化できる
テスト実施
　・コンピューター役がプロトタイプ画面を更新する
　・ファシリテーターはヒントを与えて影響してしまわないように注意
　・質問は頻繁にせずテスト後まで待つ方がよい

こうしたほうがいいよと提案してもいやこうじゃないと、となれば従うわけだけど
それは業務を熟知したあなたがたの感覚であって、
世に出してみたら意見が違ってやっぱり戻して・変えてというパターンは多い

12章リアリズム

記号はリアルにしすぎない
実物を再現するとメンタルモデルを形成しやすい
やりすぎ注意デジタルの自由度も活かそう

最近のアイコンが全部ボタンに見えて押してしまうんだけど
たまに違う

13章ナチュラルUI

ものに対して直接操作するデザインは分かりやすい
ジェスチャー(スワイプなど)にはただちにフィードバックを
取り消し操作も考慮する
　→ナチュラルUIで実現するには？
　→現実世界に倣う・普及しているアプリを参考にする・ユーザビリティテストで反応を調べる

14章フィッツの法則

移動時間、距離、対象の大きさの関係を定義したもの

クリックしやすくしたいものは大きく、そうでないもの（破壊的操作など）は小さく
端はとてもクリックしやすい(タッチパネルは違う)
カーソル移動に長辺を合わせるとクリックしやすい(横移動なら横長）
小さい対象物同士は間を空ける

左上のハンバーガーメニュー何とかならないかね
親指の付け根が痛い(右手方手持ち)

15章アニメーション

目的

状態変化に気付かせるために使う
メンタルモデルを構築してもらうために使う

注意

重要でないものに使わない

その他ポイント

移動距離がある（目安自身の半分)ときはものを伸ばしたりぶれさせたりすると効果がある
誇張もあり
加速減速もあり

13章と併せ控えめ・効果的に使いたいところ。

16章一貫性

何をするかすぐにわかれば、要素の見た目を同一にする必要はない
動作は、標準的なもの(OSなどの)との一貫性を持たせる
　ユーザーは既知のメンタルモデルを適用するから
標準と違う動作をするものは、標準と違うデザインにする

17章発見可能性

ユーザーが機能を見つけられるか、について

隠す要素を決め、重要な要素にウェイトを付ける
いつ見せるかも考慮。特定の場面だけ使う機能はダイアログ、など

見せ方

色や大きさ
メンタルモデルに合致するような置き場所
検索機能を提供する
アニメーション

あれもこれもに応えざるを得ない結果、並べれば分かりにくい・ひっこめれば気付かないの繰り返し(ジレンマ)

18章集中を妨げない

緊急でないことで割り込み・意思確認をしない
次の操作が明らかならユーザーの代わりに決定する
できなければなるべくまとめて意思確認する

19章取り消し機能

警告は読まれないことが多い
取り消せたほうがよい
実装できないときは、実行遅延で一時的な取り消しを可能にする

20章モード

アプリケーションやウィンドウの状態

自明でないものは混乱を招く→視覚効果・アニメーションで補う
予期せぬものは混乱を招く
　　割り込んできたモーダルダイアログのデフォルト動作、など
解除方法が不明なものは混乱を招く
上記に注意してモードを使うと使い勝手は良くなる
疑似モード(キーを押している間だけ、といったユーザーに意識させ続けるもの)も視野に入れる

凝ったjs求められて作ってても混乱することしばしば