About Face 第5章
デザインのフレームワークを作る
最初は細かい点は気にしない
デザインフレームワーク
全体像を明確にしていく
振る舞い、レイアウト、情報など
たぶん骨格レベルの話takeru.icon
何だこれ?takeru.icon 翻訳の問題なのか、よく分からん。
労力をかけすぎないこと
インタラクションフレームワーク
レイアウト、構造、フローや振る舞いなど
6つのステップがある
1. フォームファクター、ポスチュア、入力メソッドの定義 どんなデバイス? どんな利用状況? 何を使って入力する?takeru.icon
2. 機能要素とデータ要素を決める takeru.icon
どんな情報を扱う?takeru.icon
3. 機能グループと階層構造を決める
構造レベルの話 takeru.icon
4. インタラクションフレームワークのスケッチを描く
骨格レベルの話。つまりワイヤーフレーム takeru.icon
重要なユーザーフローを設計takeru.icon
シナリオ通りに使えるかチェックtakeru.icon
https://gyazo.com/2a7e656d7e985e158240d91999bb9205
ステップ1 : フォームファクター、ポスチュア、入力メソッドの定義 フォームファクター
デスクトップかモバイルか?
Webアプリかネイティブアプリか?
ポスチュア
入力メソッド
マウス?キーボード?音声?タッチスクリーン?
ステップ2 : 機能要素とデータ要素を決める
第4章で設定した要件を開発目線で捉える作業
データ要素
例:写真やメールのメッセージ、顧客や注文のデータなど
メンタルモデルに合わせることが大事
データ同士の関係も考慮する
例:楽曲とアルバム
機能要素
データに対して行うアクションのこと
電話アプリの例
連絡先の選択
ダイアル開始
ソリューションの評価時に気にすべきこと
ユーザーのゴールを効率的に達成できるか?
デザインの原則に適合してるか?
技術、コスト的に実現可能か?
競合製品と差別化できるか?
製品を人間のように扱うと良い
思慮深い、礼儀正しい人間であること
ユーザーの先を読んで、親切に行動する人
原則とパターンをうまく使う
過去のデザインパターンを模倣する
開発の効率化とともに、ユーザーに学習を強いない効果がある
ステップ3 : 機能グループと階層構造を決める
気にすべき点
表示スペースの優先度
要素の適切な分類
要素の並べ方
併用されるものと、そうでないもの
関連要素はどんな流れで使われるか
ペルソナが知っておくべき、またはその場で参照すべきデータは何か
適切な原則やパターンを使っているか
ペルソナのメンタルモデル
ステップ4 : インタラクションフレームワークのスケッチを描く
ボックス単位で構成する
矢印を引き、フローや状態の変化を示す
まず気にすべきはトップレベルでの振る舞い。細部の振る舞いは気にしない。