UPDATE: New design has been released in Matomo!!!
click here for more information
Over the last 2 years, the Matomo (Piwik) User Interface has not changed much in terms of design.
We are now excited to announce that the time has come to give Matomo a makeover – a new and improved look and feel designed to meet the following objectives:
- The new design should make Matomo more appealing and give it a more modern and professional touch
- The new design should fix the issues with the current UI
Some features are hard to use in Matomo. For example, the calendar and period selector is confusing and the website selector doesn’t scale well with hundreds of websites.
With these objectives in mind, Marcin Galecki has been working hard alongside the Matomo team on mock-ups of the design. These mock-ups haven’t yet been implemented, as this is still a work in progress and your feedback is important to us.
Note: click on the images to view them full size.
Dashboard
The dashboard mockup displays most new changes on the design:
- New menu
- New controller’s style used for the Calendar, Add a Widget
- New style for the website selector and language selector
- New style for widgets: colors, the footer, and tables scrolling to the right when there is too much data to display. We tried to improve the widgets’ footer to make it easier to access the other reports that Matomo provides: Advanced view to show all columns, ‘Goals’ view to see conversions for each segment.
Example ‘Referers > Overview’ report
This is an example of the « Referers Overview » report using the new styles.
Pages report
This mockup shows the style of the expandable data table, used in the Pages URLs and Page titles reports.
About Matomo message
By default, the message displayed would be short and sweet, and on Hover would display the full message.
Add a Widget selector
The « Add a widget » tool is now better integrated in the UI and re-uses the same styles as other selectors.
Website selector
The website selector currently does not scale if Matomo manages hundreds or thousands of websites and this new design would fix this usability issue. Only the first 10 websites (or 10 most recently used) would be displayed, and you could « Search » for websites (matching names and URLs).
Calendar
The calendar is a major usability issue in the current Matomo UI. In the dashboard mockups (see above), you can see that the calendar is now more visible. Also, the concept of Periods (day / week / month / year) is now directly integrated within the calendar selector itself, which makes more sense and makes it easier to use.
Icons set and widgets footer
Here are the full set of icons used in the mockups, and a detailed example of how the footers work.
Your feedback!
Matomo is currently used by more than 40,000 users, all with different backgrounds and objectives. The User Interface must accommodate the needs of every user from the most basic through to the advanced.
What do you think about this proposal? What do you like, and what could be improved?
Your feedback is really important to us – please send us your comments and suggestions via the blog or the forum thread and we will gather your feedback and contributions over the next 10 days or so. We will then work with the designer to prepare the final version of the mockups, which will then be implemented.
Thank you!
