Improve the look of our data tables and of our report pages in general #7090
Comments
tsteur
added
the
Enhancement
tsteur
added
the
c: Design / UI
|
for me alternate colors makes sense in a scenario of a blog post where readers post comments and alternate color makes it easy to distinguish different commentators. In piwik alternate colors in tables equals for me with unnecessary clutter and distraction.. plus it hurts my eyes to have several tens of rows each with alternate color in a single view on-screen (on blog comments there are just 2-3 such comments, not tens).. so yes, solid block for each table is way cleaner |
|
Nice suggestion, but let's wait few weeks as we are working on new designs with Left Menu, better admin area, etc. so we will revisit this when we get the new mockup designs. |
|
The left menu will most likely take a couple of months, or not? And most likely the left menu won't change the look of the datatables etc, will it? If you don't want to change it ok but think the current look definitely needs to be changed and can be done independently of the left menu. At least exploring whether there's a quick fix that would make it better. |
|
Adding If you reading this have some opinion or design skills please comment :) |
|
"The contrast is high and the grey & white color are both used in other UI elements so that in my mind everything looks "loose". It is sometimes hard to see what belongs together and what not." I'm gonna make an argument that it looks loose, because you did't implement our design in 100%. It's something that Matt was strongly against. We wanted to encapsulate everything in tables, as on the dashboard page - without that it just looks muddled. This is how we envisioned subpages.
As for the zebra tables it was something that you've used and is very helpful for finding a row value in a long table. I would advise not to remove it, maybe lighten the background a little bit, or make it a setting. This is how it would look like more or less...
|
|
Personally, I don't like the boxes so much either and would rather not want to have them outside of the dashboard area. It looks a bit "heavy" and "bloated". Maybe a "lighter" / "cleaner" version of it would work when having a left menu. Think some apps or OS like iOS 7/8 show that it should be possible to abandon some "lines". Also I think the alternate color white/grey (zebra tables) still looks a bit muddled even encapsulated and it is for my eyes (or with my display) sometimes often hard to identify which values belong to which row. Maybe using another grey for the white background would help a bit as you mentioned. |
|
We need a better / flatter / simpler table design for 2.14.0 (or at latest for 3.0.0). Suggested requirements:
|
* no zebra background color: all rows have white background * almost no border, and border are very light * have a light background color to differentiate it from the data rows * make the header labels vertically aligned middle * on hover on a row, apply light background color to this row * make metrics right aligned
|
I reckon we need to contact designers re an icon? That's so far my understanding after #7618 . I looked for some icons online but didn't find quickly enough something that would fit and can be used re the license. |
|
Regarding the icon maybe such simple icon (font awesome) would work: http://fortawesome.github.io/Font-Awesome/icon/plus-square-o/ Hi @lemu do you already maybe have a flat icon to replace https://cloud.githubusercontent.com/assets/466765/8123584/6d961998-1120-11e5-9ccb-5e57a827d3c5.png ? |
|
I was looking for such icon but didn't find any apart from the one in FontAwesome |
* no zebra background color: all rows have white background * almost no border, and border are very light * have a light background color to differentiate it from the data rows * make the header labels vertically aligned middle * on hover on a row, apply light background color to this row * make metrics right aligned
* no zebra background color: all rows have white background * almost no border, and border are very light * have a light background color to differentiate it from the data rows * make the header labels vertically aligned middle * on hover on a row, apply light background color to this row * make metrics right aligned
I'm getting a bit distracted / annoyed by our alternate color in datatables (
grey / white / grey / white). The contrast is high and the grey & white color are both used in other UI elements so that in my mind everything looks "loose". It is sometimes hard to see what belongs together and what not. It reminds me rather of a circus than anything else. See eg. attached screen:I just played a bit around and by removing the alternate color and I think it looks already much cleaner IMO.
Even the headlines and controls are much easier to identify etc. But it is no longer as easy possible to distinguish between the rows (bad for UX). To solve this we could maybe highlight the current row on hover and we could use a slight border below each row. Alternatively we could maybe not alternate between
grey / whitebut betweengrey / light greyor so... I'm not a designer! On the other side I think it is even hard right now to distinguish between the rows as the white is also the background color and because of the high contrast ofwhite / grey with blue link colorin Actions => Pages.If anyone has a nice idea how to make it nicer please comment. Also maybe some people like the current way then please comment as well
Maybe we could even find a solution that also works for other pages such as "Devices Detection" and "System Check" which both already use a similar approach. It could be nice to make it consistent.
The text was updated successfully, but these errors were encountered: