Web Forms 2.0

Web Forms 2.0

Dean's had a bit of a moan about the new Web Forms 2.0 implementation. He has a point about the usability of the controls, so here's my feedback:

The arrow keys appear to be ignored by date/time fields. Up/down should increment/decrement the sub-field the cursor is in, or the least significant sub-field if the whole input is selected.

Date controls have a down-pointing triangle. Most people would expect pressing the down arrow to do something. In fact, you have to press Enter. Enter is commonly used to submit forms, so it shouldn't be used to pop-up control things. I avoided it until I tried it as a last resort.

Dates should allow direct keyboard entry too. The date pop-up should be triggered by the down-triangle, which should be tabbable and activated by up/down arrow keys or Space.

To be clear, when you first Tab into a date field, the date data should be selected. Immediate data entry should be allowed. Pressing up/down alters the day. To get the pop-up, Tab would need to be pressed to select the down triangle, followed by Space or Down arrow to actually pop it up.

Arrows should also work in the date pop-up, at least in the month section. Up/down arrows should move by weeks, and should change months when moving beyond the first/last week of the month. When the date pop-up first appears the initially selected button is the "previous month" button. It should be the button in the month area for the day selected in the field.

The Date field is also ignoring my current locale settings. (It shows the date as year-month-day, while my locale says is should be day/month/year.)

The "time" control has little up/down triangles, but up/down arrow keys do nothing. The little triangles can be tabbed through, but the selection indication on them is almost impossible to see.

The pop-up for the "month" control includes the full month with days. At the very least the individual days should not be accessible/usable. Perhaps they should not even be visible and the pop-up be a specialized year-month selector.

Apart from the up/down arrow functionality mentioned above, the other control types appear OK.

Please add this:

You can only "tap" the buttons to increase a value, not hold them.

I've used http://olav.dk/wf2/demo/ for testing.

I'd expect down/up arrow on empty numeric field with min/max specified to start counting from minimum/maximum allowed value. That's better than non-disabled arrows that do nothing...

Alert boxes for required/verified fields are horrible! They should be replaced by some other method involving less popping-up modal non-self--explanatory messages without clear context...
(how about red border, similar to Wand's? and message in tooltip, which is non-modal and can be displayed for more than one field at time?).

E-mail control could suggest e-mail addresses of all M2 accounts, or even have M2 contacts browser (currently it acts like regular input having only address given in user prefs).

Date control needs calendar icon.

Time control should highlight section which is currently active (so user knows what arrows do).

Week selector should have entire rows clickable and highlighted on hover (take inspiration from looks of Mac OS X calendar control (in Date & Time prefs)).

Month selector shouldn't have each day clickable. I'd expect it having only top section with year/month. Giving option to select day is confusing (and inconsistent with week selector). Maybe view of days is needed in some rare cases, so days may be initially hidden and shown when user requests it.

Click on range control outside knob doesn't move it to next tick (which I'd expect on Windows).

Originally posted by porneL:

Date control needs calendar icon.

My thought that it will be evil. Designers need control under icons and you can add any icon by yourself.

Some question about type='range'
http://owl.pp.ru/~kildor/Opera/sidebar.xml — my experiment…
First: I can`t change value by clicking to form — only drag slider…
Second — onClick event does not work…
Does it bugs? or correct behaviour?

Originally posted by FataL:

Originally posted by porneL:

Date control needs calendar icon.

My thought that it will be evil. Designers need control under icons and you can add any icon by yourself.

The problem is that calendar control looks like empty <select>. That's odd...
ASP.Net has fake calendar control and it does have icon. I've seen similar UI on many other non-asp websites as well.

How do you think I could add any icon myself?

Originally posted by porneL:

How do you think I could add any icon myself?

Hmmm... to input element you can't actually. Only as additional markup or to label for this date field.
But predesigned icon will anger designers, just remember how many web designers want (and try) change predesigned selects controls...