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

Anthony

UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

Why a Clock Widget Is Easier for Picking Time (2016-06-28)

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

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

select-menu-picking-time

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

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

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

(編注:クロックウィジェットのソース&デモはこちらです)

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

clock-widget-picking

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

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

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

clock-widget-clocks

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

まとめ

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

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