Hot answers tagged

110

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


108

How about using something like this?


84

Here's why: Microsoft’s design guides talk about weak affordance: Text and graphics links use a hand […] pointer […] because of their weak affordance. While links may have other visual clues to indicate that they are links (such as underlines and special placement), displaying the hand pointer on hover is the definitive indication of a ...


80

Add a checkbox labelled 'Limit number of queries'. And only make the input field active if this checkbox is checked. Alternatively if you must use the infinity icon, keep it simple and place it to the right of the '+' button, in the same style. This would also adhere to the perception of hierarchy. i.e. the left button decreases the value, and the right ...


71

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


62

Not only is Helvetica not safe, but it is also a copyrighted font, so you need a license to use it if you load it as webfont. As a matter of fact, there are no 100% safe web fonts, since it will depend on the fonts the user have on his/her device, and different operative systems have different font sets. Hence, you need to do something like this: p{font-...


55

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


35

It's worth considering the historical order in which these things came into being. Buttons existed from very early in the days of GUI computing. They had a shadowing effect to give a skeuomorphic impression of their being akin to physical buttons, which served to indicate they could be clicked much as one would push such a physical button. Indeed since you ...


34

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


33

The design makes it look like a checklist and the buttons look like they are disabled. May I suggest something like this:


29

According to W3C cursor: pointer The cursor is a pointer that indicates a link. The specification only indicates that links are meant to have the pointer cursor. Buttons are not meant to have the pointer cursor in the specification and probably that is the reason why Browsers don't assign it by default and we have to do it manually. As to why would ...


26

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


26

First of all, lowering the opacity makes them look disabled. So I would suggest you don't do that, as users might think that they can't complete those sections, even if they wanted to. Using a tick/check icon for ones that are not complete is very misleading as it suggests the user doesn't need to do anything. I understand they are optional and technically ...


19

I think your fellow developer is somehow correct. To be honest, as far as I know there's no "set in stone" rule for this, so nobody is right or wrong as an absolute. However, depending on implementation, you may end with browsers rendering your font as integer numbers. Which isn't a big deal on modern screens, but some older screens will start to add ...


18

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


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.


17

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


17

There are different ways that you could design this. 1st option has a drawback: The user might think that they are directed to another page 2nd option more intuitive than the others. The icon could also be at the bottom right corner 3rd option has also a drawback: The user might think that the box is going to expand to the whole screen In my opinion, what ...


16

Not being able to select text is the most annoying anti user-friendly CSS property there is right now in modern websites. Reasons: Let's 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 therefore is not supposed to be selected for ...


15

Monospaced fonts can provide what you're looking for, a good example of which is Consolas. Consolas is the standard font on Visual Studio 2010 and 2012, and Eclipse Indigo (the standard font on previous versions of both these tools being Courier New 10). Consolas has been described (here) as "...a sans-serif font with the same rounded appeal [as Lucida ...


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

The current trend is to design breakpoints with content in mind. At some width the content will appear either too squished (or stretched out) and that's when a breakpoint should be used to rearrange things, even if it doesn't correspond to a common device width. The content should look well laid out at any device width (within reason, no need to fill ...


13

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


12

As far as I am aware there aren't any industry standards. From experience they seem to differ slightly depending on who you talk to. Smashing Magazine recently did a good article about logical breakpoints for responsive design. Understand what resolutions the potential users of the system will be using. This should help inform your break points. My point ...


12

As mentioned there is no such thing as a safe web font. But there is a way to load in missing fonts from your server through the use of @font-face. @font-face was first introduced in CSS2, includes fallback file types, and is widely supported. This wouldn't be a 100% solution but it would be more promising than depending on the machine's font selection. ...


12

Responsive design is best practice, except for the most high-end websites Responsive, mobile-first design gets you the most “bang for the buck” for most web sites or applications. Effectively you can design your web property once, get a good experience anywhere. But responsive design has its drawbacks, and is arguably a compromise solution that works best ...


12

This seems very close to a very common pattern for pagination by limiting searches per page, e.g. datatables: In your case you only want to display the first page, but it's still pretty much the same concept. Then instead of 'infinity' seeing as you're talking about limits, 'unlimited' or 'none' would do. This gets rid of all the complexity around @...


12

Sans fonts, which are commonly used on screens, are mostly designed to have the same thickness of stems and bars. When the font size is quite small and is odd, like 17px, the font renders in a way that the bars are about 2 times thinner than stems. Such rendering badly represents the actual look of the font, and that's why there are recommended font sizes: ...


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


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.


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