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

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

Transcript

1. @yasulab σβΠχϯάɾΠϯλʔϑΣΠε(2e)ษڧձ ୈ̎ճɹୈ̎ষ 12೥6݄12೔Ր༵೔
2. @yasulab σβΠχϯάɾΠϯλʔϑΣΠε(2e)ษڧձ ୈ̎ճɹୈ̎ষ ྑ͚Ε͹ɺ ຊΛങͬͯͶʂ 12೥6݄12೔Ր༵೔
3. ஫ҙࣄ߲ • ൃදऀ ʹ σβΠϯΛษڧ͍ͨ͠ΤϯδχΞ • ࣭໰͸UstͰ΋ޱ಄Ͱ΋͍ͭͰ΋׻ܴʂ • ଈ࠲ʹճ౴Ͱ͖ͳ͍৔߹͸॓୊తͳײ͡Ͱɻ • ʮͦΕҧ͏Μ͡ΌͶʁʯͱײͨ͡ΒੋඇࢦఠΛɻ • ษڧձͷܦҢɾεέδϡʔϧ͸ͪ͜Β͔Β↓ http://www.facebook.com/groups/di2e.study/ 12೥6݄12೔Ր༵೔
4. ஫ҙࣄ߲ • 50෼͙Β͍ܦͬͨΒڭ͑ͯԼ͍͞. • 50෼Λա͗Δͱൃදऀ͕ ຾͘ͳΓ·͢ɻ 12೥6݄12೔Ր༵೔
5. લճͷ෮श • Ϣʔβͷߦಈʹ͍ͭͯ. • ྑ͍ID͸Ϣʔβͷཧղ͔Β. •Ϣʔβ͸ԿΛ๬ΜͰ͍Δͷ͔ʁ→Ϣʔβௐࠪ 12೥6݄12೔Ր༵೔
6. ิ଍1/2ɿϢʔβௐࠪ • 1. ௚઀؍࡯ • 2. Case Studyɹ • 3. Ξϯέʔτௐࠪ • 4. ϖϧιφ ※ଞʹ΋৭ʑ͋ΔΑ͏Ͱ͕͢ɺຊ୊Ͱ͸ͳ͍ͷͰলུ. ৄ͘͠͸ʮThe Lean StartupʯͷMeasure౳Λࢀߟʹ. 12೥6݄12೔Ր༵೔
7. લճͷ෮श • Ϣʔβͷߦಈʹ͍ͭͯ. • ྑ͍ID͸Ϣʔβͷཧղ͔Β. •Ϣʔβ͸ԿΛ๬ΜͰ͍Δͷ͔ʁ→Ϣʔβௐࠪ 12೥6݄12೔Ր༵೔
8. લճͷ෮श • Ϣʔβͷߦಈʹ͍ͭͯ. • ྑ͍ID͸Ϣʔβͷཧղ͔Β. •Ϣʔβ͸ԿΛ๬ΜͰ͍Δͷ͔ʁ→Ϣʔβௐࠪ • Ϣʔβߦಈͷύλʔϯ → ద੾ͳ৘ใߏ଄ͷબఆ •యܕతͳɺ12छྨͷϢʔβߦಈύλʔϯ 12೥6݄12೔Ր༵೔
9. ิ଍2/2ɿϢʔβߦಈύλʔϯ • 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 12೥6݄12೔Ր༵೔
10. ࠓ೔ͷ֓ཁ • Ϣʔβͷߦಈʹ͍ͭͯ. • ྑ͍ID͸Ϣʔβͷཧղ͔Β. • Ϣʔβ͸ԿΛ๬ΜͰ͍Δͷ͔ʁ→Ϣʔβௐࠪ • Ϣʔβߦಈͷύλʔϯ → ద੾ͳ৘ใߏ଄ͷબఆ • యܕతͳɺ12छྨͷϢʔβߦಈύλʔϯ 12೥6݄12೔Ր༵೔
11. ࠓ೔ͷ֓ཁ 1. ద੾ͳ৘ใߏ଄ͱ͸ʁ ɹ↓ɹ 2. ৘ใߏ଄ʹԊͬͨAppͷύλʔϯͱ͸ʁ 12೥6݄12೔Ր༵೔
12. ུޠղઆू •ID: Interface Design •SW: Software •IA: Information Architecture 12೥6݄12೔Ր༵೔
13. ͜Ε·Ͱͷ͋Β͢͡ • 1. Ϣʔβௐࠪͨ͠. • 2. ౰ͯ͸·ΔϢʔβߦಈʢ໨ඪʣ΋େମ೺Ѳͨ͠. • 3. Ͱɺ࣍͸Ͳ͏͢Δͷʁʁʁ 12೥6݄12೔Ր༵೔
14. ΠϯλʔϑΣΠεͷεέον͸ةݥ͔΋. ɹ↓ɹ ߟ͑ํ͕ݶఆ͞Εͯ͠·͏ ɹ↓ɹ ΑΓॊೈͳߟ͑ํΛଅ࢟͢੎Λอͭ 12೥6݄12೔Ր༵೔
15. ʢֶज़తʹʣΑΓॊೈͳߟ͑ํΛଅ࢟͢੎ ɹ| |ɹ σʔλʗλεΫͷ໘͔Βߟ͑Δ 12೥6݄12೔Ր༵೔
16. ྫ͑͹ • ͲΜͳΦϒδΣΫτΛݟ͍ͤͯΔͷ͔ʁ • ͲͷΑ͏ʹ෼ྨɾ੔ཧ͞Ε͍ͯΔͷ͔ʁ • Ͳ͏ॲཧ͞ΕΔඞཁ͕͋Δͷ͔ʁ ɹ↓ɹ ͜ͷ؍఺͔ΒΈΔͱ Կ௨Γͷํ๏ͰσβΠϯͰ͖Δ͔ߟ͑Δͱ͔. 12೥6݄12೔Ր༵೔
17. ྫ͑͹ • ͲΜͳΦϒδΣΫτΛݟ͍ͤͯΔͷ͔ʁ • ͲͷΑ͏ʹ෼ྨɾ੔ཧ͞Ε͍ͯΔͷ͔ʁ • Ͳ͏ॲཧ͞ΕΔඞཁ͕͋Δͷ͔ʁ ॊೈͳߟ͑ํ ↑ ɹ↓ɹ ͜ͷ؍఺͔ΒΈΔͱ Կ௨Γͷํ๏ͰσβΠϯͰ͖Δ͔ߟ͑Δͱ͔. 12೥6݄12೔Ր༵೔
18. Ͱɺ࢟੎͸͍͍͚Ͳɺ ͦΕͰ۩ମతʹͲ͏ߟ͑Δͷʁ ɹ↓ɹ Information Architecture 12೥6݄12೔Ր༵೔
19. Information Architecture • ৘ใΛମܥԽ͢Δٕ๏. • ֤໾ׂΛ্ҐϨϕϧ͔Βॱʑʹߟ͍͑ͯ͘ํ๏. • ্ҐϨϕϧɿDesktop, (rich) website, or Mobile? • e.g. Rich website = GmailͷϝΠϯը໘ • ԼҐϨϕϧɿ̍ϖʔδ͋ͨΓͷ໾ׂ • ͱΓ͋͑ͣɼ੩తͳϖʔδͷ໾ׂͰߟ͑Δ. 12೥6݄12೔Ր༵೔
20. Information Architecture • ͲΜͳ໾ׂ͕͋Δͷʁ • 1. ୯Ұͷ߲໨Λࣔͨ͢Ί. • 2. ෳ਺ͷ߲໨ͷू߹Λࣔͨ͢Ί. • 3. Կ͔Λ࡞੒͢ΔπʔϧΛఏڙ͢ΔͨΊ. • 4. ୯ҰͷλεΫΛࢧԉ͢ΔͨΊ. •໾ׂ → Guild (composed of DI patterns) 12೥6݄12೔Ր༵೔
21. 1. ୯Ұͷ߲໨Λࣔͨ͢Ί • ୯Ұͷίϯςϯπͷදࣔɾ࠶ੜ͚ͩͰɺ ଞʹ৘ใΛࣔ͢ඞཁ͕ແ͍৔߹. • ૬ੑͷྑ͍ Guild ྫ: • Alternative Views (ch.2) • Many Workspaces (ch.2) • Deep-linked State (ch. 3) • Sharing Widget (ch. 9) 12೥6݄12೔Ր༵೔
22. 2. ෳ਺ͷ߲໨ͷू߹Λࣔͨ͢Ί. • e.g. List, menu, grid images, search result, table, tree, ...ɹ • ૬ੑͷྑ͍ Guild ྫ: • Feature, Search, and Browse • News Stream • Picture Manager (ch. 5) • ૊Έ߹Θͤ΋Մೳ (ch. 5) • (Thumb. Grid + Pagination) w/ Two-Panel Selector 12೥6݄12೔Ր༵೔
23. 3. Կ͔Λ࡞੒͢ΔπʔϧΛ ఏڙ͢ΔͨΊ. • ੍࡞ʗฤूπʔϧܥͷ͜ͱ. • MS Word/Excel/PP, photoshop, illustrator, InDesign, ...ɹ • ૬ੑͷྑ͍ Guild ྫ: • Canvas Plus Palette • Many Workspaces • Alternative Views • Input Hints (ch. 8) 12೥6݄12೔Ր༵೔
24. 4. ୯ҰͷλεΫΛࢧԉ͢ΔͨΊ • ✗ Կ͔ΛݟͤͨΓɺ࡞ͬͨΓ͢Δ࡞ۀʢ໨ඪʣ. ✓ ໨ඪΛୡ੒͢ΔͨΊʹඞཁ͔ͭϜμͳ࡞ۀ. • Login, signup, post, print, upload, buy now, setting, ...ɹ • ૬ੑͷྑ͍ Guild ྫ: • Wizard • Settings Editor 12೥6݄12೔Ր༵೔
25. ←͜͜·Ͱલஔ͖ ɹɹ͔͜͜Β͕ຊ୊→ 12೥6݄12೔Ր༵೔
26. ୯Ұϖʔδͷ໾ׂ ɹ↓ɹ ɹGuildɹ ɹɹ↓ɹɹ DI Patterns 12೥6݄12೔Ր༵೔
27. ୯Ұϖʔδͷ໾ׂ ɹ↓ɹ ɹGuildɹ ɹɹ↓ɹɹ DI Patterns ←ࠓίί 12೥6݄12೔Ր༵೔
28. ྫ͑͹ 12೥6݄12೔Ր༵೔
29. “ෳ਺ͷ߲໨ͷू߹Λࣔͨ͢Ί” ɹ↓ɹ ɹPicture Manager (ch. 5)ɹ ɹ↓ɹ two-panel selector, one-window drilldown, list inlay, thumbnail grid, carousel, row striping, pagination, jump to item, alphabet scroller, cascading lists, tree table, new-item row, ... ద੾ͳ৘ใߏ଄ Λ૊ཱͯΔͨΊͷ෦඼ 12೥6݄12೔Ր༵೔
30. ͱ͍͏Θ͚Ͱ, Guild ूΛ ֮͑·͢!! 12೥6݄12೔Ր༵೔
31. Guild ू 1. Feature, Search, and Browse 2. News Stream 3. Picture Manager 4. Dashboard 5. Canvas Plus Palette 6. Wizard 7. Settings Editor 8. Alternative Views 9. Many Workspaces 10.Multi-Level Help 12೥6݄12೔Ր༵೔
32. 1. Feature, Search, and Browse • ၆ᛌ͢Δ༻. • “ϢʔβΛ௼Δ” ࢓ֻ͚Λ࡞Δ • Կ͕஌Γ͍ͨ ͷͩΖ͏͔ʁ 12೥6݄12೔Ր༵೔
33. 2. News Stream • ࠷৽Λ௥͍͍ͨਓ༻. • ৘ใ→୯ҰετϦʔϜ • w/ Many Workspace: • TweetDeck • what, who, when, and where. 12೥6݄12೔Ր༵೔
34. 3. Picture Manager • ը૾ɾಈըܥͷ߲໨Λ؅ཧ͢ΔͨΊ. • List/Collection, Private/Public, and Web/Desktop. • a • ୯Ұ߲໨ͷදࣔ Thumbnail Grid 12೥6݄12೔Ր༵೔
35. 4. Dashboard • ϞχλϦϯά༻ • ৘ใີ౓ͷߴ͍, ࠷৽ͷ୯Ұϖʔδ • ฤूऀʹΑΔ ৘ใͷऔࣺબ୒͕ ͱͯ΋ॏཁ. 12೥6݄12೔Ր༵೔
36. 5. Canvas Plus Palette • ࡞੒ɾ ฤू༻ • Ծ૝ͷ Palette • Icon ↑ɹ | |ɹ ೝࣝ཰ ↑ 12೥6݄12೔Ր༵೔
37. 6. Wizard • ϢʔβͷλεΫୡ੒ͷͨΊͷ࠷ળͳํ๏Λɺ ϢʔβΑΓ΋UIσβΠφͷํ͕஌ͬͯΔ৔߹(ͷΈ) • cf. ۭߓશମͷߏ଄೺Ѳ͢Δ <<< ඪࣝΛͨͲΔ • ্ڃϢʔβ͸ʮ੍໿→ځ۶→ෆຬʯͱײ͡Δ͔΋... 12೥6݄12೔Ր༵೔
38. 7. Settings Editor • Կ͔ͷઃఆΛมߋ͢ΔͨΊ. • ໨౰ͯͷϞϊΛݟ͚ͭ΍͍͢ܗͰఏڙ→ৄࡉ • 12೥6݄12೔Ր༵೔
39. 8. Alternative Views • ୯ҰͷݟͤํͰ͸ɺཁ͕݅ຬͨͤͳ͍৔߹༻. • e.g. Explorer/Finder: Thumb. Grid, Tree, Cascading, ... • 12೥6݄12೔Ր༵೔
40. 9. Many Workspaces • ෳ਺ͷΦϒδΣΫτΛฒ΂ͯ഑ஔɾදࣔ͢Δ༻ • “ϚϧνλεΫ͸ਓͷৗ...” p. 68 • ۠੾ΓํɿTab, Windows, Panel, Separated windows • 12೥6݄12೔Ր༵೔
41. 10. Multi-Level Help • ଟछଟ༷ͳ ”Need help.” ʹରԠ͢ΔͨΊͷGuild. • e.g. Input hint, Tool dip, Guide tour, Community, ... • 12೥6݄12೔Ր༵೔
42. Ҏ্. 12೥6݄12೔Ր༵೔
43. Guild ू 1. Feature, Search, and Browse 2. News Stream 3. Picture Manager 4. Dashboard 5. Canvas Plus Palette 6. Wizard 7. Settings Editor 8. Alternative Views 9. Many Workspaces 10.Multi-Level Help 12೥6݄12೔Ր༵೔
44. ୯Ұϖʔδͷ໾ׂ ɹ↓ɹ ɹGuildɹ ɹɹ↓ɹɹ DI Patterns ࠓ೔΍ͬͨͱ͜Ζ 12೥6݄12೔Ր༵೔
45. ୯Ұϖʔδͷ໾ׂ ɹ↓ɹ ɹGuildɹ ɹɹ↓ɹɹ DI Patterns ࣍ষҎ߱ͷ಺༰ 12೥6݄12೔Ր༵೔
46. ࣍ষҎ߱͸ɺ֤Guildͱ ͦΕΛߏ੒͢ΔDI Patterns ʹ͍ͭͯͷৄղʹͳΓ·͢. 12೥6݄12೔Ր༵೔
47. ࠓ೔ͷ·ͱΊ • 1. ద੾ͳ৘ใߏ଄ͱ͸ʁ • Information Architectureɿ্Ґ͔ΒԼҐ΁. • ࠷ऴతʹɺ୯Ұͷϖʔδͷ໾ׂΛߟ͑Δ. • ୯Ұදࣔ, ෳ਺දࣔ, ࡞ۀɾ؅ཧ, ඞཁͳϜμ • 2. ৘ใߏ଄ʹԊͬͨAppͷύλʔϯͱ͸ʁ 12೥6݄12೔Ր༵೔
48. @yasulab ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠. ୈ̎ճɹୈ̎ষ 12೥6݄12೔Ր༵೔
49. ࣍ճ͸Ͳ͜΍Γ·͢ʁ 1. Ϣʔβͷߦಈ 2. ίϯςϯπΛ੔ཧ͢Δ 3. ಈ͖ճΔ 4. ϖʔδΛߏ੒͢Δ 5. ϦετͰදݱ͢Δ 6. ࣄΛߦ͏ 7. ෳ߹తͳDataΛදࣔ͢Δ 8. ϢʔβͷೖྗΛड͚औΔ 9. Social Mediaͷར༻ 10.ϞόΠϧ΁ͷରԠ 11.Α͍ݟͨ໨ʹ͢Δ 12.ଞͷࢀߟࣄྫΛ୳͢ͱ͔. 12೥6݄12೔Ր༵೔
50. ৄࡉ͸ͪ͜Β͔Β http://www.facebook.com/groups/di2e.study/ 12೥6݄12೔Ր༵೔