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

こんにちは、CIY開発チームです。
今回は、設問が楽しくなるインタラクションデザインについてフォーカスしていきたいと思います。

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

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

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

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

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

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

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

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

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

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