Upgrade to Pro — share decks privately, control downloads, hide ads and more …

使いやすいユーザーインターフェースのための7つの原則(2010年作成)

 使いやすいユーザーインターフェースのための7つの原則(2010年作成)

使いやすいユーザーインターフェースとは何かを説明するために、ドンノーマン博士の7つの原則を実例を交えて説明した資料。2010年当時のものなので、例が古いです。

Wakabayashi, Kenichi

August 14, 2017
Tweet

More Decks by Wakabayashi, Kenichi

Other Decks in Design

Transcript

  1. 2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則  ஶऀɿ%POBME"/PSNBO
 ೝ஌৺ཧֶऀͰΠϯλʔϑΣʔεσβΠϯͷୈҰਓऀ
 աڈʹ"QQMF΍)1ʹࡏ੶͠ϢʔβʔΠϯλʔϑΣʔεઃܭΛࢦಋɻ
 ݱࡏ͸ɺϠίϒɾχʔϧηϯ 8&#αΠτʹ͓͚ΔΠϯλʔϑΣʔεઃܭݚڀͷୈҰਓऀ ͱ ͱ΋ʹϊʔϚϯɾχʔϧηϯɾάϧʔϓΛઃཱ͠ɺϢʔβϏϦςΟʹؔ͢ΔίϯαϧςΟϯά

    ΍ηϛφʔΛߦ͍ͬͯΔɻ ֎քʹ͋Δ஌ࣝͱ಄ͷதʹ͋Δ஌ࣝͷ྆ऀΛར༻͢Δɻ
 ࡞ۀͷߏ଄Λ୯७Խ͢Δɻ
 ର৅Λ໨ʹݟ͑ΔΑ͏ʹͯ͠ɺ࣮ߦͷִͨΓͱධՁͷִͨΓʹڮΛ͔͚Δɻ
 ରԠ෇͚Λਖ਼͘͢͠Δɻ
 ࣗવͷ੍໿΍ਓ޻తͳ੍໿ͳͲͷ੍໿ͷྗΛར༻͢Δ
 Τϥʔʹඋ͑ͨσβΠϯΛ͢Δɻ
 Ҏ্ͷ͢΂͕ͯ͏·͍͔͘ͳ͍࣌ʹ͸ඪ४ԽΛ͢Δ υϯɾϊʔϚϯത͕࢜ఏএ͢Δ
 ࢖͍΍͍͢ϢʔβʔΠϯλʔϑΣʔεͷͨΊͷͭͷݪଇ ্هݪଇͷҙຯʹ͍ͭͯ
 ࣮ྫΛަ͑ͯղઆ
  2. 2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 2 1. 外界にある知識と頭の中にある知識の両者を利⽤する。 ֎քʹ͋Δ஌ࣝͱ͸ɺػث΍ը໘͔ΒಘΒΕΔ৘ใͷ͜ͱɺ಄ͷதʹ͋Δ஌ࣝͱ͸ɺϢʔβʔ͕طʹ஌͍ͬͯΔ৘ใͷ͜ͱɻ
 ͜ΕΒΛޮ཰Α͘ར༻͢Δ͜ͱ͕Ͱ͖Δঢ়ଶʹͳΔͱ࢖͍΍͍͢΋ͷʹͳΔɻ
 ͞Βʹɺ஌ࣝͷ಺໘Խ͕ਐΈɺϢʔβʔ͕֮͑ͨ৘ใ͕૿͑Δͱߋʹૢ࡞Λ଎͘ߦ͑ΔΑ͏ʹͳ͍ͬͯΔ͜ͱ΋ॏཁɻ දࣔ͞ΕΔϝχϡʔ(֎քͷ஌ࣝ) γϣʔτΧοτΛ֮͑ͨϢʔβʔ͸


    ߋʹ଎͘ૢ࡞Ͱ͖ΔΑ͏ʹͳΔɻ PCͰίϐʔ&ϖʔετΛߦ͏৔߹ɺϢʔβʔ͸ϝχϡʔૢ࡞͢Δ͜ͱ͚ͩΛ஌͍ͬͯΕ͹ɺ
 ޙ͸ϝχϡʔʹैͬͯૢ࡞͢Δ͚ͩͰίϐʔ&ϖʔετΛ࣮ߦͰ͖Δɻ
 ͞ΒʹɺγϣʔτΧοτΛ֮͑ͨϢʔβʔ͸ɺߋʹ଎͘ૢ࡞Λߦ͏͜ͱ͕ग़དྷΔɻ දࣔ͞ΕΔϝχϡʔ
 (֎քͷ஌ࣝ) iPhoneͷςϯΩʔೖྗͰ͸ɺΩʔΛ௕ԡ͢͠ΔͱೖྗՄೳͳจࣈ͕දࣔ͞ΕΔ͜ͱΛ ஌ͬͯೖΕ͹ɺදࣔ͞ΕͨจࣈΛબ୒͢Δ͜ͱͰೖྗՄೳͰ͋Δ͜ͱ͕Θ͔Δɻ
 ͞Βʹɺจࣈͷ഑ஔΛ֮͑ͨϢʔβʔ͸ϑϦοΫೖྗͰߋʹ଎͘ೖྗ͢Δ͜ͱ͕ग़དྷ ྫ) PCͷίϐʔ&ϖʔετૢ࡞ ྫ) iPhoneͷςϯΩʔೖྗ จࣈͷ഑ஔΛ֮͑ͨϢʔβʔ͸ϑϦοΫ
 ೖྗͰߋʹ଎͘ૢ࡞Ͱ͖ΔΑ͏ʹͳΔɻ
  3. 2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 3 2. ࡞ۀͷߏ଄Λ୯७Խ͢Δɻ ෳࡶͳ࡞ۀΛ୯७Խ͢Δ͜ͱͰ࢖͍উख͕޲্͢Δɻ୯७Խ͢Δํ๏ͱͯ͠ҎԼͷߟ͑ํ͕͋Δɻ ैདྷͷखॱΛ෼͔Γ΍͘͢දࣔ͢Δ ϥϕϧΛ͚ͭΔ 
 ैདྷͷखॱΛٕज़తͳ޻෉Ͱૢ࡞͠΍͘͢͢Δɻ

    ৽͍͠ૢ࡞ํ๏Λఏࣔ͢Δ 
 ࡞ۀΛࣗಈԽ͢Δ ਓؒͷૢ࡞Λෆཁʹ͢Δ 
 ࡞ۀͷੑ࣭Λมߋ͢Δ ࠜຊతʹม͑Δ ΢ΟβʔυܗࣜͰߦ͏ιϑτ΢ΣΞͷΠϯετʔϧ΍ઃఆʹ͓͍ ͯɺ֤εςοϓ͝ͱͰ΍Δ΂͖͜ͱΛ୯७Խͯ͠ɺෳࡶͳ࡞ۀͷ ૢ࡞ੑΛϢʔβʔʹ෼͔Γ΍͘͢ఏ͍ࣔͯ͠Δɻ ΞϥʔϜ࣌ࠁͷઃఆʹ͓͍ͯɺ਺஋Λೖྗͨ͠ΓϘλϯૢ࡞Ͱ਺ ஋Λมߋ͢Δํ๏ʹมΘͬͯϑϦοΫૢ࡞͚ͩͰ਺஋Λબ୒Ͱ͖ ΔυϥϜܕϝχϡʔΛ࠾༻͠ɺೖྗૢ࡞Λ୯७Խ͍ͯ͠Δɻ ྫ 1$ͷ΢ΟβʔυʹΑΔઃఆ΍Πϯετʔϧ ྫ J1IPOFͷΞϥʔϜઃఆ Πϯετʔϧ։࢝ λΠϓબ୒ Πϯετʔϧઌબ୒ Πϯετʔϧ׬ྃ ैདྷͷखॱΛٕज़తͳ޻෉Ͱૢ࡞͠΍͘͢͢Δɻ ৽͍͠ૢ࡞ํ ๏Λఏࣔ͢Δ ैདྷͷखॱΛ෼͔Γ΍͘͢දࣔ͢Δ ϥϕϧΛ͚ͭΔ
  4. 2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 4 3. ର৅Λ໨ʹݟ͑ΔΑ͏ʹͯ͠ɺ࣮ߦͷִͨΓͱධՁͷִͨΓʹڮΛ͔͚Δɻ Ϣʔβʔ͕ૢ࡞Մೳͳ΋ͷΛݟ͑ΔܗͰఏࣔ͢Δͱͱ΋ʹɺ࣮ߦͨ݁͠ՌΛϢʔβʔʹϑΟʔυόοΫ͢Δ͜ͱͰɺΑΓ௚ײత ʹૢ࡞͢Δ͜ͱ͕ग़དྷΔΑ͏ʹͳΔɻ
 ·ͨɺ໨ʹݟ͑Δ΋ͷͷૢ࡞ํ๏͕ΠϝʔδͰ͖ΔΑ͏ͳܗʹ͢Δɻ ઃఆͰ͖Δप೾਺ͱԻҬϨϕϧΛzಉ࣌ʹzௐ੔Ͱ͖ΔΠϯλʔ ϑΣʔε͕ఏࣔ͞Ε͍ͯͯɺͦΕͧΕͷૢ࡞ͭ·ΈͷҐஔͷ૬

    ରҐஔͰ೾ܗΛද͢ܗʹͳ͍ͬͯΔɻ
 Ϣʔβʔ͸ࣗ෼͕ઃఆͨ͠ԻͷܗΛΠϝʔδͰଊ͑Δ͜ͱ͕ग़ དྷΔɻ ˠ֤प೾਺͝ͱͷݸผઃఆʹͳ͍ͬͯΕ͹࢖͍ʹ͍͘΋ͷʹͳ Δɻ ը໘ͷ໌Δ͞ઃఆ͸εϥΠυόʔௐ੔Ͱ͖ΔΑ͏ʹΠϯλʔ ϑΣʔε͕ఏࣔ͞Ε͍ͯͯɺௐ੔ૢ࡞Λߦ͏ͱϦΞϧλΠϜ ʹը໘ͷ໌Δ͕͞มԽ͢Δɻ
 Ϣʔβʔ͸ࣗ෼͕ઃఆ͍ͨ͠໌Δ͞Λ֬ೝ͠ͳ͕Βௐ੔ૢ࡞ ͕ߦ͑Δɻ ྫ J5VOFTͷΠίϥΠβʔ ྫ J1IPOFͷ໌Δ͞ઃఆ
  5. 2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 5 4. ରԠ෇͚Λਖ਼͘͢͠Δɻ Ϣʔβʔͷૢ࡞ͱͦͷӨڹൣғ΍݁ՌͱͷରԠؔ܎Λཧղ͠΍͍͢Α͏ʹ͢Δɻ Ϣʔβʔͷҙਤͱͦͷ࣌఺ͰϢʔβʔ͕࣮ߦͰ͖Δߦҝͷؔ܎
 ϢʔβͷߦҝͱͦΕ͕γεςϜʹٴ΅͢Өڹͷؔ܎
 γεςϜͷ࣮ࡍͷ಺෦ঢ়ଶͱ໨ͰݟͨΓฉ͍ͨΓײ͡औΕͨΓ͢Δ΋ͷͷؒͷؔ܎
 Ϣʔβʔ͕஌֮Ͱ͖ΔγεςϜͷঢ়ଶͱϢʔβʔͷཉٻɾҙਤɾظ଴ͷؔ܎

    γεςϜͷ࣮ࡍͷ಺෦ঢ়ଶͱ໨ͰݟͨΓฉ͍ͨΓײ͡औΕͨΓ
 ͢Δ΋ͷͷؒͷؔ܎ J1IPOFͰ֊૚Ҡಈ͕ൃੜ͢Δૢ࡞Λߦͬͨ࣌ɺࠨӈํ޲΁ͷ
 τϥϯδγϣϯද͕ࣔߦΘΕɺ಺෦తʹ֊૚Ҡಈ͕ൃੜͨ͜͠ͱΛ
 ࢹ֮తʹײͤ͡͞Ϣʔβʔͷ಄ͷதͰͷରԠ෇͚Λߦ͍ͬͯΔɻ ྫ ϒϥ΢βͷਐΉʗ໭ΔϘλϯ ྫ J1IPOFͷ֊૚Ҡಈ࣌ͷτϥϯδγϣϯ Ϣʔβʔͷҙਤͱͦͷ࣌఺ͰϢʔβʔ͕࣮ߦͰ͖Δߦҝͷؔ܎ ϒϥ΢βͷਐΉʗ໭ΔϘλϯ͸ɺͦΕͧΕਐΉʗ໭Δઌͷϖʔδ ͕ଘࡏ͢Δ৔߹ʹͷΈૢ࡞Մೳͱͳ͍ͬͯͯɺͦͷ࣌఺ͰϢʔβʔ ͕࣮ߦͰ͖ΔߦҝͱͷରԠ෇͚Λߦ͍ͬͯΔɻ ૢ࡞Մೳঢ়ଶ
 ໭Δઌ͕͋Δ ૢ࡞ෆՄঢ়ଶ
 ਐΉઌ΋໭Δઌ΋ͳ͍
  6. 2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 6 5. ࣗવͷ੍໿΍ਓ޻తͳ੍໿ͳͲͷ੍໿ͷྗΛར༻͢Δ ৔໘ʹΑͬͯ͸ɺ੍໿Λઃ͚Δ͜ͱʹΑͬͯϢʔβʔʹݶΒΕͨૢ࡞͔͠ग़དྷͳ͍͜ͱΛཧղͤ͞Δ͜ͱͰɺϢʔβʔ͕ૢ ࡞ͷҙຯΛ༰қʹཧղͨ͠Γɺ໎͏͜ͱͳ͘ૢ࡞͢Δ͜ͱ͕ՄೳͱͳΔɻ 4BGBSJͷࣗಈೖྗػೳΛར༻͢Δࡍͷઃఆͱͯ͠ɺԼه߲໨ͷઃ ఆΛߦΘͳ͚Ε͹ͳΒͳ͍͕ɺ·ͣͷࣗಈೖྗઃఆΛߦΘͳ͚ Ε͹ͷઃఆ͕ग़དྷͳ͍Α͏ʹ੍໿͕ઃ͚ΒΕ͓ͯΓɺ༧Ίzࣗಈ

    ೖྗ͢ΔzΛબ͹ͳ͚Ε͹ͳΒͳ͍͜ͱΛจষʹΑΔઆ໌ʹཔΔ͜ ͱͳ͘ɺ༰қʹཧղͰ͖Δɻ ࣗಈೖྗ͢Δʗ͠ͳ͍
 ࣗಈೖྗʹར༻͢Δਓͷબ୒ ྫ ϒϥ΢βͷϓϩΩγઃఆ ྫ J1IPOF4BGBSJͷࣗಈೖྗઃఆ *OUFSOFU&YQMPSFSͷϓϩΩγઃఆ͸ɺzϓϩΩγΛར༻͢Δzઃఆ ͷνΣοΫϘοΫεΛΦϯʹͨ͠৔߹ͷΈϓϩΩγઃఆͷೖྗ͕ ग़དྷΔΑ͏ʹ੍໿͕Ճ͑ΒΕ͍ͯΔɻ
 ͜ΕʹΑΓɺϢʔβʔ͸zϓϩΩγΛར༻͢ΔzઃఆΛߦΘͳ͚Ε ͹ϓϩΩγ͕ར༻ՄೳͱͳΒͳ͍͜ͱΛจষʹΑΔઆ໌ʹཔΔ͜ ͱͳ͘ɺ༻ҙʹཧղͰ͖Δɻ ૢ࡞Մೳঢ়ଶ
 ໭Δઌ͕͋Δ ૢ࡞ෆՄঢ়ଶ
 ਐΉઌ΋໭Δઌ΋ͳ͍ ࣗಈೖྗΦϑͷ৔߹ɺ
 zࣗ෼ͷ৘ใz͸άϨʔΞ΢τ ͞Ε͍ͯΔɻ ࣗಈೖྗΦϯʹมߋޙɺ
 zࣗ෼ͷ৘ใz΋બ୒Մೳͱͳ Δɻ
  7. 2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 7 6. Τϥʔʹඋ͑ͨσβΠϯΛ͢Δɻ ཧ૝తʹ͸Τϥʔ͕ൃੜ͠ͳ͍ͱ͍͏ঢ়ଶͰ͋Δ͕ɺݱ࣮తʹΤϥʔ͸ൃੜ͢ΔɻΤϥʔ͕ൃੜ͢Δ͜ͱΛલఏʹԼهͷ఺ Λߟྀ͢Δɻ Կ͕ى͔ͬͨ͜Λਖ਼͘͠఻͑Δ
 Τϥʔঢ়ଶ͔Βղআ͢Δํ๏Λఏࣔ͢Δ ҎԼɺγεςϜͱͯ͠͸ΤϥʔͰ͸ͳ͍͚ΕͲϢʔβʔ͕ҙਤ͠ͳ͍ૢ࡞Λߦ͏έʔεͱ͍͏ҙຯͰͷΤϥʔ


    ๬·͘͠ͳ͍ঢ়ଶΛݩʹ໭͢खஈΛఏڙ͢Δ
 ݩʹ໭͢खஈΛఏڙͰ͖ͳ͍ૢ࡞ʹ͍ͭͯ͸ɺ࣮ߦ͠ʹ͘͘͢Δɻ ֬ೝμΠΞϩάΛදࣔ͢ΔͳͲ จࣈೖྗૢ࡞΍ΧοτɺϖʔετͳͲͷૢ࡞ޙຊମΛৼΔ͜ͱͰ 6OEPϝχϡʔ͕දࣔ͞Εɺૢ࡞ΛऔΓফ͢͜ͱ͕ग़དྷΔɻ ྫ ϒϥ΢βͷϓϩΩγઃఆ ྫ J1IPOFΧοτૢ࡞ͷऔΓফ͠ *OUFSOFU&YQMPSFSͷཤྺ࡟আૢ࡞Ͱɺ͢΂ͯ࡟আΛબ୒͢Δͱɺ ΋͏Ұ౓֬ೝμΠΞϩά͕දࣔ͞ΕɺϢʔβʔ͕ޡͬͨૢ࡞Ͱཤ ྺ࡟আૢ࡞͢Δ͜ͱΛ๷͍Ͱ͍Δɻ ֬ೝμΠΞϩάΛʹ ର͢Δ0,Ͱཤྺ࡟আ Λ࣮ߦ ޡͬͯΧοτૢ࡞ ຊମΛৼͬͯ
 6OEPૢ࡞ ݩͷঢ়ଶʹ෮ؼ
  8. 2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 8 7. ඪ४Խ͢Δ લड़ͷʙͷݪଇʹैͬͯɺϢʔβʔʹࣗવʹૢ࡞Λཧղͤ͞Δ͜ͱ͕ग़དྷͳ͍৔߹͸ɺඪ४Խ͠ૢ࡞Λ౷Ұ͢Δ͜ͱͰ Ϣʔβʔͷෛ୲Λܰݮ͢Δɻ
 ͜ͷέʔεʹ֘౰͢Δͷ͸ɺैདྷʹͳ͍શ͘৽͍֓͠೦ͷػೳΛ࣮ݱ͢Δ৔߹͕ߟ͑ΒΕΔɻ ˞ඪ४ԽͷλΠϛϯά͕໰୊ͱͳΔɻૣ͗͢Δͱॳظஈ֊ͷٕज़ͷ··޿·ͬͯ͠·͏͜ͱʹͳΓɺٕज़ͷਐาΛ଴͍ͬͯ Δͱଞͷૢ࡞ܥ͕ਁಁͯ͠͠·͍ɺඪ४Խ͕ࠔ೉ͱͳΔɻ

    ඪ४Խ͞Ε͍ͯΔϢʔβʔΠϯλʔϑΣʔε
 28&35:ΩʔϘʔυ ฒͼॱ͸ෳࡶ͕ͩɺ༷ʑͳ̻ػثͰಉ͡ϨΠΞ΢τ͕࠾༻͞ Ε͓ͯΓɺҰͭͷػثͰֶश͢Ε͹ଞͷػثͰ΋ಉ͡Α͏ʹ ࢖͏͜ͱ͕Ͱ͖Δɻ ඪ४Խ͞Ε͍ͯͳ͍ϢʔβʔΠϯλʔϑΣʔε
 ΞϧϑΝϕοτॱΩʔϘʔυ ฒͼॱ͸Θ͔Γ΍͍͕͢ɺ഑ஔ͕ඪ४Խ͞Ε͍ͯͳ͍ͨΊɺ࢖͏ ػث͝ͱʹจࣈΛ୳͞ͳ͚Ε͹ͳΒͣɺ࣮࣭తʹ͸࢖͍ʹ͍͘ɻ