スムーズなUIは指先から！「物理的な操作」の法則👆| vol.8

お疲れ様です。花冷です🌸

UI/UXのいろは第8弾！

今回は「脳」の話から少し離れて、
スマホをタップしたりマウスを動かしたりする
「手や指の物理的な動き」にフォーカスした法則をご紹介します✨

🔴 大きく、近く！「フィッツの法則」

「フィッツの法則」とは、
「操作したいターゲット（ボタンなど）までの距離が近く、
サイズが大きいほど、早く正確に操作できる」という法則です。

なんだ、当たり前じゃん！って思うかもしれませんが、
これがスマホのUI設計では非常に奥深いんです。

スマホを片手で持ったとき、
親指が自然に届く範囲って限られていますよね。

だから、アプリで一番よく使う「購入」や「送信」の重要なボタンは、
指が届きやすい画面の下部に、
横幅いっぱいの大きなサイズで配置されています。

逆に、間違えて押してほしくない「退会する」「データを削除する」
といった危険なボタンは、わざと指が届きにくい画面の端に、
小さく配置してミスタップを防いでいるんです💡

スマホで使うユーザーを想定するなら、
「右上にある三本の線アイコンからメニューを開く」といった
親指をぐぅーっと伸ばさないといけないUIは不適切ってイメージかな！

🔴 通り道は広く！「ステアリングの法則」

「ステアリングの法則」とは、
マウスポインターや指を動かす「軌道（幅）」が広いほど、
早く操作できるという法則です。

パソコンのドロップダウンメニューなどで、
マウスをまっすぐ正確に動かさないと、
途中でメニューが消えちゃって「キーッ！」と
イライラした経験はありませんか？ｗ

ユーザーの「操作の通り道」が狭くならないような、
余裕を持ったUI設計が求められます。

🔴 そっと背中を押す「ナッジ」

最後は少し心理的なテクニック✨

「ナッジ（nudge：肘で軽くつつく）」とは
ユーザーに行動を強制するのではなく、
「自然と良い選択に誘導する」仕組みのことです。

例えば、
入力フォームで最初から一番選ばれている「おすすめプラン」にチェックが入っていたり（デフォルト設定）、
アプリじゃないですが長打の列が予想される際は地面にガムテープで並ぶ方向を示して置いたり。

ユーザーが迷わず、無意識のうちにスムーズに決定できるように、
そっと背中を押してあげる親切な工夫です✨

📝 まとめ

いかがでしたか？？

最近AIを使ってて多いのは、
「コピーできる形式でください。」ってお願いしても
なーんか思ったようにならないんですよねえ。

脱線しましたが、
🌸実際にユーザーが使う場面を想定したボタン配置や大きさの決定は
🌸UI/UXの完成度を大きく左右する
とっても大事な要素です！

だからスマホは画面のどこをスワイプしても操作できたりといった
UIが取り入れられていることが多いんですね！

私の個人開発でも、
この記事を書いたときにせっせとスワイプ操作が入れれる箇所がないか
チェックしてました（笑）

自分ルールを作るのは大変なので、
プロの力を借りて漏れている観点をチェックするのもいいと思います！

次回は、
「感情とモチベーションの法則」についてです！

お楽しみに✨

⭐次の記事はこちら📝

⭐マガジンはこちら📚