より直感的な時間入力のUIを考える

カレンダーなどでイベントやミーティングの予定を入れるとき、フォームに時間の入力をする作業が発生します。

しかし時間を選択するのは簡単な作業ではありません。ユーザーはセレクトメニューにある長いリストをスクロールしなくてはいけません。ある調査では、ユーザーがよくセレクトメニューで諦めることを証明しています（→ 当サイトのWebフォームの離脱を防ぐためには？も参照ください）。

今こそ時間を選択する際、セレクトメニューを取り外し、クロックウィジェットを使用する時が来たのです。

クロックウィジェットとは？

カレンダーウィジェットは既に日付を選択する方法として定着しています。ユーザーはカレンダーの動きに慣れているので、とても直感的です。クロックウィジェットも同様の効果をもたらすでしょう。

（編注：クロックウィジェットのソース＆デモはこちらです）

クロックウィジェットはセレクトメニューの長いリストよりも早く目を通すことができます。セレクトメニューはAMとPMの両方を入れる必要があるため、リストの長さが倍になりますが、クロックウィジェットの場合はAMとPMボタンを表示するだけで、重複して数字を表示させる必要がありません。

ユーザーはリストをスクロールする必要がないので、選択が早くなります。ただ、普通の時計のように見ればいいだけなのです。時間を短縮できるだけでなく、間違いを防ぐこともできます。もしユーザーがメニューをスクロールしすぎた場合、AMとPMの時間を間違える可能性があります。クロックウィジェットならその間違いをしないでしょう。

クロックウィジェットの仕組み

ユーザーがテキストフィールドをクリックすると、クロックウィジェットが現れます。ユーザーはそれから「時」と「分」を選択するために数字をクリックします。時間のダイアルが最初に現れ、それから分数のダイアルが現れます。

もし海外のユーザーがいるようなサイトであれば、24時間時計を使いましょう。ただし、12時間時計が一般的な国にお住まいのユーザーが大半なら、12時間時計を使用しましょう。

まとめ

セレクトメニューを選択することはユーザーが使用する上で面倒です。ユーザーの時間を短縮してあげるためにも、時間の選択方法にはクロックウィジェットはいかがでしょうか。

より多くのデザイナーを使用すれば新しい基準になるかもしれません。カレンダーウィジェットが機能しているなら、クロックウィジェットも機能するはずです。