Tag Info

Hot answers tagged

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

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

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


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


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

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


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

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

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

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.


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

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

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

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


2

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.


2

I don't like to play games on my smartphone since it's often hard to control a character/car or whatever. But the games I've played the most had controls splitted to the left and the right so it's easier to tap with thumbs. Little Acorns is a great example :


2

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.


2

Generally you should look at the use of confirmation dialogs as a last resort. They break the flow of the task for users that understand the system. The dialogs are often confused by users or not read at all. First decide if something significant will happen. If so, determine if undo function can be developed.


1

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


1

960px is a good base width because tablet viewers (in landscape) can still see the whole site as you designed it. You just have to plan. Yes, a responsive website is based on percentages, but if you set your sidebar to, say, 25% of the page width, then it will be super narrow on a phone or smaller tablet. Best to set fixed pixel widths for sidebars, then ...


1

I'll spin your question around a bit: how is a datepicker UI useful for filling in one's birth date? Date Picker UI's are usually useful when it's important to understand the context of the day within a calendar. Ie, when is next Friday? Or what is exactly one month ago? But with a birthdate, that's a memorized date and where it falls on the calendar is ...


1

This sounds a programmer's approach to designing a UI. You've clearly thought very hard about your objects and their relations, mapping it out in your head in a kind of UML style. This is a good way for a programming team to work and communicate, because it lets you map out all the edge cases and suggests a good database schema. Unfortunately, it doesn't ...


1

Tooltips need not be limited to any particular UI element (button/icons/links) but should be used where-ever additional contextual help is needed. You may use them as suggestions, eg: when the user hovers over any input field in a form, you display a tooltip which shows some example input to better explain the intent to the user. There is a nice article on ...



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