Simplify Piwik interface: Zen Mode

[tsteur]

The UI is pretty complex and doesn't look as flat as it could be. The navigation can take easily up to 40% of the available space. The idea is to introduce a ZenMode which simplifies the UI. For example reducing the height of the navigation, removing some controls, flat design, lets you focus on the data, etc.

Many of those ZenMode optimizations we will discover can be then copied over in the normal mode to have a nicer UI there as well. Eg we can remove some borders there as well and make the headlines bigger.

Also see #1915 and #5192

[mattab]

See also #4993 Simplify Main analytics menu

[tzi]

I like the idea of moving links that only useful for advanced users, into a submenu!
So I like this proposal.

But we should not hide the "logout" action.
This is a black pattern to force user to be always connected.

Cheers,
Thomas.

[tsteur]

Attachment:
zen.tiff

[tsteur]

There could be in addition something like an arrow icon pointing up / down to hide/show the complete header, activating/deactivating a "zen" mode. It would also move some controls / adding a search menu textbox which lets you autocomplete menu entries.

Looks more "app" like and lets you focus on analyzing data. Often you do not need all other links. We would also remember whether we show/hide header

[anonymous-matomo-user]

I absolutely agree with Thomas:
the logout action/button has to be visible from the main menu, at all times.

Marius

Replying to iamtzi:

But we should not hide the "logout" action.
This is a black pattern to force user to be always connected.

[tsteur]

In 798000d: refs #4987 started to work on piwik zen mode, will improve widgets later... still in exploration mode but is already pretty nice to use

[tsteur]

In db030b2: refs #4987 added tooltip and some translations

[tsteur]

In e8ad990: refs #4987 the zen mode directive is no longer needed, at least for now

[tsteur]

In c69a007: refs #4987 added possibility to search for websites

[tsteur]

In cf65ed1: refs #4987 tweaked some reports, remember whether zenmode is enabled/disabled, code improvements

[tsteur]

In 783111e: refs #4987 fix the quick access menu selection did not always work and update selected item on mousemove

[tsteur]

In ed8c366: refs #4987 make sure to not display footer icons by default

[tsteur]

In bf1a786: refs #4987 some code improvements, added shortcuts and more tweaks

[tsteur]

In 6cd5d7c: refs #4987 show footer icon drawer if not in dialog

[tsteur]

In fa94d28: refs #4987 apply some of the zenmode styles by default and not only in zen mode. Will move the content of CoreHome/stylesheets/zen-mode.less to other files later

[tsteur]

In e4342df: refs #4987 some bugfixes especially for small windows, fixed a test, enabled plugin

[tsteur]

In cbe0818: refs #4987 added missing file, make sure footer icons for user country is always displayed

[gaumondp]

Thanks for letting us diminish the clutter of the interface Thomas.

On the other hand sometimes we need some of it. Would it be possible to make column selection as preferences. In "normal" Piwik but also PDF reports?

For example I wrote this yesterday: http://forum.piwik.org/read.php?15,114685,114685#msg-114685

Not seeing % in column while looking at Screen Resolution but having conversion rate in my case makes no sense...

Sometimes we don't need too much Zen. ;)

Dali

[tsteur]

In 30063a0: refs #4987 added translations

[tsteur]

In 40e0e17: refs #4987 the styles were not applied if widgetized as there is no #content node

[tsteur]

In 7140ec4: refs #4987 fix position of annotations if widgetized or within dialog

[tsteur]

In e023f4a: refs #4987 make sure the expand drawer is visible in dashboard

[tsteur]

@daliDev If I understand it right you suggest to introduce an "anti zen mode" in addition which does instead of simplifying the UI shows more data? Eg the percentage values would be always displayed. I'd like that idea. If you meant this, lets create a new ticket for this and collect the ideas there

[tsteur]

In c324d38: refs #4987 removed duplicated help (already mentioned in regular help icon) and added missing readme

[tsteur]

In 4fcf115: refs #4987 for consistency make sure all websites dashboard has same look as regular report

[tsteur]

In 8be3ec3: refs #4987 make sure there is a little gap between the dashboard widget border and the jqplot graph

[gaumondp]

@tsteur, new ticket with arguments for the percentage column at #5096

Dali

[tsteur]

In 89d9003: Merge pull request #269 from piwik/4987_zenmode

refs #4987 Simplify Piwik interface: Zen Mode

[mattab]

Thomas, this is such an epic new way to look at Piwik. I love it...

Here are some thoughts that came along:

• imo we can enable ZenMode plugin in Update file as it's ready IMO to be showcased to all users!
• As a user it loads by default "All websites dashboard", I then click on top menu "Dashboard" link. Got: normal piwik appears for maybe 300ms and then it hides (jumping effect). Expected: Zen mode shows directly without first showing the normal Piwik for few milliseconds.
• the zen mode icon would look nicer reversed (up<>down)
• from Rafal: maybe add before another " | " before the button - it just looks like signup is a dropdown now
• maybe we show the notification box only a couple times?
• Shortcuts: gotta love apps with shortcuts!! :) we can use one key shortcuts as they're nice. here are some proposals
  • for 'Search/find' I propose / and f
  • for 'Exit Zen' maybe ESC and e ?
  • (alt+s keyboard shortcut in Firefox triggers the "History" menu)
  • (later we could have a box showing all shortcuts by pressing ? like gmail does)
• in "Actions" reports
  • the % visits on hover is not right aligned
  • Actions reports are 'single table layout'. In this case and other screens where there is only one table displayed, i think it would be more readable with a width of 800 px, instead of 100%
  • then the Cog option to enable "No truncation" in As a user I want to be able to disable label truncation and to truncate it from the left #4998 could disable the 800px css rule.

if you also have some feedback about the Zen mode, please comment here!

Note: to use Zen Mode go to Plugins > Enable ZenMode.

[hpvd]

Sounds interesting!
but..
Activating Zen: Failed to load HTML file...
#5148#ticket