Opened 2 years ago

Closed 5 days ago

#3093 closed Task (fixed)

Make Dashboard widgets more readable and less busy-looking

Reported by: matt Owned by: tsteur
Priority: critical Milestone: 2.x - The Great Piwik 2.x Backlog
Component: UI - UX (AngularJS, twig, less) Keywords:
Cc: Sensitive: no

Description (last modified by matt)

The Piwik dashboard is very useful and practical, but it can be a daunting for a first time user.

Each dashboard widget shows footer icons, pager, ... but they are usually rarely used. Especially since we store changes in the database and apply them when opening the dashboard again. Therefore we want to hide the widget footer by default but give users the possibility to "expand" the footer. Some reports that provide further controls should be able to add controls to this by default hidden footer to hide complexity. It's up to each report to define useful default values.

Also made the dataTable and All Websites Dashboard look nicer. For instance removed some borders.

Attachments (2)

lights switched off dashboard.png (186.8 KB) - added by matt 2 years ago.
example simpler dashboard design with only 3 css changes
piwik-lights-off.png (153.4 KB) - added by greg 15 months ago.

Download all attachments as: .zip

Change History (16)

Changed 2 years ago by matt (mattab)

example simpler dashboard design with only 3 css changes

comment:1 Changed 2 years ago by JulienM (JulienMoumne)

Great idea

Shouldn't this be built as a theme ? #177

comment:2 Changed 2 years ago by matt (mattab)

  • Priority changed from normal to major

Maybe a bit too simple use case for a theme.

But maybe even better... Could we simplify the Piwik design such as in the screenshot by default for all dashboards? (and not make it an option)

Note: the widget border and bar would still display on hover on the datatable.

comment:3 Changed 23 months ago by matt (mattab)

In fact we could even

  • hide the Piwik logo
  • move up the whole screens & reports and save many pixels!
  • show the top menu on hover only (show with 50%opacity otherwise ?)

These changes + the clarification / opacity of the dashboard widgets would basically make a nice "full screen" piwik experience.

See also suggestion post at: http://sfew.websitetoolbox.com/post/Web-Analytics-Dashboard-for-Review-5932963

Icon could be: http://www.iconfinder.com/icondetails/8809/32/idea_light_bulb_power_icon and http://www.iconfinder.com/icondetails/3474/32/idea_light_bulb_tip_icon

or http://www.iconfinder.com/icondetails/54428/32/lightbulb_icon and http://www.iconfinder.com/icondetails/59272/32/lightbulb_icon

comment:4 Changed 22 months ago by matt (mattab)

  • Milestone changed from 1.x - Piwik 1.x to 1.9 Piwik 1.9

comment:5 Changed 21 months ago by matt (mattab)

  • Owner set to capedfuzz

What do you think about this?

comment:6 Changed 20 months ago by matt (mattab)

  • Milestone changed from 1.9 Piwik 1.9 to 1.8.x - Piwik 1.8.x

Changed 15 months ago by greg (gka)

comment:7 Changed 13 months ago by matt (mattab)

  • Milestone changed from 1.12.x - Piwik 1.12.x to 2.x - Piwik 2.x

comment:8 Changed 13 months ago by halfdan

This is beautiful and will look even more beautiful when combined with a vertical menu (which I'll be working on for 2.x).

comment:9 Changed 8 months ago by matt (mattab)

  • Milestone changed from 2.x - Piwik 2.x to Future releases

Not as important now that we will have ability to easily theme piwik #3942

comment:10 Changed 2 months ago by matt (mattab)

  • Owner capedfuzz deleted

comment:11 Changed 2 weeks ago by matt (mattab)

  • Milestone changed from Future releases to 2.x - The Great Piwik 2.x Backlog
  • Summary changed from Allow to "switch off the lights" to have a UI preference to show less colored pixels to focus on data to Make UI more readable and less busy-looking

comment:12 Changed 6 days ago by matt (mattab)

  • Description modified (diff)
  • Owner set to tsteur
  • Priority changed from major to critical

reduced scope of ticket

Fixed in: https://github.com/piwik/piwik/pull/260

If you have more ideas on how we can make Piwik more usable and looking simpler, please let us know!

Your feedback is welcome

comment:13 Changed 6 days ago by matt (mattab)

  • Summary changed from Make UI more readable and less busy-looking to Make Dashboard widgets more readable and less busy-looking

comment:14 Changed 5 days ago by matt (mattab)

  • Resolution set to fixed
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.