01マイクロインタラクションで登録フォームを改善するこんにちは、このブログのデザインを担当した、新卒デザイナーの長岡です。作ったのに、デザイナーの記事が無いなんて...と嘆いていたら、デザイナー編の第一弾を書かせていただけることになりました。ビザスクでは、各チームが定期的に勉強会を行っています。先々月ほどからデザイナー陣も「UI/UX勉強会」と題した勉強会を開催しはじめました。ビザスクのデザイナーは2人しか居ないため、勉強会はデザイナー+CEO+CTOの豪華メンバーで執り行っております。今回はその第一回として開催された勉強会のレポートをお届けします。afterまとめはじめに勉強会の形式について勉強会は以下のような流れで開催されます。ちなみに、エンジニア勉強会も同じ流れで行っています。UI/UXデザインの神が宿る細部」を輪読いたしました。本の内容をご紹介いたします。本の概要マイクロインタラクションとは「ある作業をひとつだけこなす最小単位」のことである。...と書いてあるのですが、これだけ読んでもよくわかりません。具体的に言うと、以下のような事柄です。パンを焼く電気をつける会員登録をするまた、マイクロインタラクションの中には「トリガー」「ルール」「フィードバック」「ループとモード」というような4つの要素があります。言ってもやはりよくわからないのですが、具体的に言うとこんなかんじです。押したらどこに行くのか?ボタンを押した時の反応はどうあるべきか?自動でメールを受信する際、その通信頻度は?こういった事に対して、成功例やアンチパターンを交えて紹介していく本です。なんとなく感覚的に知ってはいたことがほとんどでしたが、それを論理立てて言語化して説明されるとより一層腑に落ちることが多く、とても勉強になりました。議論してみた早速ビザスクのプロダクトに当てはめて振り返ってみます。「そこまで手が回らない」...というような声が飛び交います。ビザスクはまだまだUI/UXにはこだわれていなかったようです。話題にのぼった章が「フィードバック」の章でした。フィードバックマイクロインタラクションが起動されたら、「何が行われたのか」と「その結果として何が起きたか」の2点を知らせる必要があります。ユーザーがボタンを押したなら「ボタンが押されたこと」と「そのボタンが押された結果として起きたこと」を示す何かが起きなければなりません。「こうするとエラーが起きるんだけど、なんで駄目なのかわからないよ」という話が飛び交います。考えているようで考えきれていない部分が数多くあるように思われました。話題にのぼった箇所の改善に取りかかりました。真っ先に改善したのが会員登録フォームです。↓これが↓これになります...お分かりいただけたでしょうか?そうです、何も変わっていません。間違い探しをしてしまった方、すみません。改善したのは「フィードバック」の部分なので、入力しないと何もわからないのです。いうわけで気を取り直しまして、gifアニメでごらんください。beforeメールアドレスとパスワードを入力して登録ボタンを押しました。エラーが発生していますが、何が間違っていて何が正しいのかよくわかりません。after改善後のフォームで同じ操作をしてみました。メールアドレスを入力すると、枠線が緑色になり、右端にチェックマークが付きます。パスワードの方にはチェックマークが付いていません。そのまま登録ボタンを押すとパスワードの枠線が赤くなり、バツマークが付きます。「6文字以上入力してください」のエラー文も表示され、何が間違っていたのかわかりやすくなりました。パスワードを6文字以上にすると、赤枠が緑になり、チェックマークが表示されます。これで無事、快適に登録できるようになりました!まとめマイクロインタラクションは大事だし、ちょっと楽しいこの本には「フィードバックはサービスの個性を出しやすい部分である」と書かれています。ローディング中に回転するロゴ、検索して見つからないと表示される悲しそうな顔、オフライン時には寝ているアイコン...ちょっとした楽しい仕掛けは、サービスを好きになるきっかけになります。言っても、まずは膨大な数のマイクロインタラクションを一通り改善していく作業が必要なのですが...。デザイナーの手だけでは改善しきれない部分があるのが現状です。いうことで、デザインチーム改め「UXチーム」として日々改善に勤しんでおります。