縁の下のUIデザイン―少しの工夫で大きな改善!
第23回 UIデザインのためのGoogle Analytics
ユーザーにとってわかりやすく使いやすいデザインを作るためには,
今回は,
- 注1)
- 詳細はGoogleの
「アナリティクス ヘルプ」 を参照してください。
見ておきたいユーザーデータ
ユーザーインタビューやユーザー調査は,
- スマートフォン,
タブレット, PCの内訳 どの種類のデバイスでアクセスしているか把握できる。スマートフォンファーストなサービスが増えているなか,
ちゃんと実態を数値で理解することで, どのデバイスに力を入れるべきか身を持って感じておく - 画面解像度
使われているデバイスのサイズを把握できる。開発者は最新のスマーフォンでサービスを使っていることがほとんどだが,
ユーザーはそうとも限らない。できる限り利用者が多い解像度でデザインを確認する - 集客概要,
参照サイト どこからユーザーが訪れているか把握できる。Webサービスの場合,
検索経由か, SNS (Social Networking Service) か, 直接かアクセス元を知ることで, 何の目的で訪れているかわかりやすくなる。集客元によってはユーザーのリテラシーなども想像できるかもしれない - 行動概要
どのページが見られているか把握できる。自分たちが思っているようにユーザーが使っていないケースもよくある。たとえばWebサイトのトップページが一番多く見られていると思い,
時間をかけてデザインしたくなる。しかし, 実際はトップよりもほかのページのほうが多く見られていることもあるため, 実際に多く見られている画面を把握し優先順位の参考にする
タップ数を計測して仮説検証をする
Google Analyticsでは,
今回は架空の書籍販売サイトのトップページを想定した例
どういう仮説があって何を検証するか
仮に図1のデザインをこれからリリースし,
- ❶ 画面上部のファーストビューに入る要素
(おすすめ, ランキング) がよくタップされる - ❷ カルーセルは,
見えていないところはほとんどタップされない - ❸ 開発者が多く使っているという事前情報があるため,
WEB+DB PRESSは多くタップされるだろう
これらの仮説がちゃんと検証できるよう計測する必要があります。
どのように定義するか
タップ数をイベントトラッキングで計測するには,
- イベントカテゴリ
タップされる要素が含まれる大きな枠組みで,
エリアごとに分けるのがお勧め。今回の場合は 「Recommend」 「Ranking」 「Web+DB_ list」 にあたる - イベントアクション
ユーザーがどのようなアクションをしたか。一般的には
「Tap」 「Click」 などとするが, 今回は何番目かを計測したいため 「Tap_ N」 (Nには項目の番号が数字で入る) とし, 要素の位置も含めてみる - イベントラベル
何のコンテンツかや何のラベルかわかるようにする。今回であれば
「WEB+DB PRESS」 「リアルサイズ古生物図鑑」 「音声UX」 など 上記の定義を図1に行ったものが図2になります。
実際のデータを見て仮説が正しかったか考える
図3は,
それでは,
まず❶の仮説を検証するには,
次に❷の仮説を検証するためにイベントアクションを見てみましょう
最後に❸の仮説を見るためにイベントラベルを見てみます
このように,
今回はより良いUIデザインを作るため,
本誌最新号をチェック!
WEB+DB PRESS Vol.128
2022年4月23日発売
B5判/160ページ
定価1,628円
(本体1,480円+税10%)
ISBN978-4-297-12789-3
- 特集1
演習で慣れる!
データベース入門
SQL操作,テーブル設計,分析用データ処理 - 特集2
クラウド構築ツールの大本命!
ゼロから学ぶTerraform - 特集3
チャットやIssueでちゃんと伝えたい!
エンジニアのための英語
バックナンバー
縁の下のUIデザイン―少しの工夫で大きな改善!
関連記事
- 2021年3月第1週号 1位は,2021年に注目すべき4つのUI/UXのトレンド,気になるネタは,ドコモとKDDI,回線解約ページを検索エンジンから隠ぺい 総務省の指摘受け修正
- 2020年12月第3週号 1位は,2021年に向けてのUIデザインのトレンド,気になるネタは,「Apple M1」搭載Macのモニター出力に複数の制約--EIZOが注意喚起
- 2020年11月第4週号 1位は,デザインの一貫性についてのまとめ,気になるネタは,OPPO,巻取りスマホのコンセプトモデル「OPPO X 2021」を公開
- 2020年11月第3週号 1位は,エンゲージメントを高めるお問い合わせページをデザインする方法,気になるネタは,「Googleフォト」,無制限の無料ストレージを2021年5月末で終了へ
- 2020年10月第5週号 1位は,CSSグリッドの完全版チュートリアル,気になるネタは,AdobeがiPad用IllustratorとiPhone用Frescoをリリース