デザイニング・インターフェイス勉強会 第８章 フォームとコントロール
Post on 28-May-2015
691 Views
Preview:
DESCRIPTION
Transcript
下北沢オープンソース Cafe
デザイニング・インターフェース勉強会第8章 - フォームとコントロール
安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/
デザイニング・インターフェース 第2版
パターンによる実践的インタラクションデザインhttp://amzn.to/LfZuHZ
@yasulabUIデザインを勉強したいエンジニア
勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
今日の発表について
第８章で学ぶこと
sign up や query などの、ユーザとアプリ間でインタラクティブな質問と回答をする際に必要なフォームとコントロールについて学ぶ。
ユーザと質疑応答をするための一般的な form & control ついて学ぶ.
F&C を提示するための,具体的なデザインパターンを学ぶ.
ユーザと質疑応答をするための一般的な form & control ついて学ぶ.
F&C を提示するための,具体的なデザインパターンを学ぶ.
一般的な form & control について学ぶ
a. フォームデザインに関する７つの心構え
b. コントロールを選ぶ際の５つの選択基準
c. 入力画面における一般的なコントロール例
1. ユーザを理解する.
2. 質問の数を最小に.
3. 外界の知識を利用.
4. 寛容なエラー対処.
5. モデルを流用しない.
6. ユーザテストの実施.
7. 適切なコントロールを選ぶ(=次節で解説).
a. フォームデザインに関する７つの心構え
1. ユーザを理解する.
2. 質問の数を最小に.
3. 外界の知識を利用.
4. 寛容なエラー対処.
5. モデルを流用しない.
6. ユーザテストの実施.
7. 適切なコントロールを選ぶ(=次節で解説).
a. フォームデザインに関する７つの心構え
‘何を要求されているのか？’や‘何のために必要なのか？’をユーザが理解できるようにする.
ターゲットユーザが理解できる言葉でラベル決定しよう！
1. ユーザを理解する.
2. 質問の数を最小に.
3. 外界の知識を利用.
4. 寛容なエラー対処.
5. モデルを流用しない.
6. ユーザテストの実施.
7. 適切なコントロールを選ぶ(=次節で解説).
a. フォームデザインに関する７つの心構え
テキストフィールドへの入力が楽しい時間になると考える人はそんなにいない。
Autocompletion や prefill などを駆使して, ユーザの手間を最小限にする. 質問しないのが最高.
1. ユーザを理解する.
2. 質問の数を最小に.
3. 外界の知識を利用.
4. 寛容なエラー対処.
5. モデルを流用しない.
6. ユーザテストの実施.
7. 適切なコントロールを選ぶ(=次節で解説).
a. フォームデザインに関する７つの心構え
ユーザがたやすく入力できるのは自分の名前・誕生日・住所・国・電話番号などの個人情報等.
Good Default や Input Hint を駆使して，思い出しやすい仕組みを用意してあげるとうまくいく.
1. ユーザを理解する.
2. 質問の数を最小に.
3. 外界の知識を利用.
4. 寛容なエラー対処.
5. モデルを流用しない.
6. ユーザテストの実施.
7. 適切なコントロールを選ぶ(=次節で解説).
a. フォームデザインに関する７つの心構え
ユーザがミスしたと判断できた時点で、迅速にエラーメッセージを表示しよう。
エラーメッセージでは、問題の原因と修正方法を丁寧に示す。
1. ユーザを理解する.
2. 質問の数を最小に.
3. 外界の知識を利用.
4. 寛容なエラー対処.
5. モデルを流用しない.
6. ユーザテストの実施.
7. 適切なコントロールを選ぶ(=次節で解説).
a. フォームデザインに関する７つの心構え
本当にデータモデルをそのままフォームに流用してよいのだろうか？
もっと簡潔で、ユーザにとって分かりやすい表現方法がないかどうか模索してみよう！
1. ユーザを理解する.
2. 質問の数を最小に.
3. 外界の知識を利用.
4. 寛容なエラー対処.
5. モデルを流用しない.
6. ユーザテストの実施.
7. 適切なコントロールを選ぶ(=次節で解説).
a. フォームデザインに関する７つの心構え
本当にデータモデルをそのままフォームに流用してよいのだろうか？
もっと簡潔で、ユーザにとって分かりやすい表現方法がないかどうか模索してみよう！
1. ユーザを理解する.
2. 質問の数を最小に.
3. 外界の知識を利用.
4. 寛容なエラー対処.
5. モデルを流用しない.
6. ユーザテストの実施.
7. 適切なコントロールを選ぶ(=次節で解説).
a. フォームデザインに関する７つの心構え
利用上の問題点については,
事実と異なる思い込みをしがち. 実験に基づく確証が大事.
“たとえ自分がよいデザインをしていると確信できる場合でも、ユーザビリティテストを活用しよう” p. 343
1. ユーザを理解する.
2. 質問の数を最小に.
3. 外界の知識を利用.
4. 寛容なエラー対処.
5. モデルを流用しない.
6. ユーザテストの実施.
7. 適切なコントロールを選ぶ(=次節で解説).
a. フォームデザインに関する７つの心構え
“どのコントローラを選ぶかは,
求められる入力内容についてのユーザの予想を左右する. ”
p. 344
ユーザはコントローラを見て,
何を求められて，何を入力できるかの期待値を設定する.
1. 利用可能なスペースはどのくらいあるのか？
2. 対象ユーザのPCに関する知識はどのくらいか？
3. 対象ユーザの専門用語の知識はどのくらいか？
4. 類似アプリの慣習による期待は持てるそうか？
5. どんな技術を利用することができるか？
b. コントロールを選ぶ際の５つの選択基準
1. 項目の一覧
2. テキスト
3. 数値
4. 日付 or 時刻
c. 入力画面における一般的なコントロール一覧
1. 項目の一覧
2. テキスト
3. 数値
4. 日付 or 時刻
c. 入力画面における一般的なコントロール一覧
1. 項目の一覧
2. テキスト
3. 数値
4. 日付 or 時刻
c. 入力画面における一般的なコントロール一覧
1. 項目の一覧
2. テキスト
3. 数値
4. 日付 or 時刻
c. 入力画面における一般的なコントロール一覧
1. 項目の一覧
2. テキスト
3. 数値
4. 日付 or 時刻
c. 入力画面における一般的なコントロール一覧
1. 項目の一覧
2. テキスト
3. 数値
4. 日付 or 時刻
c. 入力画面における一般的なコントロール一覧
1. 項目の一覧
2. テキスト
3. 数値
4. 日付 or 時刻
c. 入力画面における一般的なコントロール一覧
1. 項目の一覧
2. テキスト
3. 数値
4. 日付 or 時刻
c. 入力画面における一般的なコントロール一覧
ユーザと質疑応答をするための一般的な form & control ついて学ぶ.
F&C を提示するための,具体的なデザインパターンを学ぶ.
ユーザと質疑応答をするための一般的な form & control ついて学ぶ.
F&C を提示するための,具体的なデザインパターンを学ぶ.
1. Forgiving Format
2. Structured Format
3. Fill-in-the-Blanks
4. Input Hints
5. Input Prompt
6. Password Strength Meter
7. Autocompletion
8. Dropdown Chooser
9. List Builder
10. Good Defaults
11. Same-Page Error Messages
Ｆ＆Ｃを提示する際のデザインパターン
1. Forgiving Format
2. Structured Format
3. Fill-in-the-Blanks
4. Input Hints
5. Input Prompt
6. Password Strength Meter
7. Autocompletion
8. Dropdown Chooser
9. List Builder
10. Good Defaults
11. Same-Page Error Messages
Ｆ＆Ｃを提示する際のデザインパターン
1. Forgiving Format / 寛容な入力形式
weather.com / Google Calendar
様々な形式の入力を認め、アプリケーション側で入力を解釈するワザ
2. Structured Format / 構造化された入力形式
signup 時などに求められる入力例
データモデルの構造に合わせて、テキストフィールドを配置するワザ
3. Fill-in-the-Blanks / 穴埋め
Foreign Exchange / eBay Search (filtering)
１つの意味のある文になるように入力項目を配置するワザ
4. Input Hints / 入力ヒント
Twitter signup / Gmail signup
空白のテキストフィールドの横または下に入力内容を説明する文章を配置するワザ
4. Input Hints / 入力ヒント
Twitter / Yahoo! / Hotmail
空白のテキストフィールドの横または下に入力内容を説明する文章を配置するワザ
5. Input Prompt / 入力プロンプト
CulinaryCulture.com
入力すべき内容の手がかりを、予備入力で知らせるワザ
6. Password Strength Meter / パスワード強度メータ
Blogger / MSN
パスワードの入力中に、その有効性と強度を動的に表示するワザ
7. Autocompletion / オートコンプリート
amazon.com / my Emacs / Safari (iOS)
ユーザの手首を大切にするワザ（入力された文字列から想定される答えを予測し、入力内容を自動的に保管するワザ）
1. Forgiving Format
2. Structured Format
3. Fill-in-the-Blanks
4. Input Hints
5. Input Prompt
6. Password Strength Meter
7. Autocompletion
8. Dropdown Chooser
9. List Builder
10. Good Defaults
11. Same-Page Error Messages
Ｆ＆Ｃを提示する際のデザインパターン
8. Dropdown Chooser / ドロップダウン形式の選択ツール
Microsoft Word
ドロップダウンorポップアップパネルを使って、選択項目を拡張するワザ
9. List Builder / リストビルダー
togetter まとめ作成ページ
選択元と選択先の両方を表示させ、D&Dによって項目を選択させるワザ
1. Forgiving Format
2. Structured Format
3. Fill-in-the-Blanks
4. Input Hints
5. Input Prompt
6. Password Strength Meter
7. Autocompletion
8. Dropdown Chooser
9. List Builder
10. Good Defaults
11. Same-Page Error Messages
Ｆ＆Ｃを提示する際のデザインパターン
10. Good Defaults / よいデフォルト値
kayak / skymark (7/31)
ユーザが望む値として最も相応しいと推測される値を、事前に入力しておくワザ
11. Same-Page Error Msg / 同一ページでのエラーメッセージ
Netflix / Twitter
入力項目が適切ではなかった場合、原因と対処法を(動的に)表示するワザ
1. Forgiving Format
2. Structured Format
3. Fill-in-the-Blanks
4. Input Hints
5. Input Prompt
6. Password Strength Meter
7. Autocompletion
8. Dropdown Chooser
9. List Builder
10. Good Defaults
11. Same-Page Error Messages
Ｆ＆Ｃを提示する際のデザインパターン
パターンはこんなもんだけど、創造性を大事に！
Yahoo! signup
Show your sense of humor!!!
ユーザと質疑応答をするための一般的な form & control ついて学ぶ.
F&C を提示するための,具体的なデザインパターンを学ぶ.
第８章で学ぶこと
sign up や query などの、ユーザとアプリ間でインタラクティブな質問と回答をする際に必要なフォームとコントロールについて学ぶ。
@yasulabUIデザインを勉強したいエンジニア
勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
今日の発表について
下北沢オープンソース Cafe
デザイニング・インターフェース勉強会第8章 - フォームとコントロール
安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/
top related