CIY開発チームのグロースハック日記 vol.5「非言語診断の追加、診断フローの改善など」

こんにちは、CIY開発チームの竹下です😀
福岡では先週まで梅雨が来たかのような雨ウィークでした。
最近人気のアニメ映画がふと脳裏をよぎりますね。
（みなさん「天気○子🌧🙏🌞」見ましたか？）
それではグロースハック記事第5弾です！

非言語的な診断を目指して…

CIYもSNSを通して”精度の高い”診断という声をいただくようになってきましたが、まだまだ精度を上げたい！という気持ちを持っていました。
というのも、現状の”文章で判断してもらう質問”には弱点があるからです🧐

言語的な診断の弱点：

• 「どちらとも言える…解釈による…」という迷いが発生しうる
• あくまで”自己”診断であり、主観性と客観性のギャップがある
• 選択肢を見て、結果を意識した回答ができうる

こういった弱点は、結果の精度にも大きく影響を与えてしまいます。
そこで、開発チームでは、画像、色、記号、など非言語的な診断も取り入れていきたいという目標ができました。

非言語診断の実装！

写真、記号、色、表情、など6パターンの診断、合わせて計22問の診断を追加しました。また、ランダム性を意識して画像の並びはランダム生成しております。

基本的には好きな画像を選んでいく診断なので、選んだものにハートマークがつくようなデザインにしました。
また、色、動物、記号を選択する診断では、3列×3列の選択肢になっているので、隙間を広げ、誤タップの心配が少くなるよう微調整を施しています。

なかでも難しかったのが、”好きな順に”選択するという診断です。
悩んでいたのですが、ふと某アプリの画像を複数選択して送信するUIに目をつけ、上記のようなデザインに仕上げました。
”どれを何番目に選択したか”が明確な良いデザインですね！

診断フローの改善

上記の非言語診断を実装したことで、設問数が86問→108問へと増えてしまいました…。ただでさえ多いと言われる診断数が更に増え、ユーザーの診断時のUXをより良いものにしなくては！と開発チームは考えました😤

1.診断の順番の見直し

診断は、非言語診断を含む全4パターンの診断の順番の見直しを行いました。

見直した結果（仮設）：

• 最初の設問数の多さによって離脱数があがってそう
• 逆に後半の設問のほうが、回答に頭を使う系になってる！
• 非言語診断は感覚的なものだし、楽しそうだからいつでも良さそう。けど、言語系と傾向が違うから最初か最後だな！

ユーザーの感情のアップダウンを意識して、無理せず最後まで診断できるような順番に変更しました！こう見ると順番を変えただけでも随分印象って変わるものですね！！✌️

2.情報入力の体験向上

まずは第一印象が大事ですよね！「トップページがサイトの顔じゃないの？🤔」と思われる方もいらっしゃるかもしれませんが、CIYではTwitterなどSNSでのシェアからアスセスしたユーザーは、いきなり生年月日診断に飛ぶ仕様になっています。

変更点：
いきなり診断をはじめても戸惑わないように小さな説明ブロックを設けました。これで「なるほど！じゃあ、はじめよう！」と思ってくれたら嬉しいです！

また、次のページの「生年月日入力」にも一工夫を施しました！

変更点：
今までは、よくあるセレクトボックスから選択する仕様にしていました。
しかし、それだと多ーーくの選択肢からカリカリ..カリカリ..とスワイプして自分の年、月、日を探す必要がありました。
「これってストレスじゃない？」と思い、生年月日も入力式に変更しました。これでパパっと入力できてストレスフリーですね！！✨

おわりに

開発当時は良かれと思っていたデザインや仕様が、実はそこまでありがたくなかったり、時間をおいて冷静にテストしてると、「あれ、使いづらいな」ってことがあります。
いかにユーザーの声が大事かということが身にしみますね！！
次回をおたのしみに！✌️