WebアプリUI改善設計
UI/UX設計 / 視線誘導 / 操作性改善
離脱率低減を目的としたUI設計
概要
離脱率の高いWebアプリを想定し、 視線誘導と操作性を改善するUI設計を実施。
担当領域
UI設計 / ワイヤーフレーム作成 / フロント実装 / 改善設計
課題
- CTAが目立たずクリックされにくい構成
- 視線導線が分散し迷いやすいUI
- 情報の優先順位が不明確
改善
- Z型レイアウトで視線導線を設計
- CTAを右下固定＋強調カラーで視認性向上
- 情報の階層構造を整理し可読性向上
改善前 / 改善後
- 改善前：CTAが画面下にあり認識されにくい
- 改善後：CTAを右下固定＋強調カラーで視認性向上
- 改善前：情報が縦並びで視線が分散
- 改善後：Z型レイアウトで視線誘導を最適化
想定される成果
- クリック率向上を想定したUI改善
- 離脱率低減を意識した設計
- 操作完了率向上を狙ったUI構成
使用技術
HTML / CSS / JavaScript