Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify Piwik interface: Zen Mode #4987

Closed
tsteur opened this issue Apr 14, 2014 · 41 comments
Closed

Simplify Piwik interface: Zen Mode #4987

tsteur opened this issue Apr 14, 2014 · 41 comments
Labels
Critical Indicates the severity of an issue is very critical and the issue has a very high priority. Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc.
Milestone

Comments

@tsteur
Copy link
Member

tsteur commented Apr 14, 2014

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
Copy link
Member

mattab commented Apr 15, 2014

See also #4993 Simplify Main analytics menu

@tzi
Copy link
Member

tzi commented Apr 16, 2014

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
Copy link
Member Author

tsteur commented Apr 16, 2014

Attachment:
zen.tiff

@tsteur
Copy link
Member Author

tsteur commented Apr 16, 2014

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
Copy link

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
Copy link
Member Author

tsteur commented Apr 17, 2014

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
Copy link
Member Author

tsteur commented Apr 17, 2014

In db030b2: refs #4987 added tooltip and some translations

@tsteur
Copy link
Member Author

tsteur commented Apr 17, 2014

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

@tsteur
Copy link
Member Author

tsteur commented Apr 30, 2014

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

@tsteur
Copy link
Member Author

tsteur commented Apr 30, 2014

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

@tsteur
Copy link
Member Author

tsteur commented Apr 30, 2014

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

@tsteur
Copy link
Member Author

tsteur commented Apr 30, 2014

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

@tsteur
Copy link
Member Author

tsteur commented May 1, 2014

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

@tsteur
Copy link
Member Author

tsteur commented May 1, 2014

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

@tsteur
Copy link
Member Author

tsteur commented May 1, 2014

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
Copy link
Member Author

tsteur commented May 1, 2014

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

@tsteur
Copy link
Member Author

tsteur commented May 1, 2014

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

@gaumondp
Copy link

gaumondp commented May 1, 2014

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
Copy link
Member Author

tsteur commented May 5, 2014

In 30063a0: refs #4987 added translations

@tsteur
Copy link
Member Author

tsteur commented May 5, 2014

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

@tsteur
Copy link
Member Author

tsteur commented May 5, 2014

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

@tsteur
Copy link
Member Author

tsteur commented May 5, 2014

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

@tsteur
Copy link
Member Author

tsteur commented May 5, 2014

@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
Copy link
Member Author

tsteur commented May 5, 2014

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

@tsteur
Copy link
Member Author

tsteur commented May 5, 2014

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

@tsteur
Copy link
Member Author

tsteur commented May 5, 2014

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

@gaumondp
Copy link

gaumondp commented May 5, 2014

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

Dali

@tsteur
Copy link
Member Author

tsteur commented May 8, 2014

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

refs #4987 Simplify Piwik interface: Zen Mode

@mattab
Copy link
Member

mattab commented May 9, 2014

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

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

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

@hpvd
Copy link

hpvd commented May 12, 2014

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

sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
…widgets later... still in exploration mode but is already pretty nice to use
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
…ys work and update selected item on mousemove
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
…not only in zen mode. Will move the content of CoreHome/stylesheets/zen-mode.less to other files later
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
…gular help icon) and added missing readme
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
…board widget border and the jqplot graph
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Critical Indicates the severity of an issue is very critical and the issue has a very high priority. Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc.
Projects
None yet
Development

No branches or pull requests

6 participants