こんにちは、デザイナーの小蕎です。UX DAYS TOKYOの読書会で学んだ”心理学や脳科学”の内容を取り入れた「脳科学で習慣化を促すアプリ（以下、習慣化アプリ）」を作ってみようということになりました。
アプリの画面設計をして、オーガナイザーである大本さんからUIを指摘されることで多くのナレッジを得られました。知識として頭にいれるだけでは身につかない、実際に作ってみたことで学べた事例をご紹介します。
CTAはメインカラーと異なるものを利用する
色を決定していく時に、ヘッダーや行動を誘導するボタン（CTA）もメインカラーにあわせた色にしていました。
それが左の画像です。ヘッダーと「次へ」ボタンが同じ色になっていて一見まとまりがあるように見えますが、馴染みすぎてしまいCTAであることや強調したい部分がユーザーに伝わりません。
開いているタブがわかるようにする
次に指摘を受けたのは、タブの見た目がどれも同じで、何を選択しているのかがひと目ではわからないということです。
右の図のように、選択しているもの以外はグレーにする、タブの色と習慣を囲む枠を青くするといったように、タブを統一したり、状態や現在地がわかるようにするとユーザーは迷子にならず自分の今いる位置が瞬時にわかります。
操作しやすい文字サイズにする
コレも気が付かずにやってしまっていたのですが、文字が小さいと余白が多く要素がスッキリするので、デザイン性が高いように見えます。最近のアプリやWebサービスでも、フォントサイズを小さくしているものもよく見かけます。
しかし、スマートフォンやタブレットでタップすることを考えてみると、領域が小さすぎると意図しない場所をタップをしてしまうことがあります。
画像の「編集」ボタンは、メニューの文字サイズが揃っていて、まとまりがあるようにも見えます。しかし、左の画像では「編集」ボタンが小さすぎて押しにくい状態でした。
ちなみに、AppleではiOSアプリの開発ガイドラインで、タップエリアの領域を44×44ポイント以上にすることを推奨しています。
https://developer.apple.com/jp/design/tips/
読み間違いにも気をつける
正しい文章だとしても、ユーザーが読み間違えてしまう可能性のある文字はなるべく使わない方が良いという指摘も受けました。
以下は、アプリで実施した後に出てくるコメントの画像です。「やった！と口に出して言ってみよう！」と記載されています。
文章にある、漢字の「口（くち）」は、カタカナの「ロ」が似ているので、間違って読んでしまう可能性があります。「ろにだして言ってみよう！」？と、一瞬考えてしまいます。
読み間違いまでを考慮して、間違えない言葉に置き換えるように指摘されました。それが、右の図の「自分の言葉で実際に”やった！”と言おう！」です。「口に出す」という文章の表現を変えています。
読み間違えてしまう可能性のある文字は、別の言葉で言い換えるとスムーズに読めることを学びました。同じように、漢数字の「二（に）」とカタカナの「ニ」も読み間違いやすい似ている文字です。
今回はコメントの文章でしたが、ボタンや操作させるテキストとして、読み間違いやすいワードは気をつけなければと強く感じました。
動線を気にして設計する
アプリの時間を設定する画面で、時間設定をしたけど、後から時間設定をやめたいという要件が生まれました。
消したいという行動から、「✕ボタン」を設置してみたのですが、ユーザビリティテストを実施してみると「この✕ボタンを押すとどうなるんだろう？」と一度押してリセットされる行動をユーザーが取ることを発見しました。
削除するボタンでわかりやすく設計をしたつもりが、「✕ボタン」が目立ちすぎることもあって、ユーザーの行動（動線）を変えてしまうデザインになっていました。「あった方がわかりやすいかな」とむやみに動線を追加すると、ユーザーは逆にわずらわしく感じることを学びました。
ユーザビリティテストでヒントが見つかる
今回の開発で、一番難しいのはUXライティングであることを知りました。チーム内でもどんなテキストだとわかるか、悩んで「これで行こう！」と決めたテキストなのにも関わらず、ユーザビリティテストをするとやっぱり引っかかります。
その度に、どのテキストが良いかチームで考えました。
ユーザビリティテストでユーザーが実際に言葉にしたものを取り入れたり、前後に情報を追加することでそのテキストの意味を補うことができたりと、ユーザビリティテストを実施することでUXライティングのヒントが見えてきました。
常にユーザーの動作を考えてデザインする
今回紹介した「色・形・言葉・動線」は、ユーザーの行動を促すデザインです。よくあるテンプレートで使われているからというものでなく、常にユーザーの行動を考慮して設計するべきだと感じました。
何度もユーザビリティテストをして、テキストやレイアウトを修正することで出来上がっていくことも学べました。
自分ではユーザー認知負荷を考えてデザインしているつもりでも、大本さんからの指摘はさらに上をいくもので毎回のミーティングは勉強になっています。学んだことを生かして直感的に操作できるUIをデザインしていきたいと考えます。
