Tag Info

Hot answers tagged

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


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


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


6

If you want to consider users with special visual and/or cognitive requirements, it becomes quite complicated and there's no single answer. The W3C Web Accessibility Initiative's Web Content Authoring Guidelines (WCAG) provide a good starting point. That's probably the single most thoroughly-researched resource on web accessibility, though it's not totally ...


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

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

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

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


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

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


3

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.


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

You want help text to be placed where the user has a question (e.g., “How do I apply this message to all the emails I’ve listed?”). You also want a control to be placed where the user is ready to activate it (e.g., “I’ve written my message and entered my emails, now I want to apply the message to all the emails.”). It follows that, in a properly laid out ...


2

how often are people printing pages outside of 8.5 x 11? I have never printed at 8.5 x 11. I assume this is a U.S. paper size and is in inches. I print at A4, it is the standard printer size in the UK. It is 210mm x 297mm. Don't try to assume what sizes people are printing at, instead make your print styles flexible enough to cater for everyone ...


2

A few rules of thumb: I recommended providing at least two themes - dark on light and light on dark as some users may not be able to read one of the two. For light on dark, make sure the contrast isn't too high (e.g. use grey on black, not white on black). Make sure the contrast between the intensity of foreground and the intensity of the background is ...


2

I found this particularly insightful : http://www.colormatters.com/color-symbolism/global-color-survey. After taking the survey, the results were as follows. Over 130,000 people from all points on the globe took the survey. Here are the results: Happy - Yellow Pure - White Good Luck - Green Good-tasting - Red (tomato) Dignity - Dark Blue High Technology ...


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

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


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

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

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

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

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


2

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.



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