設問が楽しくなるインタラクションデザイン

こんにちは、CIY開発チームの竹下です。
前回の記事「ストレスをなくす性格診断の回答UI・デザインについて」で、性格診断の回答UIについてご紹介いたしましたが、今回は更に掘り下げて、設問が楽しくなるインタラクションデザインについてフォーカスしていきたいと思います。

1. 複数タップを要求する設問のUI

（前回の記事でも使用したGIFアニメーションです🙏）

上記GIFを見ていただくとわかると思いますが、回答をタップするとタップした選択肢にハートが出現し、「タップした！（選択した）」感のあるデザインを施しています。

また、ハートの出現を認識しやすいように、回答直後に設問が次に移らず、コンマ数秒の後に、次の設問へ遷移アニメーションするようになっております。（上記ではGIFアニメーションの影響でかなり早くなっていますが...）

2. 複数タップを要求する設問のUI

性格診断では、設問によっては複数のタップを要求する設問もございます。上記の画像を例にすると、設問「好きな順にタップしてください」という行動をユーザーに直感的に行っていただく上で、1つ目をタップした段階で、

・中央に①と表示させることで、直感的に複数選択だと理解できる
・画像を薄くすることで、未選択の他の画像に集中しやすくする

という工夫を施しました。未タップ時に一切のUIを出さない（画像だけ）にすることで、小さいスマートフォンでも十分に画像を見ることができ、選択を妨げないようにしています。
設問の大部分は１タップで回答可能なので、複数タップによる設問は特に、良いUIを意識してデザインしております。

↑こちらも複数タップを要求しうる設問です。
ただ、先程よりもややこしいのは「あなたに当てはまらないものはオフにしてください」という点です。
要はすべて当てはまればオフにする必要なく、「次へ」をタップすればいいのですが、もし当てはまらない項目があった場合のみタップする、という設問形式です。

・「オン」or「オフ」が直感的に判断できるデザイン
・最初はすべて「オン」になってることが感覚的に理解できる

という2点が非常に重要になってきます。
そこで、iphoneの”設定”などでも見かけるトグルUIを採用しました。
普及しているデザインは、ほとんどのユーザーが理解でき、回答への抵抗感を下げることができると思います。

3. おまけ

今回紹介した内容と重複する点もありますが、他にデザインで工夫した点や、改善（グロースハック）した記事もありますのでぜひご覧ください！

グロースハックに関する記事はこちら
vol.1「グロースハックってなに？」
vol.2「バズらせたい、時代は大SNS時代！」
vol.3「翻訳機能の追加と、本格グロースハックの開始」
vol.4「診断開始モーダルと、応援コメントのポップアップの追加」
vol.5「非言語診断の追加、診断フローの改善など」

（若干、記事のテンションが違うのはご了承ください🤔）

さいごに

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

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

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