Hot answers tagged

73

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


25

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.


12

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

Move objects to rearrange them, grab objects to perform operations on them The move cursor should be used when objects are just being rearranged (translated) without any alteration to their properties other than position. For example: Rearranging shapes on a canvas Rearranging items in a list The grab cursor is usually used for drag and drop operations ...


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

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

The purpose of the hover state is to give visual feedback to the user highlighting an interaction opportunity, which does not necessarily require a visual highlighting. While it has commonly been implemented in a way where a solid and prominent color was lightened on hover, this is not the only valid use. The appropriate use will depend on the context and ...


4

Honestly, as long as your :hover state & :focus state are very clearly showing exactly which item will have action the taken on it, I can't see any reason to style them separately. :focus is essentially a keyboard hover. The previous answer is correct in saying that a :focus element should contain a box around it, but as long as the outline property ...


4

There's a couple of CSS frameworks for Material Design, not including Polymer: Materialize: http://materializecss.com/ Material Design for Bootstrap: http://fezvrasta.github.io/bootstrap-material-design/ There's also https://material.angularjs.org/#/ if you happen to be using AngularJS, but that might be a little bit heavy for your liking too.


4

The benefit of keeping the default outline focus indicator is that it's well understood and does not rely purely on colour, which makes it accessible to users with difficulty recognising changes in colour. That said, it is acceptable to remove the outline and replace it with a different visual clue. The relevant WCAG guideline is SC 2.4.7 (AA) which also ...


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

In many drawing programs, grab is used to move the drawing surface (canvas) around, i.e., to show a different part of it. This is called panning. Move is used to move the selected object around within the canvas.


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

Use icons when people know what you mean Icons for expected actions aren't a bad thing. They will save space, but they aren't technically the most "minimal" solution — that would be text, since you remove the extra layer of translation. Don't violate expectations If you do go with icons, you need to make sure they are the expected ones. Yours are ...


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

From my experience, the grab and grabbing cursor behaviour works when you need an explicit hover and click & hold behaviour for movable UI elements, which makes sense for desktop applications because these are standard cursor interactions. The move cursor tends to be used when there is no particular need to differentiate between the hover and click & ...


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


2

Which of these things is not like the other? I tried lowering the opacity to 50% to see how it looked and without the context of the mouse cursor this could be interpreted as a disabled button. With the context of the mouse cursor, however, I really don't think users would get confused. On the other hand, highlighting the button feels more inviting and ...


2

I see your point – but I'll try to explain in two paragraphs why I think it's not 'bad practice' at all, while personally I also dislike this effect. Trying to imaging the opposite approach: every element has an oppacity <1 and only the 'highlighted' element has an oppacity =1 does not feel 'right' or 'better' 'highlight' in the context of a group of ...


2

If you value social authentication more than the regular approach, it's better to have social log in logos as CTAs (buttons instead of only logos; e.g. Airbnb), and at the top. Also, studies has shown that labels for input fields perform the best at the top of its respective field. I'd prefer having placeholders to save space. I would also suggest you to ...


2

Having that many icons repeated for every row seems wasteful and confusing. If you expect a user to want to apply an action simultaneously (or in quick succession) to many rows, many applications use a single column of checkboxes to select rows to be acted on and then one set of separate buttons to choose an action to apply to selected rows. Another ...


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

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

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

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

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



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