用於捕獲時間間隔或持續時間的用戶界面

Question

什麼是用於捕獲用戶持續時間的良好的基於​​Web的用戶界面。我們可以說我們想要在幾分鐘內捕捉持續時間。 但想要呈現它，使用戶可以輸入幾小時和\或幾分鐘。

只需使用2個文本框hrs \ min？ 或單個文本框，讓他們輸入「1小時31分鐘」或「91分鐘」？

還是有更好的？

Answer 1

感謝您的所有反饋。

我終於落得這樣做，有一個文本框，顯示格式爲「xxhrs yymin」

用戶可以編輯它，當焦點移動從文本框離開時，重新計算持續時間的持續時間並將文本重新格式化爲規範形式。

解析輸入文本的解析器相當寬鬆。

這是一組正則表達式，用於匹配任何數字，後跟'h'或'm'或'd'來表示小時，分鐘和日期。 如果在它前面沒有找到任何帶有數字的「單位」，它假定您已經輸入一個純數字作爲分鐘數，並將其解釋爲這樣。

因此，如果用戶類型：

「1.5小時」，它會在離開文本格式化爲「1小時30分鐘」。

「90分鐘」也將被重新格式化爲「1小時30分鐘」

解析器僅着眼於第一個字符後的數字，這意味着可以輸入「1天，7小時19分」，並將其將正確識別它。

當然，它也會將「2孔和19只老鼠」識別爲「2小時和19分鐘」。

我想我可以忍受這一點。

Answer 2

只要讓他們只按預先定義的時間格式鍵入數字。

放置2小時和分鐘的文本框沒有小時或分鐘。

此外，您必須定義它是24小時制還是12小時制。

Answer 3

如果您有兩個標有小時和分鐘的文本框，則需要處理用戶鍵入兩個文本框的情況。

3 into h and 35 into m => pretty clear. 3 hours 35 mins 

nothing into h and 95 into m => 1 hour 35 mins (probably update the display to show that) 

但什麼

2 into h and then 95 into m => does that mean 3 h 35 or 1 hour 35 

其中更改字段跳越其他條目有信心，我可以設計一個unastonishing組行爲我用了太多惱人的用戶界面。

因此，我會去一個單一的盒子，我們可以輸入3h或1h 35m或95m，並有一個單獨的只讀解釋顯示。

似乎有一個好的小部件的機會，允許鼠標驅動的條目，就像日曆小部件允許日期條目一樣。一隻可拉手的小時鐘？

Answer 4

那麼，單獨的小時和分鐘字段是最安全但比單個字段使用更慢。如果您不希望持續時間超過1小時，您可以將小時數默認設置爲0。

也許這取決於你的人口，但我希望用戶能夠處理小時和分鐘在同一文本框，如果你提供一個提示，如「持續時間（小時：分鐘）：」

使用該提示時，請接受任何初始不間斷的數字字符串作爲小時數，並接受任何隨後的不間斷數字字符串，以便將以下所有輸入視爲等同。

• 2:30

• 02:30

• 2點30分05秒

• 2.30（或許不是：而偉大的鍵盤輸入，但是您可能希望對小數點進行例外以允許用戶輸入小數小時，例如2小時45分鐘的2.75小時。）

• 2 30個

• 2小時30分鐘

• 2小時30分鐘

• 2jaQp 30 !!!!

我認爲沒有理由要求分鐘少於60的用戶也應該能夠表達時間：

• ：150

當焦點離開現場，自動糾正無論用戶輸入的指定（小時：分鐘）格式，以反饋您所做的解釋。

如果您所需要的僅僅是時間的粗略估計（或者您的用戶只是估算），然後考慮選項按鈕或下拉列表，其範圍爲持續時間（例如0到5分鐘，5到15分鐘，15分鐘到1小時，超過一個小時）。或者，如果在持續時間上有明確的界限並且間隔在功能上是線性的，則可以使用標記的滑塊。

無論您使用什麼輸入格式或控件，它都應該與信息來源兼容。用戶在哪裏獲得此持續時間？那裏使用了哪些單位，格式，間隔和精度？用戶如何思考和談論他們之間的時間？

Answer 5

我認爲應該沒有客戶端修正超過60分鐘的人有人建議。這隻會令人困惑併產生不必要的問題。

用戶輸入數據，所以他應該明白他輸入的內容，並且沒有必要糾正他。

我會離開這些字段爲用戶填寫。在服務器端，我只計算總分鐘數爲：

$total_minutes = 60 * $_POST['hours'] + $_POST['minutes']; 

Answer 6

我只是在想這個，並認識到這種事情的一個熟悉的用戶界面是微波爐。對於類似iPhone的使用，鍵盤可能比我經常看到的滾動滾動器更好。

在我的情況下，我想我要去「數字」的文本字段和「單元」（年，月，周，天，小時）的選擇框。根據你說的是什麼樣的範圍，滑動條（jqueryui，html5）也可能是一個選項。