デザイニング・インターフェイス勉強会 第８回

デザイニング・インターフェイス勉強会
http://www.facebook.com/groups/di2e.study/

Transcript

1. Լ๺୔Φʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ ୈ8ষ - ϑΥʔϜͱίϯτϩʔϧ ҆઒ ཁฏ / @yasulab https://www.facebook.com/groups/di2e.study/
2. σβΠχϯάɾΠϯλʔϑΣʔε ୈ2൛ ύλʔϯʹΑΔ࣮ફతΠϯλϥΫγϣϯσβΠϯ http://amzn.to/LfZuHZ
3. @yasulab UIσβΠϯΛษڧ͍ͨ͠ΤϯδχΞ ษڧձৄࡉ͸ Facebook άϧʔϓͰ ↓ https://www.facebook.com/groups/di2e.study/ ࠓ೔ͷൃදʹ͍ͭͯ
4. ୈ̔ষͰֶͿ͜ͱ sign up ΍ query ͳͲͷɺϢʔβͱΞϓϦؒͰ ΠϯλϥΫςΟϒͳ࣭໰ͱճ౴Λ͢Δࡍʹ ඞཁͳϑΥʔϜͱίϯτϩʔϧʹֶ͍ͭͯͿɻ
5. Ϣʔβͱ࣭ٙԠ౴Λ͢ΔͨΊͷ Ұൠతͳ form & control ֶ͍ͭͯͿ. F&C Λఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
6. Ϣʔβͱ࣭ٙԠ౴Λ͢ΔͨΊͷ Ұൠతͳ form & control ֶ͍ͭͯͿ. F&C Λఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
7. Ұൠతͳ form & control ʹֶ͍ͭͯͿ a. ϑΥʔϜσβΠϯʹؔ͢Δ̓ͭͷ৺ߏ͑ b. ίϯτϩʔϧΛબͿࡍͷ̑ͭͷબ୒ج४ c. ೖྗը໘ʹ͓͚ΔҰൠతͳίϯτϩʔϧྫ
8. 1. ϢʔβΛཧղ͢Δ. 2. ࣭໰ͷ਺Λ࠷খʹ. 3. ֎քͷ஌ࣝΛར༻. 4. ׮༰ͳΤϥʔରॲ. 5. ϞσϧΛྲྀ༻͠ͳ͍. 6. Ϣʔβςετͷ࣮ࢪ. 7. ద੾ͳίϯτϩʔϧ ΛબͿ(=࣍અͰղઆ). a. ϑΥʔϜσβΠϯʹؔ͢Δ̓ͭͷ৺ߏ͑
9. 1. ϢʔβΛཧղ͢Δ. 2. ࣭໰ͷ਺Λ࠷খʹ. 3. ֎քͷ஌ࣝΛར༻. 4. ׮༰ͳΤϥʔରॲ. 5. ϞσϧΛྲྀ༻͠ͳ͍. 6. Ϣʔβςετͷ࣮ࢪ. 7. ద੾ͳίϯτϩʔϧ ΛબͿ(=࣍અͰղઆ). a. ϑΥʔϜσβΠϯʹؔ͢Δ̓ͭͷ৺ߏ͑ ‘ԿΛཁٻ͞Ε͍ͯΔͷ͔ʁ’΍ ‘ԿͷͨΊʹඞཁͳͷ͔ʁ’Λ Ϣʔβ͕ཧղͰ͖ΔΑ͏ʹ͢Δ. λʔήοτϢʔβ͕ཧղͰ͖Δ ݴ༿Ͱϥϕϧܾఆ͠Α͏ʂ
10. 1. ϢʔβΛཧղ͢Δ. 2. ࣭໰ͷ਺Λ࠷খʹ. 3. ֎քͷ஌ࣝΛར༻. 4. ׮༰ͳΤϥʔରॲ. 5. ϞσϧΛྲྀ༻͠ͳ͍. 6. Ϣʔβςετͷ࣮ࢪ. 7. ద੾ͳίϯτϩʔϧ ΛબͿ(=࣍અͰղઆ). a. ϑΥʔϜσβΠϯʹؔ͢Δ̓ͭͷ৺ߏ͑ ςΩετϑΟʔϧυ΁ͷೖྗ͕ ָ͍࣌ؒ͠ʹͳΔͱߟ͑Δਓ͸ ͦΜͳʹ͍ͳ͍ɻ Autocompletion ΍ prefill ͳͲΛ ۦ࢖ͯ͠, ϢʔβͷखؒΛ࠷খ ݶʹ͢Δ. ࣭໰͠ͳ͍ͷ͕࠷ߴ.
11. 1. ϢʔβΛཧղ͢Δ. 2. ࣭໰ͷ਺Λ࠷খʹ. 3. ֎քͷ஌ࣝΛར༻. 4. ׮༰ͳΤϥʔରॲ. 5. ϞσϧΛྲྀ༻͠ͳ͍. 6. Ϣʔβςετͷ࣮ࢪ. 7. ద੾ͳίϯτϩʔϧ ΛબͿ(=࣍અͰղઆ). a. ϑΥʔϜσβΠϯʹؔ͢Δ̓ͭͷ৺ߏ͑ Ϣʔβ͕ͨ΍͘͢ೖྗͰ͖Δͷ ͸ࣗ෼ͷ໊લɾ஀ੜ೔ɾॅॴɾ ࠃɾి࿩൪߸ͳͲͷݸਓ৘ใ౳. Good Default ΍ Input Hint Λۦ ࢖ͯ͠ɼࢥ͍ग़͠΍͍͢࢓૊Έ Λ༻ҙͯ͋͛͠Δͱ͏·͍͘͘.
12. 1. ϢʔβΛཧղ͢Δ. 2. ࣭໰ͷ਺Λ࠷খʹ. 3. ֎քͷ஌ࣝΛར༻. 4. ׮༰ͳΤϥʔରॲ. 5. ϞσϧΛྲྀ༻͠ͳ͍. 6. Ϣʔβςετͷ࣮ࢪ. 7. ద੾ͳίϯτϩʔϧ ΛબͿ(=࣍અͰղઆ). a. ϑΥʔϜσβΠϯʹؔ͢Δ̓ͭͷ৺ߏ͑ Ϣʔβ͕ϛεͨ͠ͱ൑அͰ͖ͨ ࣌఺Ͱɺਝ଎ʹΤϥʔϝοηʔ δΛදࣔ͠Α͏ɻ ΤϥʔϝοηʔδͰ͸ɺ໰୊ͷ ݪҼͱमਖ਼ํ๏Λஸೡʹࣔ͢ɻ
13. 1. ϢʔβΛཧղ͢Δ. 2. ࣭໰ͷ਺Λ࠷খʹ. 3. ֎քͷ஌ࣝΛར༻. 4. ׮༰ͳΤϥʔରॲ. 5. ϞσϧΛྲྀ༻͠ͳ͍. 6. Ϣʔβςετͷ࣮ࢪ. 7. ద੾ͳίϯτϩʔϧ ΛબͿ(=࣍અͰղઆ). a. ϑΥʔϜσβΠϯʹؔ͢Δ̓ͭͷ৺ߏ͑ ຊ౰ʹσʔλϞσϧΛͦͷ· ·ϑΥʔϜʹྲྀ༻ͯ͠Α͍ͷ ͩΖ͏͔ʁ ΋ͬͱ؆ܿͰɺϢʔβʹͱͬ ͯ෼͔Γ΍͍͢දݱํ๏͕ͳ ͍͔Ͳ͏͔໛ࡧͯ͠ΈΑ͏ʂ
14. 1. ϢʔβΛཧղ͢Δ. 2. ࣭໰ͷ਺Λ࠷খʹ. 3. ֎քͷ஌ࣝΛར༻. 4. ׮༰ͳΤϥʔରॲ. 5. ϞσϧΛྲྀ༻͠ͳ͍. 6. Ϣʔβςετͷ࣮ࢪ. 7. ద੾ͳίϯτϩʔϧ ΛબͿ(=࣍અͰղઆ). a. ϑΥʔϜσβΠϯʹؔ͢Δ̓ͭͷ৺ߏ͑ ຊ౰ʹσʔλϞσϧΛͦͷ· ·ϑΥʔϜʹྲྀ༻ͯ͠Α͍ͷ ͩΖ͏͔ʁ ΋ͬͱ؆ܿͰɺϢʔβʹͱͬ ͯ෼͔Γ΍͍͢දݱํ๏͕ͳ ͍͔Ͳ͏͔໛ࡧͯ͠ΈΑ͏ʂ
15. 1. ϢʔβΛཧղ͢Δ. 2. ࣭໰ͷ਺Λ࠷খʹ. 3. ֎քͷ஌ࣝΛར༻. 4. ׮༰ͳΤϥʔରॲ. 5. ϞσϧΛྲྀ༻͠ͳ͍. 6. Ϣʔβςετͷ࣮ࢪ. 7. ద੾ͳίϯτϩʔϧ ΛબͿ(=࣍અͰղઆ). a. ϑΥʔϜσβΠϯʹؔ͢Δ̓ͭͷ৺ߏ͑ ར༻্ͷ໰୊఺ʹ͍ͭͯ͸, ࣄ࣮ͱҟͳΔࢥ͍ࠐΈΛ͕͠ ͪ. ࣮ݧʹجͮ֬͘ূ͕େࣄ. “ͨͱ͑ࣗ෼͕Α͍σβΠϯ Λ͍ͯ͠Δͱ֬৴Ͱ͖Δ৔߹ Ͱ΋ɺϢʔβϏϦςΟςετ Λ׆༻͠Α͏” p. 343
16. 1. ϢʔβΛཧղ͢Δ. 2. ࣭໰ͷ਺Λ࠷খʹ. 3. ֎քͷ஌ࣝΛར༻. 4. ׮༰ͳΤϥʔରॲ. 5. ϞσϧΛྲྀ༻͠ͳ͍. 6. Ϣʔβςετͷ࣮ࢪ. 7. ద੾ͳίϯτϩʔϧ ΛબͿ(=࣍અͰղઆ). a. ϑΥʔϜσβΠϯʹؔ͢Δ̓ͭͷ৺ߏ͑ “ͲͷίϯτϩʔϥΛબͿ͔͸, ٻΊΒΕΔೖྗ಺༰ʹ͍ͭͯ ͷϢʔβͷ༧૝Λࠨӈ͢Δ. ” p. 344 Ϣʔβ͸ίϯτϩʔϥΛݟͯ, ԿΛٻΊΒΕͯɼԿΛೖྗͰ ͖Δ͔ͷظ଴஋Λઃఆ͢Δ.
17. 1. ར༻Մೳͳεϖʔε͸Ͳͷ͘Β͍͋Δͷ͔ʁ 2. ର৅ϢʔβͷPCʹؔ͢Δ஌ࣝ͸Ͳͷ͘Β͍͔ʁ 3. ର৅Ϣʔβͷઐ໳༻ޠͷ஌ࣝ͸Ͳͷ͘Β͍͔ʁ 4. ྨࣅΞϓϦͷ׳शʹΑΔظ଴͸࣋ͯΔͦ͏͔ʁ 5. ͲΜͳٕज़Λར༻͢Δ͜ͱ͕Ͱ͖Δ͔ʁ b. ίϯτϩʔϧΛબͿࡍͷ̑ͭͷબ୒ج४
18. 1. ߲໨ͷҰཡ 2. ςΩετ 3. ਺஋ 4. ೔෇ or ࣌ࠁ c. ೖྗը໘ʹ͓͚ΔҰൠతͳίϯτϩʔϧҰཡ
19. 1. ߲໨ͷҰཡ 2. ςΩετ 3. ਺஋ 4. ೔෇ or ࣌ࠁ c. ೖྗը໘ʹ͓͚ΔҰൠతͳίϯτϩʔϧҰཡ
20. 1. ߲໨ͷҰཡ 2. ςΩετ 3. ਺஋ 4. ೔෇ or ࣌ࠁ c. ೖྗը໘ʹ͓͚ΔҰൠతͳίϯτϩʔϧҰཡ
21. 1. ߲໨ͷҰཡ 2. ςΩετ 3. ਺஋ 4. ೔෇ or ࣌ࠁ c. ೖྗը໘ʹ͓͚ΔҰൠతͳίϯτϩʔϧҰཡ
22. 1. ߲໨ͷҰཡ 2. ςΩετ 3. ਺஋ 4. ೔෇ or ࣌ࠁ c. ೖྗը໘ʹ͓͚ΔҰൠతͳίϯτϩʔϧҰཡ
23. 1. ߲໨ͷҰཡ 2. ςΩετ 3. ਺஋ 4. ೔෇ or ࣌ࠁ c. ೖྗը໘ʹ͓͚ΔҰൠతͳίϯτϩʔϧҰཡ
24. 1. ߲໨ͷҰཡ 2. ςΩετ 3. ਺஋ 4. ೔෇ or ࣌ࠁ c. ೖྗը໘ʹ͓͚ΔҰൠతͳίϯτϩʔϧҰཡ
25. 1. ߲໨ͷҰཡ 2. ςΩετ 3. ਺஋ 4. ೔෇ or ࣌ࠁ c. ೖྗը໘ʹ͓͚ΔҰൠతͳίϯτϩʔϧҰཡ
26. Ϣʔβͱ࣭ٙԠ౴Λ͢ΔͨΊͷ Ұൠతͳ form & control ֶ͍ͭͯͿ. F&C Λఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
27. Ϣʔβͱ࣭ٙԠ౴Λ͢ΔͨΊͷ Ұൠతͳ form & control ֶ͍ͭͯͿ. F&C Λఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
28. 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 ̛ˍ̘Λఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
29. 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 ̛ˍ̘Λఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
30. 1. Forgiving Format / ׮༰ͳೖྗܗࣜ weather.com / Google Calendar ༷ʑͳܗࣜͷೖྗΛೝΊɺΞϓϦέʔγϣϯଆͰೖྗΛղऍ͢Δϫβ
31. 2. Structured Format / ߏ଄Խ͞Εͨೖྗܗࣜ signup ࣌ͳͲʹٻΊΒΕΔೖྗྫ σʔλϞσϧͷߏ଄ʹ߹ΘͤͯɺςΩετϑΟʔϧυΛ഑ஔ͢Δϫβ
32. 3. Fill-in-the-Blanks / ݀ຒΊ Foreign Exchange / eBay Search (filtering) ̍ͭͷҙຯͷ͋ΔจʹͳΔΑ͏ʹೖྗ߲໨Λ഑ஔ͢Δϫβ
33. 4. Input Hints / ೖྗώϯτ Twitter signup / Gmail signup ۭനͷςΩετϑΟʔϧυͷԣ·ͨ͸Լʹ ೖྗ಺༰Λઆ໌͢ΔจষΛ഑ஔ͢Δϫβ
34. 4. Input Hints / ೖྗώϯτ Twitter / Yahoo! / Hotmail ۭനͷςΩετϑΟʔϧυͷԣ·ͨ͸Լʹ ೖྗ಺༰Λઆ໌͢ΔจষΛ഑ஔ͢Δϫβ
35. 5. Input Prompt / ೖྗϓϩϯϓτ CulinaryCulture.com ೖྗ͢΂͖಺༰ͷख͕͔ΓΛɺ༧උೖྗͰ஌ΒͤΔϫβ
36. 6. Password Strength Meter / ύεϫʔυڧ౓ϝʔλ Blogger / MSN ύεϫʔυͷೖྗதʹɺͦͷ༗ޮੑͱڧ౓Λಈతʹදࣔ͢Δϫβ
37. 7. Autocompletion / ΦʔτίϯϓϦʔτ amazon.com / my Emacs / Safari (iOS) ϢʔβͷखटΛେ੾ʹ͢Δϫβ ʢೖྗ͞Εͨจࣈྻ͔Β૝ఆ͞ΕΔ౴͑Λ༧ଌ͠ɺೖྗ಺༰Λࣗಈతʹอ؅͢Δϫβʣ
38. 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 ̛ˍ̘Λఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
39. 8. Dropdown Chooser / υϩοϓμ΢ϯܗࣜͷબ୒πʔϧ Microsoft Word υϩοϓμ΢ϯorϙοϓΞοϓύωϧΛ࢖ͬͯɺબ୒߲໨Λ֦ு͢Δϫβ
40. 9. List Builder / ϦετϏϧμʔ togetter ·ͱΊ࡞੒ϖʔδ બ୒ݩͱબ୒ઌͷ྆ํΛදࣔͤ͞ɺD&DʹΑ߲ͬͯ໨Λબ୒ͤ͞Δϫβ
41. 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 ̛ˍ̘Λఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
42. 10. Good Defaults / Α͍σϑΥϧτ஋ kayak / skymark (7/31) Ϣʔβ͕๬Ή஋ͱͯ͠࠷΋૬Ԡ͍͠ͱਪଌ͞ΕΔ஋Λɺࣄલʹೖྗ͓ͯ͘͠ϫβ
43. 11. Same-Page Error Msg / ಉҰϖʔδͰͷΤϥʔϝοηʔδ Netflix / Twitter ೖྗ߲໨͕ద੾Ͱ͸ͳ͔ͬͨ৔߹ɺݪҼͱରॲ๏Λ(ಈతʹ)දࣔ͢Δϫβ
44. 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 ̛ˍ̘Λఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
45. ύλʔϯ͸͜Μͳ΋Μ͚ͩͲɺ૑଄ੑΛେࣄʹʂ Yahoo! signup Show your sense of humor!!!
46. Ϣʔβͱ࣭ٙԠ౴Λ͢ΔͨΊͷ Ұൠతͳ form & control ֶ͍ͭͯͿ. F&C Λఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
47. ୈ̔ষͰֶͿ͜ͱ sign up ΍ query ͳͲͷɺϢʔβͱΞϓϦؒͰ ΠϯλϥΫςΟϒͳ࣭໰ͱճ౴Λ͢Δࡍʹ ඞཁͳϑΥʔϜͱίϯτϩʔϧʹֶ͍ͭͯͿɻ
48. @yasulab UIσβΠϯΛษڧ͍ͨ͠ΤϯδχΞ ษڧձৄࡉ͸ Facebook άϧʔϓͰ ↓ https://www.facebook.com/groups/di2e.study/ ࠓ೔ͷൃදʹ͍ͭͯ
49. Լ๺୔Φʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ ୈ8ষ - ϑΥʔϜͱίϯτϩʔϧ ҆઒ ཁฏ / @yasulab https://www.facebook.com/groups/di2e.study/