モバイルuxを考慮したwebサイト設計方法の提案 ·...
TRANSCRIPT
モバイル UX を考慮した Web サイト設計方法の提案
2010SE032 伏屋 総馬 2010SE260 内海 太祐
指導教員: 青山 幹雄
1 はじめに
スマートフォンやタブレットの急速な普及に伴い,モバ
イルデバイスから Web サイトの利用が増加している.しか
し,モバイルデバイスから利用される際のユーザ経験を
考慮していない Web サイトは多い. 本研究では,モバイルデバイスに対応した Web サイト
を設計する際,ユーザの視点に立ち,ユーザ経験を向上
させることを目的とする. 2 研究課題
本研究では上記の背景を踏まえ,以下の 2 点を研究
課題とし,モバイルデバイスからの利用を考慮した Webサイトの設計プロセスを提案する. (1) モバイルデバイスに対応したWebサイトのUXを向上
させる手法を提供する.
(2) PC を基準に考えられ,肥大化した Web サイトから,
ユーザが真に必要としている機能,コンテンツを選
定する. 本研究では,ペルソナシナリオ法,ジャーニーマップを
利用し,ユーザが目的を達成するまでの流れにおける
ユーザの感情の変化を可視化することで,ユーザの視点
に立ち,モバイルデバイスからの利用を考慮した Web サ
イトの設計を可能とする. 3 関連研究 3.1 UX (User Experience)
UX とは,あるサービスやシステムを使用することによっ
て得られる経験や感情のことである[1]. 本研究では,モバイル端末としてスマートフォンやタブ
レット PC を対象とする.モバイル端末は,画面の大きさ,
メモリなどのリソースが限られているため,PC 向け Webサイトの機能やコンテンツを全て取り入れることは UX の
低下に繋がる. 3.2 人間中心設計
システムの使い方に焦点を当て,人間工学やユーザビ
リティの知識と技術を適用することにより,インタラクティブ
システムをより使いやすくすることを目的とする,システム
の設計と開発へのアプローチである. 3.3 ペルソナシナリオ法
ペルソナシナリオ法とは,詳細に定義された仮想ユー
ザであるペルソナにシナリオを付加することによって理想
的なシステムの挙動や機能を明確にする手法である.本
研究では,その表現手法としてジャーニーマップを使用
する. 3.4 ジャーニーマップ
ユーザがサービスを利用する上での,その時の感情
や行動を時間軸に沿って可視化する手法である.ユーザ
がサービスを利用する際に感じる満足度や,サービスに
対する価値を分析するために用いられる[3].
ジャーニーマップは以下の 5 つの要素から構成される. (1) レンズ(The Lens) (2) ジャーニーモデル(Journey Model) (3) 質的インサイト(Qualitative Insights) (4) 量的インサイト(Quantitative Insights) (5) 次に活かすべき要点(Takeaways) 4 アプローチ
ペルソナシナリオ法とジャーニーマップを用いて,モバ
イルデバイスからの利用を考慮した Web サイトを実現す
る設計手法を提案する(図 1). システムの改良の際にそのシステムのユーザにユーザ
リサーチをとり,ユーザ経験を収集し,ペルソナを作成す
る.ペルソナから作成されたシナリオをもとにジャーニー
マップを作成し,ユーザの行動に伴う感情や思考の変化
を可視化する.時間軸に沿ってユーザの行動をひとつの
マップに記述し,シナリオを視覚的に表現することで,問
題点の抽出,改善を行い,Web サイトの UX を向上する.
図 1 アプローチ
5 提案方法 5.1 提案プロセス
本研究では,人間中心設計プロセスにおける,要求獲
得と要求分析のフェーズを拡張して提案する.提案プロ
セスは,3 つのアクティビティからなる(図 2). (1) ペルソナの設定
(2) シナリオの作成
(3) ジャーニーマップの作成
図 2 提案プロセス
5.2 ペルソナ設定 (1) ユーザ経験の収集,抽出
現状のWebサイトの課題,改善点を含むユーザ経
験を収集するために,Webサイトの利用者を対象に
アンケートを実施する. 1) 特徴変数の抽出 ユーザの特徴を見出すためにアンケートから得ら
れたデータを基にユーザの特徴を表現する変数を
抽出する[2]. 2) パターンのセグメンテーション 複数の行動変数に共通性があるパターンを抽出し,
ユーザの特徴を見出す.異なる特徴を持つユーザ
群の数が生み出すペルソナの数となる. (2) ペルソナ設定
アンケートの結果を基に,ペルソナを作成する.名
前,年齢,居住地,性格,趣味などの基本属性を持
たせる.これに加えてモバイルデバイスやインター
ネットの慣れに関する属性を付加することによって,
ペルソナのイメージを明確にする.
5.3 シナリオ記述 作成したペルソナに行動変数の値を詳細に記す.
ユーザ調査のコンテキストを保ちながら,ユーザがある状
況において目的を達成するまでの一連の流れをシナリオ
として記述する.シナリオ作成に必要な要素は次の5つで
ある[2]. (1) シーンの設定 (2) ゴールの設定 (3) 途中経過 (4) ゴールの達成 (5) 結果
シナリオを記述することによって,Webサイトを利用す
るユーザの行動を詳細に把握することができる.
5.4 ジャーニーマップ作成 ジャーニーマップを作成し,問題点を把握する.ペル
ソナに近いユーザにインタビューをとるなど,ペルソナ作
成後に再度ユーザ調査を行い,思考や感情を補完する. 本研究では,操作ごとの感情的な満足度を 5 段階で
定量的に評価し,その値を UX 満足度と定義する. ジャーニーマップの記述方法を述べる.
(1) シナリオを操作単位で時系列順に記述する (2) 各操作を行う過程での思考,感情を記述する
横軸を時間軸とする.縦軸は Web サイトの特性や,着目するポイントに応じて決定する.
5.5 問題点の抽出 作成されたジャーニーマップをもとに,問題点の抽出
を行う.ユーザの UX 満足度の曲線に着目することで,
問題が局所的なものなのか,全体に及ぶのかを判断する. UX 満足度の曲線が下がっている,または値が低くな
っている行動に問題があると判断し,その行動における
思考から,問題点の発見につながる思考を抽出し,改善
策を検討する.
6 提案方法の適用 本研究では,ユーザ調査が可能な Web サイトとして,
南山大学瀬戸キャンパス学生情報ページを対象に提案
方法を適用した.
6.1 ユーザ調査 (1) アンケートの対象
本研究では,スマートフォンやタブレットPCなどの
モバイルデバイスから南山大学瀬戸キャンパス学生
情報ページを利用する学生ユーザが対象で,従来
型の携帯端末を利用している学生は対象外とした.
情報理工学部,総合政策学部1年生~4年生の合計
80人にアンケートを実施した.アンケートの設問は原
則として選択式とし,アンケートの最後に自由記述欄
を設け,アンケートの設問でカバーしきれないデータ
や定性的なデータを収集することが可能となる (2) アンケート結果
アンケート調査の結果,男女の間に学生情報ペー
ジに対する満足度の違いは見られなかったが,学年,
学部において差が見られた.その結果を表1に示す. 表 1 学部・学年別の満足度
総合政策 情報理工 学年平均
1年生 3.2 2.9 3.12年生 3.4 2.5 3.03年生 2.4 3.1 2.74年生 2.8 2.0 2.5
学部平均 3.0 2.6 2.8
学生情報ページの利用目的と利用目的ごとの満足
度を表2と図3に示す. 表 2 最もよく使うコンテンツ
利用目的 割合(%) News&Topics 6.3休講・補講情報 36.3スクールバス 35.0WebClass 12.5PORTA 10.0
0
1
2
3
4
5
使いやすさ 操作量 到達可能性 満足度
ユーザビリティ
利用目的
News&Topics休講・補講情報
スクールバス
WebClass
PORTA
図 3 利用目的ごとのユーザビリティ
表2と図3より,最も利用されているコンテンツはス
クールバスであるが,満足度は他のコンテンツよりも
低いことが分かる.
6.2 ペルソナ設定 アンケート調査の結果,満足度で差がでた学部・学年
ごとにペルソナを設定する.ペルソナは表3に示す4名と
する. 表3 ペルソナの分類
ペルソナ 学部 学年 ITに対する慣れ A 総合政策 3年生 人並み B 情報理工 4年生 成熟している C 総合政策 2年生 PCがほとんど D 情報理工 1年生 慣れていない 作成した4名のペルソナからプライマリペルソナを選定
する.ペルソナBはインターネットに成熟しており,イン
ターネットに成熟したユーザに特化した要求になる可能
性がある.これに対して,ペルソナDはインターネットにと
どまらず,ITに対して不慣れであるため,十分な要求を期
待できない.また,ペルソナCは,モバイルデバイスからの
利用がほとんどない. これらの理由から,ペルソナAをプライマリペルソナとし
て設定する.
6.3 シナリオ記述 ユーザ調査で得られた情報を基に,それぞれのペル
ソナにシナリオを記述する. アンケート調査の結果,シナリオのゴールを最も利用さ
れていたスクールバスの時刻表の確認とした.ゴールを
達成するまでのページ遷移を状態遷移図として表現し,
ペルソナの行動を視覚化することでユーザの行動を明確
にする.シナリオ記述の粒度は,一般的には定められて
おらず,自由な記述が可能である.本研究では,ジャー
ニーマップにプロットしやすい,ユーザの操作毎とした.
6.4 ジャーニーマップ作成 ペルソナ A~D のそれぞれのシナリオをもとに,ジャー
ニーマップを作成する.ペルソナに近いユーザ 8 名にシ
ナリオに沿って Web サイトを利用してもらい,インタビュ
ーを実施することで,行動に伴う思考と UX 満足度を補
完した. 図 4 にペルソナ A のジャーニーマップを示す.
図 4 ペルソナ A のジャーニーマップ
6.5 問題点の抽出 ポジティブな思考とネガティブな思考を色分けし,着目
すべき思考を明らかにしたジャーニーマップから問題点
を抽出する. 4 人のペルソナのジャーニーモデルは,「利用者の皆
さんへ」から pdf ファイルの時刻表へ到達するまでの流れ
と,「スクールバス時刻表モバイル版」から時刻表へ到達
するまでの流れの大きく 2 種類に分類され,それぞれグ
ループ 1,グループ 2 として,表 4 に抽出した問題点をま
とめる. この 2 つのジャーニーモデルごとに得られる問題点は
ほとんど共通していることが分かる. 表 4 問題点の抽出
問題点
ペルソナ グループ 1 グループ 2A C B D
時刻表までの流れがわかりにくい ○ リンクがどこにあるかわかりにくい ○ ○ ○ページ遷移の数が多い ○ ○ pdf ファイルは使いにくい ○ ○ 情報が見づらく,わかりにくい ○ ○
リンクをタップしにくい ○
6.6 改善策の検討 アンケート結果とジャーニーマップをもとに問題点の改
善策を検討する.プライマリペルソナであるペルソナ A の
問題点を最優先する. グループ1はページ遷移の数が多いと感じ,不満を感
じているが,グループ2はページ遷移の数による不満は
感じていない.よって,目的達成までのページ遷移の数
を「モバイル版スクールバス時刻表」を用いる場合の遷移
数以下になるように設定する.
グループ 1 の思考から,pdf ファイルはモバイルデバイ
スにはあまり適していないことがわかる.しかし,A の思考
にもあるように,1 ページに情報が網羅してあることや,
ファイルとして保存可能なことは pdf ファイルの利点であ
り,pdf による時刻表の表示を求めているユーザもいるだ
ろうと判断し,pdf ファイルへのリンクも別に用意しておく.
「情報が見づらくわかりにくい」ことと,「リンクがタップし
にくい」という問題点は,文字サイズを大きく,タップ可能
範囲を広くし,モバイルデバイスから利用しやすいように
設定することで解決できると考えられる.
改善策を表 5 にまとめる.
表 5 改善策の検討 問題点 改善策
時刻表までの流れがわかりにくい 時刻表の表示を最優先し,ス
クールバスページの最上部に
時刻表へのリンクを設置する リンクがどこにあるかわかりにくい
ページ遷移の数が多い 目的達成までのページ遷移数
を「モバイル版スクールバス時
刻表」以下になるようにする. pdf ファイルは使いにくい pdf ファイルを利用せずに時刻
表を表示する 情報が見づらく,わかりにくい 文字サイズを大きくし,タップ範
囲を広くする リンクをタップしにくい
7 プロトタイプ 検討した改善策を基に,プロトタイプを作成する.プロ
トタイプの作成には,モバイルデバイスに特化したUIを作
成できるjQuery Mobileを使用した. 学生情報ページは,利用頻度の高いコンテンツへのリ
ンクをアイコンを用いてページ上部に配置することによっ
て,視覚的に分かりやすくした.また,News&Topicsは情
報の種類別に色分けをした. スクールバスページは,時刻表までのページ遷移が多
いこと,時刻表のページが複数存在していることが問題
であったため,時刻表までのページ遷移を減らし,まとめ
られるページは1つにまとめた. 図5に改善後のスクールバスページの状態遷移図を示
す.
図5 改善後の状態遷移図
8 評価 提案方法の適用により,ユーザがよりよいユーザ経験
を得られたかどうかを確認するため,ペルソナに近いユー
ザ 8 名に作成したプロトタイプを利用してもらい,インタビ
ュー調査を実施した. 8.1 アンケート調査の比較
改善後のスクールバスページにおいて,アンケート項
目の(12)~(15)の 4 つの項目を評価してもらい,改善前
の評価と比較する.
図 6 アンケート調査の比較
図 6 から,(12)~(15)の項目全てにおいて,改善後の
ページの評価が改善前のページよりも上回る結果となっ
た.特に評価が低く,ユーザの心情が表れる「満足度」に
関する項目においても高い評価を得られるようになり,ユ
ーザの感情に着目して改善した効果が表れていることが
分かる.
8.2 UX 満足度の比較 ジャーニーマップを作成し,プロトタイプに対する UX
満足度の平均値を算出し,改善前の Web サイトに対す
る UX 満足度と比較する.
図 7 UX 満足度の比較
図 7 より,UX 満足度は全体を通して改善前より向上し
ていることが確認できた. 9 考察
ペルソナシナリオ法とジャーニーマップを組み合わせ
ることで,ジャーニーマップの構成要素のうち,レンズをペ
ルソナ,ジャーニーモデルをシナリオによる表現が可能と
なった.ペルソナを利用することで,ユーザを絞り込み,
ユーザ視点からの Web サイトに対する UX を分析するこ
とが可能となる.また,ペルソナからシナリオを作成するこ
とにより,ジャーニーモデルの範囲と粒度の設定を支援
することが可能である.そうしたレンズとジャーニーモデル
を持つジャーニーマップから得られる問題点は,客観的
に抽出された問題点であると考えられ,ユーザ視点から
システムを改善することが可能となった. 10 今後の課題
本研究では,提案方法の実践として南山大学瀬戸キ
ャンパス学生情報ページに適用した.しかし,この検証に
は不十分な点がある. 本研究における課題として,以下に 3 つあげられる.
(1) システムの広範囲に適用する場合のジャーニーモデ
ルの決定 (2) モバイル特性全てを考慮可能かどうかの検証 (3) 改善策の優先度の決定方法 11 まとめ
本研究では,ペルソナシナリオ法,ジャーニーマップを
利用することで,Web サイトを利用する際のユーザの思
考,感情の変化を可視化でき,開発者がユーザの感情
や思考を直感的に把握することが可能となり,よりユーザ
視点に近い問題点の抽出が可能となる.抽出された問題
点を基に Web サイトが提供するコンテンツや機能の取捨
選択を行うことで,モバイルデバイスから利用する際の
UX を考慮した Web サイトの設計方法を提案した. 12 参考文献 [1] 川西 裕幸,栗山 進,潮田 浩,UX デザイン入門,
日経 BP 社,2012. [2] S. Mulder and Z. Yaar,Web サイト設計のためのペ
ルソナ手法の教科書,毎日コミュニケーションズ,
2008. [3] 佐藤 啓太,中谷 多哉子,情報処理学会デジタル
プラクティス, Vol. 4 No. 2, Apr. 2013, pp. 161-167.