見出し画像

ストレスをなくす性格診断の回答UI・デザインについて

こんにちは、CIY開発チームの竹下です。
今回はCIYの重要なコンテンツのひとつである、性格診断の回答UI・デザインについてご紹介いたします!

ユーザーのストレスをなくすUI

picture_pc_093ff414629cdcc6c59e5a7969993cfbのコピー

開発担当としてもっとも気にかけたのは、100問以上の回答をユーザーに行ってもらうために、回答中のストレスをいかに無くすか、を大きな課題として取り組んでおり、以下のような工夫を行いました。

1. スクロールを必要としないUI
みなさんはアンケートなどをスマホで行う際、「回答→スクロール→回答→スクロール」の無限ループにうんざりすることはなかったですか?さらにはスクロールしようと思ったら、誤タップで入力してしまった...なんてことも少なくないでしょう。
そこでCIYの回答UIでは、カードのようなデザインが設問ごとに出現し、連続して回答する際のスクロールを不要にしました!(一部設問によってはスクロールが必要です。)

画面収録 2020-05-15 10.48.30.mov

2. 直感で回答できるUI
設問はすべて「Yes / No」というわけではありません。
例えば「A、B、Cの中から、自分に当てはまる順に選んでください。」といった設問もございます。
以前のCIYではこのようなUIで回答していただいてました。

画像5

「1位、2位、3位」の「A、B、C」をそれぞれ選択してもらうのですが、これが直感ではわかりにくい...全部で9つも押せるボタンがあるので理解するためのハードルが高い設問になっていました。

↓ そこで今回、改善したUIがこちらです。↓

画像5

ボタンを押すことで、「1」「2」「3」と数字が表示されることで、直感で「あ!自分に当てはまる順番通りに押せばいいんだ!」とわかるかと思います。また、タップできるボタンの数を9→3に減らすことでUIをスッキリさせ情報量をへらすことで、直感での理解の手助けとなっております。

3. 応援コメントUI
ストレスのないUIだとしても、100問以上の質問は少し飽きがくるものです。また、「今の回答は全体のどのくらいなんだろう?」という疑問も回答中に思う方も多いと思います。
そこで、「応援コメントUI」を実装しております。

スクリーンショット 2020-05-15 10.53.52

特定の設問ごとに「その調子!」「あと〇〇問!」などの応援や「△を10個以上選択すると先へ進めないよ!」などの特定の設問へのアドバイスなどを、かわいいキャラクターが伝えてくれます。

さいごに

いかがでしたでしょうか?
気になった方はぜひ、CIYで性格診断してみませんか?
CIY®の性格診断:https://ciy-work.com/person/assessment/profile

もし、「こんな機能があったらいいのに!」などのアイデアがありましたらお気軽にグーグルフォームからお送りください!
CIY®へのお問い合わせ:https://forms.gle/TviGvFjhfztUQeRJA

CIY®をこれからもよろしくお願いいたします!

この記事が気に入ったらサポートをしてみませんか?