1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="0xB49ByHio"><a href="https://uxdaystokyo.com/articles/glossary/cognitivewalkthrough/">認知的ウォークスルー</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/glossary/cognitivewalkthrough/embed/#?secret=0xB49ByHio" width="600" height="338" title="“認知的ウォークスルー” — UX TIMES" data-secret="0xB49ByHio" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2017/07/cognitive-walkthrough-eye-catching.jpg400400実施方法 ユーザの機器利用場面を想定し、操作手順を記述する 各操作フローに沿って以下の４つの質問をしながら操作手順をたどり、問題点を抽出する a. ユーザの目標は何か？ b. 目標実現の手段は適切に用意されているか？z c. ユーザの目標と操作は関連が分かりやすい表現になっているか？ d. 明瞭で意味の分かりやすいフィードバックが提供されているか？ 実際にやってみよう 自動販売機をコグニティブ・ウォークスルーで評価してみる。 手順の確認する 自動販売機の主な手順を書き出す。以下の通りである。 1) 欲しい商品を決める 2) お金を入れる 3) 商品を選ぶ 4) 商品を取り出す デザイン対象を評価する 先ほど書き出した手順通りに評価をしていきます。 1) 欲しい商品を決める a. ユーザの目標は何か？ → 温かくなってきたので、冷たい飲み物が欲しい。 b. 目標実現の手段は適切に用意されているか？ → 用意されている。 c. ユーザの目標と操作は関連が分かりやすい表現になっているか？ → 自動販売機にシールなどがたくさん貼られており、商品が見づらい。 d. 明瞭で意味の分かりやすいフィードバックが提供されているか？ → ここでは省略 2) お金を入れる a. ユーザの目標は何か？ → 欲しい商品のお金を挿入する。 → 電子マネーと紙幣または硬貨で２パターンがある。 b. 目標実現の手段は適切に用意されているか？ → 用意されていない → 電子マネーと紙幣または硬貨の場合で操作フローが異なり紛らわしい。 c. ユーザの目標と操作は関連が分かりやすい表現になっているか？ → 自動販売機の鍵穴と硬貨挿入口が似ているため、紛らわしい。 → 電子マネーをタッチする前に電子マネーの種類(Suica,Edyなど)を選択する必要がある。 d. 明瞭で意味の分かりやすいフィードバックが提供されているか？ → 電子マネーをタッチするが、いつ支払われるのか分からない。 3) 商品を選択する a. ユーザの目標は何か？ → 商品を選択する b. 目標実現の手段は適切に用意されているか？ → 用意されていない → 電子マネーと紙幣または硬貨の場合で操作フローが異なり紛らわしい。 c. ユーザの目標と操作は関連が分かりやすい表現になっているか？ → 売り切れのランプが弱く、その商品が売られているのか分かりづらい。 d. 明瞭で意味の分かりやすいフィードバックが提供されているか？ → 電子マネーの場合、いつ支払われるのか、支払いが成功したのか分かりづらい。 4) 商品を取り出す a. ユーザの目標は何か？ → 商品を取り出す → ここで様々な身体特性を持ったユーザ(子供や車いす利用者など)が考えられる。 b. 目標実現の手段は適切に用意されているか？ → 用意されていない。 → 商品を取り出す位置が低すぎて、車いす利用者にとっては取り出しにくい。 c. ユーザの目標と操作は関連が分かりやすい表現になっているか？ → 外から商品が見えづらいため、商品を取り損ねることがある。 d. 明瞭で意味の分かりやすいフィードバックが提供されているか？ → 電子マネーをタッチするが、いつ支払われるのか分からない。 問題点をまとめる 例えば、今回の場合「物理的側面と認知的側面」に分けて問題点を分かりやすくまとめてみる。 従来の自販機に追加された電子マネーによる問題が多い。 物理的要素についてのトラブル 自動販売機にシールなどがたくさん貼られており、商品が見づらい。 自動販売機の鍵穴と硬貨挿入口が似ているため、紛らわしい。 外から商品が見えづらいため、商品を取り損ねることがある。 商品を取り出す位置が低すぎて、車いす利用者にとっては取り出しにくい。 認知的要素についてのトラブル 支払い方法によって操作フローが異なる 電子マネーの支払い手順が分かりにくい 電子マネーの種類(Suica,Edyなど)の選択の手順が分かりづらい。 電子マネーをタッチするが、いつ支払われるのか分からない。 メリット・デメリット メリット 操作手順の奥深いところにある問題点を見つけ出すことができる。 操作フローや仕様書だけでも評価できる。 低コスト、開発の早期から実施可能である。 デメリット ATMなどの目的が明確な専用端末が全盛であったときの古い手法であり、 文脈や行動パターンが複雑になった現在では適用しにくいことがある。 シーン、タスクの設定が不適切な場合、問題点の見落としが発生する。 認知科学的な枠組みのため、専門性がある人が評価することが望ましい。