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


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


47

I believe neither is “easier” to read in general, and I would instead try to make it a country-dependent setting that mimics the common book spine orientation, either in the visitor’s country or in the web site’s country. In Wikipedia’s book entry, the spine tilting section says the following: In the United States, the Commonwealth and in Scandinavia, ...


47

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


37

Short Answer Make them like tabs and follow that mental model (clockwise on right, counter-clockwise on left, upright on bottom). Medium Answer If your design uses tab-like elements, follow the logic of tabs. If it uses book-like elements, follow that model and pick a direction—if you're in the US, follow the orientation of book spines here (clockwise). And ...


29

Buttons are a traditional desktop software UI control - a context where the hand pointer has never been used before the advent of internet. When web pages started to use the same control, they just kept the button as it was in a desktop environment.


27

The difference you're talking about is often referred to as "fixed width" versus "liquid" or "fluid" layout. Fixed width layouts are MUCH easier to design than liquid ones. When you design a liquid layout, you need to control many more aspects of the display. What happens when windows shrink beyond a minimum width? What parts of the window can stretch, ...


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


23

It's all about Affordance. Buttons have a high affordance which visually suggest how they can be used. The hand pointer is used when affordance is lower to provide an indication of how to interact with that item. Here's an extract from Microsoft's Windows desktop applications > Design > Guidelines > Interaction > Mouse and Pointers) 'Well-designed user ...


23

I agree with the user Jared Farrish: it's to make the content more readable. If a paragraph spans the entire width of the browser window, it can be taxing on the eye to move from the end of one line to the start of the next line if the paragraph takes up many pixels in width. Many websites tend to limit the width of the page for this reason. In addition, ...


21

There is a study on rotated text readability from University of Toronto. Although it is on tabletop displays, I think it can be applied here too. The result shows that it takes significantly less time to read clockwise (-90 degree rotated) for words in any positions of the screen. It is not clear for 6-digit number though.


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


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.


16

Users hate slow UIs, just as they hate slowly loading websites. Pop in, fade out. Your users are not here to admire your application. It's just a tool to help them achieve a goal, and when that's done, it doesn't matter how pretty the app - they're out of there. Now, that doesn't mean you should strive for dull, grey, boxy interfaces. But it does mean ...


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

Generally speaking, using a grid system is nearly always a good idea: it's simply one of the best available tools to visually organise (i.e. compose) your content in a coherently structured, well-proportioned, yet sufficiently flexible manner. You might want to think of it as best practice. Most good designers regularly use them, unless it makes sense to go ...


13

There is no hover equivalent on iOS devices. The most conventional gesture to interact with content is 'tap'. You could have the content boxes open a pop-up or overlay on tap (which would work better on iPad than iPhone). Using other gestures which have no strong established convention could just confuse users. But it might just be more graceful and usable ...


13

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


13

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


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


12

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


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


12

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


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


11

MIL-STD 1472F Section 5.14.3.5 has a pretty good section on displaying tables in a user interface, although it could stand some updating for modern GUIs. Here are some of the standards, along with my interpretation marked with a bullet for GUIs: 5.14.3.5.4 Titles. For a table that takes up multiple pages, column headers shall be on every page for table. ...


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.


10

The best learning resource for this would be a good introduction on typography – probably the seminal classic by Bringhurst (see http://webtypography.net for a good roundup applied to the web), though e. g. Spiekermann's ‘Stop Stealing Sheep…’ is not bad for starters, either – and on design grids (see my answer here on UXexchange). When designing grids you ...



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