Opened 4 years ago

Closed 4 years ago

#1154 closed New feature (fixed)

Mockups of new design for the Piwik UI (dasboard, tables, graphs)

Reported by: matt Owned by:
Priority: critical Milestone: Piwik 0.6.4
Component: UI - UX (AngularJS, twig, less) Keywords:
Cc: Sensitive: no

Description (last modified by matt)

Here are some proposal mockups of how the next Piwik UI could look like. This is just a proposal and can be used as the base of a discussion around the future of Piwik UI.

The Piwik team currently doesn't have an html/css/UI/usability specialist so these mockups will not be implemented until someone joins the project and work with us to implement a new design.

There are various elements that have been redesigned in this proposal:

  • Main menus
  • Top menu (with language selector)
  • Website selector
  • Widget
  • Tables (prev, next, first, last)
  • Graphs styles was updated
  • Icons to export in other formats or show other views have been updated and appear on top of the table
  • Widget selector
  • Date selector

We would like to open the discussion on what the next Piwik UI should look like. We would love to welcome UI specialists on the Piwik team to help work on an exciting new design.

Please let us know your feedback in the comments.

Attachments (6)

Dashboard overview with website selector.png (157.3 KB) - added by matt 4 years ago.
Dashboard overview with widget selector.png (140.7 KB) - added by matt 4 years ago.
Dashboard overview.png (132.6 KB) - added by matt 4 years ago.
Menu and top of the page.png (41.5 KB) - added by matt 4 years ago.
Report page.png (42.8 KB) - added by matt 4 years ago.
PSD.zip (2.9 MB) - added by matt 4 years ago.
PSDs files for all mockups

Change History (25)

Changed 4 years ago by matt (mattab)

comment:1 Changed 4 years ago by matt (mattab)

  • Description modified (diff)

comment:2 Changed 4 years ago by vipsoft (robocoder)

Who did the mockups? ps I like the new logo. Is that a kiwi bird?

comment:3 Changed 4 years ago by matt (mattab)

The mockups were done by Marcin Gałęski (website http://www.gigstudio.pl/)

No the bird is not a kiwi bird, even though this was probably the intent of putting a bird in the logo :) Kiwi birds don't have a tail as depicted in the logo. http://en.wikipedia.org/wiki/Kiwi

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

  • Priority changed from major to critical

Changed 4 years ago by matt (mattab)

PSDs files for all mockups

comment:5 Changed 4 years ago by matt (mattab)

Added PSD files for the mockups. Note that we still need to make modifications to these mockups before they can be implemented. Particularly, we would want to mockup close to 100% of the use cases found in the Piwik reporting UIs.

comment:6 Changed 4 years ago by matt (mattab)

  • Milestone changed from Features requests - after Piwik 1.0 to 5 - Piwik 1.0 - Stable release

Moving this to 1.0 milestone, as UI developers will help with the implementation of the mockups in Piwik!

comment:7 Changed 4 years ago by kaystrobach

i join from the discussion on #1048

The mockups look much better, than the current interface. -> a good step forward.

But i would like to see, that a standard UI library like extjs[1] is used for the interface. In my opinion that will make it easier to make styleguide for the piwik ui.
ExtJS is great styleable with CSS so that we can start development without thinking on the later style, but can do that with a stylesheet later ;).

[1] http://www.extjs.com/products/js/?ref=learnmorebluebutton

comment:8 Changed 4 years ago by sect2k

Before I go into any further discussions on the matter, I have one simple question for the powers that be.

What is the purpose of this new design? Or if I rephrase it; What is it that you want to achieve by doing this redesign?

If your answer is "we want to make it look prettier", than you are on the right track. If on the other hand your answer has more to do with making piwik a more usable, feature rich and more kickass (and I say more kickass, beacuse it already is kickass product) all around, than your approaching this from the wrong end, but more on that later.

comment:9 Changed 4 years ago by matt (mattab)

sect2k, the main idea was to make it look prettier, more professional, keeping a similar feature set (ie. low development cost appart from the css/html conversion).

However, if there are low cost new features / improvements that we can make at the same time, that would improve the user experience, user happiness and / or usability, we would definitely consider them. Please let us know what you had in mind in particular?

comment:10 Changed 4 years ago by amnigos

@Matt - This is a much needed thing for giving a boost to Piwik UI. Can't wait for Piwik 1.0 release :), Just curious on any ETA for Piwik 1.0?

comment:11 Changed 4 years ago by kaystrobach

Portal Example with extJS
http://www.extjs.com/deploy/dev/examples/portal/portal.html

Menus
http://www.extjs.com/deploy/dev/examples/menu/menus.html
http://www.extjs.com/deploy/dev/examples/toolbar/toolbars.html

Tabs
http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html

Charts without Flash:
http://www.extjs.com/deploy/dev/examples/chart/charts.html
http://www.extjs.com/deploy/dev/examples/chart/reload-chart.html
http://www.extjs.com/deploy/dev/examples/chart/stacked-bar-chart.html
http://www.extjs.com/deploy/dev/examples/chart/pie-chart.html

With these three widgets it would be possible to build a greate easily styleable absolute userfriendly interface.
I used this library as user in opengoo/tine20/typo3 and as programmer in some other projects.

You just need to define the widgets and their orientation and extjs is building the complete html ;)

Please think about about changing the UI lib just to make piwik a more standard UI project. If you implement it nice, it would be also possible to create an adobe air version directly from the same JS ;) - cool ah ;)

http://www.extjs.com/products/js/?ref=learnmorebluebutton

Best regards
Kay

comment:12 Changed 4 years ago by vipsoft (robocoder)

Kay: I agree that jquery-ui isn't as feature rich as other widget libs such as extjs, but switching ui frameworks at this point is non-trivial, and using two incompatible ui libraries in the code would add complexity, possible inconsistency, and increase page load times.

Let's stick to the look & feel here, and postpone the toolkit discussion for post-1.0.

comment:13 Changed 4 years ago by kaystrobach

agree

comment:14 Changed 4 years ago by kaystrobach

another problem with the mockups is, that they are not as easy to visually integrate in cms systems as a simple menu on top.

The moockups are nice if you take piwik as a standalone application. But not as a tool that's integrated in other software.
This integration should be as easy as possible to spread piwik all over opensource cms world!

@ExtJS
ExtJS can use jQuery as base library - with that in mind you can make a progressive enhancement.
Oh an ExtJS has a cool skinning ability and there are also objects to create portals. And letting flash die is also nice.

Just some thoughts ... feel free to reply.

Best regards
Kay

comment:15 Changed 4 years ago by matt (mattab)

(In [2517]) Refs #1154 Merging branch back into trunk. Great work from Stepan Sukharyna Refs #1154 Merging branch back into trunk. Great work from Stepan Sukharyna !!!
(Based on Marcin Gałęcki mockups
More small changes/fixes to come

comment:16 Changed 4 years ago by SteveG (sgiehl)

great work with the new layout.

note: there are still some words within the period/date chooser not using the translations.

comment:17 Changed 4 years ago by vipsoft (robocoder)

  • Milestone changed from 4 - Piwik 1.0 - Stable release to 0 - Piwik 0.6.4

comment:18 Changed 4 years ago by vipsoft (robocoder)

On a fresh install using the latest rev (2544), Firefox Error Console reports (twice)

'nb_visits' is undefined

comment:19 Changed 4 years ago by matt (mattab)

  • Resolution set to fixed
  • Status changed from new to closed

All bugs fixed, see for follow up in #1490

Updated contributors at http://piwik.org/the-piwik-team/

Note: See TracTickets for help on using tickets.