WISS 2022

For Ui：操作の理解度と使用頻度に応じてUI 構成のカスタマイズを可能とする
UI システムの提案
小川 恭典* 越後 宏紀* 五十嵐 悠紀†

概要．ソフトウェアは機能が充実すると便利になる一方で，ユーザインターフェース（UI）が複雑になる．ツールに慣れていないユーザはその複雑さから良いパフォーマンスが発揮できず，使用を控える可能性がある．この問題を解決するために，我々はチュートリアルの達成に伴って UI を表示する
UI システム TutoUI を開発してきた．本稿では TutoUI を拡張し，チュートリアルでの操作の理解度やユーザの UI 毎の使用頻度に応じて UI を構成する For Ui を提案する．

1

はじめにソフトウェアは機能が多いほどできることが増えて便利になるが，それに伴ってユーザインターフェース（UI）が複雑化する．ユーザは必ずしも全ての機能を使うわけではなく，使う機能は限られるため，使わない機能は便利になるどころかむしろユーザが本当に求める機能を埋もれさせる原因となる．特にそのソフトウェアに慣れていない初心者にとってはこの複雑さはパフォーマンスの低下やそのソフトウェアからの離脱の要因となり得る．
この問題の解決のため，我々はチュートリアルの達成に伴って UI を提示するシステム TutoUI[1]を開発してきた．TutoUI を導入したソフトウェアは基本機能の UI のみが表示された状態で開始し，ソフトウェア内に実装されたチュートリアルを達成するごとに対応する機能が増え，ユーザはその機能を使用できる．チュートリアルは好きな順に実施できるため，ユーザはソフトウェア上の UI 表示を自分が必要とする UI のみに絞り込む事ができる．
本稿では TutoUI を拡張し，操作の理解度と使用頻度に応じて UI の表示の順番とサイズの推薦，カスタマイズを可能とする UI システム For Ui を提案する．TutoUI の UI の表示を一部限定している機能に加え，推薦と独自カスタマイズの機能で自分好みの UI 構成を作り出すことができるため，ソフトウェアが多機能であっても複雑な UI に惑わされることがなくなる．これにより個々のユーザに適した UIを提供し，不慣れなユーザでもソフトウェアを使いこなすことが可能となる．
Copyright is held by the author(s). This paper isnonrefereed and non-archival. Hence it may later
appear in any journals, conferences, symposia, etc.
* 明治大学，†お茶の水女子大学

2関連研究

ユーザが使用しやすい UI を実現するため過去に様々な手法が提案されている．岡田らは携帯電話のUI を携帯電話上で直接ユーザがカスタマイズできるようにするユーザインターフェースフレームワー
ク[2]を構築，適用して利便性の向上を図った．このフレームワークでは特定のアクションをワンクリックで実行できるショートカットを作成できるため，複雑な操作を簡単にすることが可能である．
複雑な UI のアプリケーションに対してチュートリアルを用いて利便性を高めた例に Gierad らのTAPPS CLOUD[3]がある．Photoshop や GIMP のような画像編集ツールは強力である一方で機能やパラメータが多く，習得はもちろんチュートリアルの実 施 も 経 験 の 浅 い ユ ー ザ に は 難 し い ． TAPPS
CLOUD は静的なチュートリアルをチュートリアルベースのアプリケーション(TAPPS)に変換する．それによりユーザは TAPPS を使用して，元のチュートリアルのステップ構成や説明文はそのままに任意の画像に処理を施す事が可能となる．

3

提案手法

For Ui の元である TutoUI は初期状態では基本機
能の UI のみを表示する．そして，ユーザがチュートリアルを達成する毎にそれに対応した UI を表示する．
For Ui ではチュートリアル後にユーザに対し，アンケートが表示される．アンケートではチュートリアルを踏まえての操作の理解度とその機能をどれだけ使いそうかをそれぞれ 5 段階でユーザが評価をする（図 1）．
「完了」ボタンを押すとアンケート結果が記録され，ソフトウェアのメインの画面に戻る．
アンケート結果は後述する UI 配置の推薦の評価関数に使用する．

WISS 2022

図 1．チュートリアル後のアンケート

図 2 は UI 配置の推薦の流れを表したものである．
ソフトウェアのメイン画面でスペースキーを押すと元々の UI 配置とサイズ（図 2 上）を評価関数の結果に従って変化させ，新たな UI の配置とサイズを推薦する（図 2 中央）．この推薦の UI 構成に対し，「BACK」ボタンを押すと適用されず，「CHANGE」ボタンを押すと適用される（図 2 下）．この推薦ではチュートリアル後にとるアンケートの結果とそれぞれの UI の使用回数，最後にその UI を使った時からの経過日時を元に構成を決めている．理解度（アンケート 1 問目の答え）を U，使いそうな頻度（アンケート 2 問目の答え）を F，UI の使用回数を C，前回使用からの経過日数を D としたとき，以下の式で各 UI の評価をした．
評価値 = 𝑈 + 𝐹 + 𝐶 ⁄10 − 𝐷 ⁄60
チュートリアル実施時のユーザの主観的な評価や実際の利用傾向を反映し，ユーザがよく使う UI は大きく左側に配置して目につきやすいようにし，あまり使わない UI は小さく右側に配置して目立たないようにした．このように推薦機能によってそれぞれのユーザに合った UI 構成を提案する．

しかし，この推薦はユーザの利用傾向を反映しているがユーザにとって完全に満足のいく UI 構成とは限らない．そのためユーザが自由に UI を入れ替えられる機能も付与した．UI をドラッグすることで隣の UI と場所を入れ替えることが可能である．また，UI 上で右クリックをすることで表示されるメニ
ューの「サイズ変更」からそれぞれの UI を大・中・小のサイズに変更することができる．チュートリア
ルを試した結果，ユーザがその機能を使わないと判断した際に機能を削除することも可能である．

4

ユーザインタビュー

For Ui について実験参加者 4 名に体験してもらい，使い勝手と有用性について意見を聞いた．体験の際には Processing で作成した実験用デザインツールに For Ui を適用して使用した．
UI のサイズや位置の推薦は参加者によって好みが大きく分かれることが分かった．サイズと位置を変更することについてどちらもソフトウェアの分かりやすさにつながるという意見もあれば，サイズの変更は分かりやすくなるが位置の変更は必要ないという意見，その逆で位置の変更は必要だがサイズの変更は必要ないと意見もあった．特にサイズの変更については，UI を削除する機能があるためサイズを小さくする機能は必要ないという意見もあった．
また，チュートリアルの形式に関しても意見を得た．今回の様なデザインツールの場合，一つの機能のみ使うことは珍しく複数の機能を使って一連の作業をすることが多いため，今回用意したチュートリ
アルの様に一つのチュートリアルに対して一つの機能だけを使う形式は相応しくないという意見である．
そのためソフトウェアの種類によってはチュートリアルの形式を変えるべきだと考える．

5

議論

ユーザインタビューの結果から，UI の位置やサイズ両方の変更が全てのユーザにとってソフトウェアの使いやすさにつながるわけではないことが分かった．そのためユーザが推薦でどのパラメータが変更するかを選択できる必要があると考える．本稿では位置とサイズだけでインタービューを行ったが，今後は UI の色や不透明度など他のパラメータが変化したときに使いやすさに影響があるかどうかも調べていきたい．
また，For Ui がどういったソフトウェアと親和性が高いのかについても検討する必要がある．今後はより多くのユーザインタビューを行い，For Ui を適用するのに向くソフトウェアの種類と向かないソフトウェアの種類を判別していきたい．
図 2．UI 構成の推薦

For Ui：操作の理解度と使用頻度に応じて UI 構成のカスタマイズを可能とする UI システムの提案

参考文献[1] 小川恭典，越後宏紀，五十嵐悠紀．TutoUI：チュートリアルの達成度によって UI を表示させるアプリ
ケーション．第 29 回インタラクティブシステムとソフトウェアに関するワークショップ（WISS2022）デモ発表．
[2] 岡田英悟，孫暁瑾，中本幸一．携帯端末におけるカスタマイズ可能なユーザインタフェースの構築と評価．
情報処理学会研究報告，v．2009，no．36，p．103108[3] Gierad Laput， Eytan Adar， Mira Dontcheva ，Wilmot Li ， Tutorial-based interfaces for cloudenabled applications．In Proceedings of UIST，
pages 113-122．ACM，2012．
[4] Caitlin Kelleher，Randy Pausch．Stencils-Based
Tutorials: Design and Evaluation．In Proc CHI
2005． ACM Press（2005)， 541-550．