Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WACATE2024冬セッション資料(ユーザビリティ)
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
scarletplover
December 14, 2024
Technology
3k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
WACATE2024冬セッション資料(ユーザビリティ)
scarletplover
December 14, 2024
More Decks by scarletplover
See All by scarletplover
業務からはじめよう
scarletplover
0
23
単体テストソムリエになろう!(WACATE参加者用)
scarletplover
0
580
テスト技法おさらい(仮)
scarletplover
9
4.7k
PFDであそぼ
scarletplover
0
540
実際のシステムでテスト技法を編み出そう
scarletplover
0
280
形式手法ってなんだろう?
scarletplover
0
1.9k
Other Decks in Technology
See All in Technology
小さく始める AI 活用推進 ― 日経電子版 Web チームの事例/nikkei-tech-talk47
nikkei_engineer_recruiting
0
260
2026TECHFRESH畢業分享會 - 葬送的通靈師:化系統與用戶雜訊成行動訊號
line_developers_tw
PRO
0
990
FDE という解 ― 暗黙知と明示知をつなぐ、伴走型エンジニアリング ―
otanet
0
150
なぜ Platform Engineering の土台に Kubernetes を選ぶのか
r4ynode
2
640
AWSシリコン最前線 〜AI時代のチップ選択を読み解く〜
htokoyo
2
610
AI駆動開発を通して感じた、 AI時代のデザイナーの役割変化
whisaiyo
3
2.1k
AIのReact習熟度を測る
uhyo
2
530
2026TECHFRESH畢業分享會 - 原生還是跨平台? App 開發踩坑實錄
line_developers_tw
PRO
0
990
Oracle AI Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
6
1.5k
白金鉱業Meetup_Vol.24_「AIエージェントは分けるほど良い」は本当か? / Is it true that “the more you divide AI agents, the better”?
brainpadpr
1
370
Android の公式 Skill / Android skills
yanzm
0
140
2026 TECHFRESH 畢業分享會 - AI-Native 重塑軟體工程與虛擬講師
line_developers_tw
PRO
0
990
Featured
See All Featured
SEO for Brand Visibility & Recognition
aleyda
0
4.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.7k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
160
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.3k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
410
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
290
We Have a Design System, Now What?
morganepeng
55
8.2k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
270
Building the Perfect Custom Keyboard
takai
2
790
How to Think Like a Performance Engineer
csswizardry
28
2.6k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
360
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
200
Transcript
ユーザビリティを 作りこめ!
ユーザビリティとは? 突然ですが・・・
ワークをします ▪机の上にある資料を取って下さい。 ▪ 1人1部です。 ▪ 資料にはシステム「BlackWACATE」の簡単な画面設計とレイアウト がかいてあります。 ▪ この画面の見た目や使い勝手について「おかしいな」「問題だ」 「いけてないな」というところを付箋であげてみてください。
▪時間は5分間です 突然ですが・・・
ワークはどうでしたか? 突然ですが・・・
それをどうやって指摘します? ▪ 不具合管理表にかいても・・・ ▪ それってあなたの感想ですよね? ▪ それってあなたのこだわりですよね? ▪ わたしってセンスないからさぁ ▪
逆の立場で・・・ ▪ 画面作ったら「センスわるwwwww」っていわれたけど文句ばっかりで どうすればいいかは誰もわからない ▪ なんか違和感があるがどう直せばいいかわからない・・・ 突然ですが・・・ ユーザビリティを知ろう!
ユーザビリティを 作りこめ!
本セッションの目的 ▪ユーザビリティを「理論」でお話できるようになる。 ▪「センス」という言葉に逃げない!!!!!! ▪日々のテスト、開発業務でユーザビリティを気にす ることができるようになる。 はじめに
自己紹介 ▪山口 寛子(WACATE実行委員会) ▪金融系SIerで金融系ではないSIをやっている ▪SN:べにちどり(@scarletplover) はじめに
目次 ▪ 突然ですが・・・ ▪ ワーク(済) ▪ はじめに ▪ ユーザビリティとは ▪
ユーザビリティとデザイン ▪ ユーザビリティの作りこみ方 ▪ ここでユーザビリティを評価するワーク ▪ 実際の開発とユーザビリティ はじめに
ユーザビリティ とは
ユーザビリティの成り立ち ▪ シャッケル:「ユーティリティ(必要なことを機能的に実現できる か)・ユーザビリティ(それを実際に使いこなせるか)・ライカビリ ティ(それを適切だと感じることができるか)が、コストと見合って いるかどうかが大切である」 ▪ ニールセン:ユーザビリティを上記のとおりに5つの要素に定義 ユーザビリティとは システムの受容性
社会的受容性 実務的受容性 有用性 実用性 ユーザビリティ 学習しやすさ 使いやすさ (効率性) 記憶しやすさ エラーの少なさ 主観的満足度 コスト互換性 信頼性 その他
ユーザビリティとは • 「特定のユーザが特定の利用状況において、システム、製品又はサービスを 利用する際に、効果、効率及び満足を伴って特定の目標を達成する度合い」 ISO9421-11「人間工学-視覚表示装置を用いるオフィス作業」より • 明示された使用状況において、有用性、効率性及び満足性を持って明示され た目標を達成するために、明示された利用者が製品またはシステムを利用 することができる度合い。 ISO/IEC25010:2011「システム及びソフトウェア製品の品質要求及び評価」より
ユーザビリティとは 効果 :ユーザが目標を達成できるかどうか 効率 :なるべく最短経路で目標を達成できるかどうか ユーザの満足度:ユーザに不愉快な思いをさせていないか
ユーザビリティとは ▪ ユーザビリティは「ある特定の利用状況、ユーザー、環境、資源、 目標、タスク」に影響を受ける。 ユーザビリティとは 資源 システム、 製品又は サービス 利用状況
ユーザ 環境 目標 及び タスク 資源 利用時の品質 ユーザビリティ 効果 効率 満足 • アクセシビリティ • 危害の回避 など その他の利用の品質 利用 ISO9241におけるユーザビリティの概念図
※UX(ユーザエクスペリエンス)とは •システム、製品又はサービス の利用前、利用中及び利用後 に生じるユーザの知覚および 反応 ISO9241より ユーザビリティとは
ユーザビリティとUXの違い? ユーザビリティとは UX =ユーザの体験 ユーザビリティ =システムの使いやすさ
※ユーザビリティとUXの違い? ユーザビリティとは
ここでは・・・ ▪おもに、「ユーザビリティ」を扱います。 ▪ さらにいうとISO9241-11の「ユーザビリティ」を基準とします。 ユーザビリティとは
ユーザビリティと デザイン
ユーザビリティとデザイン ▪ユーザビリティをよくするために、「どのように見せるか」 「どのようにふるまわせるか」ビジュアルを含めてデザイン する必要がある。 ▪デザイン=原則アートではない。むしろ設計そのもの。 =「機能を見た目と構造に落とし込むこと」 ▪デザインには人間工学、人間認知心理学などでの研究が元と なった定石のようなものが存在 まずはデザインの要素を「知る」こと!
ここで説明するデザインの要素 ▪ デザインの要素 ▪ ユーザー動線に関する要素 ▪ 全体にかかわるもの ユーザビリティとデザイン デザインの基本 近接
デザインの基本 整列 デザインの基本 反復 デザインの基本 コントラスト ミラーの法則 ヒックの法則 フィッツの法則 視線の流れ 配色 サイトストラクチャ ナビゲーション インタラクション ヤコブの法則
ここで説明するデザインの要素 ▪ デザインの要素 ▪ ユーザー動線に関する要素 ▪ 全体にかかわるもの ユーザビリティとデザイン デザインの基本 近接
デザインの基本 整列 デザインの基本 反復 デザインの基本 コントラスト ミラーの法則 ヒックの法則 フィッツの法則 視線の流れ 配色 サイトストラクチャ ナビゲーション インタラクション ヤコブの法則
デザインの基本 近接 ▪ 人は距離が近い情報に「関係があるもの」と認識する習性がある。 ▪ 情報をグループ化して、近づけること、余白を入れることを意識する ユーザビリティとデザイン 取得情報 WACATEはワークショップ申し込みの際に以下の 情報を取得いたします。
•氏名 •性別 •年齢… 利用目的 取得した情報は以下の目的のみで利用いたします。 •ワークショップの宿泊施設への宿泊者名簿提供 •ワークショップの運営(班割り、部屋割り等) … 取得情報 WACATEはワークショップ申し込みの際に以下の 情報を取得いたします。 •氏名 •性別 •年齢… 利用目的 取得した情報は以下の目的のみで利用いたします。 •ワークショップの宿泊施設への宿泊者名簿提供 •ワークショップの運営(班割り、部屋割り等) …
デザインの基本 整列 ▪ 情報を左揃え、中央揃え、右揃え、グリッドのように透明な線を用いて要素をそ ろえて配置する。 ▪ 要素が整列されていることでスムーズな視線移動と統一感を出すことができる ユーザビリティとデザイン 定員 48名(定員となり次第、受付終了となります)
※最小催行人数:24名 参加費 35歳以下: ¥25,000 36歳以上: ¥28,000 ※会場費、印刷費、宿泊費、食費、その他運営にかか る事務費含む(キャンセル不可) ※参加費は当日受付時に会場でお支払いいただきます。 (現金のみ) 定員: 48名(定員となり次第、受付終了となります) ※最小催行人数:24名 参加費: 35歳以下:¥25,000 36歳以上:¥28,000 ※会場費、印刷費、宿泊費、食費、その他運 営にかかる事務費含む(キャンセル不可) ※参加費は当日受付時に会場でお支払いいた だきます。(現金のみ)
デザインの基本 反復 ▪ 同じデザインの要素、グループを繰り返すことで、一貫性や安定性を与える。 ▪ ユーザーがパターンを予期するため、情報を認識しやすくなる。 ユーザビリティとデザイン 2024年11月22日 【勝手にセッション紹介⑤】招待講演「テスト設 計技法をちょっとだけ俯瞰してみよう」【申込締
切まであと2日!】 2024年11月18日 WACATE 2024 冬の申し込み締切を延長します (11/24まで) 2024年11月17日 【本日が申込締切!】申し込みできましたか?ポ ジペは書けましたか? 2024年11月22日 【勝手にセッション紹介⑤】招待講演「テスト設計 技法をちょっとだけ俯瞰してみよう」【申込締切ま であと2日!】 2024年11月18日 WACATE 2024 冬の申し込み締切を延長します(11/24 まで) 2024年11月17日 【本日が申込締切!】申し込みできましたか?ポジ ペは書けましたか?
デザインの基本 コントラスト ▪ 書体、線の太さ、色、形、サイズ、余白などを使って、強調したい情報を目立たせる。 ▪ 要素に強弱をつけることで、ユーザーの理解を整理する。 ユーザビリティとデザイン 定員: 48名(定員となり次第、受付終了となります) ※最小催行人数:24名
参加費: 35歳以下 :¥25,000 36歳以上 :¥28,000 ※会場費、印刷費、宿泊費、食費、その他運 営にかかる事務費含む(キャンセル不可) ※参加費は当日受付時に会場でお支払いいた だきます。(現金のみ) 定員: 48名(定員となり次第、受付終了となります) ※最小催行人数:24名 参加費: 35歳以下 :¥25,000 36歳以上 :¥28,000 ※会場費、印刷費、宿泊費、食費、その他運営 にかかる事務費含む(キャンセル不可) ※参加費は当日受付時に会場でお支払いいただ きます。(現金のみ)
ミラーの法則 ▪ 人間が短期的に覚えて置ける情報は7つ±2である。 ▪ 人間は情報をチャンクというかたまりで覚えている ▪ 情報はスペースをつくって、7つ±2のかたまりにまとめるわかりやすく する。 ユーザビリティとデザイン クレジットカード番号
クレジットカード番号 40128888888818811 4012 - 8888 - 8888 - 18811
ヒックの法則 ▪ 人間は選択肢の数が多いほど意思決定にかかる時間がながくなる ▪ 選択肢を減らしたり、グループ化することでユーザーに端的に情報を提供できる。 ユーザビリティとデザイン
フィッツの法則 ▪ 大本の法則は「対象に移動するために必要な時間」と「対象までの距離や対象のサイズ」が 相関するという法則 ▪ マウスカーソルの向き(つまりは大体横)に沿った方向(つまり横)の幅が長いほうがク リックしやすくなる ▪ ただし、画面端は通り過ぎる心配が少ないため、多少小さくても問題ない。 ユーザビリティとデザイン
リンク 【勝手にセッション紹介⑤】招待講演「テスト設計技法をちょっとだけ俯瞰してみよう」 リンク X X 〇 × 〇 〇 ×
視線の流れ ▪ ユーザーの視点の動きに逆らわない画面設計をこころがける ▪ 多くのユーザーが画面を見るとき、視線はFの字を描く。 ▪ メニューを上部、重要なもの(画像やタイトル)を左側に持ってくるとよい。 ユーザビリティとデザイン ❶ ❷
❸
配色 ▪ 色は数を少なく ▪ 使いすぎるとどこを目立たせたいかわからない ▪ メインのベースカラー1色、アクセントカラー1色、 あとは無彩色を原則とします。 ▪ グレースケールでもわかる
▪ 男性の20人に1人は色覚特性があります。 ▪ グレースケールでも成立するデザインを心がけて ください。 ▪ 色にはイメージがある ▪ システムでは一般的に「青」「緑」のような寒色 は安全、「暖色」、特に「黄色」は危険、「赤 色」は致命的、といったイメージがある。 イメージと真逆の配色はしない。 ユーザビリティとデザイン 安全 安全 危険 致命的 テスト技法 テスト分析 形式手法 テスト設計 テストプロセス ×
ユーザー動線に関する要素 ▪ デザインの要素 ▪ ユーザー動線に関する要素 ▪ 全体にかかわるもの ユーザビリティとデザイン デザインの基本 近接
デザインの基本 整列 デザインの基本 反復 デザインの基本 コントラスト ミラーの法則 ヒックの法則 フィッツの法則 視線の流れ 配色 サイトストラクチャ ナビゲーション インタラクション ヤコブの法則
▪ 画面の全体の構造のこと。 ▪ ユーザーが目的に到達できるように動線をイメージする ▪ 一般的に階層を深くするのはユーザーの負担になる。 ユーザビリティとデザイン サイトストラクチャ
サイトストラクチャの例 ユーザビリティとデザイン 階層型分類構造 トップページを起点として 親子関係で整理 ファセット分類型構造 ECサイトなどで使用。 情報を様々な切り口から 検索し、表示 Web型構造
Wikiなどの情報サイトで使用。 各情報がリンクで相互に 接続されている ハブスポーク型構造 SNSなどで使用。 トップページなどを ハブに各ページに遷移 直線型構造 申請画面など 目的が明確なときに 使用。
ナビゲーション ▪ サイトストラクチャをもとに、ユーザーを目的に誘導するためのイン ターフェースを設計する。 ユーザビリティとデザイン ヘッダー・フッター メニュー パンくずリスト
インタラクション ▪ ユーザーが行った結果がわかるように(色が変わる、メニューのアニ メーション)UIで表現する。 ユーザビリティとデザイン エラーがわかるような見せ方 カーソルを置いたら色が変わる 画面の遷移をみえるアニメーション 待ち状態の表現
ヤコブの法則 ▪ 一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じよ うな動作体験を望むという法則 ▪ よく使われるWebサイト、システムのUIはチェックする。 →真逆のような操作をユーザーに要求するUIは作成しない。 ユーザビリティとデザイン
ここまでが前提 ▪本当はもっとありますが・・・あくまで基礎的なこと ▪知りたい人は以下本参照 ユーザビリティとデザイン
これでできた・・・! ・・・とは・・・なりません ユーザビリティとデザイン
実際にはこんなことも・・・ ユーザビリティとデザイン 初心者でもわか りやすい画面を 作ったよ!!! こっちは初心者 じゃないんだ! データは一覧でみなが ら効率よくいれたかっ たのに、いちいち詳細
画面で入力なんてした くないんだよ!
ユーザビリティの 作りこみ方
ユーザビリティはユーザー×状況 ▪ ユーザビリティは、ある特定の状況で対象のユーザーが利用するときの効果、 効率、ユーザの満足度の尺度の度合い ▪ どんな状況でつかわれるのか、だれが使うのか、何の目的でつかうのか、 によってデザインを変える必要がある ▪ 状況:どこの場所でつかうのか?仕事か? Ex:外で携帯から使う
▪ ユーザー:システムを何回も使うユーザーか、会社員なのか学生なのか Ex:会社員 ▪ 目的:ユーザーはそのシステムを使って何を達成したいのか Ex:目的の場所に行きたい ユーザビリティの作りこみ方 ユーザーを特定し調査し分析したうえで 実装する必要がある
人間中心設計によるライフサイクル ▪人間中心設計(HCD)とは ▪ 「製品やシステムやサービスを、人間工学やユーザービリティの知識や技法をつかって、 そのシステムをより使いやすくすることを目指すシステム設計開発のアプローチ」 (ISO9241より) ▪ 利用状況・ユーザーを調査し、分析し、実装し、評価する。これを繰り返してより良いも のにする ユーザビリティの作りこみ方
①利用状況の 把握と明示 ②ユーザーの要求 事項の明確化 ③ユーザーの要求事項 を満足させる設計による 解決策の作成 ④要求事項に対する 設計の評価 要求事項が 適合している (実装) 人間中心 設計プロセス の計画 適切な段階へ反復
人間中心設計によるライフサイクル ▪ワークは、④の評価をやります ▪ ただし、システムを評価するには①~③が前提になるので、 ①~③も説明します。 ユーザビリティの作りこみ方 ①利用状況の 把握と明示 ②ユーザーの要求 事項の明確化
③ユーザーの要求事項 を満足させる設計による 解決策の作成 ④要求事項に対する 設計の評価 要求事項が 適合している (実装) 人間中心 設計プロセス の計画 適切な段階へ反復
①利用状況の把握と明示 ▪まず、ユーザーの状況を把握するための調査をする。 ユーザビリティの作りこみ方 • 質問紙調査 アンケート調査。市場調査、社会調 査に使われる。 • フィールドワーク・エスノグラフィ ユーザーの業務の場所に調査者が赴き、ユー
ザーの環境や設備、ユーザーの行動などを観察 する。 • インタビュー 調査対象者にインタビューし、業務のみ ならず調査対象者の環境や価値観、意図 の情報を観察で収集する • ダイアリー法 調査対象者に業務を行っている様子を日々客観 的、主観的に記録してもらう方法
• ペルソナ システムを使う仮の人物のプロフィール を作成し、対象ユーザーを明確にする。 • ワークモデル タスクを、人、手順、環境などの特性に 分解して、分析してまとめたもの ②ユーザー要求事項の明確化 ▪ユーザーは誰なのか、解決したい問題はなにかを導き出す
ユーザビリティの作りこみ方 なまえ: 年齢: 職業: 趣味: • KJ法 アイデアをカードに記してグループ化し ていく。 • シナリオ ユーザーが直面する課題、タスクを 構造化して整理する WHO Which What ・・・ ◦◦は ××する なぜなら ・・・
③ユーザーの要求事項を満足させる 設計による解決策の作成 ▪ 調査・分析した利用者と状況を実際にUIに落とし込んでいく ▪ 画面の実装ではなく、プロトタイプやワイヤーフレームのこともある ユーザビリティの作りこみ方 ①ゴール ②プラン ③詳細化
④実行 ⑦比較 ⑥解釈 ⑤知覚 外界(行為の対象) 申し込み完了 あなたは以下の内容で 申し込みしました 申込者:わかてたろう … ユーザーは 操作方法を 考える 目的を果たす ために入力 実行ボタン押下 ウエイト カーソルで 実行を確認 申込完了画面で システムが 作動したのを 知る 実際に ゴールを達成 できたか メールで確認 Ex)ノーマンの7段階モデル
③ユーザーの要求事項を満足させる 設計による解決策の作成 ▪ ユーザーや状況によって、実装すべきUIは異なるので注意する ユーザビリティの作りこみ方 熟練者 初心者 専門用語が一番 わかりやすい 出力する帳票と同じ
画面がいい 簡易な言葉で書いて ほしい 1つ1つ入力しやす い画面がいい
④要求事項に対する設計の評価 ユーザビリティの作りこみ方 総括的評価 形式的評価 分析的手法 実験的手法 ヒューリスティック評価 認知的ウォークスルー パフォーマンス測定 回顧法
アンケート調査 思考発話法
ユーザビリティ評価について ユーザビリティの作りこみ方 ④要求事項に対する設計の評価 手法 評価
ユーザビリティ評価について 分析的手法 • ユーザビリティエンジニアや ユーザインタフェースデザイ ナなどの「専門家」が、自ら の知識や経験に基づいて評価 する手法 • 主観的・仮説・設計段階で評
価可能 実験的手法 • 本物のユーザのデータに基づ いて評価する手法 • 客観的・事実・評価にはモノ が必要 • 被験者のリクルート方法を考 える必要がある ユーザビリティの作りこみ方 ④要求事項に対する設計の評価
ユーザビリティ評価について 総括的評価 • 実際に効果を測定し て目標値と照らし合 わせる方法 形式的評価 • インタフェースのど の部分が良いのか悪
いのか、どのように デザインを改善でき るのかを知る方法 ユーザビリティの作りこみ方 ④要求事項に対する設計の評価
今日はこの3つを説明します ユーザビリティの作りこみ方 ④要求事項に対する設計の評価 総括的評価 形式的評価 分析的手法 実験的手法 ヒューリスティック評価 認知的ウォークスルー パフォーマンス測定
回顧法 アンケート調査 思考発話法
パフォーマンス測定 ▪実験的手法 × 総括的評価 ▪被験者にシステムを操作してもらい、タスク達 成率(効果)やタスク達成時間(効率)を収集 する。またタスク終了後に難易度や満足度など の項目について質問を行い、主観的評価(満足 度)を算出する。 ▪統計としての結果が必要なので、大人数の被験
者で行う必要がある。 ユーザビリティの作りこみ方 ④要求事項に対する設計の評価
ヒューリスティック評価 ユーザビリティの作りこみ方 ④要求事項に対する設計の評価 ▪分析的手法 × 形式的評価 ▪専門家やデザイナーが知識や経験則にもとづいて、 製品の問題点を発見する。 ▪前述のデザインの要素 ▪次ページのニールセンのヒューリスティック10原則など。
ヒューリスティック評価 ユーザビリティの作りこみ方 ④要求事項に対する設計の評価 1. シンプルで自然な対話 シンプルで分かりやすいUI 2. ユーザーの言葉で話す システムの用語にはしない 3.
ユーザーの記憶負荷を最小限にする ユーザーの記憶に頼らず、システムが覚 えているようにする 4. 一貫性 各画面で、ナビゲーション、インタラク ション等のUIは同じ振る舞い 5. フィードバック ユーザーにシステムで今何が起こってい るのかわかるようにする 6. 出口を明らかにする 戻るボタンなど、今行っている操作を終 了する方法を明示する。 7. ショートカット リピーターが目的の機能に直接ジャンプ できるようにする 8. 適切なエラーメッセージ なぜエラーか、どうすればよいかがわか る。 9. エラーを防止する ユーザーがミスやエラーを起こさないUI を心がける。 10. ヘルプとドキュメンテーション わかりやすいマニュアル、ヘルプ ニールセンのヒューリスティック10原則
思考発話法 ユーザビリティの作りこみ方 ④要求事項に対する設計の評価 ▪実験的手法 × 形式的評価 ▪被験者がシステムを使いながら常に考えたこと を声に出していき、インタビュワーがそれを観 察および分析して問題点を洗い出す方法 →使用するときの様子を観察することで、
システムの使いにくい箇所を特定
思考発話法のイメージ ユーザビリティの作りこみ方 ④要求事項に対する設計の評価 ユーザー インタビューワー →テスト見学者
思考発話法のイメージ ユーザビリティの作りこみ方 ④要求事項に対する設計の評価 ユーザー インタビューワー →テスト見学者 占い結果をTwitterに アップしてください。 貴方はTwitterのタイム ラインでよく見かける
「古代生物占い」サイト に興味をもちました。
思考発話法のイメージ ユーザビリティの作りこみ方 ④要求事項に対する設計の評価 ユーザー インタビューワー →テスト見学者 ここに誕生日を 入力すればいい のかな? ・・・。
え、次にどうす ればいいの? カキカキ カキカキ カキカキ どうすればいい と思いますか?
今日はヒューリスティック評価を ワークします。 ユーザビリティの作りこみ方 ④要求事項に対する設計の評価 総括的評価 形式的評価 分析的手法 実験的手法 ヒューリスティック評価 認知的ウォークスルー
パフォーマンス測定 回顧法 アンケート調査 思考発話法
ワーク2 ▪ ワーク1であげてもらった付箋についていままでのセッションの内容 を振り返りながら 「何がよくないのか」「どうしたらいいのか」を追 記してみてください。 ▪ ワーク1で見つけたところ以外に、ユーザビリティの問題はあるで しょうか?ある場合には「よくないところ」「よくない理由」「どう したらいいのか」をあげてみてください。
▪ 時間は10分です。 ユーザビリティの作りこみ方
実際の開発と ユーザビリティ
人間中心設計はまわすことが大事 ▪ 評価・・・で終わりではない。調査し、解決策を実装し、 評価しつづけることが大事 実際の開発とユーザビリティ ①利用状況の 把握と明示 ②ユーザーの要求 事項の明確化 ③ユーザーの要求事項
を満足させる設計による 解決策の作成 ④要求事項に対する 設計の評価 要求事項が 適合している (実装) 人間中心 設計プロセス の計画 適切な段階へ反復
でもどこで使うの? 実際の開発とユーザビリティ
開発と人間中心設計 ▪最初の1歩 実際の開発とユーザビリティ 要件定義 設計 実装 テスト ユーザビリ ティの評価を やってみる
開発と人間中心設計 ▪次にこうなる 実際の開発とユーザビリティ 要件定義 設計 実装 テスト 利用状況の調 査と分析をし てみる
ユーザビリ ティの評価を やってみる 利用状況の調 査をもとに 設計する
開発と人間中心設計 ▪こうすることができる 実際の開発とユーザビリティ 要件定義 設計 実装 テスト 画面設計・ プロトタイプ でHCDを
まわす ワイヤー フレームで HCDをまわす 画面でHCD をまわす 製品でHCD をまわす
開発と人間中心設計 ▪こんなこともできる 実際の開発とユーザビリティ 第1 スプリント 第2 スプリント 第3 スプリント HCDを
まわす HCDを まわす HCDを まわす
・・・でも、もっと自分1人で 始められるものはないんですか? 実際の開発とユーザビリティ
今日からできるユーザビリティ ▪ずばり・・・ ▪ユーザーがどのようにシステムを使うか、イメー ジしながら開発・テストを行うようにすること ▪ 例えば・・・ ▪ 設計、開発したときに、どうしてそのUIにしたのか説明できるようにする ▪ テストしたときに、ユーザーがどう使うかを考えながらテストしてみる
▪ テストした時の画面の違和感がどうしてなのかを説明してみる ▪ ちなみに・・・ ▪ 思考発話法は知人にお願いをする簡単なものでもいいからやったほうがいい。 実際の開発とユーザビリティ
困ったときの参考文献① ▪ ヤコブ・ニールセン著 篠原稔和監訳 三好かおる訳「ユーザビリティエンジニアリング 原論 ユーザーのためのインタフェースデザイン」東京電機大学出版局 2002年 ▪ Jon
Yablonski著、相島 雅樹、磯谷 拓也、反中 望、松村 草也訳「UXデザインの法則― 最高のプロダクトとサービスを支える心理学」Ebooks版 オライリージャパン 2021年 ▪ 黒須正明著「人間中心設計の基礎 HCDライブラリー第1巻」Kindle版 近代科学社, 2016年 ▪ 黒須正明著「 UX原論 ユーザビリティからUXへ」Kindle版、2020年 ▪ 樽本徹也著「ユーザビリティエンジニアリング(第2版)―ユーザエクスペリエンスのた めの調査、設計、評価手法―」Kindle版 オーム社 2014年 ▪ 黒須正明著「ユーザビリティテスティング ユーザ中心のものづくりに向けて」共立出版 株式会社 2003年 ▪ 山崎和彦、八木大彦、竹内公啓著「人間中心設計入門」Kindle版 近代科学社, 2016年 ▪ 川合 俊輔、大本あかね、菊池崇「UXと理論で作る Webデザイン: デザイナーでなくてもわかる」 Kindle版 実際の開発とユーザビリティ
困ったときの参考文献② ▪ 元太秀司著「UIデザイン必携 ユーザーインターフェースの設計と改善を成功させる ために」翔泳社 2022年 ▪ 元太秀司著「UIデザインの教科書[新版] マルチデバイス時代のインターフェース 設計」翔泳社
2019年
ユーザビリティを作りこめ! ▪ご清聴ありがとうございました