4

I'm trying to implement a time picker in which I'm using a read only text-box initially to indicate that user cannot enter input rather he should click on the input to select time from drop-down.enter image description here

problem is when there is a pre-filled value user might think this is disabled input.enter image description here

So how do I differentiate disabled state and read only state of input so that user wont get confused for both.

Note: Right now I'm thinking of having different shades of grey to indicate them, like dark grey for disabled state and light grey for read only. again this will be evident if we have both of them together which may not be the case most of the time.

  • @Alvaro I think in question I have clearly mentioned that initially I don't want user to enter anything but click on the input. so for that I am using read only input. once user selects time from drop down he can edit that that is why I need an input. – prazor9 Mar 2 '17 at 9:10
  • So once the user clicks the read-only input it becomes editable or it triggers a picker which updates the value but it remains read-only? – Alvaro Mar 2 '17 at 9:14
  • no after he selects value input becomes editable. Idea is to make user think like its not a normal input but a special one which makes sense in this case as its purpose is different. – prazor9 Mar 2 '17 at 9:23
  • Try to explain exactly what this is used for and why you are not just doing it the standard way with a regular timepicker like: jonthornton.github.io/jquery-timepicker – Mattias Bregnballe Mar 2 '17 at 10:52
4

First, you are not using the appropriate shades of gray. Faint gray should be used for Disabled and dark gray for Read only (so they look like enabled fields).

When the field is interactive, there is no need to style it differently, it should appear as normal input field.

Second note: Think about keyboard friendly users and allow them to type the time as well. Studies have shown that allowing users to type over selection result in faster task completion.

Update

This is from the NNGroup:

Typing the date is the most basic option for date input, yet in many cases it is the most efficient one, especially when the date is further away in the past (e.g., birthdate) or future. We recommend that you allow users to type the date even if other input methods are available.

  • I don't want user to enter any kind of value initially as he don't know the input format. once he selects the value from drop down then I am enabling it. – prazor9 Mar 2 '17 at 9:41
  • @prazor9 Pramod, I'm sure you're using labels for the field, and the placeholder does say that the field is about time.. you can indicate the pattern (13:22) besides the field or inside the field. – DPS Mar 2 '17 at 9:45
  • Well that is the point, I want to keep it simple. user entry is prone to error. so I want to make his life easier. that's why date picker and time picker are there for. no user would like to type whole time or date by hand I guess :) – prazor9 Mar 2 '17 at 9:55
  • 1
    @prazor9 actually, many users do.. it's the most efficient option.. check the update. – DPS Mar 2 '17 at 10:06
  • 1
    Well that doesn't prevent user from entering wrong format :) well this is going off topic. anyways thanks for your input, appreciate it. – prazor9 Mar 2 '17 at 10:28
3

In Chrome Browser a Read-only input is rendered with the text color at full opacity and the border with lower opacity.

In the case of a Disabled input both the text and the border have lower opacity.

inputs

JSFiddle.

In your case a user that sees the input before interacting with it shouldn't have much problem because the text color renders like a normal input and the main difference appears when he clicks. And by then you trigger the picker if I understood correctly.

  • I checked in chrome border opacity is at 100% for read only input. nevertheless I changed the cursor for read only input from auto to text. thanks for your input. – prazor9 Mar 2 '17 at 9:38
-1

You have a problem with affordance - it is not clear in the UI what someone is supposed to do because you are not using that widget in the way it was supposed to be used.

The instructions which say "Click to select time" actually look disabled, so you are communicating to the user that this feature does not work right now, and thus you are causing confusion, i.e. "I want to follow the instructions and click, however the disabled visual suggests this is not going to do anything because it looks disabled".

If you want the widget to display a pick list when you click, you are limited to only a few options which have much better affordances:

  • Hyperlink - the affordance is a very clear "You can click me and something will display"
  • Drop-down field - the affordance is a very clear "If you click me a pick list will now display"
  • Hyperlink with a drop-down caret (a hybrid of the other two) - the affordance is very a clear "Click me and a pick list will appear"

If the time is read only, simply display the time as plain text on the page, e.g. Time: 13.32. The affordance of plain text is very clear - it is read only and you cannot change it.

Affordances really matter - please don't cause confusion by using one widget with multiple states which you are using incorrectly, when much better interactions are out there.

As others have suggested you might want to allow a user to type the time as this can be a faster interaction. The approach you are looking at where you pick first then can edit by typing is a non-standard interaction which people will not know.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.