入力手段【v04】

手段が変われば、UIも変わる。

司会

皆さん、今日は「入力手段」をテーマにお話を伺います。よろしくお願いします。

TFキリン

よろしくお願いします。入力手段が変わると、ユーザーインターフェースも変わるんですよ。

たぬき

確かに、普段は意識しませんが、いろいろな操作方法がありますね。

TFキリン

そうですね。人に何かを伝えるとき、話したり文字を書いたりしますよね。人ではない「システム」に対してユーザーの意思を伝える方法が、まさに入力手段なんです。

私たちの生活には多種多様なシステムが存在し、それぞれ異なる入力手段を備えています。例えば、電気をつけるスイッチやエレベーターのボタン、ガスコンロの火力調整などですね。

司会

なるほど、身の回りには本当に多くの入力手段がありますね。

TFキリン

デジタルデバイス、例えばスマートフォンやPCは複雑ですよね。そこで、WindowsやAndroidといったOSが、少ない入力手段でも多くのことができるようにサポートしてくれています。

それでも、大きく分類すると入力手段は少なくとも3つあります。入力手段が変われば、それにふさわしいインターフェースデザインも変わります。それぞれの特徴を理解すれば、最適なデザインを検討できますよ。

3つの入力手段(操作方法)

たぬき

その3つの入力手段とは何でしょうか?

TFキリン

音声入力を除けば、日常的に使われる入力手段は大きく分けて3種類しかありません。そして、その入力手段が何であるかによって、画面のデザインは大きく変わります。

ポインティング操作

司会

一つ目のポインティング操作について詳しく教えてください。

TFキリン

はい。ポインティング操作とは、マウスやトラックパッドのように、画面内のカーソルを動かして操作する方法です。トラックポイントやトラックボールなど、ポインティングデバイスにはいろいろなバリエーションがあります。

これらは画面内のカーソルを間接的に操作します。そのため、細かい操作に向いていて、多機能なデザインでも問題なく扱えます。

たぬき

確かに、マウスだと小さなボタンでもクリックできますね。

TFキリン

そうなんです。また、マウスのホイールやトラックパッドの2本指スクロールなど、縦スクロール操作にも特化しています。だから、長いページを縦にスクロールするデザインにも適しています。

直接接触

司会

二つ目の直接接触についてはいかがですか?

TFキリン

直接接触は、スマートフォンやタブレットのタッチパネルを通して、画面に直接触れることで操作する方法です。基本的には指を使いますが、タッチペンを使うこともあります。

切符券売機や自動販売機などでも見かけますよね。直接触れるので、操作対象にはある程度の大きさが必要になります。

たぬき

だからスマホのボタンは大きめなんですね。

TFキリン

そうですね。細かい操作には向いていませんし、画面が入力と出力を兼ねているため、全体的に大きめのデザインになりがちです。

その反面、スワイプやピンチなど、タッチパネル独自の操作が可能です。指でなぞればその通りに動くので、直感的で分かりやすいですね。

フォーカス操作

司会

三つ目のフォーカス操作とは何でしょうか?

TFキリン

フォーカス操作は、TVのリモコンやゲームコントローラーなどで、画面内のフォーカスを移動して操作する方法です。自動車のナビゲーションシステムなど、意外なところでも使われています。

画面内にカーソルではなくフォーカスがあり、フォーカスできる対象にしか移動できません。上下左右のボタンで操作するため、現在の位置を明確に示す必要があります。

たぬき

なるほど、だからフォーカスが強調されているんですね。

TFキリン

その通りです。ただ、ボタンを何度も押す必要があるので、他の操作方法と比べて身体的な負担は大きくなりがちです。簡易的な移動とフォーカスの位置を明示することが重要になります。

入力手段により異なる適したUI

司会

入力手段が違えば、適したUIも変わるんですね。

TFキリン

そうなんです。標準的なパーツでも、ポインティング操作と直接接触では細かな違いがあります。

新しい環境のインターフェースを検討するときは、その環境がどういったものか、特に入力手段は何かを考えることから始めます。

インターフェースデザインの収束

たぬき

同じ入力手段なら、デザインも似てくるんですか?

TFキリン

はい、入力手段などの制約条件が同じであれば、インターフェースはある程度、同じようなデザインに収束していきます。
スマートフォンとタブレットが似たデザインになるのはそのためです。

PCで使われるマウスやトラックパッドは細かい操作に向いているので、デザインのバリエーションに幅を持たせることができます。

司会

ホバーもポインティングデバイスならではですね。

TFキリン

おっしゃる通りです。ホバーによって選択可否が容易に判別できるため、見ただけでは判断しにくいデザインでも許容されます。

しかし、タッチパネルではホバーが存在しないので、見ただけで選択可能かどうか明瞭に示す必要があります。

直接接触(スマートフォン・タブレット)

たぬき

タッチパネルのデザインで気をつけるべき点は何ですか?

TFキリン

指やタッチペンで操作するため、選択できる対象はある程度の大きさが必要です。過密にならないようにレイアウトし、アイコンも多く用いられます。

また、直接接触ではホバーがないので、見ただけで操作可能かどうかを判断できるように明確なデザインが求められます。

フォーカス操作(TV・ゲーム)

司会

フォーカス操作のデザインはどうすれば良いですか?

TFキリン

フォーカス操作はできることが限定的なので、フォーカスの特性に注力したデザインになります。

フォーカスできる要素は連続的に配置し、過度に離れすぎないようにします。また、フォーカスしている場所は縁取りや拡大、色の変化、動きなどで明示的に強調します。

実例1 入力手段による使いやすさの違いを確かめる

たぬき

具体的な例でその違いを見てみたいです。

TFキリン

では、Sonyが提供していた「トルネ(Torne)」を例に挙げましょう。TV録画アプリとして最も使いやすいと言われています。
その使いやすさがどこから来るのか、探ってみましょう。

トルネにはいくつかのバリエーションがあります。それらを比較することで、使いやすさの要因を見つけられるかもしれません。

司会

どんなバリエーションがあるんですか?

TFキリン

まず、本家本元のトルネはPS3やPS4で使われ、ゲーム機ならではのスピードと操作性の良さが特徴です。

次に、スマートフォン向けに「Torne Mobile」があります。タッチパネル用にインターフェースがアレンジされ、装飾や動きが省かれていますが、基本的な機能は同等です。

さらに、「Torne Mobile」をAndroid TVでも動くようにしたものがあります。操作はTV付属のリモコンが前提となっています。

たぬき

使いやすさに違いはありますか?

TFキリン

主観ですが、本家トルネは圧倒的に使いやすく、スマートフォン版はそれなりに、Android TV版は使いやすいとは言い切れませんでした。

そこで、Android TVにBluetooth接続できるゲームコントローラーをつないでみました。すると、操作性が格段に良くなりました。

司会

それは興味深いですね。

TFキリン

このことから、トルネの使いやすさはコントローラーの操作性に支えられている側面が大きいと言えます。つまり、インターフェースの良し悪しは、画面レイアウトだけでは決まらないのです。

たぬき

なるほど、入力手段が重要なんですね。

TFキリン

その通りです。デザインを考えるときは、まず入力手段を理解することが大切です。それによって最適なインターフェースが設計できますからね。

司会

本日はとても勉強になりました。ありがとうございました!

関連記事