• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
デザイニング・インターフェイス勉強会 第8章 フォームとコントロール
 

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

on

  • 896 views

Designing Interface (2e) Study Group http://www.facebook.com/groups/di2e.study/

Designing Interface (2e) Study Group http://www.facebook.com/groups/di2e.study/

Statistics

Views

Total Views
896
Views on SlideShare
895
Embed Views
1

Actions

Likes
2
Downloads
2
Comments
0

1 Embed 1

https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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