時刻の入力UIについて考える
今回は時刻を入力UIについて、考えてみます。
以前書いた入力UI系の記事「生年月日の入力UIについて考える」「生年月日の入力UIについてさらに考える」は、生年月日を入力するという特定の目的に絞った入力UIについて考えた記事でした。その際は生年月日の入力UIにカレンダー選択のUIは向かないと書きました。
時刻を入力するUIについても、特定の目的に対してはそれに適したUIがありそうだと考えています。
時刻入力UIのパターン
時刻を入力する際の入力UIパターンは下記のようなものでしょうか。主に動きや操作に注目して挙げたパターンです。
使い勝手はそれぞれ違いますが、これらUIは使用される場面によって選ばれているように思います。
- 時間と分を設定したプルダウン
- 時間・分でそれぞれ分かれて設定したプルダウン
- 1つの入力ボックスに時間・分を数字で入力
- 時間と分を設定したプルダウン＋数字での手入力編集も可のハイブリッド型
- アナログ時計の文字盤UIで入力
プルダウンになっているものは、時間の単位、とくに分については1分単位や15分単位などの選択肢に違いがあります。15分単位になっているものについては、その時間を扱う仕様としてその単位を設定していることが多いように思います。1分単位になっているものは、場合によっては時間を選ぶにはプルダウンの移動が辛いこともありそうです。
これらに加えて、HTMLの input[type=time] を使用したUIは、環境により変化します。PCのブラウザ、スマホとそのOSで、動作に違いがあります。
PCの主なブラウザ、Chromeでは、1つの入力ボックスに時間・分を数字で入力 にプラスして、時間と分が数字の加減がキーボードの方向キーの上下で操作ができます。 数字入力とキーボードの操作のどちらもできるハイブリッド型と言えそうです。また表記については、ブラウザではなく12時制か24時制かはブラウザではなくOSによって変わるようです。
スマホではPCと同じ動作ではなく、スマホ向けになった時間の入力UIになります。iOSでは、時間・分でそれぞれ分かれて設定したプルダウン の操作と、入力エリアをタップすると数字入力が可能になります。アンドロイドでは、アナログ時計の文字盤での入力とデジタルのプルダウンでの入力ができます。 入力UIのパーツとして、 input[type=time] を使う場合は、環境によって入力UI自体の動作が違うことを念頭においておく必要があります。
参考: https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/time
時刻入力を場面から考える
時刻を入力する場面から時刻入力するUIを考えてみます。 以下の2つの場面から考えます。
- アラームや予定の設定で特定の時刻を入力する
- 決められた時間枠から予約時間を選択する
アラーム設定で特定の時間を入力
時刻に目的となる特定の時刻のがあるパターンです。
特定の時間 09:48 を入力したい場合は、時間と分を設定したプルダウン＋数字での手入力編集も可のハイブリッド型 がよさそうです。
1分単位で細かく指定したい場合、プルダウンだけでなく、数字でのキーボード入力ができるとプルダウンの移動に頼らず設定ができるので便利になるのではないかと思います。
このUIの使用例では、iOSのアラームやカレンダーのスケジュールがあります。時刻入力UIを1度タップでプルダウン、プルダウン選択のUIをタップで数字キーボードが呼び出されます。
決められた時間枠から予約時間を選択する
時刻を入力するというより、決まった時間枠から選択するものです。同じ時刻を扱いますが、時間枠というフォーマットが決まっているものです。 この場合は時間枠の単位や時間に決まりがあるため、時刻入力ではなく、あくまで選択するものの扱いがいいでしょう。 時間と分を設定したプルダウン で決まったものから選択するのがいいのではないかと思います。
時間枠の選択肢が少ない場合、プルダウンではなく、ラジオボタンで選択肢をすべて表示したパターンも一覧性があり、選択しやすいものにできそうです。また、このパターンの応用系的なUIとして、カレンダーの日付と予約枠の組み合わせたUIが、サロンやレストランなどの予約サイトでよく使用されています。
まとめ
時刻入力にも入力するUIのパターンは複数ありますが、場面によって最適なUIを検討する必要があります。
ユーザーが直感的に時刻を選びやすいUIは、時刻入力を求められる場面によって変わります。
アラームを設定するとか、予約枠から時刻を選ぶとかの場面と、扱う時刻の仕様や要件も含めて考えるのが良さそうです。
