The UI for toggleing the state of an item (enable/disable, publish/unpublish,etc) is very misleading, as the button mixes several UI component styles in a confusing fashion.
In the enabled/published state the button has an inner drop shadow, suggesting a lowered surface and therefore a pressed button.
Yet the icon on the button changes between states without an animation therefore breaking the push-button illusion/paradigm.
But the biggest problem I have with the button is the choice of icons themselves.
A tickmark generally is used to confirm an action, or, in combination with a checkbox to show the status of the checkbox.
A red x is generally used to dismiss or delete something.
The problem now is that the icons are used as both a status indicator and toggle.
The green tickmark might be acceptable for displaying an "enabled" state, but the red x is a very bad choice for signaling the disabled state, since one is expected to click on it, in order to enable/publish the item.
I have to click a red x to enable some functionality.
This goes against simple UI guidelines and basic intuition.
The same problem, although to a lesser extent, is present when disableing an item by clicking on the tickmark.
My suggestion is to use a proper checkbox and optionally a coloured status indicator (red/green dot) next to it to allow for quick skimming of many items.
Sure, now how does that affect my issue?
To be honest I have no idea what you're point is
I understand you have some possible improvement about the UI of the Joomla!. But I don't understand which parts, buttons and for which components.
So If you can please provide some screenshots and possible solution/ideas, we can discuss and share ideas :)
Sorry if I didn't communicate my issue clearly enough. I was quite tired when I wrote it and didn't do my best to express myself.
Here are two screenshots showing the problem.
To go from disabled/unpublished
to enabled/published, I have to press the red x - a very unintuitive action in my opinion.
If it weren't for the tooltips I would not have known what the buttons do, or, would have guessed they do something different (red x -> close/dismiss/delete/disable).
And if you need tooltips or much text in general to explain a single simple toggle I think thats a red flag for UI.
I'm not much of a designer, so I don't have a direct replacement, but my suggestion would be to use a simple checkbox that is checked when the item is enabled/published and unchecked when the item is disabled/unpublished. Labeling the column "published" helps to immideatly see what the checkboxes do.
Labeling the column published instead of status doesn't work because the values displayed also include archived and deleted.
I didn't mean to rename the status column, but rather introduce a new column.
Not sure this would integrate well with the current design and look appealing, but I think it would still be better than having to click the red x.
Another less disruptive approach would be to change the tick mark and x to dots, therefore giving the impression of LEDs or similar. Then at least one would not have to click a red x to publish an article and additionally the push button & changing icons discrepancy would be sort of solved.
Labels |
Added:
?
|
Category | ⇒ | UI/UX |
Perhaps the Unpublished icon can be replaced by an outlined, gray checkmark, to mimic the behavior of the Featured icon: when activated the icon is pressed, yello and filled; when inactive the icon is depressed, gray and ouline only.
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2016-03-10 12:49:33 |
Closed_By | ⇒ | brianteeman |
Closing with other tickets so we just have one for this topic #9359
For accessibility you should never rely on a single visual indicator
especially if that is a colour
On 20 Nov 2015 5:20 pm, "Sohalt" notifications@github.com wrote: