日本ソフトウェア科学会第 33 回大会 (2016 年度) 講演論文集

WebUI ユーザビリティ向上のための支援ツールの検討
塩畑 博文

上田 賀一

Web アプリケーションのユーザビリティはユーザ数を決める大きな要因である．そのため WebUI ユーザビリティを高くすることが課題の一つである．現在，Web アプリケーションのユーザビリティを評価する研究が提案されている．しかし，評価支援は可能になったが，ユーザビリティを向上させるには，仕様，デザインを変更し再作成しなければならない．そこで，本研究では Web アプリケーションの仕様やデザインを変更せずに，クライアント側からWeb ページに操作情報を書き加えることで，WebUI ユーザビリティの向上を目的とした支援ツールを試作し有用性を検討する．
Usability of web applications is a major factor in determining the number of users. Therefore, improvementof the Web UI usability is one of the challenges. Studies evaluating the usability of the web application is
proposed currently. The evaluation of Web UI usability has been made possible, but we must change thespecification and design of web applications, and must re-create them in order to improve usability. In thisstudy, without changing the specification and design of web applications, by adding operation information
to the web page on the client side, we make prototype support tool for the purpose of improving the Web
UI usability, and consider its utility.

しかし，ユーザビリティ評価で見つかった問題を解

1 はじめに決するには，仕様やページ構成を変更する必要があ

近年，Web アプリケーションの普及とともに，Webる．既に運用されている Web アプリケーションの仕ユーザビリティが注目されている [7]．簡単に目的を様やページ構成を変更すると，ユーザが離れるリスク達成することができないユーザビリティの低い Web[2] や高い費用が発生する問題が想定される．

アプリケーションではユーザ数の確保が困難である．

そこで，本研究では Web サーバ側を変更せずに，ユーザ数に影響する Web ユーザビリティは重要性がクライアント側においてサポート機能を追加するこ高いといえる．とで，WebUI ユーザビリティを向上させるツールを高いユーザビリティを持つ Web アプリケーション試作し，有用性を検討した．

を開発するために，ユーザビリティ評価が行われる．
ユーザ調査，ガイドラインテスト，ヒューリスティッ2 関連研究ク評価などの方法を利用することで Web アプリケーユーザビリティ評価を効率よくすることで，ユーションが持っているユーザビリティの問題を発見できザビリティの向上を支援する研究が提案されている．

る．また，ユーザビリティ評価支援ツール [1] [6] [5] をErnesto Arroyo らの研究 [1] では，Web サイト上の利用することで，より高いユーザビリティ評価が可能マウスカーソルの動きを記録するシステムを開発してである．

いる．このシステムは，Web サイト訪問者のマウスカーソルの軌跡を表示することができる．マウスカー

Study of support tool for web usability improvement.
Hirobumi Shiohata, Yoshikazu Ueda, 茨城大学, Ibaraki
University.

ソルの軌跡を分析することで，Web サイトが持つレイアウトの問題を発見できる．坂井らの研究 [6] では，ユーザの視線と操作の記録，再生，分析を支援する

全さに関連して費やした資源

ユーザビリティ評価環境を開発している．このユーザ満足度：不快さのないこと，及び製品使用に対しビリティ評価環境があれば視線データを利用して問題ての肯定的な態度のあるページを探せるなど，ユーザビリティ評価を効利用の状況：利用者，仕事，装置（ハードウエア，率的に支援できる．福田らの研究 [5] では，アクセシソフトウエア及び資材），並びに製品が使用されビリティ向上支援ツール aDesigner を提案している．

る物理的及び社会的環境

aDesigner を用いることで視覚障害者/高齢者のアクセス環境を健常者にもわかりやすく視覚化でき，視本研究の目的は，Web アプリケーションを変更せ覚障害者/高齢者が持つ Web サイト内のユーザビリずに，そのユーザビリティを向上させることが目的でティに関する問題を発見することができる．

ある．しかし，ユーザビリティのすべての属性を向上

しかし，ユーザビリティ評価支援ツールで発見したさせることは容易ではないため，まず根本である「有問題を解決するには Web アプリケーションのページ効さ」の改善に取り組んだ．本研究では，ある Web構成，振舞いなどの仕様を変更する必要がある．既アプリケーションに長けた利用者の手順を共有するこに運用されている Web アプリケーションの仕様変更とで有効さの向上を試みる．

はユーザが離れるリスクや高い費用の発生が考えられる．本研究では Web サーバ側を変更せずにクラ3. 2 WebUI ユーザビリティ向上支援ツール

イアント側においてサポート機能を追加することで，本ツールで Web アプリケーションに長けた利用者

WebUI ユーザビリティを向上させるツールを試作すが目標を達成するための案内 (ガイド) を作成し，長る．サポート機能追加の選択を可能し，サポートを初けていない利用者がそのガイドを利用することで，よ心者のみに適用することで，熟練のユーザが離れるリり正確に目標を達成することができる．本ツールの主スクを防ぐ．

機能はガイドの作成とガイドの表示である．

3. 2. 1 ガイドの作成

3 WebUI ユーザビリティの向上

本ツールでは，Web アプリケーション上の操作 (要

ここでは，支援ツールの作成にあたりユーザビリ

素のクリック，ドラック，テキストボックスへの入力，ティの定義を確認する．その上でサポート範囲の特性チェックボックスの選択など) の順序をガイドとしてを取り決め，支援ツールを紹介する．

記録する．ガイドの作成は以下の手順で行う．

1. ガイド名とガイドの説明を入力し，ガイド作成
3. 1 ユーザビリティについて視覚表示装置を用いたオフィス作業に対する人間工学的要求事項を取り扱う規格 ISO9241 の 11 章 [3] ではユーザビリティは以下の定義と属性を持つ．
定義ある製品が，指定された利用者によって，指定さボタンを押下する．

2. ガイド名，ガイドの説明，ガイド開始の URL，ガイド開始のドメイン名が記録される．

3. Web アプリケーション上で操作が発生する度に，その操作についての説明を入力し，その操作，操作説明，順序番号が記録される．

れた利用の状況下で，指定された目的を達成する

4. ガイドの最終ページに到達したら，ガイド作成ために用いられる際の有効さ, 効率及び利用者の完了ボタンを押下し，ガイドの作成を完了する．

満足度の度合い．
属性

3. 2. 2 ガイドの表示記録された操作順序ごとにクリックされた箇所の有効さ：利用者が，指定された目標を達成する上強調表示や操作説明を Web ページに書き加えること

での正確さ及び完全さで，目標達成までユーザを支援する．ガイドの表示は効率：利用者が，目標を達成する際に正確さと完以下の手順で行う．

1. 開始するガイドを選択する．
2. 開始したガイドのキー，順序番号を元に操作の情報がデータベースから読み込まれる．と id 属性値がデータベースから読み込まれる．

4. id 属性値または href 属性値に一致する要素が強調表示される．

3. その操作の情報を Web ページに書き加える．

5. 要素をクリックしページを移動する．次のアン

4. 操作を行い次の操作がある場合は，順序番号をカー要素が存在する場合は，ステップ 3 へ戻る．

増やしステップ 2 へ戻る．

5. 次の操作が無い場合，つまりガイドが完了した
場合はガイドを終了する．

6. 強調表示すべき要素が無くなった場合，つまりガイドが完了した場合はガイド終了のポップアップを表示する．
図 2 に本ツールが取り扱うデータモデルの ER 図

4 プロトタイプツールの開発を示す．href 属性値および id 属性値は強調する箇所

3. 2 で説明した方法が有用であるかを調査するためを特定するために利用する．id 属性値に一致する要に，まず本ツールのプロトタイプを開発した．

素がなかった場合は，href 属性値に一致する要素を強調表示する．id 属性値はそのページで一意である

4. 1 プロトタイプツールの機能必要がある．

プロトタイプツールは，クリック順序を操作手順として記録してガイドとして表示する．

4. 1. 1 ガイドの作成

4. 2 プロトタイプツールの実装
4. 1 で述べた機能の実装方法について説明する．

プロトタイプツールでは，html 要素のクリック順

普段使い慣れたブラウザ上で本機能を利用できる序をガイドとして記録する．ガイドの作成は以下の手ようにするために，プロトタイプツールをブラウザの順で行われる．

拡張機能として開発した．

1. ガイド名を入力し，ガイド作成ボタンを押下する．

2. ガイド名，ガイド開始の URL，ガイド開始のドメイン名が記録される．

拡張機能とはブラウザの機能性を高める小さなソフトウェアである．ブラウザの利用者は必要な機能をブラウザに追加し，ブラウザをカスタマイズすることができる．

3. html のアンカー要素をクリックする度に，その本研究では，Google が提供する Google Chrome ブ

要素の id 属性値と href 属性値，順序番号が記録

ラウザの拡張機能として本ツールを試作した．Chrome

される．id 属性値がない場合は，href 属性値とは世界でトップシェアを占め，日本でも高いシェアを順序番号が記録される．

占めるため，Chrome の拡張機能として本ツールを開4. ガイドの最終ページに到達したら，ガイド作成完了ボタンを押下し，ガイドの作成を完了する．

発することは広範囲のユーザを支援できると考えたからである．

4. 1. 2 ガイドの表示

4. 2. 1 Chrome 拡張機能の構成

クリックされた順番ごとにアンカー要素を強調表

プロトタイプツールのガイド作成機能の実装方法

示し目標達成までユーザを支援する．プロトタイプを説明する前に，Chrome 拡張機能の構成について説

ツールでは，その要素の枠の色を赤色に変更し，フォ明する．

ントサイズを大きくすることで要素を強調する．ガイ

Chrome の拡張機能の振る舞いは，バックグラウン

ドの表示の利用イメージを図 1 に示す．ガイドの表示

ドで動いているページ (Background-Page) で制御さは以下の手順で行う．

れる．ブラウザが読み込んでいるページ上で制御する

1. 現在のドメイン名のガイド一覧が表示される．のではなく，Background-Page で制御するため，拡2. 開始するガイドを選択する．

張機能は直接，現在読み込んでいるページの内容を取

3. 現在のガイド番号，順序番号を元に href 属性値得，変更することができない．そのために，Content-図1

図2

プロトタイプツールの利用イメージツールの ER 図

図3

Chrome 拡張機能の構成イメージ

Script を利用する．Content-Script とは，現在読みDatabase API [4] を用いた．Indexed Database API

込んでいるページに挿入する CSS または JavaScript

はインデックスの作成やトランザクション処理が可能のことである．読み込んでいるページに Background-なため，図 2 を構成しやすい．

Page と通信する Content-Script を挿入し，間接的にページの内容を取得，変更する．Chrome 拡張機能の4. 2. 3 ガイド作成機能の実装ガイド作成ボタンが押されてからガイド作成完了

構成イメージを図 3 に示す．

までのアクティビティ図を図 4 に示す．操作記録スク

4. 2. 2 利用ストレージ

リプトは，要素の情報を Background-Page に送信すchrome 内のデータストレージである，chrome stor-るイベントハンドラを全てのアンカー要素に追加すage は key-value 形式でデータを保存するため，インるスクリプトである．現在のページにこのスクリプトデックスの作成が難しい．そこで，クリック箇所の記録を常に挿入することは，ページの処理に影響を及ぼすには，W3C により仕様策定が行なわれている Indexed可能性があるので望ましくない．そのため，操作記録

スクリプトはガイド作成中かつ現在のページだけにが茨城大学 IT 基盤センターのサイトに詳しくなかっ挿入する．

たからであると考える．もし，対象者たちがサイトに親しい場合，全員が最小の回数で目標ページまで5 評価実験と考察移動できるので，プロトタイプツールの有用性が確

本プロトタイプツールを利用することで，ユーザ認できないことが考えられる．よって，熟練ユーザにビリティの有効さが向上することを確認する目的で，とっては，本ツールの有効性は低いと考えられる．そ茨城大学の学生 5 名に対し，本プロトタイプツールれだけではなく，本ツールは操作方法を限定してしまの評価実験をする．今回の評価実験は，茨城大学 ITうため，そのユーザが持つ操作性への満足度が下がっ基盤センターのサイトを用いた．茨城大学 IT 基盤セてしまう問題が考えられる．よって，本ツールはある

ンターのページは茨城大学のネットワーク，セキュリ

Web アプリケーションに慣れていないユーザが使用

ティ，情報サービスに関する情報が載っている．情報するべきもので，慣れているユーザは使用するべきで量が多いため，特定の情報を発見するまでに時間がかないと考える．

かる．
対象者には以下を順に行ってもらった．

6 まとめ

1. プロトタイプツールを利用しないで茨城大学 IT

本研究では WebUI ユーザビリティを向上させる基盤センターのトップページから目標ページまでツールを試作し有用性を検討した．評価実験を行い，移動する．

プロトタイプツールがユーザビリティの有効さ，効率，

2. プロトタイプツールのガイド表示機能を利用し操作に関する満足度を向上させることを確認した．て，茨城大学 IT 基盤センターのトップページか今回のプロトタイプツールでは，強調表示されていら目標ページまでページを移動する．

3. プロトタイプツールを利用してみての感想を答える．

るアンカー要素以外をクリックしてガイドからそれてしまうと，ガイドをもう一度最初からやり直す必要がある．手順が短いガイドをやり直す場合は手間が小さ

ステップ 1 とステップ 2 の目標ページはそれぞれくてすむが，手順が長いガイドの場合は大きな手間が違うページだが，どちらもトップページから最小 3 回発生してしまい，ユーザビリティの効率さを大きく下のページ移動ですむ．しかし，プロトタイプツールげてしまう．そのため，ガイドからそらせないようにを利用しないで，3 回のページ移動で目標のページへする補助機能の実装が必要である．

移動できたのは，1 人だけであった．他の 4 人は，目選択できるガイドが多くなると，ガイド一覧から目標のページに着くまでに 4 回以上ページを移動した．

的のガイドの発見が困難になる．最悪の場合，ガイドプロトタイプツールを利用した場合は，5 人全員が 3を利用しないほうが手間がかからないというケース

回で目標のページへ移動することができた．また，「クも考えられる．そのため，ガイド一覧にどのようなガリック対象が目立つので，クリックしやすく，気持ちイドを載せるべきか検討する必要がある．もしくはガよく操作することができた」という意見があった．以

イド検索機能のような目的ガイドの発見支援機能が上の結果から，プロトタイプツールを利用することで必要である．

ユーザビリティの有効さ，効率，操作に関する満足度

プロトタイプツールでは，要素の枠の色を赤色に変が向上していると考えられる．しかし，「強調表示した

更し，フォントサイズを大きくすることで次にクリッことによる，図 5 のようなレイアウトの崩れが気にクする要素を強調した．しかし，フォントサイズを大なった」という意見があった．この意見から，レイアきくする方法は，レイアウトへの満足度が下がる問題

ウトに対する満足度への影響があることがわかった．

がある．また，色の変更で強調する方法は，視覚障害今回の評価実験で，4 人に対してユーザビリティの者には有効でないといった問題がある．様々なガイド向上を確認することができたが，それは対象者たち方法に対してユーザビリティ評価をして，効果的なガ図4

ガイド作成ボタンが押されてからガイド作成完了までのアクティビティ

参 考 文 献図5

強調表示によるレイアウトの崩れイド方法を調査しなければならない．
謝辞 本ツールの評価実験に協力していただいた学生の皆様に感謝します．

[1] Arroyo, E., Selker, T., and Wei, W.: Usability Tool for Analysis of Web Designs Using Mouse
Tracks, CHI ’06 Extended Abstracts on Human Factors in Computing Systems, CHI EA ’06, New York,NY, USA, ACM, 2006, pp. 484–489.
[2] Burmistrov, A.: How We Lost 47% of Our Users
After a Redesign, https://icons8.com/articles/howwe-lost-47-of-our-users-after-a-redesign/, jun 2016.
[3] ISO: Ergonomic requirements for oﬃce work withvisual display terminals (VDTs) - Part 11: Guidance on usability, https://www.iso.org/obp/ui/.
[4] W3C: http://www.w3.org/TR/IndexedDB/.
[5] 福田健太郎, 高木啓伸, 前田潤治, 斉藤新, 浅川智恵子:Web アクセシビリティ向上支援ツール : aDesigner, コンピュータソフトウェア, Vol. 23, No. 4(2006), pp. 26–
35.
[6] 阪井誠, 中道上, 島和之, 中村匡秀, 松本健一: WebTracer：視線を利用した Web ユーザビリティ評価環境,
情報処理学会論文誌, Vol. 44, No. 11(2003), pp. 2575–2586.
[7] 篠原稔和: ウェブ・ユーザビリティテスティングの実際,
情報の科学と技術, Vol. 54, No. 8(2004), pp. 398–406.