Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Small design tweaks to apply #8035

Closed
3 tasks done
mattab opened this issue Jun 3, 2015 · 16 comments
Closed
3 tasks done

Small design tweaks to apply #8035

mattab opened this issue Jun 3, 2015 · 16 comments
Assignees
Labels
c: Design / UI For issues that impact Matomo's user interface or the design overall. not-in-changelog For issues or pull requests that should not be included in our release changelog on matomo.org.
Milestone

Comments

@mattab
Copy link
Member

mattab commented Jun 3, 2015

This issue aims to collect small feedback about UI & design:

  • Notification should have higher contrast Notification messages have too low contrast after redesign #7943
  • In admin forms, website selector should be to the right of the label (Got: below the label)
    form website selector could be to the right of the label
  • In admin forms, when displaying warning notifications, maybe we could show the warning notification as part of the form so that its width would be limited to 50% rather than 100%?

What we got does not look ideal imho:
form warning too wide

  • Segment editor search field has extra border on Chrome:

form search looks wrong

Looks broken on Firefox:
form broken search
Feel free to add here any other design 'regression' or improvements that should be made before 2.14.0 👍

@mattab mattab added not-in-changelog For issues or pull requests that should not be included in our release changelog on matomo.org. c: Design / UI For issues that impact Matomo's user interface or the design overall. labels Jun 3, 2015
@mattab mattab added this to the 2.14.0 milestone Jun 3, 2015
@mnapoli mnapoli self-assigned this Jun 3, 2015
@mnapoli
Copy link
Contributor

mnapoli commented Jun 3, 2015

I cannot reproduce this one:

Do you still see it?

Problems with this text field should be fixed now:

@mnapoli
Copy link
Contributor

mnapoli commented Jun 3, 2015

For this one:

The problem is that the label + the select are wider than the left column (left column = fields, right column = help boxes). So I don't really see a solution for that.

@mattab
Copy link
Member Author

mattab commented Jun 5, 2015

The problem is that the label + the select are wider than the left column (left column = fields, right column = help boxes). So I don't really see a solution for that.

@mnapoli when there is enough space to fit both,

  • Got: stacked.
  • Expected: could fit on line?

Example on wide screen:

enough space

@mattab
Copy link
Member Author

mattab commented Jun 5, 2015

  • When anonymous can view statistics for a website, display the message in a "Warning" info box. Got: the notification is displayed in normal black font on white background. Expected: warning alert about the Note: [...] notification

anonymous

@mattab
Copy link
Member Author

mattab commented Jun 5, 2015

I cannot reproduce this one:
Do you still see it?

My bad, this is not a bug actually (I had created a new Segment locally in a file causing this extra empty category to display)

Problems with this text field should be fixed now

👍

mnapoli added a commit that referenced this issue Jun 5, 2015
@mnapoli
Copy link
Contributor

mnapoli commented Jun 5, 2015

I have changed the alerts:

capture d ecran 2015-06-05 a 16 05 54

I have fixed some other things listed here.

@mnapoli
Copy link
Contributor

mnapoli commented Jun 5, 2015

I've given another try to this:

This is just too messy to make it on one line (mostly the vertical aligning of the checkbox + text + site selector). I don't believe it's worth inserting so many hacks for something that will not look good visually. If you want to give it a try feel free but I'll leave it as it is.

Except that all other points should be fixed now.

@mattab
Copy link
Member Author

mattab commented Jun 8, 2015

I have changed the alerts:
I have fixed some other things listed here.

it looks good!

I don't believe it's worth inserting so many hacks for something that will not look good visually. If you want to give it a try feel free but I'll leave it as it is.

if it's hard to solve then +1 to skip it for now, it was a small feedback and not "required"

@mattab
Copy link
Member Author

mattab commented Jun 8, 2015

I tried to test all features manually, here is additional feedback:

  • H1 style in our UI demo page, looks out of place. Can we set a better H1 style? I guess it's not used anywhere beside this UI demo page, but it's good enough reason to improve it :-)

Current H1 style in UI demo:

h1 style looks wrong

  • SMS settings page is not yet themed with the new admin style:

sms configuration

  • Device detection table in Admin: could it be themed with new style?

device detection table

  • JavaScript Tracking code: Custom variable Name/Value labels are not themed. Got: bold text. Expected: "Name"/"value" to maybe use the same style as "campaign name parameter" / "campaign keyword parameter" below?

js code cvar not style

  • Similarly the Image Tracking Code > Track a goal is not styled.
    image tracking with optional revenue
    • Maybe the $ sign could be put to the right of the input field as you did for the general settings Seconds:
      seconds
  • Would it make sense to have a different style for the Input set as Disabled? eg for the username input, Expected: maybe background color?. Got: looks like a normal input field.

disabled input

(some of these refs #7587)

@mattab
Copy link
Member Author

mattab commented Jun 8, 2015

Note, a regression in JS Tracking Code:

  • JS Tracking Code > Advanced > "Track Custom variables for this visitor", does not work. The values are not set in HTTP request:

js tracking code advanced custom variables are not set in http requests

@mnapoli
Copy link
Contributor

mnapoli commented Jun 8, 2015

@mattab all points should be addressed now. FYI the "disabled fields" where styled (since the forms redesign) but it was lost in a regression -> fixed.

For this:

I have changed the style to this:

capture d ecran 2015-06-08 a 17 09 20

@mattab
Copy link
Member Author

mattab commented Jun 9, 2015

👍

New points:

  • JS Tracking Code > Advanced > "Track Custom variables for this visitor" -> set Name to hello"world -> in the JS code Expected to get "hello\"world", Got instead: "hello"world"
  • Website Manager > When clicking on Next/Previous button, the whole table jumps. We need to avoid this screen jump. There are two places where we display "Loading...". One is above Next button and one is below the button and above the websites table. Could we only display the Loading... at the top of the buttons to prevent the jump?

extra loading

  • All Websites dashboard. In the first row, last column "Evolution", could we make the metric SELECTor vertically aligned with the "Evolution" column name? Expected: vertical aligned, Got instead the SELECT Is kinda below the text:

align evolution visites

@mattab
Copy link
Member Author

mattab commented Jun 9, 2015

  • When creating a new custom dashboard, Got: one label is displayed below the Radio box. Expected: label displayed on same line as radio box:

creating new dashboard popover

@mnapoli
Copy link
Contributor

mnapoli commented Jun 15, 2015

Regarding this:

JS Tracking Code > Advanced > "Track Custom variables for this visitor" -> set Name to hello"world -> in the JS code Expected to get "hello\"world", Got instead: "hello"world"

This is an unrelated issue that has nothing to do with the redesign. Let's stay on topic and open these in separate tickets. I created #8109 for this.

@mattab
Copy link
Member Author

mattab commented Jun 17, 2015

This is an unrelated issue that has nothing to do with the redesign. Let's stay on topic and open these in separate tickets.

👍

If anyone notices a UI element not displayed correctly let us know! As far as I can see, it looks all good now.

@mnapoli
Copy link
Contributor

mnapoli commented Jun 17, 2015

For the record I'll update the UI screenshots now, I forgot to do that yesterday while waiting for the build

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
c: Design / UI For issues that impact Matomo's user interface or the design overall. not-in-changelog For issues or pull requests that should not be included in our release changelog on matomo.org.
Projects
None yet
Development

No branches or pull requests

2 participants