カテゴリー
レイアウト/配置系
41

操作の流れを作る

視覚ゲシュタルトを利用したグルーピングや、ストーリー性のある項目配置によって、ユーザーの視線と操作を誘導する。

01
Bad

次に何をすべきかわからない

商品購入画面
画像
¥1,980
数量:
商品名
?
どこを見ればいい?
Good

自然な流れで次のステップに進める

商品購入画面
画像
商品名
¥1,980
数量
上から下へ自然に視線が流れる
02
Bad

入力後どこをクリックすべきか分からない

会員登録 - ステップ2/3
********
どのボタンを押せばいい?
Good

矢印やハイライトで次の操作を誘導

会員登録 - ステップ2/3
********
次のアクションが明確
03
Bad

どれが主要アクションか不明で迷う

ファイルの保存
📄document.pdf
どれがメインアクション?
Good

「次へ」ボタンが目立つ色で配置されている

ファイルの保存
📄document.pdf
主要アクションが一目でわかる
No.41操作の流れを作る
41

操作の流れを作る

視覚ゲシュタルトを利用したグルーピングや、ストーリー性のある項目配置によって、ユーザーの視線と操作を誘導する。

01
Bad

次に何をすべきかわからない

商品購入画面
画像
¥1,980
数量:
商品名
?
どこを見ればいい?
Good

自然な流れで次のステップに進める

商品購入画面
画像
商品名
¥1,980
数量
上から下へ自然に視線が流れる
02
Bad

入力後どこをクリックすべきか分からない

会員登録 - ステップ2/3
********
どのボタンを押せばいい?
Good

矢印やハイライトで次の操作を誘導

会員登録 - ステップ2/3
********
次のアクションが明確
03
Bad

どれが主要アクションか不明で迷う

ファイルの保存
📄document.pdf
どれがメインアクション?
Good

「次へ」ボタンが目立つ色で配置されている

ファイルの保存
📄document.pdf
主要アクションが一目でわかる