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

WACATE2024冬セッション資料(ユーザビリティ)

scarletplover
December 14, 2024

 WACATE2024冬セッション資料(ユーザビリティ)

scarletplover

December 14, 2024
Tweet

More Decks by scarletplover

Other Decks in Technology

Transcript

  1. それをどうやって指摘します? ▪ 不具合管理表にかいても・・・ ▪ それってあなたの感想ですよね? ▪ それってあなたのこだわりですよね? ▪ わたしってセンスないからさぁ ▪

    逆の立場で・・・ ▪ 画面作ったら「センスわるwwwww」っていわれたけど文句ばっかりで どうすればいいかは誰もわからない ▪ なんか違和感があるがどう直せばいいかわからない・・・ 突然ですが・・・ ユーザビリティを知ろう!
  2. 目次 ▪ 突然ですが・・・ ▪ ワーク(済) ▪ はじめに ▪ ユーザビリティとは ▪

    ユーザビリティとデザイン ▪ ユーザビリティの作りこみ方 ▪ ここでユーザビリティを評価するワーク ▪ 実際の開発とユーザビリティ はじめに
  3. ユーザビリティとは ▪ ユーザビリティは「ある特定の利用状況、ユーザー、環境、資源、 目標、タスク」に影響を受ける。 ユーザビリティとは 資源 システム、 製品又は サービス 利用状況

    ユーザ 環境 目標 及び タスク 資源 利用時の品質 ユーザビリティ 効果 効率 満足 • アクセシビリティ • 危害の回避 など その他の利用の品質 利用 ISO9241におけるユーザビリティの概念図
  4. ここで説明するデザインの要素 ▪ デザインの要素 ▪ ユーザー動線に関する要素 ▪ 全体にかかわるもの ユーザビリティとデザイン デザインの基本 近接

    デザインの基本 整列 デザインの基本 反復 デザインの基本 コントラスト ミラーの法則 ヒックの法則 フィッツの法則 視線の流れ 配色 サイトストラクチャ ナビゲーション インタラクション ヤコブの法則
  5. ここで説明するデザインの要素 ▪ デザインの要素 ▪ ユーザー動線に関する要素 ▪ 全体にかかわるもの ユーザビリティとデザイン デザインの基本 近接

    デザインの基本 整列 デザインの基本 反復 デザインの基本 コントラスト ミラーの法則 ヒックの法則 フィッツの法則 視線の流れ 配色 サイトストラクチャ ナビゲーション インタラクション ヤコブの法則
  6. デザインの基本 近接 ▪ 人は距離が近い情報に「関係があるもの」と認識する習性がある。 ▪ 情報をグループ化して、近づけること、余白を入れることを意識する ユーザビリティとデザイン 取得情報 WACATEはワークショップ申し込みの際に以下の 情報を取得いたします。

    •氏名 •性別 •年齢… 利用目的 取得した情報は以下の目的のみで利用いたします。 •ワークショップの宿泊施設への宿泊者名簿提供 •ワークショップの運営(班割り、部屋割り等) … 取得情報 WACATEはワークショップ申し込みの際に以下の 情報を取得いたします。 •氏名 •性別 •年齢… 利用目的 取得した情報は以下の目的のみで利用いたします。 •ワークショップの宿泊施設への宿泊者名簿提供 •ワークショップの運営(班割り、部屋割り等) …
  7. デザインの基本 整列 ▪ 情報を左揃え、中央揃え、右揃え、グリッドのように透明な線を用いて要素をそ ろえて配置する。 ▪ 要素が整列されていることでスムーズな視線移動と統一感を出すことができる ユーザビリティとデザイン 定員 48名(定員となり次第、受付終了となります)

    ※最小催行人数:24名 参加費 35歳以下: ¥25,000 36歳以上: ¥28,000 ※会場費、印刷費、宿泊費、食費、その他運営にかか る事務費含む(キャンセル不可) ※参加費は当日受付時に会場でお支払いいただきます。 (現金のみ) 定員: 48名(定員となり次第、受付終了となります) ※最小催行人数:24名 参加費: 35歳以下:¥25,000 36歳以上:¥28,000 ※会場費、印刷費、宿泊費、食費、その他運 営にかかる事務費含む(キャンセル不可) ※参加費は当日受付時に会場でお支払いいた だきます。(現金のみ)
  8. デザインの基本 反復 ▪ 同じデザインの要素、グループを繰り返すことで、一貫性や安定性を与える。 ▪ ユーザーがパターンを予期するため、情報を認識しやすくなる。 ユーザビリティとデザイン 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日 【本日が申込締切!】申し込みできましたか?ポジ ペは書けましたか?
  9. デザインの基本 コントラスト ▪ 書体、線の太さ、色、形、サイズ、余白などを使って、強調したい情報を目立たせる。 ▪ 要素に強弱をつけることで、ユーザーの理解を整理する。 ユーザビリティとデザイン 定員: 48名(定員となり次第、受付終了となります) ※最小催行人数:24名

    参加費: 35歳以下 :¥25,000 36歳以上 :¥28,000 ※会場費、印刷費、宿泊費、食費、その他運 営にかかる事務費含む(キャンセル不可) ※参加費は当日受付時に会場でお支払いいた だきます。(現金のみ) 定員: 48名(定員となり次第、受付終了となります) ※最小催行人数:24名 参加費: 35歳以下 :¥25,000 36歳以上 :¥28,000 ※会場費、印刷費、宿泊費、食費、その他運営 にかかる事務費含む(キャンセル不可) ※参加費は当日受付時に会場でお支払いいただ きます。(現金のみ)
  10. 配色 ▪ 色は数を少なく ▪ 使いすぎるとどこを目立たせたいかわからない ▪ メインのベースカラー1色、アクセントカラー1色、 あとは無彩色を原則とします。 ▪ グレースケールでもわかる

    ▪ 男性の20人に1人は色覚特性があります。 ▪ グレースケールでも成立するデザインを心がけて ください。 ▪ 色にはイメージがある ▪ システムでは一般的に「青」「緑」のような寒色 は安全、「暖色」、特に「黄色」は危険、「赤 色」は致命的、といったイメージがある。 イメージと真逆の配色はしない。 ユーザビリティとデザイン 安全 安全 危険 致命的 テスト技法 テスト分析 形式手法 テスト設計 テストプロセス ×
  11. ユーザー動線に関する要素 ▪ デザインの要素 ▪ ユーザー動線に関する要素 ▪ 全体にかかわるもの ユーザビリティとデザイン デザインの基本 近接

    デザインの基本 整列 デザインの基本 反復 デザインの基本 コントラスト ミラーの法則 ヒックの法則 フィッツの法則 視線の流れ 配色 サイトストラクチャ ナビゲーション インタラクション ヤコブの法則
  12. サイトストラクチャの例 ユーザビリティとデザイン 階層型分類構造 トップページを起点として 親子関係で整理 ファセット分類型構造 ECサイトなどで使用。 情報を様々な切り口から 検索し、表示 Web型構造

    Wikiなどの情報サイトで使用。 各情報がリンクで相互に 接続されている ハブスポーク型構造 SNSなどで使用。 トップページなどを ハブに各ページに遷移 直線型構造 申請画面など 目的が明確なときに 使用。
  13. ユーザビリティはユーザー×状況 ▪ ユーザビリティは、ある特定の状況で対象のユーザーが利用するときの効果、 効率、ユーザの満足度の尺度の度合い ▪ どんな状況でつかわれるのか、だれが使うのか、何の目的でつかうのか、 によってデザインを変える必要がある ▪ 状況:どこの場所でつかうのか?仕事か? Ex:外で携帯から使う

    ▪ ユーザー:システムを何回も使うユーザーか、会社員なのか学生なのか Ex:会社員 ▪ 目的:ユーザーはそのシステムを使って何を達成したいのか Ex:目的の場所に行きたい ユーザビリティの作りこみ方 ユーザーを特定し調査し分析したうえで 実装する必要がある
  14. 人間中心設計によるライフサイクル ▪ワークは、④の評価をやります ▪ ただし、システムを評価するには①~③が前提になるので、 ①~③も説明します。 ユーザビリティの作りこみ方 ①利用状況の 把握と明示 ②ユーザーの要求 事項の明確化

    ③ユーザーの要求事項 を満足させる設計による 解決策の作成 ④要求事項に対する 設計の評価 要求事項が 適合している (実装) 人間中心 設計プロセス の計画 適切な段階へ反復
  15. ①利用状況の把握と明示 ▪まず、ユーザーの状況を把握するための調査をする。 ユーザビリティの作りこみ方 • 質問紙調査 アンケート調査。市場調査、社会調 査に使われる。 • フィールドワーク・エスノグラフィ ユーザーの業務の場所に調査者が赴き、ユー

    ザーの環境や設備、ユーザーの行動などを観察 する。 • インタビュー 調査対象者にインタビューし、業務のみ ならず調査対象者の環境や価値観、意図 の情報を観察で収集する • ダイアリー法 調査対象者に業務を行っている様子を日々客観 的、主観的に記録してもらう方法
  16. • ペルソナ システムを使う仮の人物のプロフィール を作成し、対象ユーザーを明確にする。 • ワークモデル タスクを、人、手順、環境などの特性に 分解して、分析してまとめたもの ②ユーザー要求事項の明確化 ▪ユーザーは誰なのか、解決したい問題はなにかを導き出す

    ユーザビリティの作りこみ方 なまえ: 年齢: 職業: 趣味: • KJ法 アイデアをカードに記してグループ化し ていく。 • シナリオ ユーザーが直面する課題、タスクを 構造化して整理する WHO Which What ・・・ ◦◦は ××する なぜなら ・・・
  17. ③ユーザーの要求事項を満足させる 設計による解決策の作成 ▪ 調査・分析した利用者と状況を実際にUIに落とし込んでいく ▪ 画面の実装ではなく、プロトタイプやワイヤーフレームのこともある ユーザビリティの作りこみ方 ①ゴール ②プラン ③詳細化

    ④実行 ⑦比較 ⑥解釈 ⑤知覚 外界(行為の対象) 申し込み完了 あなたは以下の内容で 申し込みしました 申込者:わかてたろう … ユーザーは 操作方法を 考える 目的を果たす ために入力 実行ボタン押下 ウエイト カーソルで 実行を確認 申込完了画面で システムが 作動したのを 知る 実際に ゴールを達成 できたか メールで確認 Ex)ノーマンの7段階モデル
  18. ユーザビリティ評価について 分析的手法 • ユーザビリティエンジニアや ユーザインタフェースデザイ ナなどの「専門家」が、自ら の知識や経験に基づいて評価 する手法 • 主観的・仮説・設計段階で評

    価可能 実験的手法 • 本物のユーザのデータに基づ いて評価する手法 • 客観的・事実・評価にはモノ が必要 • 被験者のリクルート方法を考 える必要がある ユーザビリティの作りこみ方 ④要求事項に対する設計の評価
  19. ユーザビリティ評価について 総括的評価 • 実際に効果を測定し て目標値と照らし合 わせる方法 形式的評価 • インタフェースのど の部分が良いのか悪

    いのか、どのように デザインを改善でき るのかを知る方法 ユーザビリティの作りこみ方 ④要求事項に対する設計の評価
  20. ヒューリスティック評価 ユーザビリティの作りこみ方 ④要求事項に対する設計の評価 1. シンプルで自然な対話 シンプルで分かりやすいUI 2. ユーザーの言葉で話す システムの用語にはしない 3.

    ユーザーの記憶負荷を最小限にする ユーザーの記憶に頼らず、システムが覚 えているようにする 4. 一貫性 各画面で、ナビゲーション、インタラク ション等のUIは同じ振る舞い 5. フィードバック ユーザーにシステムで今何が起こってい るのかわかるようにする 6. 出口を明らかにする 戻るボタンなど、今行っている操作を終 了する方法を明示する。 7. ショートカット リピーターが目的の機能に直接ジャンプ できるようにする 8. 適切なエラーメッセージ なぜエラーか、どうすればよいかがわか る。 9. エラーを防止する ユーザーがミスやエラーを起こさないUI を心がける。 10. ヘルプとドキュメンテーション わかりやすいマニュアル、ヘルプ ニールセンのヒューリスティック10原則
  21. 人間中心設計はまわすことが大事 ▪ 評価・・・で終わりではない。調査し、解決策を実装し、 評価しつづけることが大事 実際の開発とユーザビリティ ①利用状況の 把握と明示 ②ユーザーの要求 事項の明確化 ③ユーザーの要求事項

    を満足させる設計による 解決策の作成 ④要求事項に対する 設計の評価 要求事項が 適合している (実装) 人間中心 設計プロセス の計画 適切な段階へ反復
  22. 困ったときの参考文献① ▪ ヤコブ・ニールセン著 篠原稔和監訳 三好かおる訳「ユーザビリティエンジニアリング 原論 ユーザーのためのインタフェースデザイン」東京電機大学出版局 2002年 ▪ Jon

    Yablonski著、相島 雅樹、磯谷 拓也、反中 望、松村 草也訳「UXデザインの法則― 最高のプロダクトとサービスを支える心理学」Ebooks版 オライリージャパン 2021年 ▪ 黒須正明著「人間中心設計の基礎 HCDライブラリー第1巻」Kindle版 近代科学社, 2016年 ▪ 黒須正明著「 UX原論 ユーザビリティからUXへ」Kindle版、2020年 ▪ 樽本徹也著「ユーザビリティエンジニアリング(第2版)―ユーザエクスペリエンスのた めの調査、設計、評価手法―」Kindle版 オーム社 2014年 ▪ 黒須正明著「ユーザビリティテスティング ユーザ中心のものづくりに向けて」共立出版 株式会社 2003年 ▪ 山崎和彦、八木大彦、竹内公啓著「人間中心設計入門」Kindle版 近代科学社, 2016年 ▪ 川合 俊輔、大本あかね、菊池崇「UXと理論で作る Webデザイン: デザイナーでなくてもわかる」 Kindle版 実際の開発とユーザビリティ