Design Talk#3 Information Architecture 2/2

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

Fbaecd1b9921790b9a3ea9f209da4090?s=128

Yutaro Ikutani | MNTSQ, Ltd.

February 21, 2018
Tweet

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 ྑ͔ͬͨΒಡΜͰͶ