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