Design Talk#3 Information Architecture 2/2

Design Talk#3 @AnyPay, Inc.
"Information Architecture 2/2 ~ そのカイゼンはUI変更？IA変更？ ~"

Related Slides:
1/2 https://speakerdeck.com/ikutani41/2

Transcript

1. Information Architecture 2 ~ ʮͦͷΧΠθϯ͸UIมߋʁIAมߋʁʯ ~ @ikutani41 2018/2/21 Design Talk#3
2. લճͷ͓͞Β͍ɿUI/UXσβΠϯ΋ɺੵΈ্͛ɻ ؾ࣋ͪྑ͍ΠϯλϥΫγϣϯ ϒϥϯσΟϯάɾΫϦΤΠςΟϒ ཧղΛଅਐ͢ΔΠϯλϥΫγϣϯ Visual/UI Design Layout, Components ૢ࡞ϑϩʔ IA ίϯηϓτɾτϯϚφ
3. લճͷ͓͞Β͍ɿInformation Architectureʢ৘ใઃܭʣ ▸ ۩ମతͳUI΍άϥϑΟοΫΛߟ͑ΔࡐྉΛ࡞Δ޻ఔ ▸ ʮ΍Γ͍ͨ͜ͱΛ৘ใϨϕϧͰ੔ཧ͢Δ͜ͱʯ ▸ ԿΛ఻͑Δ͔ɺԿΛݟͤΔ͔ ▸ ԿΛͤ͞Δ͔ ▸ ৘ใಉ࢜ͷؔ܎ੑ͸Ͳ͏ͳ͍ͬͯΔ͔ ▸ Groups, Central-Peripherals, General-Examples ▸ Parent-Child, Siblings, Counterparts ▸ PriorityɿԿ͕࠷ॏཁͰɺԿ͕αϒͰɺԿ͕Φϓγϣφϧ͔
4. લճͷ͓͞Β͍ɿ·ͱΊ ▸ IAΛҙࣝͨ͠ϓϩμΫτ࡞Γ ▸ ఏڙՁ஋ΛੵΈ্͛ΔͨΊ ▸ ʮࢥͯͨΜͱͪΌ͏ʯͷޙग़͠ճආ ▸ σβΠφʔɾϊϯσβΠφʔؒͰIAϨϕϧͷձ࿩Λ͠Α͏ ▸ ΑΓຊ࣭తͳ՝୊ղܾ΍Ծઆɾ৘ใͷධՁʹूத ▸ IAͷձ࿩͕Ͱ͖Ε͹ɺϓϩμΫτͮ͘ΓʹࢀՃͰ͖Δ લճͷεϥΠυɿhttps://speakerdeck.com/ikutani41/2
5. Index ▸ σβΠϯͷ࢓ࣄͱIAͷؔ܎ͷ۩ମྫ ▸ ॳظϦϦʔε·Ͱ ▸ ϓϩμΫτͷίΞମݧΛܾΊΔ ▸ IA౷ҰΛͱΓͳ͕Βۤͯ͘͠΋࢈Έͩ͢ ▸ ϦϦʔεޙͷԾઆݕূϑΣʔζ ▸ New Features, ϦϑΝΫλϦϯά ▸ IAɾVDͷԾઆݕূͱམͱ݀͠ ▸ IAσβΠϯۀ຿ͷΞϯνύλʔϯ ▸ IAͱVDͷ޻ఔΛ෼அ͗͢͠Δ ▸ IAͷΞ΢τϓοτ͸WF ▸ ΫΠζܗࣜͰIAͱσβΠϯΛߟ͑Δ
6. ॳظϦϦʔε·Ͱͷ σβΠφʔͷ࢓ࣄͱ͸
7. ίΞମݧΛݕূͯ͠ݻΊΔ ࣌ؒ͸ͳ͍ɻ͔ͩΒIAΛ࢖͏ɻ ▸ ࠷ॏཁͳϢʔβ՝୊ͱղܾΞΠσΟΞΛIAͰఆٛ ▸ Problem-Solutionʹूத͢Δ ▸ ݟͨ໨ʹὃ͞Εͳ͍ ▸ ݟͨ໨ʹૣ͍ஈ֊Ͱ࣌ؒΛ͔͚ͳ͍ʢͲ͏ͤյ͢ʣ ▸ ϓϩτλΠϓ౳Λ࢖͍ɺIAͷݕূɾݟ௚͠Λ࣮ࢪ ▸ ݻ·ͬͨIAʢProblem-SolutionʣΛશମͱڞ༗
8. v1.0ͷۤ೰ʮ࢈Ήۤ͠Έʯ ࢓༷Խɾ࣮૷ϑΣʔζ΋ϦεΫ൑அͷ࿈ଓ ▸ पลྖҬͷIAʹ͍ͭͯɺϦεΫͷߴ͍ҙࢥܾఆ͸ආ͚Δ ▸ ίΞԾઆ͕֎Ε͍ͯΔ͔΋͠Εͳ͍ ▸ ਎ಈ͖͕औΕͳ͘ͳΔͷΛ๷͙ ▸ αʔϏε಺ͰIAͷໃ६͕ൃੜ͠ͳ͍Α͏࢓༷Λ౷੍͢Δ ▸ ࣮૷ஈ֊Ͱ࢓༷ௐ੔͕ൃੜͨ࣌͠ɺIAΛյ͞ͳ͍Α͏౷੍ ▸ ؾΛൈ͘ͱ؆୯ʹյΕΔ → σβΠφ΋։ൃݱ৔ʹೖΔ΂͖ ▸ εϐʔυΛग़͢ʢ஗͍ͱܟԕ͞ΕͯDev͔Β૬ஊདྷͳ͍ʣ ▸ ৽͍͠पล໰୊ͷղܾ vs. ϦϦʔεͯ͠ݕূελʔτ
9. ͦͯ͠ ϦϦʔεޙ
10. ϦϦʔεޙͷσβΠϯۀ຿ͱIA ▸ IA͓ΑͼVDͷԾઆݕূ ▸ New Features ▸ طଘIAͱͷ੔߹ੑΛอͪɺ৽ػೳͷ໾ׂΛIAϨϕϧͰద੾ʹఆٛ ͢Δ ▸ ഁյతͳมߋΛ͢Δࡍ͸खް͘έΞ ▸ ϝϯλϧϞσϧͷҠߦ͕εϜʔζʹਐΉΑ͏ͳIAઃܭΛ৺͕͚ Δ ▸ Ϣʔβίϛϡχέʔγϣϯͷઃܭ ▸ ϦϑΝΫλϦϯάʢ৘ใઃܭͷ่Εɾഁ୼ɾໃ६Λղফ͢Δʣ
11. ʮԾઆݕূʯʹ͸ མͱ͕݀͋͠Δ
12. Ծઆݕূͷམͱ݀͠ ݁Ռͷղऍʹࣦഊ͢Δͱ୆ແ͠ ▸ ϢʔβϑΟʔυόοΫ΍਺஋͕खʹೖΓ·ͨ͠ ▸ ݁ՌΛੜΜͩཧ༝ͷ௥ٻʢAttributionʣ͕伴ΛѲΔ ▸ ྑ͍݁Ռɹˠ IA͕ྑ͍ʁVDs͕ྑ͍͚ͩʁ ▸ ѱ͍݁Ռɹˠ IA͕ѱ͍ʁVDs͕ѱ͍͚ͩʁ ▸ ʮྑ͔ͬͨ/ѱ͔ͬͨʯʮ࣍͸ԿΛ͢Δʯ͕େ͖͘มΘΔ ▸ ૣͱͪΓΛ͠ͳ͍Α͏ʹ
13. Ծઆݕূͷ͜ͱΛߟ͑ͯσβΠϯ͢Δ ▸ Ϣʔβʹఏࣔ͞ΕΔͷ͸UI͚ͩ ▸ IA͸ݟ͑ͳ͍ ▸ ʮVDsʢVisual/UI Design, Interaction, Creative GraphicsʣʯͷӨڹେ ▸ ॳظ͸ಛʹIAݕূʹ஫ྗ͢΂͖ͳͷͰɺඪ४తͳVDʹ͓ͯ͠ ͘ͱ٢ ▸ ݕূՄೳੑΛߟྀͯ͠PDCA͢Δ ▸ ʮԾઆͷݕূ݁ՌΛ֬ఆͤ͞ΔͨΊʯͷमਖ਼͕͋ͬͯ΋͍͍
14. Deep dive: 8ύλʔϯ͋Δ Ϣʔβʹͱͬͯͷਅ࣮͸Ͳͷύλʔϯ͔ ྑ͍݁Ռ IA Good Bad VDs Good A B Bad C D ѱ͍݁Ռ IA Good Bad VDs Good E F Bad G H ɾAͩͱࢥ͍͍ͨ ɾCͳΒ໰୊ͳ͍ʢVDվળ͢Δ͚ͩʣ ɾຊ౰͸BͳͷʹA,Cͱޡೝ͢Δͷ͕࠷ѱ ɾ࣮͸DʢقઅཁҼ΍Ұ࣌త֎෦ཁҼʣͷՄೳੑ ɾF,HͳΒݕূଓ͚Δ͚ͩ ɾຊ౰͸F,HͳͷʹE,Gͱޡೝ͢Δͷ͸ࣗݾਖ਼౰Խ ɾE,G͸DͱಉཁҼɻG͸ஶ͘͠VD͕ѱ͍Մೳੑ΋ ɾFalse-Positive vs False-Negative
15. Index ▸ σβΠϯͷ࢓ࣄͱIAͷؔ܎ͷ۩ମྫ ▸ ॳظϦϦʔε·Ͱ ▸ ϓϩμΫτͷίΞମݧΛܾΊΔ ▸ IA౷ҰΛͱΓͳ͕Βۤͯ͘͠΋࢈Έͩ͢ ▸ ϦϦʔεޙͷԾઆݕূϑΣʔζ ▸ New Features, ϦϑΝΫλϦϯά ▸ IAɾVDͷԾઆݕূͱམͱ݀͠ ▸ IAσβΠϯۀ຿ͷΞϯνύλʔϯ ▸ IAͱVDͷ޻ఔΛ෼அ͗͢͠Δ ▸ IAͷΞ΢τϓοτ͸WF ▸ ΫΠζܗࣜͰIAͱσβΠϯΛߟ͑Δ
16. Ξϯνύλʔϯ ▸ IA͸ԾઆͰ͋Γཧ૝Ͱ͋Δ ▸ ʮݕূՄೳͳܗͰ࣮૷Մೳ͔ʯΛҙࣝ͠Α͏ ▸ ݕূෆՄೳͳԾઆʹͩ͜Θ͍ͬͯͯ΋ҙຯ͸ͳ͍ ▸ ݕূՄೳͳܗͰදݱͰ͖ͳ͍ͳΒIAΛॊೈʹมߋ͢΂͖ ▸ ʮIA͸WFʯ͸ࣄނͷݩ ▸ WF͸͍͔ͭ͘ϏδϡΞϧ৘ใΛ࣋ͬͯ͠·͍ͬͯΔ ▸ WFʹ͋ΔϨΠΞ΢τΛେ͖͘ม͑ΔҊΛ཈੍ͯ͠͠·͏ ▸ ͦͷ··UI,VD͸͓Խহ͢Δ͚ͩʹͳͬͯ͠·͍͕ͪ ▸ ଓ͖͸ͪ͜ΒͷهࣄʢQ3ʣͰɿhttps://note.mu/ikutani41/n/n4b3119aeae8e
17. Index ▸ σβΠϯͷ࢓ࣄͱIAͷؔ܎ͷ۩ମྫ ▸ ॳظϦϦʔε·Ͱ ▸ ϓϩμΫτͷίΞମݧΛܾΊΔ ▸ IA౷ҰΛͱΓͳ͕Βۤͯ͘͠΋࢈Έͩ͢ ▸ ϦϦʔεޙͷԾઆݕূϑΣʔζ ▸ New Features, ϦϑΝΫλϦϯά ▸ IAɾVDͷԾઆݕূͱམͱ݀͠ ▸ IAσβΠϯۀ຿ͷΞϯνύλʔϯ ▸ IAͱVDͷ޻ఔΛ෼அ͗͢͠Δ ▸ IAͷΞ΢τϓοτ͸WF ▸ ΫΠζܗࣜͰIAͱσβΠϯΛߟ͑Δ
18. ໰୊1 ·ͣ͸ͪ͜ΒΛݟ͍ͯͩ͘͞
19. What Designers Think & How to Embody Ideas#1 @ikutani41 2018/1/17
20. σβΠϯLTୈ1ճͷεϥΠυදࢴͰ͢ɻ໰୊ʹؾ෇͖·͔͢ʁ
21. εϥΠυσβΠϯ΋IA͔Βɻɹ- 1/3 - Sequence Number - Incremental - #1, #2, #3… - Title - Required - Variable - Subtitle - Optional - Variable - Author - Const. - Date - Variable - Fixed format
22. εϥΠυσβΠϯ΋IA͔Βɻɹ- 2/3 - Primary - Title - Required - Variable - Subtitle - Optional - Variable - Misc - Sequence Number - Incremental - #1, #2, #3… - Author - Const. - Date - Variable - Fixed format
23. εϥΠυσβΠϯ΋IA͔Βɻɹ- 3/3 - Primary - Title - Required - Variable - Subtitle - Optional - Variable - Secondary - Series name - Sequence Number - Incremental - #1, #2, #3… - Misc - Author - Const. - Date - Variable - Fixed format
24. Information Architecture ~ IAͱ͸ & Կ͕خ͍͠ͷ ~ @ikutani41 2018/1/31 Design Talk#2
25. Before / After - Primary - Title - Required - Variable - Subtitle - Optional - Variable - Secondary - Series name - Sequence Number - Incremental - #1, #2, #3… - Meta info - Author - Const. - Date - Variable - Fixed format
26. ໰୊2 ͜ͷ2ͭͷαʔϏεͷσβΠϯ Կ͕ҧ͏Ͱ͠ΐ͏
27. νϟʔτ: ίΠϯ૬৔ vs Coincheck
28. ৘ใͷཻ౓ ▸ ίΠϯ૬৔ͷํ͕৘ใྔ͕ଟ͘ɺϚʔέοτϦαʔνπʔϧͷϨϕϧײ ▸ औҾྔ ▸ औҾॴ໊ʢෳ਺औҾॴʣ ▸ quoteͷ໌ࣔʢෳ਺ͷquote currencyʣ ▸ ৘ใऩू΢ΟδΣοτͱͯ͠ͷΧελϚΠζੑ͕த৺ ▸ products௥Ճ, Ξϥʔτ ▸ ίΠϯνΣοΫ͸৘ใऩूΑΓചങΛॏࢹͨ͠ΞϓϦ ▸ ৘ใྔ͸ଟ͘ͳ͍ͨΊΧελϚΠζෆཁ ▸ ͦͷ୅ΘΓɺνϟʔτͷൺֱ͕͠΍͍͢ಋઢʹͳ͍ͬͯΔ
29. Navigations: Parent - Childs
30. Navigations: Siblings x 2
31. @ikutani41 2018/2/21 Thank you! Information Architecture 2 ~ ʮͦͷΧΠθϯ͸UIมߋʁIAมߋʁʯ ~
32. Twitter & note @ikutani41 ྑ͔ͬͨΒಡΜͰͶ