エンジニアのためのUX入門

https://www.slideshare.net/ckazu/ux-10671865

Transcript

1. ΤϯδχΞͷͨΊͷUXೖ໳ UI / UX / IA 2011.12.07 kchinda@aiming-inc.com (a.k.a. @ckazu)
2. ࠓ೔ͷ಺༰ •UI / UX / IA΍σβΠϯʹؔͯ͠ɽɽɽ •޿͘ઙ͘ •ࡶଟͳτϐοΫε
3. ࠓ೔ͷ಺༰ •ͨͩ͠ɽɽɽ •ೝ஌Պֶʹภ͍ͬͯΔ •UI / UX / IA΍σβΠϯʹؔͯ͠ɽɽɽ •޿͘ઙ͘ •ࡶଟͳτϐοΫε
4. ࠓ೔ͷ໨త̍ •ιϑτ΢ΣΞΤϯδχΞ͕ɼ σβΠϯΛ஌Δҙٛ •Ϣʔβʹͱͬͯ࢖͍΍͍͢Ϟϊͱɼ ։ൃऀʹͱͬͯ࢖͍΍͍͢Ϟϊ
5. ࠓ೔ͷ໨త̍ • ։ൃऀᅂ޷ͷϞϊ • σβΠφᅂ޷ͷϞϊ http://store.apple.com/us/product/MB829LL/A http://www.seiko-watch.co.jp/p_search/detail/do.php?no=SBPG003
6. ࠓ೔ͷ໨త̍ •ਓʹͱͬͯ࢖͍΍͍͢Ϟϊ΍ ιϑτ΢ΣΞΛ࡞Δʹ͸ɽɽɽ •ਓʹͱͬͯ࢖͍΍͍͢σβΠϯͱ͸Կ͔
7. ࠓ೔ͷ໨త̍ •ਓʹͱͬͯ࢖͍΍͍͢Ϟϊ΍ ιϑτ΢ΣΞΛ࡞Δʹ͸ɽɽɽ •ਓʹͱͬͯ࢖͍΍͍͢σβΠϯͱ͸Կ͔ ώτΛ஌Δ → ೝ஌ ʨ৺ཧֶ, Պֶʩ
8. ࠓ೔ͷ໨త̎ • UX (User Experience) • UI (User Interface) • IA (Information Architecture) • HCD (Human Centered Design) • Ubiquitous • Usability • HI (Human Interface) • Interactive Design • Interactive System • Man-Machine Interface • Tangible • HCI (Human Computer Interaction) • etc... UX ʹؔ͢Δ෼໺΍༻ޠ
9. ࠓ೔ͷ໨త http://www.kickerstudio.com/blog/images/ux.jpg
10. ࠓ೔ͷ໨త̎ •UX (UI) ͸ֶࡍతͳྖҬ •ͦΕͧΕͷ෼໺Ͱɼ ͦΕͧΕͷఆٛ΍༻ޠ͕͋Δ •ࠜఈͷߟ͑ํ͸ͦΜͳʹҧΘͳ͍ ೝ஌Պֶ σβΠϯ ৘ใՊֶ
11. ࠓ೔ͷ໨త̎ •UX (UI) ͸ֶࡍతͳྖҬ •ͦͷྖҬʹӨڹ͞Εͣʹɼ ‘design’ ʹ͍ͭͯߟ͑ͯΈΔ
12. ࠓ೔ͷ໨త̎ •UX (UI) ͸ֶࡍతͳྖҬ •ͦͷྖҬʹӨڹ͞Εͣʹɼ ‘design’ ʹ͍ͭͯߟ͑ͯΈΔ ࠓ೔͸ɼͦͷ͖͔͚ͬʹ͢Δ
13. ೝ஌ cognition
14. ೝ஌৺ཧֶ •஌֮ɾཧղɾهԱɾࢥߟɾֶशɾਪ࿦ɾ໰୊ղܾ •ήγϡλϧτ৺ཧֶ • http://ja.wikipedia.org/wiki/ήγϡλϧτ৺ཧֶ •H. ΤϏϯάϋ΢ε • http://ja.wikipedia.org/wiki/ࡨࢹ • http://ja.wikipedia.org/wiki/๨٫ۂઢ
15. ೝ஌Պֶ •ϑϨʔϜ໰୊ •ϩϘοτͱόοςϦͱര஄ͷ໰୊ • Daniel Dennett, “Cognitive Wheels : The Frame Problem of AI,” The Philosophy of Artificial Intelligence, Margaret A. Boden, Oxford University Press, 1984, pp. 147-170. cite: http://www.cs.sfu.ca/~vaughan/teaching/415/papers/dennett- cognitivewheels.html
16. ϑϨʔϜ໰୊ •όοςϦͷ੾Εͦ͏ͳϩϘοτ͕Ұମ͍Δ •ྡͷ෦԰ʹόοςϦ͕͋Δ •όοςϦͷ্ʹ͸࣌ݶര஄͕͓͍ͯ͋Γɼ Ұఆ࣌ؒޙʹ͸രൃ͢Δ
17. ϑϨʔϜ໰୊ •όοςϦͷ੾Εͦ͏ͳϩϘοτ͕Ұମ͍Δ •ྡͷ෦԰ʹόοςϦ͕͋Δ •όοςϦͷ্ʹ͸࣌ݶര஄͕͓͍ͯ͋Γɼ Ұఆ࣌ؒޙʹ͸രൃ͢Δ ϩϘοτʹ ʮྡͷ෦԰͔ΒόοςϦΛ΋ͬͯ͘Δ͜ͱʯ ͱ͍͏໋ྩΛͨ͠
18. ϑϨʔϜ໰୊ •ϩϘοτR1 •۪௚ʹ໨తΛ਱ߦ͢ΔϩϘοτ
19. ϑϨʔϜ໰୊ •ϩϘοτR1 •۪௚ʹ໨తΛ਱ߦ͢ΔϩϘοτ όοςϦΛ࣋ͪग़͢͜ͱʹ੒ޭͨ͠ɽ ͨͩ͠ɼόοςϦΛ࣋ͪग़͢ͱര஄΋ Ұॹʹ࣋ͪग़͢͜ͱΛߟ͑ΒΕͳ͔ͬͨͨΊɼ ΍͕ͯരൃʹר͖ࠐ·Εͯ͠·ͬͨ
20. ϑϨʔϜ໰୊ •ϩϘοτR1ͷ໰୊ •όοςϦΛ࣋ͪग़͢͜ͱͰੜ͡Δɼ ؀ڥͷมԽΛߟྀͰ͖ͳ͔ͬͨ
21. ϑϨʔϜ໰୊ •ϩϘοτR1D1 •໨తΛୡ੒͢ΔͨΊʹɼੜ͡Δ෭࣍తͳӨڹΛ ߟྀ͢ΔΑ͏վྑͨ͠ ※ D = deduceʢԋ៷ʣ
22. ϑϨʔϜ໰୊ •ϩϘοτR1D1 •໨తΛୡ੒͢ΔͨΊʹɼੜ͡Δ෭࣍తͳӨڹΛ ߟྀ͢ΔΑ͏վྑͨ͠ ϩϘοτ͸ɼόοςϦͷલͰϑϦʔζ͠ɼ ΍͕ͯɼര஄ͷരൃʹר͖ࠐ·Εͯ͠·ͬͨ ※ D = deduceʢԋ៷ʣ
23. ϑϨʔϜ໰୊ •ϩϘοτR1D1ͷ໰୊ •όοςϦΛ্࣋ͪ͛ΔલʹɼόοςϦΛ্࣋ͪ͛Δͱੜ͡ Δͨ͘͞Μͷ͜ͱΛܭࢉ͠ͳ͚Ε͹ͳΒͳ͔ͬͨ •όοςϦΛ্࣋ͪ͛Δͱɼര஄͕స͕Βͳ͍͔ •όοςϦΛ্࣋ͪ͛ΔͨΊʹɼΞʔϜΛಈ͔͢͜ͱͰɼ ΞʔϜ͕Ͳ͔͜ʹͿ͔ͭΒͳ͍͔ •όοςϦʹۙͮ͘ͱɼচ͕ൈ͚མͪͳ͍͔ •όοςϦʹ৮ΕΔͱɼೖޱͷυΞʹ伴͕͔͔Βͳ͍͔ ...
24. ϑϨʔϜ໰୊ •ϩϘοτR2D1 •໨తΛୡ੒͢ΔͨΊʹɼੜ͡Δ෭࡞༻ͷ͏ͪɼ ໨తΛୡ੒͢ΔͨΊʹෆඞཁͳ΋ͷΛߟྀ͠ͳ͍Α ͏վྑͨ͠ɽ
25. ϑϨʔϜ໰୊ •ϩϘοτR2D1 •໨తΛୡ੒͢ΔͨΊʹɼੜ͡Δ෭࡞༻ͷ͏ͪɼ ໨తΛୡ੒͢ΔͨΊʹෆඞཁͳ΋ͷΛߟྀ͠ͳ͍Α ͏վྑͨ͠ɽ ϩϘοτ͸ɼྡͷ෦԰ͷυΞͷલͰϑϦʔζͨ͠ ΍͕ͯɼര஄͕രൃͨ͠
26. ϑϨʔϜ໰୊ •ϩϘοτR2D1ͷ໰୊఺ •໨తͷߦಈΛى͜͢લʹͦͷ໨తΛୡ੒͢Δͷʹ ෆඞཁͳ๲େͳ৘ใΛܭࢉ͢ΔӋ໨ʹͳͬͨ
27. ؀ڥ •؀ڥʹ͸ແݶʹ৘ใ͕ଘࡏ͢Δ •ώτͷ஌֮ •ώτ͸؀ڥͷ৘ใΛͱͯ΋͏·͘ೝ͍ࣝͯ͠Δ •ώτ͕ϑϨʔϜ໰୊ͰࠔΔ͜ͱ͸͋·Γͳ͍
28. ࣮ݧΛ͠·͢
29. ࣮ݧ นʹ޲ཱ͔͍ͬͯͬͯͩ͘͞
30. ࣮ݧ ӈ͏ͰΛ৳͹ͨ͠ͱ͖ɼ นʹதࢦ͕৮ΕΔ͘Β͍ͷ ڑ཭ʹཱ͍ͬͯͩ͘͞
31. ࣮ݧ ͪΐ͏Ͳதࢦͷઌ͕ นʹ৮ΕΔ͔৮Εͳ͍͔ͷ ڑ཭ʹཱͯ·͔ͨ͠ʁ
32. ࣮ݧ ӈ͏ͰΛ৳͹ͨ͠ͱ͖ นʹखͷͻΒ͕ͬͭ͘͘ ڑ཭ʹཱ͍ͬͯͩ͘͞
33. ࣮ݧ ମ͕܏͘͜ͱͳ͘ खͷͻΒ͕΂ͬͨΓͱ นʹ͖ͭ·͔ͨ͠ʁ
34. ࣮ݧ ΋͏Ұ౓ ෦԰Λ҉ͯ͘͠
35. ࣮ݧ͓ΘΓ
36. ώτͷ஌֮ •ಈ෺ͷ஌֮͸ͱͯ΋༏Ε͍ͯΔ •௒ਓతʹࢥ͑Δಈ࡞Ͱ΋ʮୈ࿡ײʯͱ͍͏ ᐆດͳݴ༿Ͱย෇͚ͯ͸͍͚ͳ͍ •໡ਓͷۭؒ೺Ѳೳྗ •ϓϩεϙʔπબखͷ਎ମೳྗ •Իײ
37. ώτͷ஌֮ •μΠφϛοΫɾλον •ݟ͑ͳ͍๮ͷ௕͞Λ ஌֮͢Δ •ݟ͑ͳ͍๮ͷܗΛ ஌֮͢Δ
38. ώτͷ஌֮ •ಈ෺͸؀ڥΛແҙࣝʹ஌֮͠ɼ ͦͷ৘ใΛ஝ੵ͍ͯ͠Δ •஝ੵͨ͠৘ใΛແ֮ࣗͷ͏ͪʹ ؀ڥʹରͯ͠ద༻͍ͯ͠Δ •ಈ෺ʢώτʣ͸ϑϨʔϜ໰୊ʹ ௚໘͠ͳ͍
39. Ξϑ Υ ʔμϯ ε affordance
40. ΞϑΥʔμϯε •ಈ෺ͱ؀ڥͱͷؔΘΓΛ ߟ͑ͯΈΔ
41. Ҝࢠ͸ਓ͕࠲Δ΋ͷ ஍໘͸ਓཱ͕ͭʗาߦ͢Δ΋ͷ ΞϑΥʔμϯε
42. Ҝࢠ͸ਓ͕࠲Δ΋ͷ ஍໘͸ਓཱ͕ͭʗาߦ͢Δ΋ͷ ΞϑΥʔμϯε
43. Ҝࢠ͸ਓ͕࠲Δ΋ͷ ஍໘͸ਓཱ͕ͭʗาߦ͢Δ΋ͷ ΞϑΥʔμϯε Ҝࢠ͸ਓʹ࠲Δ͜ͱΛఏڙ͢Δ ஍໘͸ਓʹཱͭʗาߦ͢Δ͜ͱΛఏڙ͢Δ
44. afford ʦଞಈʧʙΛ༩͑ΔɼʙΛ΋ͨΒ͢ɼʙ͕Ͱ͖Δ
45. Ҝࢠ͸ਓ͕࠲Δ΋ͷ ஍໘͸ਓཱ͕ͭʗาߦ͢Δ΋ͷ ΞϑΥʔμϯε Ҝࢠ͸ਓʹ࠲Δ͜ͱΛఏڙ͢Δ ஍໘͸ਓʹཱͭʗาߦ͢Δ͜ͱΛఏڙ͢Δ
46. Ҝࢠ͸ਓ͕࠲Δ΋ͷ ஍໘͸ਓཱ͕ͭʗาߦ͢Δ΋ͷ ΞϑΥʔμϯε Ҝࢠ͸ਓʹ࠲Δ͜ͱΛΞϑΥʔυ͢Δ ஍໘͸ਓʹཱͭʗาߦ͢Δ͜ͱΛΞϑΥʔυ ͢Δ
47. affordance B⒎PSE
    Λ໊ࢺԽʗ+BNFT
    +
    (JCTPO
    ʹΑΔ଄ޠ
48. affordance ʦ໊ʧ؀ڥ͕ಈ෺ʹఏڙ͢Δҙຯ΍Ձ஋
49. ΞϑΥʔμϯε •υΞϊϒΛ... •ѲΔ •ճ͢ •Լ͛Δ •औͬखΛ... •ѲΔ •ԡ͢ •Ҿ͘ •εϥΠυ͢Δ •υΞΛ... •ԡ͢ •ϊοΫ͢Δ •υΞͷ΋ͭΞϑΥʔμϯε
54. ΞϑΥʔμϯε •υΞͷ΋ͭΞϑΥʔμϯε •υΞϊϒΛ... •ѲΔ •ճ͢ •Լ͛Δ •औͬखΛ... •ѲΔ •ԡ͢ •Ҿ͘ •εϥΠυ͢Δ •υΞΛ... •ԡ͢ •ϊοΫ͢Δ
55. ΞϑΥʔμϯε •υΞͷ΋ͭΞϑΥʔμϯε ͜ΕΒͷߦಈΛΞϑΥʔυ͍ͯ͠Δ͔ʁ ͍ͯ͠Δ΋ͷͱͦ͏Ͱͳ͍΋ͷҧ͍͸ʁ •υΞϊϒΛ... •ѲΔ •ճ͢ •Լ͛Δ •औͬखΛ... •ѲΔ •ԡ͢ •Ҿ͘ •εϥΠυ͢Δ •υΞΛ... •ԡ͢ •ϊοΫ͢Δ
56. ʹ ͗ Δ
58. ͠ ΅ Δ
62. ΠϯλϥΫς Ο ϒ σβΠϯ interactive design
63. ରԠ෇͚ͱϑΟʔυόοΫ •൓Ԡ͢Δ΋ͷͱεΠονͳͲ͕ ҰରҰʹରԠ͍ͯ͠Δ •ߦಈʹର͢Δద੾ͳ ൓Ԡ͕͋Δ
64. ରԠ෇͚ •ΩʔϘʔυ •ΧʔιϧΩʔ •ϑΝϯΫγϣϯΩʔ •ंͷ΢ΟϯΧʔ •֎ं
65. ରԠ෇্͚͕ख͍͍ͬͯ͘ͳ͍ྫ
66. ରԠ෇͚
67. ରԠ෇͚
68. ରԠ෇͚ http://www.google.co.jp/search?q=Ψείϯϩ &hl=ja&prmd=imvns&source=lnms&tbm=isch&ei=cT3mTvnjL67BiQf0lKi2BQ&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CEUQ_ AUoAQ&biw=1366&bih=768 •άϦϧͷ఺ՐεΠον •ܗঢ় •഑ஔ৔ॴ
69. ରԠ෇͚ http://www.google.co.jp/search?q=Ψείϯϩ &hl=ja&prmd=imvns&source=lnms&tbm=isch&ei=cT3mTvnjL67BiQf0lKi2BQ&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CEUQ_ AUoAQ&biw=1366&bih=768 •άϦϧͷ఺ՐεΠον •ܗঢ় •഑ஔ৔ॴ ؒҧ͑΍͍͢σβΠϯͳͷʹ ֤ࣾڞ௨ͷ഑ஔ ͳͥ௕೥มߋ͞Εͳ͍ͷ͔ σϑΝΫτɾελϯμʔυ͸ ౿ऻ͢΂͖ͳͷ͔ʁ
70. ϑΟʔυόοΫ
71. ϑΟʔυόοΫ •ి࿩ͷϑΟʔυόοΫ •μΠϠϧϓογϡԻ •ίʔϧԻ •อཹதͷԻָ •௨࿩ऴྃ࣌ͷԻ
72. ϑΟʔυόοΫ •λονσόΠε ϑΟʔνϟϑΥϯͱ εϚʔτϑΥϯͱͷ ϑΟʔυόοΫͷҧ͍͸ʁ
73. ϑΟʔυόοΫ •λονσόΠε ϑΟʔνϟϑΥϯͱ εϚʔτϑΥϯͱͷ ϑΟʔυόοΫͷҧ͍͸ʁ ࢲͨͪͷߟ͑Δ΂͖՝୊
74. ϝϯλϧϞσϧ •ͳͥɼରԠ෇͚΍ϑΟʔυόοΫ͕େ੾ͳͷ͔ •ώτ͸ࣗ෼͕؍࡯ͨ͜͠ͱΛઆ໌͢Δ ϝϯλϧϞσϧΛߏங͢Δ •։ൃऀͷϝϯλϧϞσϧͱɼ ϢʔβͷϝϯλϧϞσϧͱͷဃ཭ ରԠ෇͚ɼద੾ͳϑΟʔυόοΫ͸ɼ ΑΓྑ͍ϝϯλϧϞσϧͷߏஙʹ໾ཱͭ
75. Ϣʔβ ɾ Π ϯλ ϑ ΣΠ ε user interface
76. User Interface • 1987 • Knowledge Navigator ʮి೴ൿॻʯ
77. http://video.google.com/videoplay?docid=-5144094928842683632
78. User Interface • 1987, Apple Inc. • Knowledge Navigator ʮి೴ൿॻʯ • Apple ͕໨ࢦ͢࠷ऴతͳΠϯλϑΣΠε
79. User Interface • 2011, Apple Inc. • siri • Ͳ͜·Ͱ͍͍ۙͮͯΔ͔
80. User Interface • 1996, B. Reeves, C. Nass, The Media EquationʢϝσΟΞͷ౳ࣜʣ • “Media = Real Life” • ਓؒ͸ΠϯλϥΫγϣϯ͢ΔϝσΟΞΛ ਓ֨Λ࣋ͭର৅ͱͯ͠ѻ͏܏޲͕͋Δ
81. σβΠϯ design
82. ࠷ޙʹ •ʮdesign ͱ͸Կ͔ʁʯ Λߟ͑Δ •σβΠϯ ≠ design •ݸਓͷߟ͑Λ࣋ͭ
83. ࠷ޙʹ • design ͱ͸Կ͔ʁʢݸਓతͳҙݟʣ • ৘ใΛ੔ཧ͢Δ͜ͱɽ • ຊ୨ͷ੔ཧ → ຊͷฒͼํΛσβΠϯ͢Δ • ίʔυͷϦϑΝΫλϦϯά → ίʔυͷઃܭ (design) Λݟ௚͢ • ಄ͷதΛ੔ཧ͢Δ → brain storming
84. design ͱ͸Կ͔ ߟ͑ͯΈ·͠ΐ͏
85. ऴ
86. ࢀߟจݙ • D. Norman, ୭ͷͨΊͷσβΠϯʁ • J. J. Gibson, ੜଶֶతࢹ֮࿦ • ࠤʑ໦ਖ਼ਓ, ΞϑΥʔμϯε ― ৽͍͠ೝ஌ͷཧ࿦ • ޙ౻෢, ࠤʑ໦ਖ਼ਓ, ਂᖒ௚ਓ, σβΠϯͷੜଶֶ • B. Reeves, C. Nass, ϝσΟΞͷ౳ࣜ • ࡔຊو࢙, IAγϯΩϯά