Tag Info

Hot answers tagged

27

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


13

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


8

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


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

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

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

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

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


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


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

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


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

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.


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

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


2

Assuming you're "scrolling" or sliding the slides around it makes most sense to display all slides between point A and B; that's just how real-world objects like film reels work. This presents a problem however when you start scrolling between large amounts of slides. Try to keep a delay of under 500ms to avoid being too long and showy, and avoid too short ...


2

This is what comes to my mind: Choose the transition type that fits the overall mood and the purpose of the web site. If you want to communicate a feeling of for example smoothness or luxury maybe a opacity or crossfade transition could enhance that mood. If you want to communicate a cool or upbeat feeling maybe a 3D flip transition is the best way ...


2

They can definitely make using a mobile device easier. Alas, mobile device support for the full feature set of the search field is sporadic at the moment. For instance, desktop Safari supports the 'x' but mobile Safari does not. Going forward, the main benefit of most HTML5 input fields will be that you can leverage the browser's native input controls, ...


2

My experience in user testing is that replacing labels with placeholders can often hurt for two reasons: 1) When users are going through form then often enter the form-field and then start thinking about what they have top put it in. But when they have focus on the field the placeholder has gone. So they have to pop in/out of the field to understand what ...


2

Basic question you should ask yourself: do you need rows and columns? Do you need some kind of cross-referencing and/or sortable on different properties of the individual items? In that case, use a table. Otherwise, use an unordered (or ordered) list.


2

The HTML/CSS portion of your question is better suited to another of the SE sites, but I'll answer the interaction design portion of it. If you only need the user to respond to one of the fields, try something like this: download bmml source – Wireframes created with Balsamiq Mockups Once the user has clicked on one field, grey out the second. ...



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