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

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

Transcript

1. @yasulab σβΠχϯάɾΠϯλʔϑΣΠε(2e)ษڧձ ୈ̍ճɹୈ1ষ
2. @yasulab σβΠχϯάɾΠϯλʔϑΣΠε(2e)ษڧձ ୈ̍ճɹୈ1ষ ྑ͚Ε͹ɺ ຊΛങͬͯͶʂ
3. ஫ҙࣄ߲ • ൃදऀ ʹ σβΠϯΛษڧ͍ͨ͠ΤϯδχΞ • ࣭໰͸UstͰ΋ޱ಄Ͱ΋͍ͭͰ΋׻ܴʂ • ଈ࠲ʹճ౴Ͱ͖ͳ͍৔߹͸॓୊తͳײ͡Ͱɻ • ʮͦΕҧ͏Μ͡ΌͶʁʯͱײͨ͡ΒੋඇࢦఠΛɻ • ษڧձͷܦҢɾεέδϡʔϧ͸ͪ͜Β͔Β↓ http://www.facebook.com/groups/di2e.study/
4. ஫ҙࣄ߲ • 50෼͙Β͍ܦͬͨΒڭ͑ͯԼ͍͞ɻ • ҆੢ઌੜ...ٳܜ͍ͨ͠Ͱ͢... orz
5. ࠓ೔ͷ֓ཁ • Ϣʔβͷߦಈʹ͍ͭͯ • Ϣʔβ͸ԿΛ๬ΜͰ͍Δͷ͔ʁ
6. ུޠղઆू •ID: Interface Design •SW: Software
7. ྑ͍ID͸Ϣʔβͷཧղ͔Β • ग़ൃ఺ʹϢʔβͷཧղ • 1. ͲΜͳਓ෺ͳͷ͔ • 2. ͳͥಛఆͷSWΛ࢖͏ͷ͔ʁ • 3. ͦΕΛͲ͏ૢ࡞͢Δͷ͔ʁ “ೊͷϢʔβΛ஌Ε ― ൴Β͸͋ͳͨͱ͸ผਓͳͷͩ”
8. Ͳ͏ͯͦ͠ΕΛ࢖͏ͷʁ • SWΛ࢖͏ʹ໨ඪୡ੒ͷͨΊͷखஈ • ௐ΂΋ͷɼֶशɼ੍ޚɼ૑࡞ɼձ࿩ɼޘָ ... • Ϣʔβͷୡ੒͍ͨ͠໨ඪΛਖ਼͘͠ݟۃΊΑ͏. • ໨ඪୡ੒ͷۙಓʹͳΔͳΒɺͲΜͲΜ࡟Ζ͏ʂ • ྫɿSimple Timekeeper
9. ྫɿSimple Timekeeper http://simpletimekeeper.com/
10. 1. (Start + Stop) button
11. 2. Number == Form
12. ͪΐͬͱߟ͑ͯΈΔ... • ೖྗ͢ΔϑΥʔϜΛ࡟Δ͜ͱʹ໨ඪୡ੒ͷۙಓʁ • ࢥߟίετ͕௿Լ͢Δ...͔΋ʁ • Ϛ΢εΛɺΑΓಈ͔͞ͳͯ͘ྑ͘ͳΔ...ͱ͔ʁ • NumberΛClickableʹͨ͠Βؾͮ͘...ͷ͔ʁ
13. ͪΐͬͱߟ͑ͯΈΔ... ɹ↓ɹ Ϣʔβௐࠪ • ೖྗ͢ΔϑΥʔϜΛ࡟Δ͜ͱʹ໨ඪୡ੒ͷۙಓʁ • ࢥߟίετ͕௿Լ͢Δ...͔΋ʁ • Ϛ΢εΛɺΑΓಈ͔͞ͳͯ͘ྑ͘ͳΔ...ͱ͔ʁ • NumberΛClickableʹͨ͠Βؾͮ͘...ͷ͔ʁ
14. “޷ح৺Λ࣋ͱ͏. Ϣʔβ͸࣮ࡍʹ ͲͷΑ͏ͳਓʑͰɼԿΛߟ͑ͨΓ ײͨ͡Γ͍ͯ͠Δͷ͔ɼͦΕΛݟ ग़͢ઐ໳తεΩϧΛ਎ʹ͚ͭΑ͏.” P. 4
15. Ϣʔβௐࠪ • “࠷΋ྑ͍ํ๏͸ɺ֎ʹग़ͯ൴Βʹձ͏͜ͱͩ.” • cf. AirBnB͕ Los Angels·Ͱ͍ͬͨ࿩. • cf. YCͷΞυόΠβ͕Α͘Ұऽ͢Δྫ. • ʮϢʔβ͸ͳΜͯݴͬͯΔͷʁʯ
16. Ϣʔβௐࠪ • “࠷΋ྑ͍ํ๏͸ɺ֎ʹग़ͯ൴Βʹձ͏͜ͱͩ.” • cf. AirBnB͕ Los Angels·Ͱ͍ͬͨ࿩. • cf. YCͷΞυόΠβ͕Α͘Ұऽ͢Δྫ. • ʮϢʔβ͸ͳΜͯݴͬͯΔͷʁʯ ʮ͑ɺͰ΋ϢʔβͬͯਓͦΕͧΕ͡ΌͶʁʯ
17. Ϣʔβௐࠪ • ϙΠϯτ͸ɺ“֓Ͷ”֘౰͢Δࣄ࣮͸Կͳͷ͔ʁ • Ұൠతͳߦಈύλʔϯ vs. ྫ֎తͳέʔε • 1. ֓ͶɺͲΜͳΰʔϧΛ໨ࢦͯ͠Δͷ͔ʁ 2. ֓ͶɺͲΜͳλεΫΛ࣮ߦ͢Δͷ͔ʁ 3. ֓ͶɺͲΜͳ୯ޠΛ࢖͏ͷ͔ʁ 4. ֓ͶɺͲΜͳεΩϧΛ࣋ͬͯΔͷ͔ʁ 5. ֓ͶɺͲΜͳߟ͑ํΛ࣋ͬͯΔͷ͔ʁ
18. ͕͔͔࣌ؒ͘͢͝Δ͚Ͳ, ਖ਼͍͠໰୊ΛݟۃΊΑ͏. ࠷ॳͷҰา͸େࣄͳͷͰ, ਖ਼͘͠౿Έग़ͦ͏.
19. Ϣʔβௐࠪͷํ๏ (ྫ) • 1. ௚઀؍࡯ • 2. Case Studyɹ • 3. Ξϯέʔτௐࠪ • 4. ϖϧιφ ※ଞʹ΋৭ʑ͋ΔΑ͏Ͱ͕͢ɺຊ୊Ͱ͸ͳ͍ͷͰলུ. ৄ͘͠͸ʮThe Lean StartupʯͷMeasure౳Λࢀߟʹ.
20. ϢʔβௐࠪͷϙΠϯτ • ਅͷ໰୊Λཧղ͢Δͷ͸೉͍͠. • Ұൠతʹ͸ɺ΍΍ภΓ͕ͪʹͳΔ • e.g. આ໌ग़དྷΔ͚ͩͷݴޠදݱೳྗ͕ඞཁ • ߦ͖౰ͨΓ͹ͬͨΓͩͱɺมͳσʔλΛಘΔ͔΋. • Formal method > Informal method > Do nothing
21. ←͜͜·Ͱલஔ͖ ɹɹ͔͜͜Β͕ຊ୊→
22. Ϣʔβͷߦಈύλʔϯ • ϢʔβௐࠪͰσʔλΛಘ͚ͨͲɺͦΕͰʁ • ϢʔβΛύλʔϯʹ౰ͯ͸ΊͯΈΔɻ • ͰɺͲΜͳύλʔϯ͕͋Δͷʁ → ࣍Ͱઆ໌
23. Ϣʔβͷߦಈύλʔϯ • ϢʔβௐࠪͰσʔλΛಘ͚ͨͲɺͦΕͰʁ • ϢʔβΛύλʔϯʹ౰ͯ͸ΊͯΈΔɻ • ͰɺͲΜͳύλʔϯ͕͋Δͷʁ → ࣍Ͱઆ໌ • Ͳ͏ͯ͠ύλʔϯʹ౰ͯ͸ΊΔͷʁ • جૅͱͳΔߏ଄ɾػೳɾදݱΛܾΊΔͨΊ.
24. Ϣʔβͷߦಈύλʔϯ • ϢʔβௐࠪͰσʔλΛಘ͚ͨͲɺͦΕͰʁ • ϢʔβΛύλʔϯʹ౰ͯ͸ΊͯΈΔɻ • ͰɺͲΜͳύλʔϯ͕͋Δͷʁ → ࣍Ͱઆ໌ • Ͳ͏ͯ͠ύλʔϯʹ౰ͯ͸ΊΔͷʁ • جૅͱͳΔߏ଄ɾػೳɾදݱΛܾΊΔͨΊ. Design Interface !
25. “ҰਓҰਓ͕ϢχʔΫͳଘࡏ ͩͱ͸͍͏΋ͷͷɺਓʑ͸֓ͯ͠ ༧૝௨Γʹ;Δ·͏΋ͷͩɻ” P. 9
26. ͲΜͳύλʔϯ͕͋Δʁ • 1.Safe Exploration • 2. Instant Gratification • 3. Satisficing • 4. Changes in Midstream • 5. Deferred Choices • 6. Incremental Construction • 7. Habituation • 8. Microbreaks • 9. Spatial Memory • 10. Prospective Memory • 11. Streamlined Repetition • 12. Keyboard Only • 13. Other People’s Advice • 14. Personal Recommendations
27. ؤு֮ͬͯ͑Δʂ
28. 1. Safe Exploration • ʮແཧͳ͘୳ݕͰ͖·͢Α͏ʹ...ʯ • ৭ʑࢼͨ͢ΊͷΞϨίϨ. • ୅ঈΛࢧ෷͏͜ͱͳ͘୳ݕͤ͞Α͏ʂ • Undo / Redo
29. 2. Instant Gratification • ʮࠓ͙͢΍Γ͍ͨʂʯ • ૉ੖Β͍͠ϢʔβମݧΛਝ଎ʹఏڙ͠Α͏ • “ΤϯδχΞͷ࢓ࣄ͕0Λ1ʹ͢Δ࢓ࣄͳΒɺ σβΠϯ͸1Λ100ʹ͢Δ࢓ࣄ” “ݟͯ2ඵͰΘ͔ΔUIΛৗʹ໨ඪͱͯ͠ܝ͍͛ͯΔ” http://www.startup-dating.com/2012/05/interview_ikumikatayama/
30. 3. Satisficing • ʮ΋͏͜ΕͰ͓ෲ͍ͬͺ͍Ͱ͢ʯ • Stisficing = Satisfying + Sufficingɹ • શͯΛ஌Δʹ͸ֻ͕͔࣌ؒΔ→ඞཁे෼ͳ݁Ռ. • ྫɿ໨ʹ͖ͭ΍͍͢৔ॴʹগ਺ͷબ୒ࢶ • ঢ়گ͕վળ͞ΕΔͱͯ͠΋ɼඞཁͱ͞Εͳ͍͔΋. • ྫɿϝʔϧ͔ΒFacebookʹߦ͘ਓʑ
31. 4. Changes in Midstream • ʮؾ͕มΘͬͨͷͰɺଞͷ͜ͱ΍Γ·͢ʯ • ํ਑มߋͰ͖ΔػձΛఏڙˍͦͷ৔߹ͷରॲࡦɻ • ్த·Ͱೖྗ͞Εͨ৘ใͷอଘ. • ྫɿ్தͰؾ͕มΘͬͨ๻΁ͷΫʔϙϯϝʔϧ.
32. 5. Deferred Choices • ʮͱΓ͋͑ͣ◦◦͚͍ͩͨ͠ΜͰ͚͢Ͳ...ʯ • ෆཁͳεςοϓΛޙճ͠ʹɻ • ྫɿܝࣔ൘ʹίϝϯτ͍͚ͨͩ͠ͳͷʹSing up • ྫɿඞཁ࠷௿ݶͷೖྗ߲໨, ઃఆը໘Ͱৄࡉઃఆ
33. 6. Incremental Construction • ʮࢼߦࡨޡ͍ͨ͠ʂʯ • ฤू <--- > ݁ՌΛਝ଎ʹදࣔ • ྫɿATNDͷΠϕϯτฤूը໘
34. 7. Habituation • ʮ͓͍͓͍ɺ͍ͭ΋ͷΞϨ͕ग़དྷͳ͍ͧʂʯ • ʮ͍ͭ΋ͷʯͷҰ؏ੑ • ྫɿʮCtrl-a, Ctrl-x, Ctrl-sʯΛೖྗ͢Δͱ...?ʯ • MS Wordͷ৔߹ vs. Emacsͷ৔߹
35. ;͎...
36. 8. Microbreaks • ʮ͓ɺόε͕དྷΔͷ͸̎෼ؒޙ͔...ʯ • ਝ଎ͳ࣮ߦ ˍ ૉૣ͍ݺͼग़͠ • ✘ ຖճϩάΠϯ • ✘ ϩʔυʹֻ͕͔࣌ؒΔ • ✘ ࠷ॳͷը໘ʹཉ͍͠৘ใ͕දࣔ͞Εͳ͍
37. 9. Spatial Memory • ʮ͋Εɺ͍ͭ΋ͷ৔ॴʹ͍ͭ΋ͷΞϨ͕ͳ͍...ʯ • டং͋ΔΧΦε • “ͪΐͬͱɺউखʹ๻ͷصΛย෇͚ͳ͍ͰΑʂ” • উखʹ੔ཧɺμϝɺθολΠ.
38. 10. Prospective Memory • ʮ๨Ε΍͍͢ΞϨ͸ɺ͜͜ʹஔ͍ͨ··ʹ͠Α͏ʯ • ෆ׬શͳهԱͷͨΊͷɺ֎෦هԱ૷ஔతͳػೳ • ྫ1ɿ΢Οϯυ΢ͷ։͚ͬ์͠ • ྫ2ɿσεΫτοϓʹอଘ • ྫ3ɿॏཁͳϝʔϧʹStar
39. 11. Streamlined Repetition • ʮ͍͍ͬͨԿճ܁Γฦͤ͹͍͍ͷɺ͜ͷૢ࡞ orzʯ • Α͘܁Γฦ͢ૢ࡞Λ؆୯ʹ. • ྫɿΤσΟλͷݕࡧˍஔ׵ • ྫɿPhotoshopͷʮΞΫγϣϯʯొ࿥ • ྫɿUnix TerminalͷʮCtrl-p/Ctrl-n + Enterʯ
40. 12. Keyboard Only • ʮϚ΢εΛ࢖͏ͱ͔৘ऑͰ͢ ( Ŗ`дŖ´)ŝžŕʯ • ଞʹ΋ɺ਎ମ্ͷཧ༝ͰϚ΢ε͕࢖͑ͳ͍ͱ͔ɻ • ྫɿSign up ը໘ͰϚ΢ε࢖͍ͨ͘ͳ͍Αʂ • Ͱ΋ɺΏ͏ͪΐͷޱ࠲൪߸ೖྗͱ͔Ͳ͏Αʁ • cf. Ώ͏ͪΐμΠϨΫτ
41. 13. Other People’s Advice • ʮ͜ΕͬͯɺଞͷਓͷͲ͏΍ͬͯΔΜͩΖ͏Ͷʁʯ • ଞਓΛࢀߟʹ͍ͨ͠ཉɻͦͷͨΊͷΞϨίϨɻ • ྫɿMATLABͷΧϯχϯάਪ঑ίϯςετ • ྫɿଞਓ͕ྑ͘ݕࡧ͢Δ߲໨Λڍ͛Δ • cf. GoogleݕࡧʗGoogleೖྗʹ( Ŗ`дŖ´)ŝžŕ
42. 14. Personal Recommendations • ʮSVͷਓ͕નΊͨຊ͔ͩΒɺDIຊ͸͖ͬͱੌ͍ຊʯ • ஌ਓͷਪન ≧ ଞਓͷਪન • ಉ͡URLʹΞΫηε͢Δͱɺಉ͡ϖʔδ͕ݟΕΔ • ؆୯ʹ༑ਓʹ঺հͰ͖Δػೳ • खಈςΩετ ʼ ࣗಈςΩετ
43. Ҏ্ʂ
44. ͲΜͳύλʔϯ͕͋Δʁ • 1.Safe Exploration • 2. Instant Gratification • 3. Satisficing • 4. Changes in Midstream • 5. Deferred Choices • 6. Incremental Construction • 7. Habituation • 8. Microbreaks • 9. Spatial Memory • 10. Prospective Memory • 11. Streamlined Repetition • 12. Keyboard Only • 13. Other People’s Advice • 14. Personal Recommendations
45. ࠓ೔ͷ֓ཁ • Ϣʔβͷߦಈʹ͍ͭͯ • Ϣʔβ͸ԿΛ๬ΜͰ͍Δͷ͔ʁ
46. ͱΓ͋͑ͣࠓ೔͸͜͜·Ͱ. ৄࡉ͸ຊΛࢀরͯ͠Լ͍͞.
47. @yasulab σβΠχϯάɾΠϯλʔϑΣΠε(2e)ษڧձ ୈ̍ճɹୈ1ষ
48. ࣍ճʁ •ୈ̎ষʢʴ ୈ x ষʁʣ
49. ৄࡉ͸ͪ͜Β͔Β http://www.facebook.com/groups/di2e.study/