161

Use icons, they communicate a lot more than colours alone. If you must use colours, simply colour the icons.


148

The main information the color conveys isn't just that there are different types, but that the types have varying levels of difficulty. The bronze < silver < gold metaphor has been used for ages, so any new symbols should try to convey that sense of escalation. Edit: Thanks to the comments from GammaGames and Woodrow Barlow, here is a smaller ...


110

As pointed out in comments and other answers, pointer trails were originally "intended for" and "especially useful if you [were] using a liquid crystal display (LCD) screen" in Windows 3.1. LCD monitors at the time were mostly passive-matrix, whose typically slower response times meant your cursor didn't have time to get redrawn as it moved across the ...


103

There is no problem to work as a UX/UI designer, as choosing color is just a minor part of the usability process. There are lots of other activities that the UX-er should do, like usability testing, checking analytics, conducting A/B tests, writing reports. Choosing color is more like visual designers work. People often are confused between the two ...


89

Great question! This is an good case for microinteraction design. Microinteraction objectives In descending order of priority: Provide clear affordance for user to place card/wallet on reader Provide clear feedback that the user should hold the card on the reader until an outcome. Since this is public transportation, provide blind- and deaf- friendly ...


66

The original purpose of the "mouse trails" feature, according to the Windows 3.1 documentation, was to make the mouse easier to track on the very-high-latency LCD panels used in early laptops, by ensuring that the pointer was drawn in each position for at least a full refresh cycle of the screen. It turns out that it also makes the mouse easier to follow/...


62

Dark on light vs light on dark themes can have multiple effects, such as: Bringing attention to an application vs bringing attention to the application's contents People focus on brighter areas — darker background brings attention to the content, while lighter background bring attention to the window itself vs the desktop. Imagine if the box around ...


60

No - there is no "friendly font" for all. Dyslexia is not a hard and fast condition. Different people who are dyslexic will exhibit differently. As a result a particular font that helps one individual does not necessarily help another. io9.com actually has a recent article which cited several studies on the subject: A Special Font to Help Dyslexics? More ...


57

I've been doing front-end work for a decade, and I have deuteranopia or deuteranomaly (red-green color blindness). It has never been a problem. I largely rely on color codes and location/proximity on color picker UIs to identify colors. When doing a design from scratch, I will often look at pre-existing palettes for inspiration. I will also use an ...


54

If you want to convey priority of one item over another then there are two obvious different approaches to take; Size Quantity If one thing is 'bigger' than the other than it takes more priority over the others. Likewise if there are more of one thing than another then that theoretically makes it more desirable. Size Quantity While the size option is ...


52

No, it would seem not, as W3C states 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an inactive user ...


51

Well for your example of alt text just show him that there are many more benefits than accessibility. http://www.learnwebdevelopment.com/2011/01/advantages-to-adding-alt-tags-to-images/ Increases Traffic Higher SEO Rankings Safety Rules All of the reasons shown in this link (first link I found on google) are advantages that will increase ...


48

I do work on a professional webapp for visually impaired, screen reader users. We do user testing regularly, and this has been raised many times during user test sessions that disabled elements that are required for completing a step/ flow (or are just generally too important to be missed) should be focusable with TAB key. If disabled buttons are not ...


46

1. What if the user doesn't have a keyboard? It's a perfectly valid case. Not only some forms doesn't require interaction with a keyboard (for example a form with a couple of combo boxes, radio buttons and checkboxes), but even if the form has textboxes and textareas, it doesn't mean that at the exact moment of form submission, the user is ready to use her ...


42

I cannot understand why you'd want a reduced click area for your form field. Including the "for" attribute on the label tag allows you to increase the clickable area. It has been a web standard for quite a while and I would think most users are used to the behavior at this point, making it a convention. While it may not be a convention in software, I would ...


41

Wrap the label around the checkbox. This makes it much easier to click the button. If the label is separate from the control, then there is often a non-clickable gap between them. <input id="click-me" name="click-me" type="checkbox"/> <label for="click-me"> Click me </label> download bmml source – Wireframes created with ...


40

If you consider ergonomics and safety a part of User Experience, which I think it is, then yes - staircases have User Experience. Technically this means that there is relation between tread depth and rise height which, combined, is the pitch line. The angle of that pitch line should be about 30 deg and you have min-max values of both rise and height. Image ...


40

I just noticed that Graphic Design SE has badges in distinctive shapes. https://graphicdesign.stackexchange.com/help/badges So, I made a mock-up along the lines and increased the color contrast. now its clearly visible against a white background and meets the non-text contrast guidelines. Graphic Design SE Badges:


38

No. Best practice is not to have a separate screen-reader version of the site. Suggesting you should have a screen-reader version of the site infers that your main site won't be. Which doesn't really make any sense, because a non-screen-reader optimised site would be one not built to proper HTML web standards. And why would you intentionally build a non-...


36

Italics are a known problem for some people with dyslexia and the general advice has been to avoid italics (particularly large blocks of italic text) and instead use bold for emphasis. The British Dyslexia Association says: Avoid underlining and italics: these tend to make the text appear to run together. Use bold instead. UX Movement touches on this ...


34

You want to look to sites such as W3.org for advice on this. Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one. The W3C accessibility guidelines 1.4.8 state (emphasis mine)...


34

Yes there is a formula. I wrote an article on high contrast colours recently that charts the variation of black or white (actually off-white #f0f0f0 and off-black #101010) as the foreground colour with the highest contrast ratio, for ranges of background colours. There is also an interactive SVG version with tooltips of the contrast ratios The contrast ...


33

As the other answers said, the colours themselves may pose a problem if the hues aren't distinguishable easily. The clearest solution to this is to combine the colours with a shape, so full-vision people can still scan quickly by colour but stopping to look for a second will also easily show the idea. Something like: download bmml source – Wireframes ...


32

There's a spectacularly cool desktop app for Windows, Mac and Linux called Color Oracle which is really nifty and adjusts everything you see to mimic many various types of colour blindness in real time and isn't limited to static images or websites. Here are some screenshots showing the UX website under Deuteranopia, Protanopia and Tritanopia respectively: ...


32

A good example to consider would be the iBooks app in iOS which allows users to enable the dark theme automatically depending on the light sensor detection. However as PS86 rightly pointed out, don't build this automatically into the system but enable the user to set as a desired parameter. To quote this article, the iBooks app enables this by an option ...


31

The UK plug uses 3 wires -- two of solid colour, and a third that is 2-coloured in a stripe pattern. The colours are chosen so that each wire can be identified by colour blind persons. Here is what the configuration looks to people with colour blindness: From MrReid: Under the IEC 60446 standard only black, brown, red, orange, yellow, green, blue, violet,...


29

Research generally suggests light on dark is harder to read in most cases but considering we're talking accessibility, you should know that results for those with normal vision don't necessarily hold true for those with various vision impairments. I've heard higher contrast (the mode in Windows is called High Contrast mode I think) can be easier to read ...


29

This conclusions from Michael Hughes might be helpful for you to decide when to include a screenshot and when not to: So where does this leave me? I am going to be more open to including screen shots where they do the following: Help reassure the user that where they are in the UI is the right place to be Help call attention to a specific ...


28

People with Parkinson Disease (or PD as it's also known) need special considerations as you correctly figured. However, keep in mind that most of those considerations are covered by special peripherals rather than specific UI. As a matter of fact, just following common WAI- ARIA guidelines is more than enough. Keep in mind that, like many people with ...


27

It's not the end of the world if you skip headings in this manner because users will most likely still find the content, but it does go against the general structure of the content and adds a bit of a barrier to users accessing using assistive technologies. One way to look at it is to think of a trio of military chaps in a room; a General, a Sargent, and a ...


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