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

ユーザビリティヒューリスティック

 ユーザビリティヒューリスティック

Akira Motomura

April 10, 2023
Tweet

More Decks by Akira Motomura

Other Decks in Design

Transcript

  1. Copyright © 2020 Akira Motomura 2 Usability heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε ੜ஀

    1957೥10݄5೔ ࢮ຅ -ʢ61ࡀʣ ࠃ੶ σϯϚʔΫ ݚڀ෼໺ ϢʔβϏϦςΟ ίϯαϧςΟϯά ஶॻ Mobile Usability (2012). Prioritizing Web Usability (2006). Multimedia and Hypertext (1995). Usability Engineering (1994). The theorist ๏ଇͷఏএऀ Jakob Nielsen Ϡίϒɾχʔϧηϯ From Nielsen Norman Group https://www.nngroup.com/articles/author/jakob-nielsen/
  2. Copyright © 2020 Akira Motomura 3 Usability goals ϢʔβϏϦςΟͷΰʔϧ Usability

    heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε ֶश͠΍͢͞: γεςϜ͸ɺϢʔβ͕ͦΕΛ࢖͙ͬͯ͢࡞ۀΛ࢝ΊΒΕΔΑ͏ɺ ؆୯ʹֶशͰ͖ΔΑ͏ʹ͠ͳ͚Ε͹ͳΒͳ͍ɻ ޮ཰ੑ: γεςϜ͸ɺҰ౓Ϣʔβ͕ͦΕʹֶ͍ͭͯश͢Ε͹ɺ ޙ͸ߴ͍ੜ࢈ੑΛ্͛ΒΕΔΑ͏ɺޮ཰తͳ࢖༻ΛՄೳʹ͢΂͖Ͱ͋Δɻ هԱ͠΍͢͞: γεςϜ͸ɺෆఆظར༻ͷϢʔβ͕͠͹Β͘࢖Θͳͯ͘΋ɺ ࠶ͼ࢖͏ͱ͖ʹ֮͑௚͞ͳ͍Ͱ࢖͑ΔΑ͏ɺ֮͑΍͘͢͠ͳ͚Ε͹ͳΒͳ͍ɻ Τϥʔ: γεςϜ͸Τϥʔൃੜ཰Λ௿͘͠ɺϢʔβ͕γεςϜ࢖༻தʹΤϥʔΛى ͜͠ʹ͘͘ɺ΋͠Τϥʔ͕ൃੜͯ͠΋؆୯ʹճ෮Ͱ͖ΔΑ͏ʹ͠ͳ͚Ε͹ͳΒͳ ͍ɻ·ͨɺக໋తͳΤϥʔ͕ىͬͯ͜͸͍͚ͳ͍ɻ ओ؍తຬ଍౓: γεςϜ͸ɺϢʔβ͕ݸਓతʹຬ଍Ͱ͖ΔΑ͏ɺ ·ͨ޷͖ʹͳΔΑ͏ָ͘͠ར༻Ͱ͖ΔΑ͏ʹ͠ͳ͚Ε͹ͳΒͳ͍ɻ From ϢʔβϏϦςΟΤϯδχΞϦϯάݪ࿦ by Ϡίϒɾχʔϧηϯ https://amzn.to/2V52p0L Usability Engineering ϢʔβϏϦςΟΤϯδχΞϦϯάݪ࿦ Learnability Efficiency Memorability Error (as in low error rate) Satisfaction
  3. Copyright © 2020 Akira Motomura 4 The heuristics / 1

    of 10 ώϡϦεςΟΫε Usability heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε Visibility of system status γεςϜͷঢ়ଶ͕Θ͔ΔΑ͏ʹ͢Δ The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. γεςϜ͸ৗʹɺద੾ͳϑΟʔυόοΫΛ௨ͯ͡ɺଥ౰ͳ࣌ؒ಺ͰɺϢʔβʔʹ ରͯ͠ʮԿ͕ى͍ͬͯ͜Δ͔ʯΛ஌Βͤͳ͚Ε͹ͳΒͳ͍ɻ From 10 Usability Heuristics for User Interface Design by NN group https://www.nngroup.com/articles/ten-usability-heuristics/ FromʮϢʔβϏϦςΟʹؔ͢Δ10ͷώϡʔϦεςΟΫε (໰୊ղܾʹ໾ཱͭ஌ݟ) / Ten Usability Heuristicsʯ https://website-usability.info/2009/09/entry_090908.html Progress bar / ϓϩάϨεόʔ User Feedback / ద੾ͳϑΟʔυόοΫ ঎඼͸ɺങ͍෺Χΰʹ௥Ճ͞Ε·ͨ͠ɻ
  4. Copyright © 2020 Akira Motomura 5 The heuristics / 2

    of 10 ώϡϦεςΟΫε Usability heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε Match between system and the real world ࣮ࡍͷར༻؀ڥʹద߹ͨ͠γεςϜΛ࡞Δ The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. γεςϜ͸ɺγεςϜࢦ޲ͷݴޠͰ͸ͳ͘ɺϢʔβʔͷݴޠʢϢʔβʔʹೃછΈ ͷ͋Δݴ༿΍֓೦ʣΛ࢖ͬͯɺϢʔβʔͱίϛϡχέʔτ͠ͳ͚Ε͹ͳΒͳ͍ɻ ར༻͞ΕΔ؀ڥͷ͖ͨ͠Γʹै͍ɺࣗવͰཧʹ͔ͳͬͨܗͰ৘ใΛఏࣔ͢ΔΑ͏ ʹγεςϜΛ࡞Ζ͏ɻ From 10 Usability Heuristics for User Interface Design by NN group https://www.nngroup.com/articles/ten-usability-heuristics/ FromʮϢʔβϏϦςΟʹؔ͢Δ10ͷώϡʔϦεςΟΫε (໰୊ղܾʹ໾ཱͭ஌ݟ) / Ten Usability Heuristicsʯ https://website-usability.info/2009/09/entry_090908.html Ϣʔβʔ γεςϜ ૢ࡞͢Δ ߹க
  5. Copyright © 2020 Akira Motomura 6 The heuristics / 3

    of 10 ώϡϦεςΟΫε Usability heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε User control and freedom Ϣʔβʔʹૢ࡞ͷओಋݖͱࣗ༝౓Λ༩͑Δ Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. Ϣʔβʔ͸͠͹͠͹࢖͏΂͖ػೳͷબ୒ΛޡΔͷͰɺ໌֬ͳʮඇৗޱʯʢ௕ͬͨ Β͍͠μΠΞϩάର࿩Λ͠ͳͯ͘΋ɺ๬·ͳ͍ঢ়ଶ͔Βൈ͚ΕΔ࢓૊Έʣ͕ඞཁ Ͱ͋ΔɻΞϯυΡͱϦυΡΛఏڙ͠Α͏ɻ From 10 Usability Heuristics for User Interface Design by NN group https://www.nngroup.com/articles/ten-usability-heuristics/ FromʮϢʔβϏϦςΟʹؔ͢Δ10ͷώϡʔϦεςΟΫε (໰୊ղܾʹ໾ཱͭ஌ݟ) / Ten Usability Heuristicsʯ https://website-usability.info/2009/09/entry_090908.html Ϣʔβʔ ݩʹ໭͢ ΍Γ௚͢ ؒҧ͑ͨ
  6. Copyright © 2020 Akira Motomura Typo- graphy 7 The heuristics

    / 4 of 10 ώϡϦεςΟΫε Usability heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε Consistency and standards Ұ؏ੑΛอͪඪ४ʹ฿͏ Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. ଞͷΞϓϦέʔγϣϯͱҟͳΔݴ༿ɺঢ়ଶɺ࡞༻ΛUIʹ࣮૷ͯ͠ɺϢʔβʔʹ ʮ͜Ε͸ͭ·Γʙͱಉ͜͡ͱͩΖ͏͔ʁʯͱ͍ͬͨࠞཚΛ༩͑ͯ͸ͳΒͳ͍ɻ ϓϥοτϑΥʔϜͷ͖ͨ͠Γʹ฿͓͏ɻ From 10 Usability Heuristics for User Interface Design by NN group https://www.nngroup.com/articles/ten-usability-heuristics/ FromʮϢʔβϏϦςΟʹؔ͢Δ10ͷώϡʔϦεςΟΫε (໰୊ղܾʹ໾ཱͭ஌ݟ) / Ten Usability Heuristicsʯ https://website-usability.info/2009/09/entry_090908.html Ϙλϯ Ϧετ બ୒ࢶ໊ ϚςϦΞϧ άϦου ը૾ λϒ1 λϒ2 ֊૚ / ߏ଄ Ξχϝʔγϣϯ λΠϙάϥϑΟ
  7. Copyright © 2020 Akira Motomura 8 The heuristics / 5

    of 10 ώϡϦεςΟΫε Usability heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε Error prevention ΤϥʔΛ๷ࢭ͢Δ Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. ༏ΕͨΤϥʔϝοηʔδΛ༻ҙ͢ΔΑΓ΋ɺ͸͡Ί͔Β஫ҙਂ͘σβΠϯͯ͠໰ ୊ൃੜΛ๷ࢭ͢Δ΄͏͕ྑ͍ɻޡૢ࡞ΛҾ͖ىͦ͜͠͏ͳ৚݅Λআڈ·ͨ͸ νΣοΫ͓͍ͯͯ͠ɺϢʔβʔʹରͯ͠͸ૢ࡞Λ࣮ߦ͢Δ͔Ͳ͏͔Λࣄલʹ֬ೝ ͠Α͏ɻ From 10 Usability Heuristics for User Interface Design by NN group https://www.nngroup.com/articles/ten-usability-heuristics/ FromʮϢʔβϏϦςΟʹؔ͢Δ10ͷώϡʔϦεςΟΫε (໰୊ղܾʹ໾ཱͭ஌ݟ) / Ten Usability Heuristicsʯ https://website-usability.info/2009/09/entry_090908.html σʔλΛ࡟আ͠·͔͢ʁ ͜ͷΞΫγϣϯ͸औΓফ͢͜ͱ͕ Ͱ͖·ͤΜɻ ࡟আ ΍ΊΔ Τϥʔ Τϥʔ Τϥʔ Do this first Τϥʔ৚݅ͷൃݟɾআڈ ελʔτ ΰʔϧ Then do that Τϥʔϝοηʔδ
  8. Copyright © 2020 Akira Motomura 9 The heuristics / 6

    of 10 ώϡϦεςΟΫε Usability heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε Recognition rather than recall هԱΛݺͼى͜͞ͳͯ͘΋ɺݟ͚ͨͩͰΘ͔ΔΑ͏ʹσβΠϯ͢Δ Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. ΦϒδΣΫτ΍࡞༻΍બ୒ࢶΛՄࢹԽ͢Δ͜ͱʹΑͬͯɺϢʔβʔͷهԱෛՙΛ ࠷খݶʹ͠Α͏ɻϢʔβʔ͸γεςϜͱͷ΍ΓͱΓΛଓ͚ΔதͰɺ৘ใΛهԱ͠ ͳͯ͘΋ࡁΉΑ͏ʹ͠ͳ͚Ε͹ͳΒͳ͍ɻγεςϜΛ࢖͏ͨΊͷઆ໌/ࢦೆ͸ࢹ֮ తͰɺ͍ͭͰ΋༰қʹݟΕΔΑ͏ʹ͢΂͖Ͱ͋Δɻ From 10 Usability Heuristics for User Interface Design by NN group https://www.nngroup.com/articles/ten-usability-heuristics/ FromʮϢʔβϏϦςΟʹؔ͢Δ10ͷώϡʔϦεςΟΫε (໰୊ղܾʹ໾ཱͭ஌ݟ) / Ten Usability Heuristicsʯ https://website-usability.info/2009/09/entry_090908.html ϗʔϜ ʼ ੡඼ ʼ ঎඼໊ Breadcrumb list / ύϯͣ͘ Pencil Pen Scissors Ϣʔβʔ ࠓͳΜ͚ͩͬʁ ֬ೝ
  9. Copyright © 2020 Akira Motomura 10 The heuristics / 7

    of 10 ώϡϦεςΟΫε Usability heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε Flexibility and efficiency of use ॊೈੑͱޮ཰ੑΛ࣋ͨͤΔ Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. γεςϜར༻Λޮ཰ԽͰ͖Δ࢓૊Έ͸ɺॳ৺ऀϢʔβʔʹ͸ݟΒΕͳ͍͕ɺख़࿅ Ϣʔβʔͷ࡞ۀΛߴ଎Խ͠ɺͻ͍ͯ͸ະܦݧऀ/ܦݧऀ໰ΘͣϢʔβʔͷཁٻΛຬ ͨ͢͜ͱʹͭͳ͕ΔͩΖ͏ɻϢʔβʔ͕ͨͼͨͼ࣮ߦ͢Δػೳʹ͍ͭͯ͸ɺϢʔ βʔࣗ਎͕ޮ཰ԽΛௐ੔Ͱ͖ΔΑ͏ʹ͠Α͏ɻ From 10 Usability Heuristics for User Interface Design by NN group https://www.nngroup.com/articles/ten-usability-heuristics/ FromʮϢʔβϏϦςΟʹؔ͢Δ10ͷώϡʔϦεςΟΫε (໰୊ղܾʹ໾ཱͭ஌ݟ) / Ten Usability Heuristicsʯ https://website-usability.info/2009/09/entry_090908.html Object / ΦϒδΣΫτ Cut / ੾ΓऔΓ Paste / షΓ෇͚ Duplicate / ෳ੡ Copy / ίϐʔ Command + X Command + V Command + D Command + C ϑΝΠϧ ૠೖ εϥΠυ ϑΥʔϚοτ etc. ฤू Application menu / ΞϓϦέʔγϣϯϝχϡʔ Context menu / จ຺ϝχϡʔ Key command / ΩʔίϚϯυ
  10. Copyright © 2020 Akira Motomura 11 The heuristics / 8

    of 10 ώϡϦεςΟΫε Usability heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε Aesthetics and minimalist design ࠷খݶͰɺඒ͍͠σβΠϯʹ͢Δ Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. γεςϜͱϢʔβʔؒͷର࿩ʹ͓͍ͯ͸ɺݟ౰ҧ͍ͳෆඞཁͳ৘ใΛؚΜͰ͸ͳ Βͳ͍ɻ͋ΒΏΔ༨ܭͳ৘ใ܈͸ɺؔ࿈͢Δ৘ใ܈ͱڝ߹ͯ͠͠·͏ͷͰɺ૬ର తʹɺඞཁͳ৘ใͷ࿐ग़Λ௿Լͤͯ͞͠·͏ɻ From 10 Usability Heuristics for User Interface Design by NN group https://www.nngroup.com/articles/ten-usability-heuristics/ FromʮϢʔβϏϦςΟʹؔ͢Δ10ͷώϡʔϦεςΟΫε (໰୊ղܾʹ໾ཱͭ஌ݟ) / Ten Usability Heuristicsʯ https://website-usability.info/2009/09/entry_090908.html Interaction of colors / Josef Albers
  11. Copyright © 2020 Akira Motomura 12 The heuristics / 9

    of 10 ώϡϦεςΟΫε Usability heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε Help users recognize, diagnose, and recover from errors Ϣʔβʔ͕ΤϥʔΛೝࣝ͠ɺ਍அ͠ɺճ෮Ͱ͖ΔΑ͏ʹࢧԉ͢Δ Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. Τϥʔϝοηʔδ͸ࣗવݴޠͰදݱ͞ΕΔ΂͖Ͱ͋ͬͯɺ ϓϩάϥϜίʔυͰදݱ͞ΕΔ΂͖Ͱ͸ͳ͍ɻ ϝοηʔδ͸໰୊఺Λਖ਼֬ʹࣔ͠ɺղܾࡦΛݐઃతʹఏݴ͠ͳ͚Ε͹ͳΒͳ͍ɻ From 10 Usability Heuristics for User Interface Design by NN group https://www.nngroup.com/articles/ten-usability-heuristics/ FromʮϢʔβϏϦςΟʹؔ͢Δ10ͷώϡʔϦεςΟΫε (໰୊ղܾʹ໾ཱͭ஌ݟ) / Ten Usability Heuristicsʯ https://website-usability.info/2009/09/entry_090908.html Error message / Τϥʔϝοηʔδ 6จࣈҎ্ େจࣈ͕࠷௿ؚ̍ͭ·Ε͍ͯΔ ύεϫʔυදࣔ ه߸͕࠷௿ؚ̍ͭ·Ε͍ͯΔ
  12. Copyright © 2020 Akira Motomura 13 The heuristics / 10

    of 10 ώϡϦεςΟΫε Usability heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε Help and documentation ϔϧϓ΍આ໌จॻΛ༻ҙ͢Δ Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. γεςϜ͕આ໌จॻͳ͠Ͱ΋࢖͑Δ΄͏͕ྑ͍ͱͯ͠΋ɺϔϧϓ΍આ໌จॻ͸ඞ ཁͩΖ͏ɻ͜ͷखͷ৘ใ͸͢΂ͯɺ༰қʹݕࡧͰ͖ɺϢʔβʔͷߦҝʹয఺Λ౰ ͯΔ͜ͱ͕Ͱ͖ɺͳ͢΂͖۩ମతͳखॱ͕ϦετΞοϓ͞Εɺ෼ྔ͕େ͖͗͢ͳ ͍Α͏ʹ͢΂͖Ͱ͋Δɻ From 10 Usability Heuristics for User Interface Design by NN group https://www.nngroup.com/articles/ten-usability-heuristics/ FromʮϢʔβϏϦςΟʹؔ͢Δ10ͷώϡʔϦεςΟΫε (໰୊ղܾʹ໾ཱͭ஌ݟ) / Ten Usability Heuristicsʯ https://website-usability.info/2009/09/entry_090908.html FAQ / Α͋͘Δ໰͍߹Θͤ Α͋͘Δ໰͍߹Θͤ ݕࡧ ࢖༻ํ๏ʹ͍ͭͯ ख਺ྉʹ͍ͭͯ ΞΧ΢ϯτʹ͍ͭͯ ղ໿ʹ͍ͭͯ Documentation / આ໌ॻ આ໌ॻ
  13. Copyright © 2020 Akira Motomura Remember these. ֮͑·͠ΐ͏ɻ 14 The

    heuristics ώϡϦεςΟΫε Usability heuristics ϢʔβϏϦςΟɾώϡϦεςΟΫε Help and documentation ϔϧϓ΍આ໌จॻΛ༻ҙ͢Δ Visibility of system status γεςϜͷঢ়ଶ͕Θ͔ΔΑ͏ʹ͢Δ Match between system and the real world ࣮ࡍͷར༻؀ڥʹద߹ͨ͠γεςϜΛ࡞Δ User control and freedom Ϣʔβʔʹૢ࡞ͷओಋݖͱࣗ༝౓Λ༩͑Δ Consistency and standards Ұ؏ੑΛอͪඪ४ʹ฿͏ Error prevention ΤϥʔΛ๷ࢭ͢Δ Flexibility and efficiency of use ॊೈੑͱޮ཰ੑΛ࣋ͨͤΔ Recognition rather than recall هԱΛݺͼى͜͞ͳͯ͘΋ɺݟ͚ͨͩͰΘ͔ΔΑ͏ʹσβΠϯ͢Δ Aesthetics and minimalist design ࠷খݶͰɺඒ͍͠σβΠϯʹ͢Δ Help users recognize, diagnose, and recover from errors Ϣʔβʔ͕ΤϥʔΛೝࣝ͠ɺ਍அ͠ɺճ෮Ͱ͖ΔΑ͏ʹࢧԉ͢Δ