?
avatar Sohalt
Sohalt
20 Nov 2015

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.

avatar Sohalt Sohalt - open - 20 Nov 2015
avatar brianteeman
brianteeman - comment - 20 Nov 2015

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:

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.


Reply to this email directly or view it on GitHub
#8511.

avatar Sohalt
Sohalt - comment - 20 Nov 2015

Sure, now how does that affect my issue?

avatar n9iels
n9iels - comment - 20 Nov 2015

To be honest I have no idea what you're point is :sweat_smile:
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 :)

avatar Sohalt
Sohalt - comment - 21 Nov 2015

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
disabled
to enabled/published, I have to press the red x - a very unintuitive action in my opinion.
enabled
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.

avatar brianteeman
brianteeman - comment - 21 Nov 2015

Labeling the column published instead of status doesn't work because the values displayed also include archived and deleted.

avatar Sohalt
Sohalt - comment - 21 Nov 2015

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.

avatar zero-24 zero-24 - change - 25 Nov 2015
Labels Added: ?
avatar zero-24 zero-24 - change - 25 Nov 2015
Category UI/UX
avatar Lyquix
Lyquix - comment - 31 Dec 2015

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.


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8511.

avatar brianteeman brianteeman - change - 10 Mar 2016
Status New Closed
Closed_Date 0000-00-00 00:00:00 2016-03-10 12:49:33
Closed_By brianteeman
avatar brianteeman brianteeman - close - 10 Mar 2016
avatar brianteeman
brianteeman - comment - 10 Mar 2016

Closing with other tickets so we just have one for this topic #9359


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8511.

Add a Comment

Login with GitHub to post a comment