View Issue Details

This bug affects 1 person(s).
 28
IDProjectCategoryView StatusLast Update
14984Bug reportsOtherpublic2021-03-29 14:04
Reporterf_funke Assigned ToJHoeck  
PrioritynormalSeveritytweak 
Status closedResolutionfixed 
Product Version4.0.0-beta 
Fixed in Version4.4.15 
Summary14984: Admin backend: Color of selected options is confusing
Description

The color of switches in the admin backend is really confusing. Grey means active, which might be clear when there are at least three options, but whenever there are only two options (e.g., on/off) it looks as if the other option was activated. It would be good to use lime-green as in the homepage settings.

TagsNo tags attached.
Attached Files
Colors_for_switches_190616.png (32,279 bytes)   
Colors_for_switches_190616.png (32,279 bytes)   
Bug heat28
Complete LimeSurvey version number (& build)4.0.0-beta github 190614
I will donate to the project if issue is resolvedNo
Browser
Database type & versionmySQL LimeSurvey DB 416
Server OS (if known)
Webserver software & version (if known)
PHP Version7.2.7

Relationships

has duplicate 17170 closedc_schmitz Remove color in Global settings presentation 
has duplicate 17171 closedc_schmitz Inverse color for Publish API on /admin/remotecontrol button 
related to 15913 confirmed Survey details overview at LS4 shows text with misleading color 
child of 17213 closedJHoeck Admin backend: Color of selected options is confusing - Admin Theme Sunset Orange 

Users monitoring this issue

Mazi

Activities

DenisChenu

DenisChenu

2019-06-17 08:00

developer   ~52423

About color : there are big issue with usage of text-success and text-info with a lot of admin or Fruity template …

f_funke

f_funke

2019-06-17 08:34

developer   ~52424

Last edited: 2021-02-07 20:37

Yes, you're right. If I recall right, for example some warnings are in red, some in green. Do you already have a list of points that could be changed?

DenisChenu

DenisChenu

2019-06-17 08:48

developer   ~52425

Last edited: 2021-02-07 20:37

No sorry :)

I must check , come back here when it‘s done

DenisChenu

DenisChenu

2019-06-17 09:49

developer   ~52426

Last edited: 2021-02-07 20:37

Same issue in 3.X :

  1. text-primary and text-info and text-success are near same
  2. difficult to tell if bg-primary is success or not
  3. btn-primary and btn-info and btn-success are near same
  4. Success row show bigger (issue in statitictics.css)

Some other issue

See https://gitlab.com/Sondages.Pro/checkAdminBootstrapColor for view sample

DenisChenu

DenisChenu

2019-06-17 09:50

developer   ~52427

Last edited: 2021-02-07 20:37

Why success of Bay of many is blue ?

markusfluer

markusfluer

2019-07-12 11:08

administrator   ~52860

Last edited: 2021-02-07 20:37

In home page settings, those are switches. In the global settings those are buttongroups.
I would back your proposal to use a dark shade of the main color as a background for the selected option.
This has to be talked about in the team, though.

The LimeSurvey color scheme is based on a monocolored scheme, meaning success and primary are the same colours, and Info being a gradient of that color.
This was so since LS2.5. It is also repeated in the fruity themes based on the backend colors.
We won't change this in LS4.

DenisChenu

DenisChenu

2019-07-12 11:23

developer   ~52861

Last edited: 2021-02-07 20:37

meaning success and primary are the same colours

But why remove a colour of Bootsrap ? Succes and primary didn't have same meaning …

Ok, but still : no difference between success/primary or danger/primary make it very complex to use …

See for sample
bootswatch Journal : primary red, danger orange
bootswatch Cosmo : primary blue, info purple
bootswatch United : primary orange, danger darker red

And still :

  1. table Success row show bigger (issue in statitictics.css)
  2. Why success of Bay of many is blue ?
markusfluer

markusfluer

2019-07-12 11:39

administrator   ~52862

Last edited: 2021-02-07 20:37

Because :
The LimeSurvey color scheme is based on a monocolored scheme, meaning success and primary are the same colours, and Info being a gradient of that color.
Also this is the scope of a new ticket.

f_funke

f_funke

2019-08-05 11:49

developer   ~53093

Last edited: 2021-02-07 20:37

So there won't be no selected options in green due to an unchangable color scheme?

markusfluer

markusfluer

2019-08-05 16:13

administrator   ~53109

Last edited: 2021-02-07 20:37

No, but I recommend we talk about this in a meeting.
I have no strong feelings or arguments about this, so i'd put it up for the developer/contributer vote.

Mazi

Mazi

2019-10-30 19:56

updater   ~54286

Last edited: 2021-02-07 20:37

To be honest, I would even call this a regression. At LS 3 we have green/red colors for on/off which is pretty intuitive. At LS 4 this is now missing which will confuse users.
Please make sure LS 3 and LS 4 interface colors do not differ.

f_funke

f_funke

2019-10-30 20:23

developer   ~54287

Last edited: 2021-02-07 20:37

+1
I was just testing question types in RC6 and found green for "no" and red for "yes" quite confusing. Furthermore, it is sometimes stil unclear when an option is selected and when not. See screenshot below.

grafik.png (13,528 bytes)   
grafik.png (13,528 bytes)   
DenisChenu

DenisChenu

2019-10-30 21:53

developer   ~54288

Last edited: 2021-02-07 20:37

Anout slider , think best is to allow color by option.

Sometimes : Yes is OK, but another time Yes is danger :)

Mazi

Mazi

2019-10-30 23:17

updater   ~54292

Last edited: 2021-02-07 20:37

I have set this ticket to "block" because I really think we should not release a first alpha version before such things are fixed.

f_funke

f_funke

2019-11-01 09:32

developer   ~54305

Last edited: 2021-02-07 20:37

@DenisChenu: You're perfectly right. One solution to this could be to change the wording of certain options so that yes/no or red/green is more consistent. Negative formulations should be avoided as cognitive processing is much harder. This should be considered when designing UI elements.

For example, I still find the option "hide tip" quite confusing and I am sure that "show tip" is much easier to understand. I guess that the button label reflects the way this option is programmed (with a hide == true and not with show == false).

Mazi

Mazi

2019-11-01 09:35

updater   ~54306

Last edited: 2021-02-07 20:37

@f_funke: I second those thoughts. The new release is nearly ready but that would be the perfect option to adjust things like this. So please bribe the development team with some beers to put some more effort into adjusting this.

Mazi

Mazi

2020-02-25 09:05

updater   ~56195

Last edited: 2021-02-07 20:37

@cdorin, I just created this ticket (https://bugs.limesurvey.org/view.php?id=15913) which is a child of the given ticket here.
Since this is considered a regression and the colors are really misleading, please add this ticket to the next sprint.

c_schmitz

c_schmitz

2021-03-09 21:08

administrator   ~62982

The color (font and background) of the enabled state button should be the one from the normal ok button . (for the button groups)
In another task later we will unify the switches (which use green and red) to use the same button groups.

DenisChenu

DenisChenu

2021-03-17 10:54

developer   ~63398

The color (font and background) of the enabled state button should be the one from the normal ok button . (for the button groups)

Info color ? Or primary color ?

The color (font and background) of the enabled state button should be the one from the normal ok button . (for the button groups)

If user have color issue : maybe we need to add a font awesome element ?

JHoeck

JHoeck

2021-03-17 13:52

reporter   ~63403

Info color ? Or primary color ?
Success Color.

DenisChenu

DenisChenu

2021-03-17 14:24

developer   ~63405

Why ? I think info is better : why it's better to show slider in reverse position ? Why it's a success ?

And if it's better : why it's dangerous to say at default (No) ?

JHoeck

JHoeck

2021-03-18 09:40

reporter   ~63422

Carsten decided first to use the normal ok button color. And that's success.

DenisChenu

DenisChenu

2021-03-18 09:40

developer   ~63423

OK :)

c_schmitz

c_schmitz

2021-03-18 09:51

administrator   ~63424

Yeah, question would be rather why the OK buttons have success color.

If I Look at Boostrap color theme explanations at https://getbootstrap.com/docs/3.3/css/#buttons
they should have 'Primary' color.

But that is another problem :-)

JHoeck

JHoeck

2021-03-23 16:10

reporter   ~63576

Last edited: 2021-03-23 16:13

Branch: bug/14984-admin-backend-color-of-selected-options-is-confusing

Changed the background color to the color of the selected theme. Green would be too 'hard' for the eyes. Consider, you would select an blue colored theme - then it would break the UI, if I only changed the color to green (primary). So its now 'smoother' for your eyes.

Please check out my branch, if you want to test it.

DenisChenu

DenisChenu

2021-03-23 16:20

developer   ~63577

Green would be too 'hard' for the eyes.

It's not a question of smoother ;: it's a question of meaning …
text-success : green
text-danger : red

https://bootswatch.com/united/

JHoeck

JHoeck

2021-03-23 16:25

reporter   ~63578

So its a question of usability - red and green would be confusing in a blue theme. Check out the branch and you will see. Its better than only red or green. Now you really see that active button is really activated. Its not like before ;)

DenisChenu

DenisChenu

2021-03-23 16:26

developer   ~63579

:+1: for default color

Then in question advanced settings : replaced by default button ?

DenisChenu

DenisChenu

2021-03-23 16:27

developer   ~63580

PS : sometimes rev VS green can be great : Filter HTML for XSS or Force HTTPS etc …

JHoeck

JHoeck

2021-03-23 16:32

reporter   ~63581

Then we would need alternatives for every theme - which should look also good - and which dont break the UI/UX. But this is something for later - I will add this to my task list. Thanks :)

DenisChenu

DenisChenu

2021-03-23 16:46

developer   ~63582

Then we would need alternatives for every theme

No just use boostratp default success / danger / warning / info / primary

about chjecked VS not checked : seems more a global boostrap issue (see https://bugs.limesurvey.org/view.php?id=14984#c54287 comemnt)

Maybe we can update btn color at same time we add/remove the active button ?

DenisChenu

DenisChenu

2021-03-23 16:47

developer   ~63583

btn-info clearer sample (with Green/default at install)

DenisChenu

DenisChenu

2021-03-23 16:53

developer   ~63584

BS5 : https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups
BS3 : https://getbootstrap.com/docs/3.3/components/#btn-groups

button clean difference is more a BS issue

Issue History

Date Modified Username Field Change
2019-06-16 16:34 f_funke New Issue
2019-06-16 16:34 f_funke File Added: Colors_for_switches_190616.png
2019-06-17 08:00 DenisChenu Note Added: 52423
2019-06-17 08:34 f_funke Note Added: 52424
2019-06-17 08:48 DenisChenu Note Added: 52425
2019-06-17 09:49 DenisChenu File Added: Capture d’écran du 2019-06-17 09-44-40.png
2019-06-17 09:49 DenisChenu File Added: Capture d’écran du 2019-06-17 09-44-51.png
2019-06-17 09:49 DenisChenu File Added: Capture d’écran du 2019-06-17 09-48-37.png
2019-06-17 09:49 DenisChenu Note Added: 52426
2019-06-17 09:50 DenisChenu Note Added: 52427
2019-07-11 12:03 cdorin Assigned To => markusfluer
2019-07-11 12:03 cdorin Status new => assigned
2019-07-12 11:08 markusfluer Note Added: 52860
2019-07-12 11:23 DenisChenu Note Added: 52861
2019-07-12 11:25 DenisChenu Note Edited: 52861
2019-07-12 11:25 DenisChenu Note Edited: 52861
2019-07-12 11:39 markusfluer Note Added: 52862
2019-08-05 11:49 f_funke Note Added: 53093
2019-08-05 16:13 markusfluer Note Added: 53109
2019-10-30 19:52 Mazi Issue Monitored: Mazi
2019-10-30 19:56 Mazi Note Added: 54286
2019-10-30 20:23 f_funke File Added: grafik.png
2019-10-30 20:23 f_funke Note Added: 54287
2019-10-30 21:53 DenisChenu Note Added: 54288
2019-10-30 23:17 Mazi Severity minor => crash
2019-10-30 23:17 Mazi Note Added: 54292
2019-11-01 09:32 f_funke Note Added: 54305
2019-11-01 09:35 Mazi Note Added: 54306
2020-02-25 08:19 DenisChenu Assigned To markusfluer =>
2020-02-25 08:19 DenisChenu Status assigned => new
2020-02-25 08:19 DenisChenu Relationship added related to 15913
2020-02-25 09:05 Mazi Note Added: 56195
2021-02-07 20:37 cdorin Priority none => urgent
2021-02-07 20:37 cdorin Status new => confirmed
2021-02-07 20:37 cdorin Sync to Zoho Project => |Yes|
2021-02-11 18:55 ollehar Severity crash => tweak
2021-02-11 18:55 ollehar Sync to Zoho Project Yes => |Yes|
2021-03-04 16:55 ollehar Priority urgent => normal
2021-03-04 16:55 ollehar Sync to Zoho Project Yes => |Yes|
2021-03-09 21:00 c_schmitz Relationship added has duplicate 17170
2021-03-09 21:08 c_schmitz Note Added: 62982
2021-03-09 21:09 c_schmitz Relationship added related to 17171
2021-03-09 21:09 c_schmitz Relationship deleted related to 17171
2021-03-09 21:09 c_schmitz Relationship added has duplicate 17171
2021-03-17 10:49 JHoeck Assigned To => JHoeck
2021-03-17 10:49 JHoeck Status confirmed => assigned
2021-03-17 10:50 JHoeck Status assigned => confirmed
2021-03-17 10:54 DenisChenu Note Added: 63398
2021-03-17 13:52 JHoeck Note Added: 63403
2021-03-17 14:24 DenisChenu Note Added: 63405
2021-03-18 09:40 JHoeck Note Added: 63422
2021-03-18 09:40 DenisChenu Note Added: 63423
2021-03-18 09:51 c_schmitz Note Added: 63424
2021-03-23 16:10 JHoeck Status confirmed => resolved
2021-03-23 16:10 JHoeck Resolution open => fixed
2021-03-23 16:10 JHoeck Note Added: 63576
2021-03-23 16:13 JHoeck Note Edited: 63576
2021-03-23 16:20 DenisChenu Note Added: 63577
2021-03-23 16:25 JHoeck Note Added: 63578
2021-03-23 16:26 DenisChenu Note Added: 63579
2021-03-23 16:26 DenisChenu File Added: Capture d’écran_2021-03-23_16-25-30.png
2021-03-23 16:27 DenisChenu Note Added: 63580
2021-03-23 16:32 JHoeck Note Added: 63581
2021-03-23 16:46 DenisChenu Note Added: 63582
2021-03-23 16:46 DenisChenu File Added: Capture d’écran_2021-03-23_16-45-13.png
2021-03-23 16:46 DenisChenu File Added: Capture d’écran_2021-03-23_16-45-32.png
2021-03-23 16:47 DenisChenu File Deleted: Capture d’écran_2021-03-23_16-45-32.png
2021-03-23 16:47 DenisChenu Note Added: 63583
2021-03-23 16:47 DenisChenu File Added: Capture d’écran_2021-03-23_16-47-11.png
2021-03-23 16:53 DenisChenu Note Added: 63584
2021-03-29 12:39 c_schmitz Fixed in Version => 4.4.15
2021-03-29 12:39 c_schmitz Status resolved => closed
2021-03-29 14:04 JHoeck Relationship added child of 17213