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

Transcript

1. Usability heuristics
   2020
   akira motomura
   by
   
   Jacob Nielsen
   ϢʔβϏϦςΟɾώϡϦεςΟΫε
   

   View Slide

2. 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/
   

   View Slide

3. 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
   

   View Slide

4. 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 / ద੾ͳϑΟʔυόοΫ
   ঎඼͸ɺങ͍෺Χΰʹ௥Ճ͞Ε·ͨ͠ɻ
   

   View Slide

5. 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
   Ϣʔβʔ γεςϜ
   ૢ࡞͢Δ
   ߹க
   

   View Slide

6. 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
   Ϣʔβʔ
   ݩʹ໭͢ ΍Γ௚͢
   ؒҧ͑ͨ
   

   View Slide

7. 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
   ֊૚ / ߏ଄
   Ξχϝʔγϣϯ
   λΠϙάϥϑΟ
   

   View Slide

8. 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
   Τϥʔϝοηʔδ
   

   View Slide

9. 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
   Ϣʔβʔ
   ࠓͳΜ͚ͩͬʁ
   ֬ೝ
   

   View Slide

10. 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 / ΩʔίϚϯυ
    

    View Slide

11. 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
    

    View Slide

12. 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จࣈҎ্
    େจࣈ͕࠷௿ؚ̍ͭ·Ε͍ͯΔ
    ύεϫʔυදࣔ
    ه߸͕࠷௿ؚ̍ͭ·Ε͍ͯΔ
    

    View Slide

13. 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 / આ໌ॻ
    આ໌ॻ
    

    View Slide

14. 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
    Ϣʔβʔ͕ΤϥʔΛೝࣝ͠ɺ਍அ͠ɺճ෮Ͱ͖ΔΑ͏ʹࢧԉ͢Δ
    

    View Slide