情報処理学会 インタラクション 2016
IPSJ Interaction 2016

162C51
2016/3/3

Android アプリケーションにおけるGUI ユーザビリティ自動評価に向けた属性抽出手法の提案
扇田 昌紀†1,a)

小枝 正直†1,b)

概要：Android アプリケーションの GUI 構造を解析し，ユーザビリティに影響する属性をクラス分類を用いて統計的に抽出する仕組みを実現した．ユーザビリティの優れたアプリケーションから GUI の特徴および改善手法を学習する事で，ガイドラインのみに依存せず，アプリの特性に応じた改善手法を提案するシステムを目指す．
キーワード：Android，GUI，ユーザビリティ，ユーザインタフェース

Extraction Method of Attributes for
GUI Usability Automatic Evaluation of Android Applications
Masanori Ohgita†1,a)Masanao Koeda†1,b)

Abstract: Today, a huge number of applications with graphical-user-interface (GUI) is available on varioussmartphones. However, it is diﬃcult to design a user-friendly GUI for everyone. We aim to provide appropriate improvement tips for the developers of GUI application on smartphones. The GUI usability vary
according to the characteristics of each applications. This study describes the method to extract a hidden
design model in excellent GUI applications by using a machine learning.
Keywords: Android，GUI，Usability，User Interface

1. はじめに
視覚的ユーザインタフェース (GUI) にユニバーサルデザインが必要とされている．一方，アプリケーション (アプリ) の開発や公開の難易度は低下傾向にあるが，UI デザイ
ンの素養を持たない開発初心者は使いやすい GUI の設計

デザインガイドラインから得られない，優れた GUI アプ
リに共通する隠れた使いやすさを機械学習で抽出する．この抽出結果を基とし，アプリのユーザ層などの特性に応じた改善手法を提示するシステムを目指す．

2. システムの実現に向けてが容易でない．従来，GUI の評価手法として，アンケート

本研究ではデザイン全般あるいはユーザインタフェースを基とした手法 [1] や開発者自身によるテストが採られてデザインにおける概念を応用した．一つ目は “デザインのきた．これらの手法は開発初心者には採用が困難である．

四原則” というデザイン全般における重要な概念である．

本研究ではユーザビリティの優れた GUI をモデル化してこの概念は近接，反復，コントラスト，整列の 4 要素 [2] かおき，自動的にユーザビリティを評価し改善手法を提示可ら成り，GUI でも多用されている．Fig.1 に示す GUI の例

能なシステムを提案する．このシステムでは一般的な GUI

では，ユーザが選択した画像とそれ以外の画像を区別する

†1a)
b)

ために，周囲の背景色を変えてコントラストを与えている．
現在，大阪電気通信大学
Presently with Osaka Electro-Communication University
mt15a001@oecu.jp
koeda@isc.osakac.ac.jp© 2016 Information Processing Society of Japan

しかし，表現手法は必ずしも如何なる GUI においても最適とは限らない．またコントラストを与える手法は一通りで687

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

162C51
2016/3/3

高い. 従って，本稿では特に Android アプリに対する属性解析について述べる．

ramen.png

award.png

ume.png

Fig. 1 An Example of The Four Principles of Design in GUI

3.1 アプリの解析 および GUI ツリーの抽出
初めに 解析対象の Android アプリの配布ファイル (APKファイル) を用意し，“Android Virtual Device” (AVD) とはない．他にも要素のサイズや間隔を相対的に大きくする呼ばれる仮想マシン上でファイルをインストールする．次など無数に考えられる．アプリのデザイン性を活かすにもに “Hierarchy Viewer” というツールを拡張し，アプリの臨機応変なユーザビリティ改善手法が必要不可欠である．

GUI 構造を解析する独自拡張版を開発した．これによりもう一つの概念は “GUI デザインガイドライン” である．

Code 1 に挙げるような GUI ツリー および， 各 View か

主要なプラットフォームにはアプリの GUI デザインを行ら Fig. 2 のようなキャプチャ画像を取得する．

う上での指針が存在する．スマートデバイス向けプラット

Hierachy Viewer のオリジナル版は，“Android SDK” お

フォームにおいては，Android では “Android Design”[3]，よび 総合開発環境 (IDE) 用プラグイン “Android Devel-

iOS では “iOS Human Interface Guidelines”[4] が挙げら

opment Tools” (ADT) に同梱される．IDE 用プラグイン

れる．ガイドラインから定義を作成すれば，ユーザビリに同梱されるという性質上，IDE から呼び出して使用するティを機械的に評価可能だが，定義のみでは評価が画一的事を前提とし，手動操作のみに対応している．対して独自になりかねない．

拡張版は，本稿執筆者が以下の拡張を施したものとなって

我々は ROBOMECH 2015 [5] にて，ガイドラインに依いる．

存しないユーザビリティ評価手法を提案した．この過去提• スタンドアロン化 — Android SDK や ADT から必案では実現に向けた第一段階として，“静的解析” という要最低限のプロジェクトを抽出してアーカイブ化し，独自の GUI 解析手法も実装した．更に検証実験としては，ビルドを簡略化

複数の Android アプリに対して解析および特徴抽出を行っ• コマンドラインオプションによる自動制御の対応た．しかし，解析が高速である反面，独自である為に解析• GUI ツリーの JSON 形式によるダンプ可能な GUI 部品 (View) に制約があり，解析不可能なアプ• 全ての View 毎の PNG 形式によるキャプチャ

リも散見された．そこで本報告では，解析手法を次章のように刷新し，新たなシステムを実現した．

3.2 GUI ツリーからの属性抽出

GUI のユーザビリティ自動評価および改善手法の提示を前節で生成した GUI ツリーから属性を抽出する為，各々実現するために，大きく以下のステップに分けて研究を進の View より属性値を計算する．GUI ツリーから各々のめている．

View を取り出し，データセット生成器である以下の Perl( 1 ) GUI の属性および改善手法を抽出

モジュールで処理を行う．全ての View に対してこれを繰( a ) 属性解析(属性の抽出)り返すと，最後に各モジュールより当該画面内のデータ( b ) 動作解析(改善手法の抽出)セットが得られる．尚，これらの Perl モジュールは全て本( 2 ) 属性のクラス分類 (機械学習による GUI の特徴抽出)( 3 ) 特徴および改善手法をクラスタリング
本報告で刷新した項目は，このうち 1-(a) および 2 である．
今回の刷新によって，理論上全ての View および 全てのア研究で実装したものである．

• 汎用データセット生成器 —GUIRefine::DataSetGenerator::Android::General• View 種別毎のデータセット生成器 —プリが解析可能となった．また比較可能な属性数が 5 件か

例: GUI::DataSetGenerator::Android::Button (But-ら 27 件へと増加した．

ton 系の View を処理する場合)

3. GUI の属性解析
本研究における GUI の属性解析では，アプリの GUI 構造を独自のツリー形式へ変換し，各 GUI パーツの属性や親子関係, 反復関係などを調査する.
初めに解析対象とするアプリの実行環境として Android

以上のうち，前者の汎用データセット生成器が算出する属性の一部を次に挙げる．

• numOfColors — 画面内の色数• most1stColor — 画面内で最も使われている色
但し，主要な 12 色のリストより選択された近似色の色名となる．

を採用した. 理由の一つは Android 自体がオープンソース• most2stColor — 画面内で 2 番目に使われている色であり，仕様の大部分が公開されているためである．次に次に後者の Button 用データセット生成器が算出する属

アプリの配布方法に制限がない為，数も多く品質も多種多様であり，ユーザビリティの改善効果が見込める可能性も© 2016 Information Processing Society of Japan性の一部を以下に挙げる．

• num — 画面内のボタンの数

688

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

162C51
2016/3/3• minWidth — 画面内の最も小さなボタンの幅

Code. 1 GUI Tree which generated by Customized Hierarchy• minHeight — 画面内の最も小さなボタンの高さ• minDistTop — 画面上端からボタンまでの距離• minDistLeft — 画面左端からボタンまでの距離

4. 実験 - 複数アプリの属性解析＆クラス分類
属性解析による特徴抽出を実現する為に実験を行った．
具体的には，属性解析を複数のアプリに対して行い，算出されたデータセットから属性値の傾向を R 言語を通しRandom forest アルゴリズムにより比較した．実験対象のアプリはカテゴリを絞り，Google Play ストア上で無料配布されている電卓系アプリであり，進数計算等の特殊な電卓は除外した．アプリの一覧を Table 1 に，比較対象とする GUI 属性を Table 2 に挙げる．名称や作成者，その他の欄は，2015 年 12 月現在の Google Play ストア 日本語版または英語版における情報を記載した．所属欄は本実験における分類変数であり，A が使いやすいアプリ，B が使いにくいアプリを示す．この使いやすい，使いづらいという条件は評価スコアやレビュー文章を参考に人為的に設定した．例えば，“使いやすい” という文章があれば好評，“使いづらい” や “使い方がわからない” 等は悪評した．あくまViewer
12345678910111213141516171819202122232425262728
293031323334353637383940414243444546{" zero " : {" image " : "/ tmp / gui - refine - cache / latele . nekocalc / zero . png " ," name " : " android . widget . Button " ," p r o p e r t y _ d r a w i n g : getAlpha ()" : " 1 . 0 " ," p r o p e r t y _ d r a w i n g : getRotation ()" : " 0 . 0 " ," p r o p e r t y _ d r a w i n g : getSolidColor ()" : " 0 " ," p r o p e r t y _ d r a w i n g : getX ()" : " 0 . 0 " ," p r o p e r t y _ d r a w i n g : getY ()" : " 9 9 . 0 " ," p r o p e r t y _ g e t V i s i b i l i t y ()" : " VISIBLE " ," p r o p e r t y _ i s A c t i v a t e d ()" : " false " ," p r o p e r t y _ i s C l i c k a b l e ()" : " true " ," p r o p e r t y _ i s E n a b l e d ()" : " true " ," p r o p e r t y _ i s H o v e r e d ()" : " false " ," p r o p e r t y _ i s S e l e c t e d ()" : " false " ," p r o p e r t y _ i s S o u n d E f f e c t s E n a b l e d ()" : " true " ," pr op e rt y _l ay o ut : getBaseline ()" : " 6 9 " ," pr op e rt y _l ay o ut : getHeight ()" : " 9 9 " ," pr op e rt y _l ay o ut : getWidth ()" : " 1 1 8 " ," pr op e rt y _l ay o ut : ha s T r a n s i e n t S t a t e ()" : " false " ," pr op e rt y _l ay o ut : isLayoutRtl ()" : " false " ," pr op e rt y _l ay o ut : l a y o u t _ b o t t o m M a r g i n " : " 0 " ," pr op e rt y _l ay o ut : layo ut_gr avity " : " NONE " ," pr op e rt y _l ay o ut : layout_height " : " 0 " ," pr op e rt y _l ay o ut : la y o u t _ l e f t M a r g i n " : " 0 " ," pr op e rt y _l ay o ut : l a y o u t _ r i g h t M a r g i n " : " 0 " ," pr op e rt y _l ay o ut : la y o u t _ t o p M a r g i n " : " 0 " ," pr op e rt y _l ay o ut : layout_weight " : " 5 0 . 0 " ," pr op e rt y _l ay o ut : layout_width " : " MATCH_PARENT " ," pr op e rt y _l ay o ut : mBottom " : " 1 9 8 " ," pr op e rt y _l ay o ut : mLeft " : " 0 " ," pr op e rt y _l ay o ut : mRight " : " 1 1 8 " ," pr op e rt y _l ay o ut : mTop " : " 9 9 " ," p r o p e r t y _ m e a s u r e m e n t : mMinHeight " : " 9 6 " ," p r o p e r t y _ m e a s u r e m e n t : mMinWidth " : " 1 2 8 " ," p r o p e r t y _ p a d d i n g : mPa ddingB ottom " : " 0 " ," p r o p e r t y _ p a d d i n g : mPaddingLeft " : " 0 " ," p r o p e r t y _ p a d d i n g : mPaddingRight " : " 0 " ," p r o p e r t y _ p a d d i n g : mPaddingTop " : " 0 " ," p r o p e r t y _ s c r o l l i n g : mScrollX " : " 5 2 4 2 2 9 " ," p r o p e r t y _ s c r o l l i n g : mScrollY " : " 0 " ," property_text : getTextSize ()" : " 5 2 . 0 " ,....
},....
}

でも本実験を行う為の一つの設定値である為，当該アプリや関係者を奨励あるいは中傷する意図はない．また，本実験では対象とする画面をアプリ 1 本につき 1 つとし，主には起動時の画面に絞る．
本実験結果のグラフの一部を Fig.3， Fig.4 に示す．まFig. 2 Image of view which captured by Customized Hierarchy
Viewerず Fig.3 は分類変数からクラス分類した結果，どの GUI属性が高い関係性を持つ可能性があるかを示すグラフでり自動的にユーザビリティを評価し改善手法を提示可能なある．単一の図に 2 つのグラフが含まれているが，左側システムを提案した．第 2 章に挙げた手順のうち，GUI の(M eanDecreaseAccuracy) は特徴量加工による重要度，右属性解析および特徴抽出を実現している．具体的には独自側 (M eanDecreaseGini) はジニ係数による重要度を意味

拡張版 Hierarchy Viewer で GUI ツリーを抽出し，GUI 評する．参考として Python の機械学習ライブラリ “scikit-価に必要な属性の算出を可能にした．さらに属性解析を複learn” ではジニ係数による重要度のみが使用される．次に数のアプリに対して実行し，Random forest でクラス分類Fig.4 は，全属性中 8 種類の分類変数別の頻度分布である．

を行う事で，統計処理する実験も行った．

過去研究 [5] ではアプリのカテゴリを限定せず，正しく第 2 章 のとおり，我々の過去研究では，GUI を解析す解析可能なアプリに絞って実験を行った．結果，ボタンのる為にレイアウトを独自解析してきたが，精度上の問題が高さが大きいアプリは概ね A に所属する事が読み取れ，デあった．今回実現した手法では Android SDK に含まれるザインガイドラインで推奨されるサイズに一致した．対しツールを拡張する事で精度を改善した．またアプリの逆コて今回はカテゴリを絞った為か，現時点の 27 種類の属性かンパイルを行うことなく，ライセンスに配慮可能な点も特らは明確な視点が得られていない．しかし Fig.4 からも判徴といえる．将来，多くのアプリが各々のユーザ層にとっるように各属性ともに正しい値が得られている．また選定て更に使いやすくなるとともに，開発者の負担軽減に繋がした全てのアプリに対して解析が行えた事は本報告においることを願う．て成功といえるであろう．今回の結果を踏まえ，更に比較属性数を増やすとともに，分類変数を設定するためのより参考文献

人為的でない手法の実現に取り組むべきであると考える．

[1]

5. おわりに[2]

本研究ではガイドラインのみに依存せず，機械学習によ© 2016 Information Processing Society of Japan

仲川薫，須田亨，善方日出夫，松本啓太，“ウェブサイトユーザビリティアンケート評価手法の開発”，pp.1-2，
ヒューマンインタフェース学会，2000．
中川總，“グラフィックデザイナーのためのユニバーサルデザイン実践テクニック 51”，ワークスコーポレーショ

689

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

162C51
2016/3/3

Table. 1 Experimented Apps
名称作成者バー評価所UIUIジョン

スコ属

好評

悪評ア
rf

TextView.minWidth
EditText.minHeight
TextView.minHeight
App.Name
Button.distLeft
Button.distTop
General.maxNumOfColors
General.most1stColor
General.most2ndColor
General.most3rdColor
ListView.distLeft
ListView.distTop
ListView.maxNumOfItem
General.contrastRatio
ListView.num
TextView.distLeft
EditText.distLeft
Button.minHeight
ListView.minWidth
TextView.distTop
EditText.num
ListView.minHeight
EditText.minWidth
EditText.distTop
Button.minWidth
TextView.num
Button.num
TextView.minTextSize

Calculator

andanapps

2.0.5

4.1A--

Calculator

Apalon Apps

2.0

4.1

A

25CALCU

Designer Cal-

2.1.0

4.5

A--Freeculators

Calculator

Digitalchemy,

4.9.2

4.4

A

232

Plus Free

LLC

Simple Cal-

Kugelschreiber 3.0

4.1

A-

-

Latele Inc.

1.5.0

3.6

B

53Latele Inc.

1.3.0

4.3

A1-

Loop-

1.31.03.8

B--n225.zero

1.6

3.9

A

23-

Appsys

6.0.2.2

4.1

A31

TigerCalc

tripot

1.1

3.4

B-

-

RealCalc

Quartic Soft-

2.3.1

4.5

A-

-

Scientificware
1.3

3.9

B--1.1.3v

4.0

A--

3.0.0

3.6

B

13

Pro freeApp.Name
TextView.minWidth
TextView.minHeight
Button.minWidth
Button.num
Button.minHeight
TextView.minTextSize
ListView.num
TextView.num
TextView.distLeft
ListView.minHeight
EditText.minHeight
EditText.minWidth
EditText.num
TextView.distTop
General.contrastRatio
ListView.minWidth
Button.distTop
EditText.distTop
ListView.distLeft
Button.distLeft
EditText.distLeft
General.maxNumOfColors
General.most1stColor
General.most2ndColor
General.most3rdColor
ListView.distTop
ListView.maxNumOfItemculator
LateCalc Calculator
NekoCalc Calculator
鷹の爪電卓

Sessions.LLC.
Colorfulcalculator
PanecalScientificCalculator−4 −3 −2 −1 0
MeanDecreaseAccuracy

0.0 1.0 2.0 3.0
MeanDecreaseGini

Fig. 3 Experiment Result - Important Attributes

Calculator
超シンプル電Nobuo

卓2CREATE

Pretty Cal-

PrettyculatorCo

お父さん電卓SoftBankPet

Corp.

B

-

82Calculator

woodsmall

1.6.5

4.0

A

133

Table. 2 Comparison Attributes (Excerpted)
一画面におけるボタンの数個

Button.distTop

画面上端からの距離 (最低値)px

Button.dLeft

画面上端からの距離 (最低値)

pxButton.minHeight

ボタンの高さ (最低値)px

Button.minWidth

ボタンの幅 (最低値)px

AB

EditText.minHeight

8200

6150

4100

250

10

EditText.distTop

[3]

[4]00
B

-A

Button.num

8AB

4.1

説明

610B

3.9

1.10.7

項目名

40

2100
A

1.0

TricolorCatinc.

B

2030

A

EditText.distLeft

7th GearCalculator

50 10050
A

Button.num

400

20
B

Calculator

200150
64100

6420
A

Button.minWidth

300

Button.minHeight

0Button.distTop

88

Button.distLeft

AB

AB

Fig. 4 Experiment Result - Frequency Distribution (Excerpted)© 2016 Information Processing Society of Japan[5]単位ン，2011．
Google， “Android Design”， 2014．
https://developer.android.com/intl/en/design/index.html (最終閲覧日: 2015/12/16)
Apple，“iOS Human Interface Guidelines”，2014．
https://developer.apple.com/jp/devcenter/
ios/library/documentation/UserExperience/
Conceptual/MobileHIG/BasicsPart/BasicsPart.
html (最終閲覧日: 2015/12/16)
扇田昌紀，小枝正直，“機械学習によるスマートフォンにおける GUI ユーザビリティの自動評価”，日本機械学会ロボティクス・メカトロニクス講演会 2015 (ROBOMECH2015) ，2015．

690