369
It's a shame no one has mentioned the impact of the Mac OS X "Aqua" interface on all this.
Aqua was the name Apple gave to the user interface style it introduced in Mac OS X. It changed the Mac's software from looking like this:
…to looking like this:
Here's Steve Jobs introducing it for the first time at MacWorld San Francisco 2000. As he says:
One of ...
184
It's a big part of Skeuomorphism vs flat design, a debate about which Sacha Greif has a good writeup. Skeuomorphism like gloss, reflections and textures make things look like “real” objects, but all the fancy can increase cognitive load, and gives an unfortunate “samey” feel. The majority of iOS icons have the same or similar gloss effect on their icons, ...
140
They have (slightly) different meanings and usage
Although both icons are similar and both are popularly recognized, they do have slightly different connotations.
❤ The heart icon
Is more emotive by its very nature. As such, it's more likely to be associated with positive feelings such as love, like, happy, etc.
Is used by popular applications such as ...
138
You could split the list.
mandatory items as radio buttons.
optionals as checkboxes
This also makes sure the attention per importance isn't divided, and allows for easier comparison between mandatory items.
119
Unfortunately such cable is not compliant with USB specification, as even in usb power delivery the data lines are used to negotiate power.
You should not mark it with USB (or even USB-like) logo at all. Plug's distinctive shape is informative enough to be easily recognizable as in "where does this plug go". I concur with other answers suggesting lightning-...
97
It’s not entirely clear that a black circle means “yes” or selected, while a white circle means “no” or non-selected. Depending on what the user regards as foreground and background, it may go either way. Consider this (rather contrived) example:
Which one is selected? The one that “lit up” like a light? Or the one that is “filled with ink”?
There is an ...
85
An up arrow (upward triangle) is literally smallest at the top, and largest at the bottom! Exactly like Ascending order!!
Addendum:
This ring-stack children's toy helps understand how ascending order came to be abstracted to an upward triangle, and descending order to a downward one.
The early 'stacked' up-arrow is visible in the screenshot from Mac OS 8 (...
76
v1
I would suggest that the play button stays the same as it always has - a triangle to begin then a pause once playback begins. But, once playback has started, a new button appears like this:
The circle encapsulating the easily recognisable play triangle is pointing in an intuitive direction: anti-clockwise, implying that we are going back in time. The ...
76
You can never beat straight text ("Power Only"); that way, there can be no confusion.
That said, I actually have such a cable at home which has an icon very similar to this in a raised profile on the connector:
It would be nice to look to the creator(s) of the standard USB icon for inspiration, meaning and thus cues for how to adapt it to mean "power only"...
72
It's a stylised form of the '1' and the '0' for 'On' and 'Off'. You can see the evolution here.
71
Add some catchy column titles.
As it is right now, it looks like it's not free from animal testing, as the "No animal testing" item is not checked. Adding column headers will allow you to group them into "good things" and "no bad things" without relying on icons or color only while also helping the user scan the info quicker and ...
61
Selected – Create an inverted selection state which would make this feature more prominent. Many ways to accomplish but as an example; Make the button background black with a white or light grey pencil icon.
Enabled – Increasing the contrast. Our eyes become less sensitive to light and see a narrower section of the colour spectrum as we age. Increasing the ...
59
This is perhaps perilously close to an off-topic icon discussion, but I think you could modify the arrow icons to make the outgoing versus incoming direction clearer. Essentially, you need to give context to the arrow:
I would continue to use colour as an additional clue.
57
The original, by Norm Cox, had the dog ear in the bottom left. This was made for Xerox Star system, and it was a bit of an odd choice since typically, in a book, the dog ear is in the top right corner*. (source)
It was only a latter concept that changed the position of the dog ear to its current position:
* This sentence was not based in any factual ...
53
The convention is that the question mark indicates extensive help is available, provides an interface for someone having a problem to click, and implies that a more sophisticated means of resolving the problem is being offered. The (i) indicates only that some additional explanatory information is available, but not an extensive help system.
Think of an (i)...
53
I have to say, the hollow-vs-gold-star state approach is standard enough that I think it would be your best bet. Not only is it common enough to become intuitive, but it acts as both state AND action: users are fairly familiar with the "tap this to add it to my favorites - oh look, now it's gold, it is IN my favorites." It is a nice, concise package of ...
49
1. Align to left
(+) Icons are in line.
(+) Icon line is parallel to the line formed by the first letters of the words.
(+) No unnecessary gap between icon and text.
(+) Makes a good feel because of the similarity with list apperance where bullets are similar to icons.
(+) In case of action buttons, icon comes before text, so you can associate the action ...
48
This largely a question of design trends, but there are some UX aspects to it.
Glossy icons and buttons were (arguably) mostly used to show affordance. It was also then used almost religiously in all Apple designs. Even today, most iOS icons are glossy by default.
People don't neet to be shown some gloss or gradient to know that they can interact with ...
46
contrast
Your icons are lacking discernible contrast--both between the icon and the background, as well as between the active icons and inactive icons.
Increase the contrast.
46
Other than just being design choices made by different companies (and the trademarks/copyrights that come with them) you must take into account what the icons are intended to represent. A good icon should denote its meaning without any supplemental text (although you should still have it). An icon that denotes an action such as "share" should represent that ...
44
My first suggestion is to separate your destructive actions from the constructive actions. As a user can accidentally click the wrong icon due to a visual error, they can accidentally click the wrong icon just because their mouse was not exactly where they thought it was.
Keep the actions that are destructive and can cause panic (such as accidentally ...
43
Both the icons convey a different meaning; even if they tell a user that there are additional options underneath.
A gear icon is derived from a traditional mechanical sense of gears and cogs defining a operation or a physical constraint. You can find additional details from the following answer: Why is the settings icon either associated with gears or a ...
41
A checkmark represents something positive - usually 'good' or 'correct', so you shouldn't use it to represent something negative like 'serious violation'. I would focus on using either a X or a warning sign, with a preference for the warning sign.
Icon aside, I don't see any good reason to have columns for both 'serious violation' and 'Overall alert'. The ...
39
I've done some search without any specific result, so I will answer considering usability principles and software history:
Legacy
The undo function was already here in the 70's but was not until the appearance and expansion of graphical interfaces and increasing popularity of desktop computers that it got its icon identity.
In those times the users didn't ...
38
Traditionally the operation of a mechanical tool was determined by the physical constraint of the position/type/size of the gears used. So if you wanted to change a tool setting, you would have to manually make an alteration to the gear(s). Many machines worked this way, even ones you would not think of, such as printing presses, folding machines, etc.
...
38
In short, NO, they do not have enough contrast.
According to Web Content Accessibility Guidelines (WCAG) they mostly do not have enough contrast. Only 1 out of 8 tests gets a pass.
But the dark blue text on light gray background mostly passes.
But there are other factors
In essence, we should be comparing icons to whole words, not individual letters. So ...
38
I think this solution could be usable. Note that the mandatory item is selected AND disabled. The user is forced to select one of the mandatory items through a dropdown menu
download bmml source – Wireframes created with Balsamiq Mockups
Only top voted, non community-wiki answers of a minimum length are eligible
