View Issue Details

IDProjectCategoryView StatusLast Update
0021724mantisbtuipublic2017-02-27 00:00
ReportercproensaAssigned Tosyncguru 
PrioritynormalSeverityminorReproducibilityhave not tried
Status closedResolutionfixed 
Product Version2.0.0-beta.2 
Target VersionFixed in Version2.2.0 
Summary0021724: Improve visibility of status colors
Description

In the new ui, the status colors are reducted to a small square on the status field. This gives a cleaner overall style.

However, i find it difficult to visually identify issues status, since the colored area is very small to really stand out.

Older ui was easier in this point, but still wasn't very modern looking.

See attached sketch for modifying the background color of the status field. This improves visibility, and still keep the layout clean.
(the squares then would not be needed)

Can this be considered, at least, as an optional style?

Tagsmodern-ui

Relationships

related to 0021897 closedsyncguru Unaligned color coding of status 

Activities

cproensa

cproensa

2016-09-28 07:48

developer  

Selección_160.png (142,422 bytes)
Selección_160.png (142,422 bytes)
cproensa

cproensa

2016-09-28 07:49

developer  

Selección_161.png (66,212 bytes)
Selección_161.png (66,212 bytes)
dregad

dregad

2016-09-28 12:41

developer   ~0054084

I remember having this discussion with syncguru a while back, but I can't find it now. I personally like the bigger colored areas reflecting the issue status as per your suggestions.

cproensa

cproensa

2016-09-28 13:11

developer   ~0054085

my suggestion is by no means a definite proposal, only the raw idea, to show the difference

When showing the new ui to some of my users, one of the first complaints that appears is the poor visual feedback for issue status.
I understand that for users that may migrate from previous versions, this can be a relevant change.
Also, it was useful for demanding workflows, when the user in charge has to manage a lot of request, fast. Think of a helpdesk or SM context.

cproensa

cproensa

2016-10-22 10:00

developer   ~0054319

I'd really like to get more feedback from the team.

cproensa

cproensa

2016-11-13 07:01

developer   ~0054512

i insist on having feedback
@vboctor @atrol @syncguru ?

atrol

atrol

2016-11-13 11:18

developer   ~0054513

is the poor visual feedback for issue status

That's why the user at 0021897 uses more saturated colors.
Maybe we should change our default colors this way, but this would no longer allow to have background color for status as an optional style.
The advantage of the new approach is that you don't have to take care if the color works as text background.

I will ask some of my users to get some more feedback.

cproensa

cproensa

2016-11-13 13:34

developer   ~0054514

That's why the user at 0021897 uses more saturated colors.

imho, having more saturated colors, like that showed in the referenced issue, breaks the general look & style. I sse it quite "ugly"

hans peter

hans peter

2017-01-10 03:42

reporter   ~0055008

when i present the new ui, my users would like to see the whole row in status color, again.
perhaps this can be a settings switch?

benjo

benjo

2017-01-10 10:56

reporter   ~0055023

Thanks, @hans peter, for pointing this out. My users have the same wish.
How can we change this easily?

atrol

atrol

2017-01-10 11:21

developer   ~0055024

Last edited: 2017-01-10 11:47

View 2 revisions

I am working since about two weeks with the new UI on a daily basis.
I missed the colors the first days, but now I find it quite useful that text is better to read than before and it's easier to concentrate on content instead of color.
Furthermore I learned to look at the colored status rectangles in another way.
It takes some time to change the brain, especially for guys like me that work with Mantis each day since about 8 years.

Let your users work some weeks with the new UI.
After that, ask them again.
Maybe they changed their mind.
If not, come back to this discussion.

This is too much in my opinion

would like to see the whole row ...

proposal of cproensa should be enough

background color of the status field

handwovenpdx

handwovenpdx

2017-01-10 12:58

reporter   ~0055030

Hello! Chiming in that my team has been using the new UI for several weeks and really struggling with the new color scheme. The ease of quickly visually scanning the issues was the primary reason we adopted Mantis, and now that it's gone we're spending more time figuring out what our development priorities are on a daily basis. Lost time is lost money, and if there aren't plans to address this we're probably going to switch back to Pivotal Tracker. cproensa's design is great, as is the old full <tr> paradigm - really anything that fixes this problem (even as a non-default options setting) would be immensely helpful.

atrol

atrol

2017-01-10 13:23

developer   ~0055032

@handwovenpdx, in case this is a major urgent issue for you: You can run a parallel installation of 1.3 and connect to the same database to where your 2.0 installation is connected.

syncguru

syncguru

2017-01-11 01:31

developer   ~0055041

@atrol, @cproensa
I am curious to how other bug trackers (free or commercial) implements status color. I am familiar with Jira which does not implement status colors but rather bug-type color; GitHub which uses colored labels only. I am interested to see how others tackled this issue.

To be clear on my position here, I don't like status colors to be dominant in the page. It is not a good design practice, but I am willing to concede if I can see evidence of similar usage in other popular apps.

vboctor

vboctor

2017-01-11 01:41

manager   ~0055042

I totally agree with @atrol, it takes a bit of time to get used to. I prefer the new approach. It may not work for 100% of people, but so far it seems that the majority of feedback has been very positive, with no complains about status not being easy to recognize.

cproensa

cproensa

2017-01-11 04:24

developer   ~0055047

it takes a bit of time to get used to

I personally can't get used to.
If i am looking at description cells, i see the status colored squares as arranged in a vertical line, for which i cant associate which one matches each row.
If looking globally, i have to focus explicitly on each cell to get to read the status, as all yellow, green and blue squares gets confusingly close in hue, and the small colored area doesn't help.
Your experience may be different, or i may have some visual conditions.

I am familiar with Jira which does not implement status colors but rather bug-type color; GitHub which uses colored labels only. I am interested to see how others tackled this issue.

I can perfectly distinguish github color labels. The issue here is a problem of a repetition pattern and inconvenient shape of the color area.

To be clear on my position here, I dont like status colors to be dominant in the page. It is not a good design practice, but I am willing to concede if I can see evidence of similar usage in other popular apps.

Status colors were a defining trait in mantis, that should be good enough reason to consider how it's presented. There is no need to lose it just for the reason of being like the other.
I dont like either status colors to paint the whole screen like it was in 1.x. But functionally i like less how currently is.

It is not a good design practice

The current implementation may also be a not good design practice, as i have explained.

Chris_Z

Chris_Z

2017-01-11 06:56

reporter   ~0055052

Hi, the OP of 0021897 here.

I am speaking from the position of myself having slight color impairment.
I mean I do see all clear colors perfectly, this is only where they are in the form of washed out hues is where I am in disagreement with the rest of the world ;)
They start looking to me all the same, and the smaller area the bigger struggle.

But consider this: when you go to the store to buy the paint for painting the room or the house.
You get a small color palette to pick the color to be blended for you. Do they blend all the bucket? No, you get a small can to paint it on the bigger surface and first then finally decide about the color. The shop is doing it for a reason: none can really judge colors on small areas correctly.

Hope this helps

cproensa

cproensa

2017-01-11 17:51

developer   ~0055061

Edit page still has color background



Selección_121.png (40,529 bytes)
Selección_121.png (40,529 bytes)
syncguru

syncguru

2017-01-12 23:16

developer   ~0055089

Last edited: 2017-01-12 23:37

View 2 revisions

Status colors were a defining trait in mantis

Do you have data to support this claim? The data I have indicate a very limited use. Given the option to switch back to Classic UI, over 90% chose not to. This cannot be a 'defining trait'.

The current implementation may also be a not good design practice

Please refer to ""Don't Make Me Think"" for more of what good and what's not. https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515
Using colors sparingly is important rule in web usability. Possibly explains why nobody is copying mantis ""defining trait"".

Despite my statement, I am not against having a configuration option to address the needs of the small user base who may need that, like @Chris_Z; I just don't want to do for the wrong reasons.

cproensa

cproensa

2017-01-13 06:39

developer   ~0055103

Do you have data to support this claim? The data I have indicate a very limited use

English is not my native language so i may have not communicated what i mean. Mantis has been using prominently status colors for many years. How is not that a defining trait?

Given the option to switch back to Classic UI, over 90% chose not to

That is not the point. I'm not saying going back to classic ui. The point here is: if we are using status colors, use it in an effective way.

Please refer to Dont Make Me Think for more of what good and whats not. https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515 Using colors sparingly is important rule in web usability. Possibly explains why nobody is copying mantis defining trait.

I have tried to explain why the current status color presentation is not efficient, from my personal experience. Again, we are not discussing "current vs old" implementation, but current vs a possibly better one.

I am not against having a configuration option to address the needs of the small user base who may need that

We are advancing then, some time ago you were suggesting maintaining a fork

simtel

simtel

2017-01-16 10:08

reporter   ~0055155

at my office, we too would like a clearer at-a-glance view of the different statuses (and we have even configured more of them than the default setup)

I do second the request to use the status color at least as a background for the status column

cbradney

cbradney

2017-01-20 16:36

reporter   ~0055244

I moved the Scribus tracker to Mantis 2.0 recently and I agree, we certainly miss the backgrounds showing the status. The proposal in Selección_160.png would be ok for us. Ideally I'd like to see 3 options but understand that might be too hard:

  • the current standard single coloured square
  • the background of the status cell
  • the full background of the row like in <=1.3

thanks
Craig

hans peter

hans peter

2017-01-23 05:40

reporter   ~0055262

i am not a fan of doing things, because others do things the other way. design is a matter of opinion. when 90% think, it's cool to look like the other 90%, then ok, let them ride their way. i don't like to ride a long the coloured square way.
personally i always try to make this kind of features configurable, so my users can do as they prefer, not as i want them to do.

so, 0021724:0055244 is a great suggestion.

Bozz

Bozz

2017-01-24 08:38

reporter   ~0055286

Hi,
I just migrate to Mantis 2.0.0, and my users also complain about the poor feedback on the status.
I agree with @cbradney with a customisable cell through additional config_inc settings maybe.
For the moment, while waiting for the decission I tweaked the colums_api.php and bug_view_inc.php in order to add the class $status_label to the td cells.

columns_api.php

print_column_status(...
echo '<td class="column-status ' . $status_label . '">';
)

bug_view_inc.php

echo '<td class="bug-status ' . $t_status_label . '">';

but we should have it configurable instead.

Bozz

Bozz

2017-01-24 08:41

reporter   ~0055287

Additionally to the background color, it'd be interesting to add status_text_color to be used when the foreground and background are very similar (event an status_link_color as well)

Bozz

Bozz

2017-01-24 08:45

reporter   ~0055288

Another option, which could satisfy a lot of people (old style + new modern style) would be to use a very narrowed cell just for the visual feedback without text inside, like the bootstrap callout visual effect

atrol

atrol

2017-01-24 08:51

developer   ~0055290

to use a very narrowed cell just for the visual feedback without text inside

@Bozz I am not sure I understand what you mean with it. Could you provide a mockup?

simtel

simtel

2017-01-24 08:55

reporter   ~0055291

I think he means something like this, although I wouldn't make it too narrow.



didaquis

didaquis

2017-01-24 11:24

reporter   ~0055295

Sometimes other products offer the possibility of a special setting for color blindness. Normally, this add some pattern in addition of colour. Although this is not the case, that setting it's interesting. Keep it in mind as one more option to solve this.



colorblindess.JPG (30,623 bytes)
colorblindess.JPG (30,623 bytes)
Bozz

Bozz

2017-01-24 19:42

reporter   ~0055306

Hi, here is an example (see attachement).
In order to achieve that,

  1. I applied the following css:
/* applied to the td container */
.column-status {
    position: relative;
}

/* applied to the div inside the .column-status td cell */
.column-status .align-left:before {
  position: absolute;
  left: -1px;
  top: 0;
  height: calc(100% - 0.0em);
  width: 6px;
  content: '';
  display: block;
  /*background-color: #2D46B9;*/
}

/* some adjustements */
.column-status .align-left {
    /* need to reset the background color of the div because .status-xx-color has been added */
    background-color: transparent;
    /* Add some space for the status label, handler name, etc... */
    margin-left: 0.3em;
}

/**
 * The background color must be defined dynamically according to the status color class $status_label
 */
/* example:
.column-status .align-left.status-80-color:before {
    background-color: #d2f5b0;
}
*/

/* just hide the square for the moment */
.column-status .fa-square-o {
    display: none;
}
  1. I added the following new classes in the file css/status_config.php:
    # Status color class
    if( array_key_exists( $t_label, $t_colors ) ) {
        echo '.' . $t_css_class
            . " { background-color: {$t_colors[$t_label]}; }\n";
        echo '.column-status .align-left.' . $t_css_class . ':before'
            . " { background-color: {$t_colors[$t_label]}; }\n";
    }
  1. And finally, added the class to the div inside the cell in columns_api.php
function print_column_status( BugData $p_bug, $p_columns_target = COLUMNS_TARGET_VIEW_PAGE ) {
    # choose color based on status
    $status_label = html_get_status_css_class( $p_bug->status, auth_get_current_user_id(), $p_bug->project_id );
    echo '<td class="column-status">';
    echo '<div class="align-left ' . $status_label . '">'; // ADDED THE STATUS CLASS HERE //
    echo '<i class="fa fa-square-o fa-xlg ' . $status_label . '"></i> ';
        ...
}

We could transpose the technique to the view issue details page as well.

Voilà for the mockup. I hope you'll find it inspiring :-)



simtel

simtel

2017-01-25 02:34

reporter   ~0055309

I think the callout would work better if the color was at the beginning of the row and a bit larger. It looks weird in the middle of the table and it's almost as difficult to spot as the current small square, IMHO

atrol

atrol

2017-01-25 02:43

developer   ~0055310

if the color was at the beginning of the row

The color should not be separated from the status value.
You can use page My Account > Manage Columns to set status field as first column.

simtel

simtel

2017-01-25 05:36

reporter   ~0055317

waiting for this issue to be addressed, I've created a plugin that moves the color to the background of the status column, pretty much like the mockup in the first note. If anyone is interested, it's available at https://github.com/wiz78/BetterStatusColors

cproensa

cproensa

2017-01-25 05:59

developer   ~0055320

I think the callout would work better if the color was at the beginning of the row and a bit larger. It looks weird in the middle of the table and it's almost as difficult to spot as the current small square, IMHO

With that example i can identify the colors better than current squares.
It also solves the issue of having conflicting colors in background vs text, where in some situations text may become unreadable due to having similar colours.

syncguru

syncguru

2017-01-25 21:56

developer   ~0055328

I like @bozz suggestions. Just for the record, that's how Jira shows issue type colors.

GunSmoker

GunSmoker

2017-01-26 19:17

reporter   ~0055355

Fogbugz, JIRA and Redmine do not mark status with colors. For other things / columns - an icon is often used (similar to Mantis 2.0), but noone uses entire background.

syncguru

syncguru

2017-01-29 21:16

developer   ~0055387

PR: https://github.com/mantisbt/mantisbt/pull/1012

Chris_Z

Chris_Z

2017-02-02 07:14

reporter   ~0055449

@syncguru To test your solution I applied your changes to see how it works in production.
Now both my eyeballs just want to say: thank you!

Discovered just one minor glitch -- web browser seemed to insist on displaying the status color indicator with the old size until I rectified it with a forced Ctrl-F5 total refresh.

Best!



syncguru

syncguru

2017-02-03 12:22

developer   ~0055476

@Chris_Z - Glad to hear!
The browser refresh issue is a known one. Should be fixed once we have a new asset build process in place.

Related Changesets

MantisBT: master 7ba24586

2017-01-29 21:07:40

syncguru


Committer: dregad Details Diff
Enlarge status color box & remove black frame

Fixes 0021897 and improves visibility of status color (issue 0021724).
mod - bug_view_inc.php Diff File
mod - core/bug_group_action_api.php Diff File
mod - core/columns_api.php Diff File
mod - core/custom_function_api.php Diff File
mod - core/relationship_api.php Diff File
mod - css/ace-mantis.css Diff File
mod - css/status_config.php Diff File
mod - my_view_inc.php Diff File

Issue History

Date Modified Username Field Change
2016-09-28 07:48 cproensa New Issue
2016-09-28 07:48 cproensa File Added: Selección_160.png
2016-09-28 07:49 cproensa File Added: Selección_161.png
2016-09-28 07:50 cproensa Tag Attached: modern-ui
2016-09-28 12:41 dregad Note Added: 0054084
2016-09-28 13:11 cproensa Note Added: 0054085
2016-10-22 10:00 cproensa Note Added: 0054319
2016-11-13 07:01 cproensa Note Added: 0054512
2016-11-13 11:03 atrol Relationship added related to 0021897
2016-11-13 11:18 atrol Note Added: 0054513
2016-11-13 13:34 cproensa Note Added: 0054514
2017-01-10 03:42 hans peter Note Added: 0055008
2017-01-10 10:56 benjo Note Added: 0055023
2017-01-10 11:21 atrol Note Added: 0055024
2017-01-10 11:47 atrol Note Edited: 0055024 View Revisions
2017-01-10 12:58 handwovenpdx Note Added: 0055030
2017-01-10 13:23 atrol Note Added: 0055032
2017-01-11 01:31 syncguru Note Added: 0055041
2017-01-11 01:41 vboctor Note Added: 0055042
2017-01-11 04:24 cproensa Note Added: 0055047
2017-01-11 06:56 Chris_Z Note Added: 0055052
2017-01-11 17:51 cproensa File Added: Selección_121.png
2017-01-11 17:51 cproensa Note Added: 0055061
2017-01-12 23:16 syncguru Note Added: 0055089
2017-01-12 23:37 syncguru Note Edited: 0055089 View Revisions
2017-01-13 06:39 cproensa Note Added: 0055103
2017-01-16 10:08 simtel Note Added: 0055155
2017-01-20 16:36 cbradney Note Added: 0055244
2017-01-23 05:40 hans peter Note Added: 0055262
2017-01-24 08:38 Bozz Note Added: 0055286
2017-01-24 08:41 Bozz Note Added: 0055287
2017-01-24 08:45 Bozz Note Added: 0055288
2017-01-24 08:51 atrol Note Added: 0055290
2017-01-24 08:55 simtel File Added: Schermata 2017-01-24 alle 14.54.01.png
2017-01-24 08:55 simtel Note Added: 0055291
2017-01-24 11:24 didaquis File Added: colorblindess.JPG
2017-01-24 11:24 didaquis Note Added: 0055295
2017-01-24 19:42 Bozz File Added: status-feedback-example-mantis-2.0.0-css.png
2017-01-24 19:42 Bozz Note Added: 0055306
2017-01-25 02:34 simtel Note Added: 0055309
2017-01-25 02:43 atrol Note Added: 0055310
2017-01-25 05:36 simtel Note Added: 0055317
2017-01-25 05:59 cproensa Note Added: 0055320
2017-01-25 21:56 syncguru Note Added: 0055328
2017-01-25 22:31 syncguru Assigned To => syncguru
2017-01-25 22:31 syncguru Status new => assigned
2017-01-26 19:17 GunSmoker Note Added: 0055355
2017-01-29 21:16 syncguru Note Added: 0055387
2017-02-02 07:14 Chris_Z File Added: Snapshot-2017-02-02-125413.png
2017-02-02 07:14 Chris_Z File Added: Snapshot-2017-02-02-130743.png
2017-02-02 07:14 Chris_Z Note Added: 0055449
2017-02-03 12:22 syncguru Note Added: 0055476
2017-02-05 04:52 dregad Changeset attached => MantisBT master 7ba24586
2017-02-26 23:59 vboctor Status assigned => closed
2017-02-26 23:59 vboctor Resolution open => fixed
2017-02-26 23:59 vboctor Fixed in Version => 2.2.0
2017-02-27 00:00 vboctor Summary Visibility of status colors => Improve visibility of status colors