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