UX Analytics Lab 「UX Storytellers」読書会 #8 24 Jan 2016 at 13:00 @ ajike Yukio Yoshida Section Martin Belam Information Architect at The Guardian London, UK Using the Right Tool for the Job P349～

1. UX Analytics Lab 「UX Storytellers」読書会 #8
24 Jan 2016 at 13:00 @ ajike
Yukio Yoshida
1

2. Introduction
2
●概要
• テキスト：P349～
• タイトル：Using the Right Tool for the Job
• ストーリーテイラー：Martin Belam （ Information Architect at The Guardian / London, UK） ※ソニー、ボーダフォン、
科学博物館、BBCなどのコンサルティング実績があり、2009年2月から guardian.co.uk ウェブ開発チームの情報アーキテク
トを担当。Web: www.currybet.net（※IA、Degital Media）,Twitter: currybet
• 内容：2009年12月初めに新たなガーディアン求人サイト（新サイト＆サブカテゴリサイト）を立ち上げた際のリニューアル
プロジェクトの初期段階で実施したテスト（3つの手法を組み合わせた）で得た知見の話
• リニューアル目的：使いやすさだけでなく、商売のパフォーマンスの向上（募集広告からの収益）
• リニューアル目標：ビジネス領域のメインジャンルへの検索エンジンからの流入増、サイト構造を再編し、新しいテーマの階
層を追加することでのランキングアップ
• リニューアル前の仮説：デザインの刷新、大量の求人広告の分類

3. Introduction
3
●伝えたいコト
• ビジネス内へユーザーの声を！（ユーザー中心設計プロセスがビジネスへ価値をもたらす）
• 3つのテストを組み合わせたことで決定的な答えを得られたこと
• アナタの費やす時間全てをパフォーマンスアップさせることが出来る（大規模リニューアルよりも反復設計）

4. Agenda
1. Guerrilla User Testing
2. Online Taxonomy Research
3. Progressing the Information Architecture
4. Lab-User Testing With Madgex
5. Visual Design Process
6. Lessons Learnt
7. About the Author
4

5. 1. Guerrilla User Testing
5
●実施概要
• 検証事項：他の求人サイト使用有無、下記対象サイト閲覧後の反応観察。特に求人の捜し方（閲覧 or 検索。事前に閲覧して
探す情報有り）、使用メディア（メール or LinkedIn)
• 実施対象物：http://careers.guardian.co.uk/とhttp://silverbackapp.com/
• 実施場所：ロンドン大学院フェア＠イズリントン ※会場の中央スタンド
• 実施機器：マーティンのMacBook
• 記録方法：画面上のアクション（頭や胴体まで含む映像と自身の声も含む音まで）をウェブカムで
●アウトプット
• 複数の参照パスを使用する説得力のある証拠を得ることが出来た
●得られたコト
• 「あなたがビデオ」、同意（署名）の省略 ※理由：録画されていることで恐怖を感じさせてしまった
• ウェブカムの利便性
• Good or Bad practice を学ぶことが出来た

6. 2. Online Taxonomy Research
6
●実施概要
• 検証事項：サイトユーザーとテストユーザーとチームの分類肢（モレ・ヌケ・ダブリ）の検証 ※例）「ウェブ」「インター
ネット」「デジタル」
• 前提条件：主力分野の蓄積データ（競合含む）有り、同僚の存在、リサーチ部門の存在、4万人以上のパネル有り
●プロセス
1. 自社サイトのカテゴリ、サブカテゴリの抽出
2. 競合サイト（広範囲）のカテゴリ抽出 ※サイト強みである就職活動領域でのカテゴリも抽出
3. 同僚を交えてのカードソーティングでの検証
4. パネルでの検証 ※仕事を探していたジャンル別のユーザー
●アウトプット
• サブカテゴリ含めたラベル（分類）の確証を得られた

7. 3. Progressing the Information Architecture
7
●実施概要
• 検証事項：多くの異なる情報構造を生成をすること ※理由：別の方法を模索することができる
• 使用道具：鉛筆と紙
• 実施場所：デスク以外 ※理由：電話、メール、ツイッターなどに気をとられないようにする
●プロセス
1. ナビゲーション（左）の閲覧カテゴリのアイデア出し ※アルファベット順ではない
2. バリエーションを作成
3. プロダクトマネージャーとディスカッション
4. 3をふまえデザインへ落し込む
●アウトプット
• タブ付きナビゲーション ※カテゴリ及びサブカテゴリのセット
• 売れるスロット（場所、時間）の発見 ※採用担当者へ広告配置機会として提供

8. 3. Progressing the Information Architecture
8
●得られたコト
• 詳細度（忠実度）により大きく変化する ※情報量のハンドリング
• コンテンツをグレーのボックスでレイアウト ※情報の相対的な階層構造で判断できる

9. 4. Lab - User Testing With Madgex
9
●前提条件
• 調査方法：ユーザビリティテスト
• 調査対象物：新サイトとサブカテゴリサイトのワイヤフレーム
• 調査対象者：新サイトは現サイトで高いプロファイルを持つ2人を、サブカテゴリサイトは異なるカテゴリの被験者を採用
• 調査担当： Madgex（https://www.madgex.com/） ※テストスクリプトはマーティン、ジョーンズ、ハリー（UXコンサ
ル http://brignull.com/）、モデレータはサイモン
• 調査範囲：End 2 End test プロセス ※詳細は別紙参照
• 使用道具：プロトタイプ作成ツールAxure（https://axure.newson.co.jp/）
●アウトプット
• サブカテゴリサイトが有用 ※ブックマークとSEOの目的のために新しいトップレベルのURLを提供する
• タブ付きナビゲーションの却下 ※ナビゲーションの第二階層にてサブカテゴリサイトを表示

10. 4. Lab - User Testing With Madgex
10
●得られたコト
• テストの映像は信じられないほど強力な説得材料となる
• 修正よりも予算を抑えることが出来る
• 方向違いの作り込み（完璧を目指す）にリソースが割かれることを防ぐ
• 最終デザインの形成に適している
• プロトタイプの統一 ※クリック可能なHTMLページなど混合したのプロトタイプをユーザーへ提示はNG
• 余分なモノを作らなくて済む ※2人の為
• リソースの確保 ※本格的なバージョン作成の際のリソース確保

11. 5. Visual Design Process
11
●概要
• 目標：インハウススタイルを取り入れデザインの生成
• チーム：ガーディアンHQとMadgex設計チームの共同
• 作業担当：Madgex
●ビジュアルデザインプロセス
1. ガーディアンの持っている知識・ノウハウとテストで得られたモノを結びつける
2. 完成、構築開始

12. 6. Lessons Learnt
12
●プロジェクト全般で得られたコト
• 3つのテスト方法を組み合わせた結果、優れたUX（SEO、ユーザビリティ）の提供の助けとなった
• テストやインタビューでのユーザーの声をビジネス内への定期的な投与量の発見＆有用であること
• 製品開発プロセスにおけるゲリラユーザーテストの役割の確立
• iPhoneアプリケーションテストの開発（フリップミニビデオカメラで携帯電話使用者を撮影）

13. 参照資料
13
4. Lab - User Testing With Madgex
●システムテストとは、利用ユーザーの様々な視点でシステム全体が正しく動作するかのテスト
• 運用テスト：実運用に近い環境にでの運用テスト
• 操作性テスト：利用ユーザー視点で操作を行うテスト
• 構成テスト：様々な構成パターンでのテスト
• マニュアルテスト：マニュアル通りに操作して問題なく動作することを確認するテスト
●End2End testとは、端から端まで（外部→入力→システム→出力→外部）全体が正しく動作するかのテスト
• 起用される背景：部分に対するテストを積上げても繋がっていることを保証できない
• 事例（外部への出力の場合）：画面→通信→印刷→ファイル
• 特徴：テスト結果判断は、システム外部も含めて行う必要がある
Toru Koido 氏 資料参照
http://www.slideshare.net/koido1961/ss-26208119

14. 参照資料
14
4. Lab - User Testing With Madgex
●Vertical
「垂直」の意。
Vertical（market）とは、特定のニーズを持った業種や顧客のグループを指す。
Vertical（market）は、大きな産業の一部＝ニッチ市場を指す。
専門業者の展示会を vertical marketing が行われる場所として言える。
Vertical marketing の逆は horizontal marketing。
まとめると、すごく狭い市場のことを Vertical（market） バーティカル市場と呼ぶことが出来る。
ShareWis PRESS参照
http://press.share-wis.com/what-is-vertical