バイトチェックのユーザをリードできるUI Design
こんにちは。グラフィックデザイナーのティエンです。
今回はバイトチェックのサイトから「ユーザをリードできるUI Design」についてお話しさせていただきます。
アジェンダは以下の３点になります。
１. ユーザーの動向を握る
オンラインショッピングで自分の欲しい商品を購入した人からのレビューやコメントをよく読んだり、評価の星が多くついていれば安心して購入できる方も多くいると思います。それと同じく、最近会社や大学を選ぶ時にそれぞれの評価を読む傾向もあります。そこから「レビュー」「コメント」「評価」などのクチコミがユーザーを決断に導く１つのポイントであることがわかりました。
アルバイト探しも同じくクチコミが大事になるというユーザーの動向から、バイトチェックのサイトではクチコミを大々的にアピールしています。
サイトの説明文を見ると、「クチコミ」のキーワードが最初におかれています。そのそばに、「仕事先」というキーワードもあります。
・UIにどう反映しているか見ていきましょう！
仕事先（場所）が検索する際には重要な項目なので、サイトでは、都道府県の欄がサイトトップの一番目立つところに配置されています。
この画面の良いポイントとしては、基本的に人の自然の視線の動きが「左から右」ですので、地方が「塗り」で、都道府県が「線」で分けられて、デザインの階層ができています。それと同様に、求人検索のページで「エリア」と「駅」が左から並べています。つまり、色と並び方でユーザーの目線をリードすることができています。
続いて、クチコミがアピールしたい項目なので、サイトの真ん中にクチコミの欄が配置されてます。他のページもクチコミの欄がすぐそばに置かれていて、特に会社の詳細ページでは星と点数のサイズが社名より大きくなっています。
・他のサイトと比較してみましょう
今回は「バイトル」と「タウンワーク」という２つの媒体と比べていきたいと思います。
じっくりそれぞれのサイトを見ると、クチコミをアピールするデザインがないことがわかります。
また、場所選択の項目が左のほうにあり、特にタウンワークの都道府県の配置はバイトチェックとも同じようなものになっていますが、バイトチェックよりも豊かな配色になっています。
２. 情報を最適化する
続いて情報について見てみましょう！
まずはタウンワークとバイトルのサイトを比較します。
上の画像を見ると、タウンワークでは同じような色使いのところが多いです。バイトルの場合は、複雑で様々な色が使われていたり、要素の数も多いです。
どちらも一見すると、デザインからアピールしたいところがなかなか見つけにくいと思います。
また情報が多くてどこから始めるか新規のユーザーが迷ってしまう可能性もあると思います。
バイトチェックでは、情報の要素が少なくて、配色がシンプルで、メインのコンテンツが全部ページの中央に揃っているので、ユーザーが集中しやすくなると思います。
このようにデザインと情報が簡略化されていることで、ユーザーをリードしやすくなります。
３. 結論
ここまでの「ユーザーの動向を握る」と「情報を最適化する」の２点の考察から次のようなことが分かりました。
ユーザーをリードするためには、ニーズや動向を握って、デザインと情報をある範囲で絞って最適化にすることが必要です。
バイトチェックのUIは見やすく、ユーザーがやりやすく、迷わずに操作できたり、アピールのポイントをすぐ見せたりする設計ができています。
以上、バイトチェックの「ユーザをリードできるUI Design」でした。
改善点のBonus
２点気になったことがありました。
・こだわり条件のUI
タウンワークとバイトルでは、上の画像のように余白のスペースが少ないですが、バイトチェックは余白が多くて、全部読みたい時が長くスクロールしなければならないです。
改善点としては、タウンワークやバイトルのように横に並べる項目があれば並ぶべきだと思います。
・クチコミでの検索
現在はブランド名しか探せませんが、例えば、あるユーザーが近くのお店のクチコミを知りたいと思った時に、エリアや駅などの詳しい条件の検索項目を設置されていれば、その人が判断しやすくなると思います。
〜＊〜
以上になります。
日本語と内容がわかりづらいところがあれば、遠慮なくコメントをよろしくお願い致します。
最後まで読んでいただき、誠にありがとうございました。
お疲れ様でした。それでは、また会いましょう。