UIデザインを比較！ウォークスルーUIでユーザーフレンドリーな体験を

指摘されるまで気づかない「UIデザイン」の落とし穴を、「良い例」と「悪い例」で比較しながら紹介していく連載記事、第8弾です。

今回のお題「ウォークスルーUI」

今回はアプリのインストール直後によく見られ、アプリのメイン機能を教えてくれる「ウォークスルーUI」を題材に、UIデザインのお話をしていきます。

■本記事の登場人物

イケコさん

デザイナー歴10年のベテラン上司。最近のマイブームはボクササイズ。

ヒカルさん

イケコさんのようなデザイナーを志す後輩さん。デザインが楽しくて仕方がない。最近のマイブームはグラニフでTシャツを買う事。

1. どちらが「良いUIデザイン」ですか？

イケコさん

ヒカルさん、今日はウォークスルーのUIデザインについて見ていこう。

はい、お願いします！
同じようで全然見せ方違いますよね。

ヒカルさん

イケコさん

そうそう、結構違う点があるんだけど、どうかな？

そうですね…まず、テキストのインパクトが右の方が圧倒的ですよね。すごく目立ってます！
それに要素も少なくてスッキリ。

ヒカルさん

イケコさん

確かに右の方はインパクトがすごいよね。
じゃあ、どっちの方が良いデザインかな？

やはり右ですかね。
目に入ってきますし、何よりインパクトが…笑

ヒカルさん

イケコさん

実はね、良いデザインは左なんだ。
ウォークスルーという画面の役割についてしっかり理解できると、その意図が分かるはず。
一緒にポイントを比較していこう。

違いましたか〜。
はい、しっかり勉強させてください！

ヒカルさん

2. 「かたまり」で見せることの重要性

イケコさん

まずはイラストとキャッチコピーの部分について。
右の方は文字が最初に頭に入ってくるけど、読むときの視線が上から下へいく間にイラストを見てしまい、中身が入ってこない気がしない？

あー確かに！
上のテキストを読んでからイラストを見て、下のテキストを見てますね…
あっ！左の方は、文字を読むとき一気に読めるから、スッと頭に入ってきますね。

ヒカルさん

イケコさん

そうそう。
情報は2、3行であれば「ひとかたまり」に集約するのがオススメ。
イラストとテキストのポジションについては、他の要素と近づけて視線が行ったり来たりせず疲れにくいUIが理想的なんだよね。

そういうことですか。すごく納得しました！

ヒカルさん

イケコさん

よし。それじゃあ、次のポイントも見ていこう！

はーい。お願いします！

ヒカルさん

3. ページ遷移UIの見せ方

イケコさん

次はページ遷移に関するUIについて。この部分の差はどう感じる？

これは比較すると簡単です！
次へボタンがない事ですよね。

ヒカルさん

イケコさん

その通り！
なぜ次へがないとダメなのか、理由は分かるかな。

理由は、単に次へ行けないからですよね。
でもパッと見たとき、左右スワイプで行き来できる印象もあったんですよね…

ヒカルさん

イケコさん

そうそう、左右スワイプでページを行き来できることは、日常的な体験の中で培ってきたメンタルモデル(頭の中にある「こうしたらこうなる」という”行動のイメージ”)によるものなんだよね。
ただそれだと、アプリに不慣れな方は気づけないので、能動的なボタンを配置し明示的にここをタップすると進めるということが分かるようにしておくことが、ユーザビリティを考えるうえで大切だよ。

なるほどです！勉強になります！

ヒカルさん