Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Simplify Piwik interface: Zen Mode #4987

Closed
tsteur opened this Issue · 41 comments

6 participants

@tsteur
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

@mattab
Owner

See also #4993 Simplify Main analytics menu

@tzi
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.

@tsteur
Owner

Attachment:
zen.tiff

@tsteur
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.

@tsteur
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

@tsteur
Owner

In db030b2: refs #4987 added tooltip and some translations

@tsteur
Owner

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

@tsteur
Owner

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

@tsteur
Owner

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

@tsteur
Owner

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

@tsteur
Owner

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

@tsteur
Owner

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

@tsteur
Owner

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

@tsteur
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

@tsteur
Owner

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

@tsteur
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

@tsteur
Owner

In 30063a0: refs #4987 added translations

@tsteur
Owner

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

@tsteur
Owner

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

@tsteur
Owner

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

@tsteur
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

@tsteur
Owner

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

@tsteur
Owner

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

@tsteur
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

@tsteur
Owner

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

refs #4987 Simplify Piwik interface: Zen Mode

@mattab
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

@tsteur
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

@tsteur
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

@tsteur
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

@tsteur
Owner

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

@tsteur
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.

@tsteur
Owner

In 84a7e58: refs #4987 enable zenMode during update

@tsteur
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.

@tsteur
Owner

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

@mattab
Owner

I created #5230 to gather discussion about Keyboard shortcuts.

@mattab
Owner

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

The world needs more Zen!

@mattab
Owner

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

@tsteur tsteur added this to the 2.3.0 - Piwik 2.3.0 milestone
@fhemberger fhemberger referenced this issue from a commit
@tsteur 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
@fhemberger fhemberger referenced this issue from a commit
@tsteur 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
@fhemberger fhemberger referenced this issue from a commit
@tsteur 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
@fhemberger fhemberger referenced this issue from a commit
@tsteur tsteur refs #4987 apply a max width of 1200px, add a separator before switch…
…, use alt+f instead of alt+s
b02e74e
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur 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
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur tsteur refs #4987 added tooltip and some translations db030b2
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur tsteur refs #4987 added possibility to search for websites c69a007
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur tsteur refs #4987 tweaked some reports, remember whether zenmode is enabled/…
…disabled, code improvements
cf65ed1
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur tsteur refs #4987 fix the quick access menu selection did not always work an…
…d update selected item on mousemove
783111e
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur tsteur refs #4987 show footer icon drawer if not in dialog 6cd5d7c
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur 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
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur tsteur refs #4987 some bugfixes especially for small windows, fixed a test, …
…enabled plugin
e4342df
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur tsteur refs #4987 added missing file, make sure footer icons for user countr…
…y is always displayed
cbe0818
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur tsteur refs #4987 added translations 30063a0
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur tsteur refs #4987 the styles were not applied if widgetized as there is no #…
…content node
40e0e17
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur tsteur refs #4987 removed duplicated help (already mentioned in regular help…
… icon) and added missing readme
c324d38
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur tsteur refs #4987 for consistency make sure all websites dashboard has same …
…look as regular report
4fcf115
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@tsteur 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.