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


22

You know, I've read a lot of arguments on whether or not a site should allow for those who disable Javascript, and I've come to one conclusion: don't do it. Javascript has become a standard of the web I decided one day to disable Javascript and see if Facebook would function at all. It did not. This is because Facebook is run on Javascript (for the most ...


21

There is probably no "official" icon, because there is no body officially "governing" JavaScript. See also this related Stack Overflow question about the "official" manual on JavaScript. Instead, JavaScript is a derivative of ECMAScript. Glancing over the official ECMAScript website I don't see any official logo's or icons for ECMAScript either, not even in ...


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

Keep it simple: As the user types into the first textfield, have a strength indicator near by telling the user if their password is strong that updates as they type. Don't enable the confirm field until they have entered a password that meets your requirements. When they tab into the second field to confirm, have a label next to it that updates as they ...


13

The Statistics Recent statistics shows that about 1.3% of web users have their Javascript turned off. For the Guardian newspaper, an average of 2,200,000 visits a day translates to around 28,600 visitors without javascript, which I would worry about had I worked for the Guardian. You may find in your own analytics that the percent is smaller (or possibly ...


12

Look at how times are shown in other stopwatch applications as an indication, as they have been refined over years. The typical way that it is shown is simply as HH:MM:SS. If you're only looking for time to an accuracy of seconds and you want more than just numbers, then something like 2h 23m 12s seems clear enough without taking up lots of space. You ...


11

I would use there 24 Colors found in 24-pack Crayola Crayons. red, yellow, blue, brown, orange, green, violet, black, carnation pink, yellow orange, blue green, red violet, red orange, yellow green, blue violet, white, violet red, dandelion, cerulean, apricot, scarlet, green yellow, indigo and gray I'm sure some sort of research went into getting the ...


9

Short answer: do not select any radio button. Leave them all unselected. However: This is a misuse of radio button control where (by convention) there always should be one (and only one) selected item. Unselecting all items is not noisy (IMO) and recall same pattern used in other controls (for example combo boxes) where no selection means multiple ...


7

I'd say for 0/0 you should use N/A that has been color-coded green to match the 100% items. Due to the fact that 0/0 is not 100%, I would try to avoid implying that it is at all costs.


7

You are asking what 24 colors to use, but I think the bigger question is 'is there an ideal number of colors to even offer in the first place?' Looking at a couple of the sketching apps on the iPad, you will notice they they use very limited palettes. Paper, for example, has palettes of 7 colors: Granted, Paper comes with a bunch of different palettes to ...


6

If you make a distinction between a UI designer and a UI/front end developer, I would expect the latter to be competent with scripting to a decent level but the former not necessarily. If you are designing an interface that someone else will eventually implement and your JavaScript knowledge isn't brilliant, you have a responsibility to chat with a more ...


6

From my perspective, there is not much difference between flipping card or pop-over window showing more details. So, yes it is a good idea as long as it's just transition effect and does not negatively affect usability. Pros you get: You can pack more cards in one view (of course: avoid excess), and funnel user actions from selecting artist to going to the ...


6

They can do it, therefore they WILL do it. Count on it, if you want to write software that works. I resize my browser windows (desktop PC) quite frequently for a variety of reasons. Your webapp isn't necessarily the focus of the user's entire world.


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

Often times you need both. The pop up sign in (or a drop in panel) is the smoothest experience for most use cases. It allows users to sign in without leaving their current path. But you will also run into cases where you need to land users on a sign in page. In my experience, this should be the exception, not the standard. One example of the exception path: ...


6

I think the user needs to know where he is and what is not working. So for two main reason I would push a state: User awareness User might want to come back to check if it was fixed Having a dead address visible in the browser gives the user the certainty that the page is not working. The user might want to copy the address and come back later to see if ...


6

No! There are no good cases for ruining standard scrolling. Standard scrolling of web pages is the page turning of web viewing. Any changes to standard scrolling are no longer standard scrolling, and need their own interface. There's plenty of options for fancy scrolling mechanisms and interfaces: Little highlights in the scroll bars for jump points ...


5

The jQuery libraries that add support for this kind of input call it a tag input or token input and they are a form of auto-complete. Mac OSX mail uses it for recipients in your address book: For some examples / tutorials: tag input (http://xoxco.com/projects/code/tagsinput/) or token input (http://loopj.com/jquery-tokeninput/, http://textextjs.com/...


5

I would say this is a perfectly reasonable action in terms of UX - Provided you make it clear to the user that a drop-down is available, of course. If you fail to make it obvious then a quick hover with the mouse will provide the user with no visual feedback due to the delay, and as such the user will miss the drop-down entirely. Whilst instant drop-downs ...


5

It's a short way to invalidate cache or caching proxies, without actually changing any filenames. For static files and unless some specific processing is taking place, you can usually rather safely add a question mark, "?", followed by any arbitrary string. The web-server that has these static files will ignore everything after and including "?", but the ...


5

The Command ⌘ + Backspace ← or on newer Mac OS X Command ⌘ + Delete is the equivalent for the delete key on Windows OS/KeyBoard. There are application implementations on the Mac using Fn + Delete which is forward delete (on a portable Mac's built-in keyboard). Implementing both is probably the best way to support actions that users on Mac ...


5

Whether your product should be a one-page solution or a more traditional multi-page solution is entirely dependent on a whole lot of factors. There's no way to give this question a blanket answer. A one-page app could be designed with great UX, or terrible UX. Whether it's one page or not really has no direct bearing on the quality of the UX. Broadly ...


4

Right clicking on the web is indeed much less used. Hover should be avoided in my opinion, especially if there any chance this will be used on a mobile device where this isn't possible. I'd also point out that edit and delete are related actions and in iOS in particular you often click "edit" to reveal a "delete". Based on the usage frequency of edit ...


4

Using Tab Order is great help for experienced users, since it speeds up the (often boring) task of filling in a form of any kind. There are forms for everything from making your yearly Tax Submission to the government agency, to the little sign in form of username/password. Using keyboard only controls makes the user experience better and your users will ...


4

I would suggest notifying the user at the top of the site/apps screen that some of the functionality is not available because JavaScript is disabled. The example below also includes a helpful like that can assist to re-enable their JavaScript. I would also say that if JavaScript is not enabled on the browser, any controls that require JavaScript should be ...


4

Instant feedback is a good feature to have. It makes for a smoother experience. In form entry validation, I generally see three main trends: Validate after each character entry - Instant feedback Validate after each input field (once you leave the field) - Delayed feedback Validate on submission - Delayed, user initiated, feedback. The last method is ...


4

It depends on the field being filled out. According to Luke Wroblewski [Inline Validation in Web Forms], there are some fields which can benefit from immediate validation and others which can slow the user down. The method of validation you missed falls right in the middle of your listed options: field-level validation. In most cases, field-level validation ...


4

You might want to consider implementing a flip icon (that looks like a corner folded) in the lower right corner of the cards which causes the cards to flip on each click and during hover flip temporarily for the duration of the hover. Usage: If you hover over the card, you can see the other side, then see the previous side when you move the mouse off it. ...


4

A radio group is to select one and only one option out of several, hence selection will be mutually exclusive. To solve this problem you have to override this mutually exclusive behavior of radio buttons only initially, and show check for all the options which have different values in the group of items. Once user starts interacting with this type of radio ...


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