Hot answers tagged

75

There's an easy way to approach user-select: none, and that is to ask a single question: Would selecting the text be the primary/secondary interaction a user would intend if touching the screen there, or would it be a hindrance to the task they were trying to carry out? Image Carousels (love them or hate them) are a fantastic example of this. In a touch ...


64

In general, you shouldn't use it globally. Oftentimes, users select some text, maybe to highlight something to show a part of the text to a friend, to copy text or to mark the text just to be able to read it better (which I do when the text is pretty wide and it's hard to follow the text wrap in the sentence). However, there are really good examples where ...


26

There are such people as "selection readers". I am one of them. I (for some reason consciously unknown to me) have a tendency to select text while I'm reading it. Sites that stop me from doing so make me very sad and mess up my user experience. I also completely disagree with the point in what is currently the top answer. Those things that pop up whenever ...


18

I think you've answered your own question. The special cursors demonstrated on that web site are rarely needed, whether in a browser or outside of one. Of the 31 cursors, 14 of them are for resizing elements, which isn't really a common task.


15

I see Progress and Help used fairly regularly. Other than that, the rest of them are mostly situational... there's no need to use them out of specific tasks and environments. Using cursors where not absolutely necessary violates the rule of don't confuse your users, ever. If you can use a normal cursor, do.


13

Not being able to select text is the most annoying anti user-friendly css property there is right now in modern websites. Reasons: Lets not try to act as if our website is something it isn't. It's not a mobile app and the reason you cannot select text in an application is because it is not inside a text-box and therefor is not supposed to be selected for ...


11

"Default", "Pointer" and "Text" are defaults in browsers. Others we forget to specify for developer — because we paint static images. But if we work with interaction our-self, we will remember to use "Not available" cursor for disabled elements for example.


9

There are many contexts in which it is good UX, and many where it is bad UX - there's no one-size-fits all answer. As you flag in your question a button or action that when clicked highlights the text isn't good UX, and there are likely to be very few circumstances when a user should need to highlight that text. However bodies of text shouldn't be disabled ...


4

The requirement for running pages without CSS enabled is there to ensure that your pages make sense when the user is reading them via a non-visual device such as a screen reader. The problem here is that some screen readers do actually read what is on the screen while some read the underlying HTML. The first kind usually produce a chaotic stream of garbage ...


4

Messing around with standard application features (eg selecting text in a browser) is a bad idea in almost every instance ... the user expects to perform whatever action they've done. They can't, because you've broken it - ergo you've failed to meet user expectations. Simple as that. Personal rule of thumb: In all cases, disabling highlighting of text is ...


4

EM and PERCENT are both very similar, the only difference between the two can be observed when changing text size on the client browser. Summary In theory, the em and rem units are the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users. Original ...


3

I wouldn't say it is always a bad UI design, but scrolling is one of those things that should not be counter-intuitive and behave in a way the user does not expect. On a touch device, for example reverse scrolling feels natural (as you would drag paper UP to read DOWN. However with a desktop environment we have decades of training to tell us: Moving the ...


3

Button vs Link Links usually navigate away from current task/context while a button leads to an action within the current task/context. In this situation I am assuming the user is uploading a series of documents into there profile/folder so clicking back wouldnt take them out of the task of populating the profile/folder. I would say this button is a ...


3

The best way would be not to use colour. In fact colour is not necessarily the best way to do it as it relies a lot on good eyesight (which designers usually have, don't forget). Here are some alternate ideas and ways of emphasising disabled state without using colour - these are suggestions, doing all would probably be overkill and observing users ...


3

I am sorry for answering instead of commenting but I lack the reputation. I don't think I understand your question. What exactly you want to know? As far I can see the website was build by front-end developer(s). It uses Node.js, socket.io, three.js for 3d rendering, TweenMax for the animation and navigation. Sites like this can be designed with tools like ...


3

I agree with what you are trying to do in spirit - but I think you may run into problems with the animation you're proposing. In addition to challenges relating to accessibility and mobile, tilting the label when the field becomes active obscures what is being requested of the user. The example below is taken from Yahoo's user signup form and demonstrates ...


3

The 2 most popular ways of indicating misspelled text are to underline it with either red dotted line or red wavy line – the practice adopted by word processors and browsers. The easiest way is to set dotted underline: just apply border-bottom: dotted 1px red property to your <span> element. The implementation of wavy line is a way trickier: ...


2

One word for you: storyboards. I need to write an article about this. But here's what a good storyboard looks like as a jumping off point: Notice: two colors, one for actions, one for animations. The description below each wireframed panel describes what moves when why. You'll work off these, and things are bound to change as you enter dev, but for ...


2

A good way? No. Any verbal or text description will be open to interpretation. Methods that could work would include front end prototyping and/or pair programming.


2

In terms of behaviour, there is no difference. The difference cited above is simply a buggy browser implementation, in my opinion. I just did a quick test in current Chrome and Firefox, and there is no difference in sizing of child elements : smaller; : larger when the parent is either 1em or 100%. I would very be surprised if this bug was present in any ...


2

You could, but assistive technologies handling of title tags isn't perfect (more on WCAG). A better solution is not to use a title tag and instead hide the element text using css. CSS: a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; } HTML: <a href="#"> <span>Washington stimulates economic growth ...


2

If the user is likely to use the same dictionary over and over, then put your selector in a prefs pane so they don't have to make that selection every time. They can then simply click or double-tap and see the translation immediately, in whichever dictionary they last chose. (Or in whichever dictionary you set as the default, before they pick one.) (One of ...


2

Here your problem is what will happen when list increase. So short answer make it simple for the developer and for the user. Add 2 drop down (from, to) that will handle if lists go long and even as a developer it's easy to maintain in future. Current UI Users have to search for what they are looking for. If list goes long then it's difficult to ...


2

There is no silver bullet here, but from my experience there are only two solutions: Make a responsive layout. All elements are "rubberish", can adjust to the content without breaking the design. Layout is adaptive to browser page size. Work with translators to shorten the words. When translators are not clear on boundaries they come up with long words. If ...


2

You may want to keep the same size for the following two reasons : Different sizes creates contrast, that creates visual clutter. Placing same size buttons around a virtual vertical axis creates symmetry, which is regarded as more pleasing, formal and stable. But, if you have more important design goals, i.e. attract user attention, space limitations ...


2

While the answer is not the same for all cases, in your specific case I'd recommend to go with a framework. It seems you're hiring people external to your team, so there are several compelling reasons to go this path, including: Speed: Same as you won't write your own programming lamguage every time you need to code something, frameworks give you a base to ...


2

When designing an UI, it is better to go as standard as possible -- don't try to reinvent the wheel. Use things that the user is familiar with. Animations are a non-standard way to focus user's attention on a field, and may confuse the user which didn't expect it. Furthermore, either you go for an animation that shortly ends (and will not serve its ...


2

Accessibility. Focus state tells keyboard users where their cursor currently is on the page. By just visually looking at a form with a focus state on a radio button I would instantly know that if I press tab then I will move from this field to the next. Without the focus state you won't have any visual indication of where they are on the page. Now, ...


2

Referring to the comments on your questions, I disagree with your assessment (that putting messages below fields is bad for usability), and think that @timster is on the money. Put the error message below the inputs, or use encapsulated flags This is arguably more conventional than putting them above. This question What is best practice for designing form ...


1

In most cases the cursor primarily is to SELECT, POINT or CLICK. Extra actions such as GRAB, CROSSHAIRS are handy for other more specific type applications like picture uploads, crop and resizing.



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