8

My team and I are developing a web-application ERP, and as communly in softwares of this kind, we have a lot of CRUD views in our system.

We use the Font Awesome 4.7 icon pack as our main font of icons, but recently we have depared with a usability problem:

We currently use the icon (fa-remove) as the icon related to delete operations in our CRUD tables:

The problem is: we use the same icon in the close function of our modals:

Recently when we discover this misleading conception, we talked about it and found that we have to pick what function icon is going to change.

We suggest too change the delete-icon to be this one (fa-trash), but our project manager didn't liked the idea.

So I'm here asking:

Is really a bad thing to have an icon used in two distincted functions?

  • 1
    You might be interested in this related question: ux.stackexchange.com/questions/117143/… – Michael Lai Apr 16 '18 at 23:49
  • 1
    "Recently when we discover this misleading conception,[...]." How did you find out that this is misleading? Have you done actual testing and data to back that up? I find it hard to imagine that using this very well established convention would be misleading in any way. – Polygnome Apr 17 '18 at 6:24
  • 1
    What happens if you have a delete confirmation with a close button? [x delete] [x close] ? – freedomn-m Apr 17 '18 at 7:06
  • @MichaelLai I checked your resource, very insteresting indeed. I didin't find any question of this type when I searched – Matheus Cuba Apr 17 '18 at 11:21
  • 1
    @MatheusCuba Yeah well, guidelines are not laws that are written in stone and have to be obeyed no matter what. "One icon, one function" is a good, sensible guideline, but adhering to it just for adhering to it is as bad or even worse then not adhering to it. make sure the guideline applies - if you think it is confusing, then have actual data to back that up (have users reported it is confusing, have tests shown it is confusing). Furthermore, both times the icon serves the same purpose - if you view closing a window/dialog as "deleting" it (which is a valid view to hold). – Polygnome Apr 17 '18 at 11:37
9

Your question boils down to "is there cognitive overload" by reusing this particular symbol in this particular case. My guess (as irrelevant as it is) is that there will not be any confusion between the delete and the close functions.

The "x" (fa-remove) icon has been used for both functions in numerous websites. Furthermore the icons appear to be visually distinct: bold blue for the remove / delete function; and light-gray for the close modal function.

The best way to find out, of course, is to test it (it need not be elaborate).Create several mockups / prototypes using the X (fa-remove) and show it to in house people and see if there is any confusion or objections.

  • 1
    +1 for noting that different colors are used in the two contexts to help keep them distinct from one another. – Monty Harder Apr 16 '18 at 21:09
  • 1
    I'm gonna go with this approach! I didn't think of the different colors in context, and your argument is really plausive. I will update soon with results. Thanks! – Matheus Cuba Apr 17 '18 at 11:14
2

No

With the text next to it, more likely to be read

I suggest testing fa-trash with users. It's less ambiguous, and I disagree with your project manager

  • I desagree too with my PM, the fa-trash as you said is less ambiguous and is to me my first choice to the delete-context, but I'm not a UX-expert so I'm was think of check here first. Thanks for your help! – Matheus Cuba Apr 17 '18 at 11:17
2

Actually in this case there is no problem. Since you are removing items from a list and "removing" a modal from the view. They are very similar actions.

After clicking the "X" the user will expect that elements will disappear from the view.

1

I think using the "X" is fine for both. Trash can is more explicit on the row view IMO.Adding a label would make that list pretty overloaded.

Perhaps just show the remove on row hover. So you are only dealing with the one item. Seems this is a desktop app.

Only issue is that you would have to hover over to see the options. But probably not that bad if you add tab support for power users.

enter image description here

Cleans up the list a little too.

  • 4
    I'd be cautious about making deletion controls show up only on hover. I frequently us a touchscreen, so these types of things tend to bite me: I tap an apparently-blank part of an item intending to select it, only to discover there was a "hidden" delete button there just waiting for a hover to reveal itself, and now the item I'd meant to select is just gone. Very disconcerting. I think a destructive action like deletion should never show up by surprise - or at the very least, locate it outside the normal clickable area that might be used for selection operations. – DMGregory Apr 17 '18 at 1:28
  • I agree with you @DMGregory, our system is supposed to run on mobile devices (Sure, we could make it always appear on mobile), but hiding the delete-icon (in my not expert-UX oppinion) would make this hard to guess to less-experienced users – Matheus Cuba Apr 17 '18 at 11:20
1

I think the issue is the UI design, not the icon choice.

Nothing in an interface or programming should repeat. Repetition is inefficiency. Efficiency is everything in programming and UI. So you can simply look at an interface and if you see anything repeating, you can know that it is wrong without knowing why.

In your example there are 24 buttons that perform only 4 unique actions. Plus those 24 buttons appear to be incapable of doing any group actions. So everything is one item at a time.

The solution is to select the item or group of items then select the action or actions. This is how we naturally work with lists. This clears up the interface both visually and cognitively.

Here's an example of this from Material Design. There should be only one button on the items that selects the item to be included in the action. The item itself is a button. In the example, the action buttons in the table header change when the user selects an item or items. The list controls show until the user takes action on the list.

enter image description here

[ EDIT 4-18: I accidentally posted the example without notes. Here's the correct image: ]

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.