「使いやすい」インターフェイスの作り方７

はじめに

こんにちは！UI UX講座第7回目をはじめます。
このブログを読み進めることで
UI UX改善のためのテクニックをどんどん身に付けていただければと思います。

さて今回は、
ユーザーの視線や行動導線を考慮したボタン配置の考え方について解説します。
業務アプリケーションや業務システムのUI UX改善を進める際、意外と見落とされがちなのが「導線設計に基づいたボタン配置」です。

まずはこの画像をご覧ください。

これは、日常でもよく目にする
「同意画面」をイメージして作成したものです。

では、実際にユーザーとして、この文章を読んで同意する場面を想像してみてください。
…なにか違和感を感じませんか？

その違和感の正体は、視線・行動の導線とボタン配置位置のずれにあります。

視線導線/行動導線の基本

私たちの視線導線は、次の矢印のように「左から右」「上から下」へと自然に流れます。

これは視線の導線は自然と文字の流れに従うようになっているからです。
このブログも、迷うことなく左上から読めていますよね！

同意画面のような単純な操作でも、行動の導線は「読む → 同意する（ボタンを押す）」という流れになっています。
つまり、ボタン配置がこの導線上にないと、操作に違和感が生まれるのです。

ここまでを踏まえ、先ほどの画面をもう一度ご覧ください。

UI UXブログをここまで読み進めているみなさんなら
違和感の正体がすぐに分かったかと思います。
この画面は、視線・行動の導線とボタン配置位置がずれてしまっています。

ボタン配置位置とUI UX改善の関係

下記画像のように、ボタンを視線・行動の導線上に配置することで
UI UXが改善されたインターフェイスの作成が可能です。

先ほどの画面と比べると、随分と使いやすい画面になりましたね。
同意画面は読む→同意という機能のみの画面ですが
様々な機能が存在する画面では、ボタンの配置も変化してきます。

ボタン配置を検討する際には、ボタンそのもののデザインも非常に重要です。 見た目や色の印象によってクリック率が変わるため、デザイン観点からの改善については 👉第1回：ボタンデザインの極意を学ぼう もあわせてご覧ください。

視線導線に基づくボタン配置の実例（業務アプリ編）

例えば、支払い・チャージ・送金など様々な機能が存在するような
バーコード決済画面のボタン配置を見てみましょう。

こういったバーコード決済画面では
赤枠あたりの部分にボタンが配置されていることが多いです。

このように、もし画面下部にボタンがあるとすると
使いづらく感じますよね。

行動の導線が、「文章を読む→同意ボタンを押す」というシンプルな同意画面とは異なり、
「支払う」「送る」など、ユーザーごとに異なる行動導線が存在します。
そのため、上部にボタンが配置されることが多いです。

さらに、こうした行動導線をスムーズに導くためには、ユーザーが「次に何をすればよいか」を直感的に理解できる画面設計が不可欠です。 そのポイントは 👉第6回：次のアクションを明確に！ で詳しく解説しています。

最後に：ユーザー導線を意識したUI設計が業務効率を高める

視線の導線に沿ってどのようなボタンでも画面右下に配置する、ということではなく
その画面を使用するユーザー目線に立ち、行動導線を理解したうえで、
業務シーンに合わせてボタン配置を検討すると、よりUXが改善された画面を作成することができます。
今後UI UXを改善する際は、「導線設計に基づいたボタン配置」を意識して設計してみましょう！

株式会社システムズでは、
UI UX改善を意識した画面デザインにこだわっています。
何か気になることやお困りごとがあれば
ぜひお問合せください。

引き続きUI UX改善のためのブログ執筆を続けていくので
今後ともよろしくお願いいたします！