New UX style and accessibility

[frankystone]

While the latest changes to dev regarding the UI are appreciated, in my opinion they make the UI in current state more worth than better. They work well for people which are used to use QMS, but especially new users may have trouble with the new UI. The main reasons:

• The UI looks a bit cluttered now, with different styles and sizes of some images
• Some images in the workspace and database windows are visually images, although they are Buttons. Some images do nothing with a single click, others activates something.
• The right images on a project's name:
  • The yellow star acts sometimes like a button (if the project is selected), the other time showing just the status if the project is active. So there is a mix of buttons and status indicator. This is not consistent.
  • They are too small: I can't see if they are buttons or are just images (status indicators)
• The Eye button: Enabling a map or a project will add a bluish background to the button which reduces contrast.
• In general images are nice to look at, but are problematic for visually impaired people.

When i started using QMS the UI was really good, self explaining. E.g. in the database window the entries had checkboxes, clearly indicating one can enable an entry. Now one has to click on a "washed-out" image, which content is not related to anything (on first sight i couldn't even say what this image shows).

Suggestions:

• Database window
  • Exchange the earth-map image "button" with the one which is used also in the map window (the Eye with rounded border): Same action = same button
• Workspace window
  • Make the new buttons (on the right of a projects name) much bigger. If they cover the projects name it should not matter, imho.
  • Make the yellow star also a button when the project is not selected. If there is a row of buttons there should be all buttons.
• Eye-button
  • Remove the bluish background: In my opinion the difference between a crossed out eye and a non crossed out eye is sufficient.

Other opinions are welcome.

[kiozen]

You mix UI issues of your window manager with UX stuff of QMS.

Some images in the workspace and database windows are visually images, although they are Buttons. Some images do nothing with a single click, others activates something.

No, they are not. Everything that is clickable is rendered as a button (unless I forgot to use the tool button render function, then it's a bug ). However it depends on your window manager's style how a button is rendered. If the style renders is a a flat rectangle with no frame, than there is no difference to an icon.

The yellow star acts sometimes like a button (if the project is selected), the other time showing just the status if the project is active. So there is a mix of buttons and status indicator. This is not consistent.

Imho the UI it looks cleaner if the star is an indicator as long as the project is not in focus. But if a lot of users complain we can change it.

They are too small: I can't see if they are buttons or are just images (status indicators)

The button size follows the font size. If you can read the strings you should be able to see the buttons well enough. My eye sight is not the best. That is why I have increased the font size of my whole system by factor 1.3. By that I can easily read top and bottom line of each item. The buttons increase size with the font and are therefore enlarged by the same factor.

We can't really make them as large as the map/dem and database buttons. If we would do they do not fit and only the visibility button could be implemented. Alternatively they could be e.g. 1.5 the size of the top line. But this will look quite unaligned.

If you think different, adapt the code to what you prefere and present it. If the majority likes it we can integrate it.

The Eye button: Enabling a map or a project will add a bluish background to the button which reduces contrast.

This is done by your window manager's style. The only thing QMS does is telling the button is enabled and pressed. The rest is done by Qt's internal render code adhering to the the style defined by your system. If you don't like it you have to switch the color theme of your system to a more contrast based one. This is one of the first things I usually do.

Exchange the earth-map image "button" with the one which is used also in the map window (the Eye with rounded border): Same action = same button

It's not the same action at all. It does not control visibility. It controls what item is loaded in the workspace. And in the workspace the visibility is controlled. Besides that this is a 3 state checkbox button. The visual button is a 2 state toggle button.

And please stop ranting about icons. Provide good ones. Everything else is not productive and will change nothing.

[frankystone]

Thanks for your detailed answer.

First of all i do not want to rant anything, neither the icons nor the incredible work you and others spend to improve this project. And i don't want to attack someone personally. I know that criticism is much easier done than doing.

Some images in the workspace and database windows are visually images, although they are Buttons. Some images do nothing with a single click, others activates something.

No, they are not. Everything that is clickable is rendered as a button (unless I forgot to use the tool button render function, then it's a bug ).

For me in the database window they look like images, not buttons:

I wonder if this is also related to my desktops style definitions.

They [the buttons on right of a projects name] are too small: I can't see if they are buttons or are just images (status indicators)

The button size follows the font size. If you can read the strings you should be able to see the buttons well enough. My eye sight is not the best. That is why I have increased the font size of my whole system by factor 1.3. By that I can easily read top and bottom line of each item. The buttons increase size with the font and are therefore enlarged by the same factor.

So if one part in one application is too small, the solution is to increase the overall font size which affects all applications?

The Eye button: Enabling a map or a project will add a bluish background to the button which reduces contrast.

This is done by your window manager's style. The only thing QMS does is telling the button is enabled and pressed. The rest is done by Qt's internal render code adhering to the the style defined by your system. If you don't like it you have to switch the color theme of your system to a more contrast based one. This is one of the first things I usually do.

Ok, i did not considered this and you are right.

Exchange the earth-map image "button" with the one which is used also in the map window (the Eye with rounded border): Same action = same button

It's not the same action at all. It does not control visibility. It controls what item is loaded in the workspace. And in the workspace the visibility is controlled. Besides that this is a 3 state checkbox button. The visual button is a 2 state toggle button.

Ok, a developer vs. user issue. For a user, like me, activating a map (loading into map view) is the same action than activating a project, or parts of it, (loading into workspace). For a developer there is a technical difference.

Please do not understand my post as a general criticism against anyone, or the project. This is just my personal view of things. And yes, if i dislike something i will try to provide a solution. There is just the fear spending a lot of work into something which might get rejected (i did a lot of things wrong already).

[kiozen]

This is how buttons are rendered on my system:

There are indeed styles that draw buttons as frameless icons. But that should apply to all buttons. As said, the Code of QMS does not render the button directly. It calls the Qt API and asks to draw a button.

So if one part in one application is too small, the solution is to increase the overall font size which affects all applications?

I just wonder how you guys are able to read that small font sizes but have problems to see buttons with the same size. I can't.

And yes, if i dislike something i will try to provide a solution. There is just the fear spending a lot of work into something which might get rejected (i did a lot of things wrong already).

Well this is the risk of anyone else, too. No matter if it is me or you. The result might not be liked by others. But that is the only way for a productive discussion. I think we both know Herr Sollteman and Frau Müssteman. Both never solved anything in their life.

The code to size and place all visual elements for a project is in CWksItemDelegate::getRectanglesProject(). Button size is defined by

  const int buttonWidth = fmName.height();
  const int buttonHeight = buttonWidth;

If you increase height the buttons will collide with rectStatus. Therefore you have to adjust it similar to what is done for rectName.

In CWksItemDelegate and CDBItemDelegate you find all names of the icons used. You will find the SVG files in src/icons . On Linux you can use

cd src/icons
./makeicons <iconname.svg>

to render an icon as 32x32 and 48x48 PNG. On any other OS you have to export the PNGs manually via Inkscape.

So you can easily get creative and play with all sizes and icons. If you think you found a good solution push it to a branch in your forked repository and ask for testing.