Tag Info

Hot answers tagged

70

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


61

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


53

Not everyone uses a mouse. Focus is vital for users who need to press Tab to move between interactive elements on your form/page. Creating a :focus style for your buttons (ideally similar to :focus on other elements) allows those users to see that they are no longer typing in a text input and that the submit button is active if they press Return. Even ...


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


19

Apart from the answer given, I would like to mention one very important Use Case where the solution is nothing BUT shadows. Text on an image When you don't have control over the image on top of which you are writing text, you have to ensure proper contrast for best readability. A Big hero Image seems to be rage these days. A dark shadow is added behind ...


12

In some situations a drop shadow or stroke can be used to maximise accessibility and maintain the contrast ratio between text and the background. I have used this method once or twice when dealing with strict brand guidelines that demanded non-conforming colour combinations. It is mentioned as a technique for meeting the SC 1.4.3 (Contrast) criterion of ...


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

To me, the answer is yes, especially for dark themed sites. Here are some images from a site that I designed for my brother's roofing company. He wanted an all dark theme. So I gave him a dark gray background, some off white and gray body texts, all with darker CSS3 shadows. ( Small caveat: the images actually came out darker than the site actually is when ...


10

The focus state should be more obvious than the hover state A mouse over or :hover state is a more direct interaction (i.e. the user is controlling the mouse cursor directly over the button they want to click) The :focus state, on the other hand, requires a separate scan of the entire page in order to determine which component is currently being targeted. ...


9

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


8

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


5

I recently wrote on article about this for UX matters entitled "Do more pretty and professional looking websites result in an increase in conversions?" Firstly, tread carefully. There are lots of examples of this unintended effect where conversions have decreased despite the visual impact of the change being qualitatively positive. Remember Digg.com? When ...


4

Focus is used for form elements. It shows that you've clicked into the text entry box (for example) and it will stay onFocus for as long as that element is selected. EDIT: For submit buttons your "highlight" or whatever you do for showing :focus will be there for as long as you are holding down the mouse button. The use cases for this are more limited. ...


4

I'm breaking down the UX part of this into two things: Javascript running in browser speed of CSS vs. speed of jQuery mobile loading The first one is easy: people don't really disable CSS, but they do disable Javascript, so you're more likely to have a compatible website if you avoid Javascript and use CSS. However, hardly anyone disables Javascript - ...


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

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


3

It can, by increasing the contrast between the text and the background, which is its primary purpose. jsFiddle for actual demo ...


3

Starting as a designer with a fresh psychology degree and little design skills whatsoever (but a huge passion for design) I stuck to minimalistic designs even when it was not fancy, way before it was cool. In my own time I learned how to play this card right so that my designs didn't seem boring and blank, but rather sophisticated and elegant. It is ...


3

Well formatted markup will not necessarily present information in the order that a person would expect it. For years I've placed the navigation at the bottom and the primary text at the top (within the HTML) and used CSS to place the nav where I wanted to. SEO people I talk to still consider that to be a good practice. I think that looking at your page w/o ...


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


2

"All" option to the left of the "#" would be an easy fix. If you're thinking about adding more advanced functionallity in the future - namely multiple selection, consider doing it this way: download bmml source – Wireframes created with Balsamiq Mockups I really like this option for complex filters.


2

"It's all about how you load your content and how you fall back gracefully." Your answer probably lies in both, so first let's talk about: The HTML5 Shiv The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x. ...


2

You can keep hidden the two input controls, and show them only when the user taps one of the extremes: User should be able to drag extremes, which may also contain the current values.


2

Minimalistic. I say this because I have always hated interfaces with thousands of effects for no apparent reason, flashy colors/too many colors, and things like that. I hate it because it is just too much. While the developers could have been working on the software itself, they put way too much effort into it, making it look far too unprofessional. Take ...


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



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