Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Simplify Piwik interface: Zen Mode #4987

Closed
tsteur opened this Issue · 41 comments

6 participants

Thomas Steur Matthieu Aubry Thomas ZILLIOX Anonymous Piwik user gaumondp hpvd
Thomas Steur
Owner

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

Matthieu Aubry
Owner

See also #4993 Simplify Main analytics menu

Thomas ZILLIOX
Collaborator

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.

Thomas Steur
Owner

Attachment:
zen.tiff

Thomas Steur
Owner

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 Piwik 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.

Thomas Steur
Owner

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

Thomas Steur
Owner

In db030b2: refs #4987 added tooltip and some translations

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

In 30063a0: refs #4987 added translations

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

@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

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

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

Thomas Steur
Owner

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

refs #4987 Simplify Piwik interface: Zen Mode

Matthieu Aubry
Owner

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 #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

Thomas Steur
Owner

In 7da461b: refs #4987 I think this call is not needed. It works for me without the show() call. Fixes when opening the dashboard in ZenMode the dashboard submenu item is displayed although the mouse is somewhere completely else

Thomas Steur
Owner

In bd1cb1a: refs #4987 the label truncation should ignore the maxLabelWidth if width of datatable is set to 100% which is the case for instance in Actions/Pages

Thomas Steur
Owner

In 37cafff: refs #4987 there might be rows with different paddings, for instance in outlinks when opening subtables. Make sure to remove the highest padding values to prevent any jumping effects

Thomas Steur
Owner

In b02e74e: refs #4987 apply a max width of 1200px, add a separator before switch, use alt+f instead of alt+s

Thomas Steur
Owner

jumping effect: There is not a lot I can do at this moment except hacks which is not worth it right now. In fast browsers there is no jumping effect ;)

Don't know what you mean with the reversed zenMode icon.

I added another "|" before the icon but looks not nice. The menu will be updated soon anyway...

maybe we show the notification box only a couple times? --> Wouldn't implement this right now but start as simple as possible. The idea is that for the people who like and use the ZenMode they stay in the ZenMode. We can still change it later and come with some kind of algorithm. Eg show 3 times and then hide it, if user activates the ZenMode after a two weeks break again we will start showing it again 2 times or so. Probably it would be even much better instead to use some kind of evolution UI: https://github.com/sonyxperiadev/EvolutionUI#how-does-evolutionui-work . Also once we have "?" we can display it less often

Changed search to alt+f

alt+e for exit does not really makes sense as "exit" is valid for many things and might be more useful for other actions. alt+z for ZenMode is more practicable and easier to remember as you can toggle the ZenMode with alt+z. BTW: If you use alt+z the notification is not displayed as we assume the user is very familiar with the ZenMode.

Changed the maxWidth to 1200px for reports in general (except it is Widgetized or in Dashboard) as there might be users having >1900px width. 800px is way too small and doesn't look good.

Thomas Steur
Owner

In 84a7e58: refs #4987 enable zenMode during update

Thomas Steur
Owner

The original ticket was about improving the menu but title was changed into ZenMode. Creating a new ticket for the menu again see #5192 as they are completely different.

Thomas Steur
Owner

I'm closing this ticket for now. Changes to the current implementation can be handled in separate tickets

Matthieu Aubry
Owner

I created #5230 to gather discussion about Keyboard shortcuts.

Matthieu Aubry
Owner

Great job Thomas on creating the ZenMode and closing this ticket.

The world needs more Zen!

Matthieu Aubry
Owner

see follow up: #5369 Don't show notice every time we switch to Zen Mode

Thomas Steur tsteur added this to the 2.3.0 - Piwik 2.3.0 milestone
Frederic Hemberger fhemberger referenced this issue from a commit
Thomas Steur tsteur refs #4987 I think this call is not needed. It works for me without t…
…he show() call. Fixes when opening the dashboard in ZenMode the dashboard submenu item is displayed although the mouse is somewhere completely else
7da461b
Frederic Hemberger fhemberger referenced this issue from a commit
Thomas Steur tsteur refs #4987 the label truncation should ignore the maxLabelWidth if wi…
…dth of datatable is set to 100% which is the case for instance in Actions/Pages
bd1cb1a
Frederic Hemberger fhemberger referenced this issue from a commit
Thomas Steur tsteur refs #4987 there might be rows with different paddings, for instance …
…in outlinks when opening subtables. Make sure to remove the highest padding values to prevent any jumping effects
37cafff
Frederic Hemberger fhemberger referenced this issue from a commit
Thomas Steur tsteur refs #4987 apply a max width of 1200px, add a separator before switch…
…, use alt+f instead of alt+s
b02e74e
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 started to work on piwik zen mode, will improve widgets la…
…ter... still in exploration mode but is already pretty nice to use
798000d
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 added tooltip and some translations db030b2
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 added possibility to search for websites c69a007
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 tweaked some reports, remember whether zenmode is enabled/…
…disabled, code improvements
cf65ed1
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 fix the quick access menu selection did not always work an…
…d update selected item on mousemove
783111e
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 show footer icon drawer if not in dialog 6cd5d7c
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 apply some of the zenmode styles by default and not only i…
…n zen mode. Will move the content of CoreHome/stylesheets/zen-mode.less to other files later
fa94d28
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 some bugfixes especially for small windows, fixed a test, …
…enabled plugin
e4342df
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 added missing file, make sure footer icons for user countr…
…y is always displayed
cbe0818
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 added translations 30063a0
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 the styles were not applied if widgetized as there is no #…
…content node
40e0e17
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 removed duplicated help (already mentioned in regular help…
… icon) and added missing readme
c324d38
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 for consistency make sure all websites dashboard has same …
…look as regular report
4fcf115
Philip Taffner sabl0r referenced this issue from a commit in sabl0r/piwik
Thomas Steur tsteur refs #4987 make sure there is a little gap between the dashboard widg…
…et border and the jqplot graph
8be3ec3
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.