141
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 ...
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 ...
54
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 ...
52
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 ...
47
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 ...
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.
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 ...
44
Generally speaking they are used to open different types of menu.
The 'burger' is used to open a 'burger menu', which is presented as a
drawer that appears from the side of the screen and occupies most of
the screen;
The 'kebab' (three vertical dots), which originated in Google's Material Design
languge, is designed to open a smaller inline menu from a ...
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 ...
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
36
And, I suppose, a metal chain is intrinsically linked with hyperlinks, paper envelopes are required to send e-mails, and your browser's home page is an actual house?
Look past the pedantically literal and you'll see value in a metaphor that has survived, near-unchanged, for decades with no confusion and no ambiguity. Why change it now?!
Next you'll be ...
35
IEC 60417 is a standard for symbols to put on electrical devices (TVs, VCRs, washing machines, MRIs etc.) and ISO 7000 collects these. Each costs around 100 bucks, but there is a free preview PDF.
It’s the closest I could find that would standardize the common playback controls like play ▶️, pause ⏸, play/pause ⏯, stop ⏹, fast forward ⏩, rewind ⏪, skip/next ⏭...
34
you can use a restart / reset button, here's an example from YouTube, the leftmost button
34
As others have stated, icons are unlikely to be seen.
As this question shows, a common way to solve this is to make the cable end visually distinct using colour.
In this case, the red end is power only.
You could combine both ends, using a ⚡ or ⏻ symbol and the colour red. That would probably be useful for people with colour blindness.
Only top voted, non community-wiki answers of a minimum length are eligible