Tag Info

Hot answers tagged

104

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 ...


33

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 ...


17

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 ...


9

A box with a dotted line could be a nice indication that files can be dragged to upload. The "drag files here" as you mentioned is probably very useful as well. Box.net does something like that for bulk upload and you may want to have a look at the jquery plugin pluload: http://www.plupload.com/example_queuewidget.php


9

By letting the browser and other webs to know that a specific input is a search box some aids can be provided to the user that can improve user experience. For the client side, the browser can provide search history (I include an image from an analysis on the search input element), the browser could also pre-fetch results as you type, or offer specific UIs ...


8

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/ ...


8

SVG is more of an image file format. It lacks all of the semantics and accessibility that HTML provides. So it's less of a 'vs' issue and more of a 'with' issue. SVG is going to be used more and more with the foundation HTML and CSS. SVG can't replace what HTML and CSS does. It can maybe make a web page look different, but under the hood, you don't have ...


8

In order to comply with web accessibility guidelines including Section 508, you must make functionality available to people using assistive technology. This could mean people might be using text-based browsers or screen readers that don't necessarily take advantage of the interactive functionality added using Javascript. Therefore, your best bet is to design ...


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 ...


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 ...


7

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 ...


6

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 ...


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 ...


6

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.


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

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.


4

The problem will be that the typical non-chrome user is the one who desperately needs a datepicker (I'm pretty sure the devs can live without it, I mean, I'm partly a dev, and I know how to use command line if needed), and that will be the clerical. Therefore, you either tell them to change the 'browser' to 'chrome' (they won't understand that), or you just ...


4

I think the latest guidance is to not bother with them. They often compete with other navigation aids, JAWS for example. I believe people like the BBC in the UK have dropped access keys, and I recently helped build a central government UK site without these access keys.


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

Take a look at this UX/Design guideline from Google about Confirming and Acknowledging: https://developer.android.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.


3

I think it being built with HTML5 is a bit of a red herring. They key is that you want to use a shared UI across platforms. What I'd look for there is likely to borrow from any number of existing UI pattern libraries...jQuery UI, Sencha, etc. For the most part, they're simply picking and choosing what they see works and sticking to it in terms of making it ...


3

The problem is that you are starting with an incorrect assumption: That the same HTML and CSS will look exactly the same in any browser on any platform with any user settings. That's just not how the web works. Every browser has it's own rendering engine, it's own quirks, it's own operating system and user preferences, it's own browser size, etc. Add to ...


3

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.


3

I'd say in general: Go with a simple unordered list when you only list single-dimensioned or unstructured entities. Go with a description list when you have structured name-value pairs for one entity. Go with a table when you list several structured entities that could be compared. I guess the description list makes the most sense here, as the relation ...


3

The whole point of responsive design is that you don't start to design from the width of your page. The idea of responsive design is that you start design from the components up. Think about what content you want to display, and then design a scaling system. Something that expands and shrinks along with the width of the screen. Responsive sites do not ...


3

This isn't a UX question. But... These are simply two different ways to go about it. Contrary to the opinion shared by the other two answers, I say the 1st example is a perfectly valid way to go about it and is sometimes a much better way. The term for it is Object Oriented CSS or OOCSS. The concept is to split your CSS styles into smaller 'bits' that can ...


3

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 ...


3

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 ...


3

I don't know how easy this would be to do in Javascript, nor whether it would be appropriate for your particular application. In an app I've worked on, our design team solved this by having a slider and a specialized text field. The slider covers the typical range of the parameter, but the text field allows a much larger range, and you can click and drag ...


3

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 of ...



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