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

はじめに

こんにちは！UI UX講座第11回目をはじめます。 今回は、デバイスごとの最適なUIの考え方について解説します。

昨今はAIの発達により、誰でもある程度のUIを設計できるようになりました。 だからこそ、ユーザーが実際に使ったときの違和感に気付き、改善できる力がこれまで以上に重要になっています。

UXに配慮したボタン配置とは何でしょうか？
👉第７回：導線設計で操作性を高めるボタン配置のポイント

UXに配慮した色の使い方とは何でしょうか？
👉第９回：色を効果的に使用しよう

これまでのブログも併せて読んでいただくことで、使いやすいインターフェイスを設計するための知識が身に付き、 AIデザインの違和感にも気付けるようになるはずです。

さて今回は、デバイスごとの最適なUIについて解説していきます。 デバイスごとに最適なUIが存在しますが、その理由は入力手段の違いにあります。 PCではマウス、スマートフォンではタッチ操作、テレビではリモコン操作が主流です。このように操作方法が異なるため、使いやすいUIも変わります。 まずは入力手段について解説していきます。

入力手段について

入力手段とは、ユーザーがシステムへ意思を伝える方法のことです。例えば、照明のスイッチやエレベーターの開閉ボタンも入力手段の一つです。デジタルデバイスにおいては、主に３つの入力手段が存在します。

・ポインティング操作
マウスやトラックパッドを使用し、画面上のカーソルを動かして操作する方法です。

・直接接触
スマートフォンやタッチパネルなど、画面に直接触れて操作する方法です。

・フォーカス操作
テレビのリモコンやゲームコントローラーなどで、画面内のフォーカスを移動しながら操作する方法です。

デバイスごとに最適なUIとは？

例えば、スマートフォンのような直接接触による操作では、指でタップするため、ボタンや操作対象はある程度大きい方が使いやすくなります。
一方で、マウス操作を前提としたPC向けUIでは、画面内により多くの情報を配置することができます。
そのため、PC向けに設計したUIをそのままスマートフォンで表示すると、操作しづらくなり、UXの低下につながってしまいます。

PC画面

スマホ画面

このように、ユーザーがどのようなデバイスで操作するのかを考慮し、それぞれに適したUIを設計することが重要です。

具体例

例えばプルダウンひとつを取っても入力手段によって最適なUIは異なります。並べ替えのプルダウンを例に、ポインティング操作とフォーカス操作の場合で比べてみましょう。

ポインティング操作（PC）

PCでは要素が小さくても操作可能の為
▼を選択することで並べ替え順が選べるようなレイアウトとなります。

フォーカス操作（テレビ・ゲーム機）

フォーカス操作では移動を少なくするため選択項目をはじめから表示するようなレイアウトとなります。それぞれのUIには、「選びやすさ」や「操作しやすさ」を高めるための工夫が取り入れられています。

まとめ

UXの良し悪しは、このような細かな配慮の積み重ねによって決まります。今回ご紹介したプルダウンの例も、実際に使い比べると操作性の違いを大きく感じられるはずです。ユーザーが「この画面は使いやすい」「ストレスなく操作できる」と感じるインターフェイスには、このような小さな工夫が数多く取り入れられています。

AI時代だからこそ、こうした細かな違和感や改善ポイントに気付く力が重要です。デバイスごとの特性や入力手段を意識し、よりユーザーに寄り添ったUIを設計できるようになりましょう。

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

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