こんにちは、デザイナーインターンのmomokoです。
今日は、「迷わないUIをつくる」ことについて
お話させていただきます。
◆「楽しい！」は、2つの土台のもとに成り立つ
以前の記事
“「はじめてアプリを触る」ときのこと - 100 App Team Blog ” において、
「100はユーザーの方々に使っていただけなればまったく意味のないものになる」
と述べました。
アプリに対して「楽しい」という感情を抱いてくださった
ユーザーの方々は、そのアプリを使い続けてくれる可能性が高いです。
それゆえに、チュートリアルの設計においては
「楽しさ」を増幅させることを特に意識していたのですが、
実は、この「楽しい！」という感情は、ユーザーの人々の心に
いきなり生まれるものではありません。
まず、アプリは「問題なく使うことができる」ものでなくてはなりません。
「バグやクラッシュによって、目的を達成できなかった」。
そのような体験をした瞬間に、ユーザーはアプリの使用をやめてしまいます。
そこがクリアできれば、次は「使いやすい」という感情を
抱いてもらう必要があります。
たとえ目的を達成することができたとしても、それが類まれなる
苦労の末にできたことなのであれば、
ユーザーは面倒なことを避けるので、リピートしてくれません。
こういった2つの土台をクリアして初めて、
人々はアプリに「楽しい」を感じてくれるようになります。
したがって、UIの設計をするとき、
まずは「問題なく使える、かつ使いやすいものにする」ということから
考えなくてはならないのですね。
記事内で紹介したチュートリアルの旧UIに関しては、
「問題なく使える」「使いやすい」の段階までしっかりと
クリアしていました。
なので、そこに「楽しい」と感じてもらえる見せ方を
プラスした、という形になります。
◆分かりやすい、だれも迷わないUIをつくる
では、どのようにしてその「土台づくり」を行ったのか。
具体的には、大きく分けて2つの改善を行うことで
より分かりやすいUIを作ることができたのではないかと思います。
①他画面への遷移ができることを可視化する
Before
旧UIにおいては、
下部にナビゲーションバーこそ設置していましたが、
それも一定時間経つと画面下へスライドして消える設計になっていたため、
左右にスワイプして他画面へ遷移できることが
分かりにくくなってしまっている状態でした。
After
ページインジケータを設置することで、
「他にもページがある」ことを分かりやすく表示できることに加えて、
「自分の今いる位置」を示す指標が追加されたため、
どちらにスワイプすればいいのかという「操作のヒント」を
ユーザーに伝えられるようなUIになりました。
参考：
この改善を行うにあたって、
こんなラフを書き起こしてチームに共有しました。
この段階でチームに相談して、レビューをもらうことがかなり大切で、
実際のUI制作はレビューを反映させながら行います。
②機能を想定されやすい場所へ整理する
Before
「マイページ画面」では、自分のプロフィール情報が記載されていることに加えて、
セグメンテッドコントロールで
「設定」に関する情報も見れるようになっていました。
1 つのページに複数の機能が搭載されていたために、
ユーザーが「この画面における重要な情報とは何か」を判断しにくくなることが
予想されました。
After
マイページ画面から設定機能を削除し、
代わりに、どのページからでも開けるドロワーメニューを設置。
三本線のハンバーガーマークは、
誰がみても「メニューを開く」という意味だとわかるので、
設定をいじりたいときは左上のボタンを押せばよいということが
直感的に分かりやすいUIになっています。
参考：
◆まとめ
100 App Teamは、これ以降もたくさんの機能の追加を予定しています。
そのすべてにおいて、ユーザーのみなさまに「楽しい！」と感じてもらうことが
目標ですが、最初からそううまくいかないのも現実です。。
だから、まずは「問題なく使える」、かつ「使いやすい」アプリを
提供していくこと。
その上で、みなさまの声を聞きながら、もっとたくさんの人に
「楽しい」と感じてもらえるアプリに変えていくこと。
私たちは、そんなプロセスを大切にしています。
本日のブログは、これにておしまいです。
またお会いしましょう。
momoko