デザイニング・インターフェイス勉強会第８章フォームとコントロール

下北沢オープンソース 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 について学ぶ

a. フォームデザインに関する７つの心構え

b. コントロールを選ぶ際の５つの選択基準

c. 入力画面における一般的なコントロール例

1. ユーザを理解する.

2. 質問の数を最小に.

3. 外界の知識を利用.

4. 寛容なエラー対処.

5. モデルを流用しない.

6. ユーザテストの実施.

7. 適切なコントロールを選ぶ(=次節で解説).










‘何を要求されているのか？’や‘何のために必要なのか？’をユーザが理解できるようにする.

ターゲットユーザが理解できる言葉でラベル決定しよう！









テキストフィールドへの入力が楽しい時間になると考える人はそんなにいない。

Autocompletion や prefill などを駆使して, ユーザの手間を最小限にする. 質問しないのが最高.









ユーザがたやすく入力できるのは自分の名前・誕生日・住所・国・電話番号などの個人情報等.

Good Default や Input Hint を駆使して，思い出しやすい仕組みを用意してあげるとうまくいく.









ユーザがミスしたと判断できた時点で、迅速にエラーメッセージを表示しよう。

エラーメッセージでは、問題の原因と修正方法を丁寧に示す。









本当にデータモデルをそのままフォームに流用してよいのだろうか？

もっと簡潔で、ユーザにとって分かりやすい表現方法がないかどうか模索してみよう！









本当にデータモデルをそのままフォームに流用してよいのだろうか？

もっと簡潔で、ユーザにとって分かりやすい表現方法がないかどうか模索してみよう！









利用上の問題点については,

事実と異なる思い込みをしがち. 実験に基づく確証が大事.

“たとえ自分がよいデザインをしていると確信できる場合でも、ユーザビリティテストを活用しよう” p. 343









“どのコントローラを選ぶかは,

求められる入力内容についてのユーザの予想を左右する. ”

p. 344

ユーザはコントローラを見て,

何を求められて，何を入力できるかの期待値を設定する.

1. 利用可能なスペースはどのくらいあるのか？

2. 対象ユーザのPCに関する知識はどのくらいか？

3. 対象ユーザの専門用語の知識はどのくらいか？

4. 類似アプリの慣習による期待は持てるそうか？

5. どんな技術を利用することができるか？

b. コントロールを選ぶ際の５つの選択基準

1. 項目の一覧

2. テキスト

3. 数値

4. 日付 or 時刻

c. 入力画面における一般的なコントロール一覧

1. 項目の一覧

2. テキスト

3. 数値

4. 日付 or 時刻


1. 項目の一覧

2. テキスト

3. 数値

4. 日付 or 時刻


1. 項目の一覧

2. テキスト

3. 数値

4. 日付 or 時刻


1. 項目の一覧

2. テキスト

3. 数値

4. 日付 or 時刻


1. 項目の一覧

2. テキスト

3. 数値

4. 日付 or 時刻


1. 項目の一覧

2. テキスト

3. 数値

4. 日付 or 時刻


1. 項目の一覧

2. テキスト

3. 数値

4. 日付 or 時刻






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



4. Input Hints

5. Input Prompt


7. Autocompletion

8. Dropdown Chooser

9. List Builder

10. Good Defaults



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



4. Input Hints

5. Input Prompt


7. Autocompletion

8. Dropdown Chooser

9. List Builder

10. Good Defaults



8. Dropdown Chooser / ドロップダウン形式の選択ツール

Microsoft Word

ドロップダウンorポップアップパネルを使って、選択項目を拡張するワザ

9. List Builder / リストビルダー

togetter まとめ作成ページ

選択元と選択先の両方を表示させ、D&Dによって項目を選択させるワザ

1. Forgiving Format



4. Input Hints

5. Input Prompt


7. Autocompletion

8. Dropdown Chooser

9. List Builder

10. Good Defaults



10. Good Defaults / よいデフォルト値

kayak / skymark (7/31)

ユーザが望む値として最も相応しいと推測される値を、事前に入力しておくワザ

11. Same-Page Error Msg / 同一ページでのエラーメッセージ

Netflix / Twitter

入力項目が適切ではなかった場合、原因と対処法を(動的に)表示するワザ

1. Forgiving Format



4. Input Hints

5. Input Prompt


7. Autocompletion

8. Dropdown Chooser

9. List Builder

10. Good Defaults



パターンはこんなもんだけど、創造性を大事に！

Yahoo! signup

Show your sense of humor!!!



第８章で学ぶこと

sign up や query などの、ユーザとアプリ間でインタラクティブな質問と回答をする際に必要なフォームとコントロールについて学ぶ。

@yasulabUIデザインを勉強したいエンジニア

勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/

今日の発表について

下北沢オープンソース Cafe

デザイニング・インターフェース勉強会第8章 - フォームとコントロール

安川要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/

Design

デザイニング・インターフェイス勉強会 第８章 フォームとコントロール

デザイニング・インターフェイス勉強会第８章フォームとコントロール