Hot answers tagged

137

Number fields should not always be right-aligned It often makes sense to right-align numbers when they are being compared to other number fields (e.g. in financial statements). This can help comparability and scannability. However, sometimes number fields are unrelated or are mixed with text fields in a form, so left-alignment may promote better visual ...


49

I do work on a professional webapp for visually impaired, screen reader users. We do user testing regularly, and this has been raised many times during user test sessions that disabled elements that are required for completing a step/ flow (or are just generally too important to be missed) should be focusable with TAB key. If disabled buttons are not ...


36

I've taken the time to draw some wireframed examples that might help you decide on how to design your time-picker control. Below you can see 3 screenshots which show (IMAGE 1) a time-picker control for all units, an increment button, decrement button, numeric input field and unit picker dropdown (if needed.) IMAGE 2: The idea is that you set it up so that ...


16

Another option is a logarithmic slider, like this: download bmml source – Wireframes created with Balsamiq Mockups This is appropriate when the value can span multiple orders of magnitude, but the number of significant figures is low. It will not allow the user to select between, say, 500 ms and 501 ms, so I suspect it might not be what you need. It ...


15

This is a bit of a tricky one. Normally, with regular form elements, it would be best to fully remove anything you can't interact with or serves no purpose. However, that particular button you're talking about (the "next step" button) can also act as a guide to the level of completion - i.e. you are not able to proceed to the next step until the form ...


10

The consensus is that it is not ok to use placeholders to replace labels. http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/ http://www.shiftedbits.net/rambling/why-html-placeholders-dont-replace-html-labels/ http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-...


10

As a marginal counterpoint to @Leths, a screenreader lets you get to every object on the page, whether disabled or not, unless they're specifically hidden from the screen reader using aria-hidden=true. I didn't want to add this as a comment to @Leths' posting because this is an important point related to the main question. That is, even if you decide not ...


9

I have nothing but intuition to back this up, but the following heuristic might work: Is there one absolutely unambiguous point of attention on your page? An area for which you can say with absolute certainty that your user will look at as soon as the page loads? Is the main element in that area a form with either one input element or a very clear ...


9

I see two issues off the top of my head with right aligning text in an input type ="number" When the number selector is not visible it looks quite strange with the number awkwardly floating a bit off from the right. When there is a number already filled in, and you want to add more digits to it, you have to click in the small margin between the last number ...


8

I think this article gives a nice overview of WAI-ARIA vs. HTML5 and how to use them in practice. http://zufelt.ca/blog/are-you-confused-html5-and-wai-aria-yet The conclusion: From the above examples what can we conclude. Firstly, the primary, if not sole, purpose of WAI-ARIA is to provide information about elements in an document to assistive ...


8

I recommend going with a list approach since as per your current code you are just providing the content in a linear order which can be read by a screen reader without issues. However if you did use Lists for indenting then, accessibility would become an issue as highlighted from the W3C guidelines The HTML list elements DL, UL, and OL should only be ...


7

Ceefin's answer makes a very good point. By focusing too much on the details you can overlook what actually matters about UX, which is what the user experiences. And there's no more frustrating experience than a form that asks a simple question, then doesn't let you answer it. This kind of over-validation is horribly common with postal addresses-- I've ...


7

As with a lot of UX questions, the answer is 'it depends'. Numbers are right aligned because it makes them easier to compare. In an input field however, you may be entering numbers where it makes sense to compare, or you may not. Because you can't say with confidence, it makes more sense to left-align numbers by default than to right align.


7

"Parallax" is a term for the optical effect we see when we change our position in relation to things at different distances: Due to foreshortening, nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances. Technically, the effect on that site isn't parallax, but ...


6

Ultimately, the optimum width and breakpoints for a website depends on the content that it displays. That said, the great part about responsive design is that you can cater towards not only smaller screens, but larger displays as well. You can use a 960 breakpoint, but you can also use 1200, 1400, etc.


6

Take a look at this UX/Design guideline from Google about Confirming and Acknowledging: http://www.androiddocs.com/design/patterns/confirming-acknowledging.html Although the guideline is for mobile applications, the principle and flowchart highlighted in the guideline can help you and your team decide when and when not to use alerts and confirm dialog.


6

Using many input controls with different measurments is rather not optimal, because user will spend time to decide, which one fits to him. You may trim and move x100ns outside edit: download bmml source – Wireframes created with Balsamiq Mockups If odd value is entered, after leaving focus it is corrected to odd (lesser or bigger). Also in similar ...


6

If its acting as a value then why not have it as a value? The placeholder text should be used to hint at the type of entry that is required. In your particular scenario I would either set the value attribute to Any instead of the placeholder attribute. Then if the user wants to change the value they can, else they leave it as Any and tap Select. Better ...


6

The time element is a machine-readable element. So it is mainly used to help out the computer not the user directly. https://css-tricks.com/time-element/ The element in HTML represents a machine-readable date, time, or duration. It can be useful for creating event scheduling, archiving, and other time-based functions. and The uses of unambiguous dates in ...


6

Edit: The logic is that only if an element responds to events it can be focused. However as @Leths comments from his experience this can be detrimental in some cases. So I guess the best thing to do is follow what your users would expect and what it would be most beneficial for them. No, if the user can't interact with the element don't give the (focus) ...


5

Developing for mobile devices in HTML5 is no different than developing in HTML 4.01 or XHTML, since User Experience is platform agnostic. Buttons need to look like and act as Buttons whatever platform you're using. I know that you can do much more on HTML5, but that doesn't change the User Experience of mobile devices. You just have to implement standard UX ...


5

There is already a an interface in hardware design where a potentiometer or rheostat has a switch at one of the ends of the range. In some cases, it is used as an on/off switch, e.g. for a cheap amplifier where there is a singular control (volume). I would suggest having a similar control where sliding all the way to one side provides feedback that the ...


5

I will suggest you go with radio buttons over slider, because sliders lack the very important features such as: Precision, Speed, Cognitive Load etc. Here's a fantastic study done on this topic (the article is a little long but trust me, you will enjoy the read and findings): Exploring Slider vs. Categorical Response Formats in Web-Based Surveys Response to ...


4

If you are talking about input field types then for old IE just use type="text". Date field. In Chrome it allows you to select a date using inbuilt calendar. Alternative for inbuilt calendar is jQuery datepicker Email field in Chrome has inbuilt validation, use jQuery for email validation.


4

They're not necessarily mutually exclusive. You are correct that HTML5 has provided a few more semantic containers, but that is just a small part of the scop that ARIA covers, so you still want to be in the habit of using ARIA. In theory, you are correct, that eventually the nav container should be recognized by screen readers and you wouldn't necessarily ...


4

download bmml source – Wireframes created with Balsamiq Mockups I prefer games using this layout, emulating a joystick so you can tap and drag. It also allows you to simulate acceleration.


4

A circle slider could give a higher and interest driven visual appeal. Below is an elaborate example from maniacdev.com Also, here is another and simpler example on CodePen Aside from a circle, I can't really think of any other options, because a range slider will be a range slider, a point that travels it's base to represent an increase or decrease in range....


4

Keep in mind accessibility. Autofocus can be a huge accessibility hurdle, but is also quite useful in certain situations. It's useful when there's a lot of stuff on the page that a person using a screen reader would not want to have to deal with to get to the point of the current visual. A typical scenario for this is a modal. When a modal appears, you ...


4

This is a tradeoff decision, so decide by understanding the tradeoffs There is no "right" answer here because you are trading off: The benefits of UX consistency with default browser behavior. The potential benefits of custom UX behavior to help users navigate the form faster. The benefit of consistent behavior for mouse vs tab focus. The benefit ...


4

Assuming your question isn't about how validation should be implemented but about how validation should work to keep user experience smooth and uniform across all devices. If it's about implementation then Stack Overflow (for example) is a better place (but you should edit your question according SO's rules). Introduction Let's take, for example, a simple ...


Only top voted, non community-wiki answers of a minimum length are eligible