FFTT #359 UIとUXの関係

株式会社フィードフォースの社内勉強会で使用した資料です。

Transcript

1. UI UX 2019.06.14 FFTT #359 The Relationship between UI and UX ͱ ͷؔ܎
2. ৿Ԭྎଠ Designer@EC Booster σβΠϯࣄ຿ॴۈ຿ɻ ອըͷϩΰͱ͔ࡶࢽ಺ͷهࣄϖʔδ࡞ͬͨΓɺࡶ༻ͨ͠Γɻ ອըͷσβΠφʔ ࣄۀձࣾۈ຿ɻ ອըͷσβΠϯ΍Δ͸͕ͣؾ͚ͮ͹ΞϓϦͷσβΠϯ΋ɻ ອը + ອըΞϓϦͷσβΠφʔ 2018.08 Feedforce ೖࣾɻ EC Booster ͷ͋Ε͜ΕΛσβΠϯ͢Δਓɻ SaaS ͷσβΠφʔ Now
3. ࠓ೔͢Δ࿩ UI ͱ UX ͷҧ͍ UI ͱ UX ͷؔ܎ ৿Ԭͷղऍ ͠ͳ͍࿩ ྑ͍ UI Λ࡞Δํ๏ ྑ͍ UX Λ࡞Δํ๏ ͱͯ΋ਖ਼֬ͳ࿩
4. UI/UX
   Α͘ݟ͔͚Δදه
6. ͦ΋ͦ΋ UI ͱ͸ User Interface ϢʔβʔͱγεςϜͷ઀఺ CUI GUI VUI etc... ݱࡏ͸େମͷ৔߹ GUI Λࢦ͢
7. User eXperience γεςϜΛ௨ͨ͡ܦݧ γεςϜࣗମʹ௚઀৮Ε͍ͯͳ͍࣌΋แׅ͍ͯ͠Δ ͦ΋ͦ΋ UX ͱ͸
8. UI ͱ UX ͷྺ࢙
9. 1970s ύϩΞϧ τݚڀॴͰ࢑ఆ Dynabook ஀ੜ 1983 Apple ͕ Lisa Λൃചʢॳͷ GUI ؀ڥͷ PCʣ 1984 Apple ͕ॳ୅ Macintosh Λൃച 1990s Apple ͕ Don Noman ཰͍Δ User Experience Architect's Office Λ૑ઃ ʢ͓ͦΒ͘ॳΊͯ User Experience ͱ͍͏୯ޠ͕ొ৔ʣ ࢑ఆ Dynabook ͷεΫϦʔϯγϣ ο τ The Smalltalk-76 Programming System Design and Implementation
10. Mac OS8 άϥϑΟΧϧ Ϣʔβ ΠϯλϑΣʔε͕Ұൠతʹͳͬͨ ࠓɺ͞Βʹ࢖͍΍͘͢ɺਓͱίϯϐϡʔλ͕ࣗવʹ͖ͭ ͋͑ΔΑ͏ʹɺΞοϓϧ͕औΓೖΕͨͷ͕ʮϢʔβ Τ ΫεϖϦΤϯεʯ ɻ ͦΕ͸ʮάϥϑΟΧϧ Ϣʔβ ΠϯλϑΣʔεʯΛ͞Β ʹҰาਐΊͨߟ͑ํɻͨͩ࢖͍΍͍͚ͩ͢Ͱͳ͘ɺ Ϣʔ β͕ίϯϐϡʔλͷલʹ࠱ͬͯա࣌ؒ͢͝ΛΑΓΑ͍΋ ͷʹ͠Α͏ͱ͍͏ɺҰาਐΜͩൃ૝ɻ Mac OS8 ೔ຊޠϦʔϑϨο τΑΓ
11. ݩʑ͸ UI ͷԆ௕ઢ্ʹ UX ͕͋ͬͨʜʜʁ
13. UX നॻ
14. UX നॻͱ͸ 2010 ೥ 9 ݄ 15 ʙ 18 ೔ʹ υΠπͷ Dagstul ͰߦΘΕͨ UX ηϛφʔͷ੒ՌΛ·ͱΊͨ΋ͷͰ͢ɻ ༷ʑͳղऍͰޠΒΕ͍ͯͨ UX ʹ͍ͭͯɺ ڞ௨ͷೝࣝΛܗ੒͢΂͘ɺઐ໳Ոʢݚڀऀɺ࣮຿Ոʣ30 ໊͕ ʮUX ͷ֓೦ʯʹ͍ͭͯٞ࿦͠·ͨ͠ɻ ˙ެ։ࢿྉ - hcdvalue ʢhttp://site.hcdvalue.org/docsʣΑΓ
15. UX ͷظؒ ༧ظత UX ར༻લ ར༻த ར༻ޙ ར༻࣌ؒશମ ମݧΛ૝૾͢Δ Ұ࣌త UX ମݧ͢Δ Τϐιʔ υత UX ͋ΔମݧΛ ಺ল͢Δ ྦྷੵత UX ଟछଟ༷ͳ ར༻ظؒΛ ಺ল͢Δ
16. UX ͷظؒ ྦྷੵత UX Τϐιʔ υత UX Ұ࣌త UX
17. Ұ࣌త UX ΠϯλϥΫγϣϯதʹײ͡Δ ײ৘ͷಛఆͷมԽ
18. UI ͱ͸Ұ࣌త UX ͷ ҰཁૉͰ͋Δͱݴ͑Δ
19. UX UI ࣾձతͳจ຺ ଞͷϢʔβʔ ଞͷγεςϜ ؀ڥ γεςϜ ΠϯλϥΫγϣϯ Ϣʔβʔ
20. Ұํ
21. ֵ৽తͳ UI ͕ ৽͍͠ UX Λ࡞Δ͜ͱ΋
22. Twitter λΠϜϥΠϯͱ͍͏ UI ͕ ৽͍͠ SNS ͷମݧΛ࡞ͬͨ
23. GUI CUIˠGUI ͱ͍͏มԽ͸ ίϯϐϡʔλʔͷମݧΛ Ұมͤͨ͞
24. ·ͱΊ
25. ·ͱΊ UI ͱ͸ UX ͷҰ෦ͷͦͷ·ͨҰཁૉͰ͋Δ ΋ͪΖΜ UI ͕ UX ʹٴ΅͢Өڹ͸େ͖͍ ֵ৽తͳ UI ͸ UX ΛҰมͤ͞Δ͜ͱ΋
26. ͓͠·͍