🤔

エンジニアが勝手にUX向上を考える (YOUTRUST)

2021/05/07に公開

はじめに

"勝手にUI改善"、"勝手にリデザイン"などを見て思いついたので、
信頼でつながる日本のキャリアSNS、YOUTRUSTのWEBアプリケーションについてUX向上を勝手に考えてみました。
サービスの選択理由としては、最近採用に関わり始めたことで使用する頻度が高いこと、React, MaterialUIを採用されており、触り慣れた構成である点です。
なお、ユーザーとして、または自分がエンジニアとして実装、レビューをする時に指摘する(したい)点を整理する目的であり、YOUTRUST社の内情、目的、課題、優先度などは考慮していないものになりますのでご了承ください。

ホームの初回レンダリング

まずホームから見ていくと
このように、右側のナビゲーションエリアが2回レイアウトシフトし、左のメインエリアがローディングの後に出現し、レンダリングが終了します。

ナビゲーションエリアの改善

原因としては、以下の3つのCSRされており、データ取得時の表示が空になっているからです。典型的な高さの変化によるレイアウトシフトです。スマホビューの時にはこれらのセクションがFirstView範囲外なので気になりませんが、PCビューではかなり気になります。

これらのセクションについては、表示数が固定(or 最大数が決まっている)ようなので、Skeklton表示をして、高さのズレが最小限になるようにしてあげると良いでしょう。
最低でも、先ふたつのエリアを適切に処理すれば、三つ目は大抵のデバイスでFirst Viewに入らないので体感に問題がなくなると思います。

メインエリアの改善

メインエリアには、Circular Progressが使用されていますが、これで適切でしょうか？

Material Designに定義されているように、Circular Progressはスクリーンの中心にあるものが、初回ローディングを意味します。
また、タグなどの複数の細かい部分にもこれが使用されていますが、ユーザーの視線を必要以上に奪ってしまうので、乱用しないことが推奨されています。

よって、このようにスクリーンの中心に一つだけ表示するべきです。
タグのところは、Skeltonなどでも良いでしょう。

さらには、上のGIFにあるように、マウント時に若干のアニメーションを加えてあげると、特にモバイルビューでアプリ感が増してより良い体感を得られます。
(自分は最近Framer Motionでマイクロインタラクションを実装してておすすめです)

ナビゲーションの構成

PCビューにあるボタンについて、MuiのTabコンポーネントは使用していないようですが、見た目上はタブと認識できるUIになっているので、タブとして考えることとします。

タブ表示の改善

タブの挙動の中で気になるものは、"友達招待"です。
こちらだけ、アクション時の挙動がページ遷移ではなく、モーダルの展開になりますが、ユーザーとしては唐突なものに感じます。

タブの役割としてはどうあるべきでしょうか?
再度Material Designの定義を見てみると、同階層のコンテンツを行き来するために使用すべきことがわかります。

よって、このまま"友達招待＂をタブに残すとすれば、これはページとして存在した方が同階層感があり、自然に感じます。
または、そもそも同階層のアクションではないと考えられるので、ダイアログのまま、以下のMaterrial Designのように、タブの要素から外しアイコンのみで表現されたAction Itemとして配置されるべきでしょう。

スマホビューとの違い

スマホビューではこのようなBottom Navigationがこのようにデスクトップビューと異なるものになっています。(スマホビューを後から作っているようなので、単に新旧なのかもしれないですが)ナビゲーションの役割を担っていると直感的に判断できる要素に触るタイミング(デバイス)によってブレが出ていると把握しづらいので統一されるべきかと思いました。

繰り返しの体験

ナビゲーションを繰り返すと、このようになります。
一度訪れたタブであっても、毎回ローディングが挟まれ、その時間も毎回それなりの時間待たされるので、体験悪く感じます。

各タブ、最初に訪れた時にはローディングを挟むようにし、再度訪問する時には、初回時に取得したデータを表示するように実装すべきと思います。(Next.jsで言えば、Shallow Routingを使うと簡単に可能です)

終わりに

ホームの表面だけをつらつらと書いてみても、それなり量になってきたので以上にしようと思いますが、他のページやモーダル内についても、同様なレイアウトシフトやデザイン原則に沿うように変更すると、体験が良くなるところがあると思います。
今回あげたような体験の悪いポイントは、データの取得方法やその時間、ページ遷移の手法などがデザイナーがツール上でデザインをしている時の考慮から漏れやすかったり、実装段階の手法選択によって考慮と違うものができあがることによると思います。
フロントエンジニアとしてどのような手段で実装しようか考える中で、このような"繋がり"を考慮するべき点が出た時に疑いを持ってデザイナー(やPM?)と会話、調整する機会を作ると良いでしょう。

P.S. YOUTRUST経由で採用させてもらった素敵な方々との出会いがあるので、サービスの一ファンです。