During the designs for the Translate extension, we thought on making the left toolbar disappear in some circumstances. Translators are very focused on the content and the links provided by the left side toolbar are rarely needed while translating.
The idea is to hide the toolbar initially to reduce the amount of chrome and provide a cue so that users interested in it can bring it back. I created an interactive prototype to illustrate the ideahttp://pauginer.github.com/prototype-translate/pencil/compact-toolbar/index.html .
The design has been made under the following constraints:
- *Avoid automatic moving parts.* Other alternatives involving the toolbar to hide/show being triggered by scrolling were considered but the resulting change in the layout can be disorienting for the user. - *Keep the affordance for going back to the homepage. *Users can be in a dead-end if they don't identify the top-left icon of the curent wiki to go back home. - *Minimal impact to the current layout.* Major changes to the current skin were out of the scope of the curent project.
I wanted to share this since other tools/extensions may have faced a similar need before. Feel free to provide any feedback, alternative solutions or info on potential problems.
Pau
This could also be very useful for making Vector usable on small screens (less than 800 px - this includes all of really old desktops, old netbooks, mobiles, and feature phones). The navigation could be displayed at the bottom.
I even already proposed something very similar to your mockup: https://gerrit.wikimedia.org/r/#/c/44859/ Feedback and patchsets welcome :)
On Wed, Mar 6, 2013 at 10:54 AM, Pau Giner pginer@wikimedia.org wrote:
During the designs for the Translate extension, we thought on making the left toolbar disappear in some circumstances. Translators are very focused on the content and the links provided by the left side toolbar are rarely needed while translating.
The idea is to hide the toolbar initially to reduce the amount of chrome and provide a cue so that users interested in it can bring it back. I created an interactive prototype to illustrate the ideahttp://pauginer.github.com/prototype-translate/pencil/compact-toolbar/index.html .
The design has been made under the following constraints:
- *Avoid automatic moving parts.* Other alternatives involving the
toolbar to hide/show being triggered by scrolling were considered but the resulting change in the layout can be disorienting for the user.
- *Keep the affordance for going back to the homepage. *Users can be
in a dead-end if they don't identify the top-left icon of the curent wiki to go back home.
- *Minimal impact to the current layout.* Major changes to the current
skin were out of the scope of the curent project.
I wanted to share this since other tools/extensions may have faced a similar need before. Feel free to provide any feedback, alternative solutions or info on potential problems.
Pau
This would also be a very useful thing for our work on an onboarding process.
When trying the prototype, it took me a couple tries to figure out that the wrench icon was where the sidebar hide/unhide action was. I first tried just clicking the site logo, and dragging Vector from left to right to unhide. Something with a more menu-like icon (reuse the MobileFrontEnd hamburger?) and a simple dragging left and right might be interesting to explore. If not dragging, a smoother drawer-like action would be desirable.
Thanks very much for this proposal Pau. I think we could perhaps go even further and consider what a "full screen" menu-less Vector might be like. I'm thinking the use case is not just systems like translations or Page Curation, but also a distraction-free editing mode.
I'm glad we're finally talking about this. My only concern with removing the sidebar in Vector is that it would make the content occupy 100% of the screen, further reducing readability and making layouts more difficult.
I think that, in order to have a Wikipedia without a sidebar, two things need to happen:
1. We enclose content in a limited area (e.g. 960px) 2. We have a grid.
But, I'm glad we're talking about it :-)
On Wed, Mar 6, 2013 at 11:55 AM, Steven Walling swalling@wikimedia.orgwrote:
On Wed, Mar 6, 2013 at 10:54 AM, Pau Giner pginer@wikimedia.org wrote:
During the designs for the Translate extension, we thought on making the left toolbar disappear in some circumstances. Translators are very focused on the content and the links provided by the left side toolbar are rarely needed while translating.
The idea is to hide the toolbar initially to reduce the amount of chrome and provide a cue so that users interested in it can bring it back. I created an interactive prototype to illustrate the ideahttp://pauginer.github.com/prototype-translate/pencil/compact-toolbar/index.html .
The design has been made under the following constraints:
- *Avoid automatic moving parts.* Other alternatives involving the
toolbar to hide/show being triggered by scrolling were considered but the resulting change in the layout can be disorienting for the user.
- *Keep the affordance for going back to the homepage. *Users can be
in a dead-end if they don't identify the top-left icon of the curent wiki to go back home.
- *Minimal impact to the current layout.* Major changes to the
current skin were out of the scope of the curent project.
I wanted to share this since other tools/extensions may have faced a similar need before. Feel free to provide any feedback, alternative solutions or info on potential problems.
Pau
This would also be a very useful thing for our work on an onboarding process.
When trying the prototype, it took me a couple tries to figure out that the wrench icon was where the sidebar hide/unhide action was. I first tried just clicking the site logo, and dragging Vector from left to right to unhide. Something with a more menu-like icon (reuse the MobileFrontEnd hamburger?) and a simple dragging left and right might be interesting to explore. If not dragging, a smoother drawer-like action would be desirable.
Thanks very much for this proposal Pau. I think we could perhaps go even further and consider what a "full screen" menu-less Vector might be like. I'm thinking the use case is not just systems like translations or Page Curation, but also a distraction-free editing mode.
-- Steven Walling https://wikimediafoundation.org/
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
I would love this as an opportunity to start scaling up the mobile design towards desktop. Getting vector to adopt our patterns would be a step in the right direction.
Were in a head on collision between the two of them and as Terry mentioned to me yesterday. We need to start talking about it.
--tomasz --tomasz
On Wed, Mar 6, 2013 at 11:58 AM, Munaf Assaf massaf@wikimedia.org wrote:
I'm glad we're finally talking about this. My only concern with removing the sidebar in Vector is that it would make the content occupy 100% of the screen, further reducing readability and making layouts more difficult.
I think that, in order to have a Wikipedia without a sidebar, two things need to happen:
We enclose content in a limited area (e.g. 960px) We have a grid.
But, I'm glad we're talking about it :-)
On Wed, Mar 6, 2013 at 11:55 AM, Steven Walling swalling@wikimedia.org wrote:
On Wed, Mar 6, 2013 at 10:54 AM, Pau Giner pginer@wikimedia.org wrote:
During the designs for the Translate extension, we thought on making the left toolbar disappear in some circumstances. Translators are very focused on the content and the links provided by the left side toolbar are rarely needed while translating.
The idea is to hide the toolbar initially to reduce the amount of chrome and provide a cue so that users interested in it can bring it back. I created an interactive prototype to illustrate the idea.
The design has been made under the following constraints:
Avoid automatic moving parts. Other alternatives involving the toolbar to hide/show being triggered by scrolling were considered but the resulting change in the layout can be disorienting for the user. Keep the affordance for going back to the homepage. Users can be in a dead-end if they don't identify the top-left icon of the curent wiki to go back home. Minimal impact to the current layout. Major changes to the current skin were out of the scope of the curent project.
I wanted to share this since other tools/extensions may have faced a similar need before. Feel free to provide any feedback, alternative solutions or info on potential problems.
Pau
This would also be a very useful thing for our work on an onboarding process.
When trying the prototype, it took me a couple tries to figure out that the wrench icon was where the sidebar hide/unhide action was. I first tried just clicking the site logo, and dragging Vector from left to right to unhide. Something with a more menu-like icon (reuse the MobileFrontEnd hamburger?) and a simple dragging left and right might be interesting to explore. If not dragging, a smoother drawer-like action would be desirable.
Thanks very much for this proposal Pau. I think we could perhaps go even further and consider what a "full screen" menu-less Vector might be like. I'm thinking the use case is not just systems like translations or Page Curation, but also a distraction-free editing mode.
-- Steven Walling https://wikimediafoundation.org/
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On Wed, Mar 6, 2013 at 12:03 PM, Tomasz Finc tfinc@wikimedia.org wrote:
I would love this as an opportunity to start scaling up the mobile design towards desktop. Getting vector to adopt our patterns would be a step in the right direction.
Were in a head on collision between the two of them and as Terry mentioned to me yesterday. We need to start talking about it.
--tomasz --tomasz
I think that's out of scope for this discussion, and probably the wrong way to look at it anyway.
The goal should be redesigning Vector (or designing a new skin) to gracefully degrade to the point where the transition between desktop Vector and mobile Web is as close to seamless as possible.
I think everyone here agrees that MobileFrontEnd is taking the right approach to its essential navigation etc. by not drawing heavily from Vector. But that doesn't mean we can just blow up mobile Web designs and stuff Vector inside them.
On Wed, Mar 6, 2013 at 11:58 AM, Munaf Assaf massaf@wikimedia.org wrote:
I'm glad we're finally talking about this. My only concern with removing
the
sidebar in Vector is that it would make the content occupy 100% of the screen, further reducing readability and making layouts more difficult.
I think that, in order to have a Wikipedia without a sidebar, two things need to happen:
We enclose content in a limited area (e.g. 960px) We have a grid.
But, I'm glad we're talking about it :-)
On Wed, Mar 6, 2013 at 11:55 AM, Steven Walling swalling@wikimedia.org wrote:
On Wed, Mar 6, 2013 at 10:54 AM, Pau Giner pginer@wikimedia.org
wrote:
During the designs for the Translate extension, we thought on making
the
left toolbar disappear in some circumstances. Translators are very
focused
on the content and the links provided by the left side toolbar are
rarely
needed while translating.
The idea is to hide the toolbar initially to reduce the amount of
chrome
and provide a cue so that users interested in it can bring it back. I created an interactive prototype to illustrate the idea.
The design has been made under the following constraints:
Avoid automatic moving parts. Other alternatives involving the toolbar
to
hide/show being triggered by scrolling were considered but the
resulting
change in the layout can be disorienting for the user. Keep the affordance for going back to the homepage. Users can be in a dead-end if they don't identify the top-left icon of the curent wiki
to go
back home. Minimal impact to the current layout. Major changes to the current skin were out of the scope of the curent project.
I wanted to share this since other tools/extensions may have faced a similar need before. Feel free to provide any feedback, alternative solutions or info on potential problems.
Pau
This would also be a very useful thing for our work on an onboarding process.
When trying the prototype, it took me a couple tries to figure out that the wrench icon was where the sidebar hide/unhide action was. I first
tried
just clicking the site logo, and dragging Vector from left to right to unhide. Something with a more menu-like icon (reuse the MobileFrontEnd hamburger?) and a simple dragging left and right might be interesting to explore. If not dragging, a smoother drawer-like action would be
desirable.
Thanks very much for this proposal Pau. I think we could perhaps go even further and consider what a "full screen" menu-less Vector might be
like.
I'm thinking the use case is not just systems like translations or Page Curation, but also a distraction-free editing mode.
-- Steven Walling https://wikimediafoundation.org/
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
+1 Le 6 mars 2013 20:59, "Munaf Assaf" massaf@wikimedia.org a écrit :
I'm glad we're finally talking about this. My only concern with removing the sidebar in Vector is that it would make the content occupy 100% of the screen, further reducing readability and making layouts more difficult.
I think that, in order to have a Wikipedia without a sidebar, two things need to happen:
- We enclose content in a limited area (e.g. 960px)
- We have a grid.
But, I'm glad we're talking about it :-)
On Wed, Mar 6, 2013 at 11:55 AM, Steven Walling swalling@wikimedia.orgwrote:
On Wed, Mar 6, 2013 at 10:54 AM, Pau Giner pginer@wikimedia.org wrote:
During the designs for the Translate extension, we thought on making the left toolbar disappear in some circumstances. Translators are very focused on the content and the links provided by the left side toolbar are rarely needed while translating.
The idea is to hide the toolbar initially to reduce the amount of chrome and provide a cue so that users interested in it can bring it back. I created an interactive prototype to illustrate the ideahttp://pauginer.github.com/prototype-translate/pencil/compact-toolbar/index.html .
The design has been made under the following constraints:
- *Avoid automatic moving parts.* Other alternatives involving the
toolbar to hide/show being triggered by scrolling were considered but the resulting change in the layout can be disorienting for the user.
- *Keep the affordance for going back to the homepage. *Users can be
in a dead-end if they don't identify the top-left icon of the curent wiki to go back home.
- *Minimal impact to the current layout.* Major changes to the
current skin were out of the scope of the curent project.
I wanted to share this since other tools/extensions may have faced a similar need before. Feel free to provide any feedback, alternative solutions or info on potential problems.
Pau
This would also be a very useful thing for our work on an onboarding process.
When trying the prototype, it took me a couple tries to figure out that the wrench icon was where the sidebar hide/unhide action was. I first tried just clicking the site logo, and dragging Vector from left to right to unhide. Something with a more menu-like icon (reuse the MobileFrontEnd hamburger?) and a simple dragging left and right might be interesting to explore. If not dragging, a smoother drawer-like action would be desirable.
Thanks very much for this proposal Pau. I think we could perhaps go even further and consider what a "full screen" menu-less Vector might be like. I'm thinking the use case is not just systems like translations or Page Curation, but also a distraction-free editing mode.
-- Steven Walling https://wikimediafoundation.org/
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On Wed, Mar 6, 2013 at 10:54 AM, Pau Giner pginer@wikimedia.org wrote:
During the designs for the Translate extension, we thought on making the left toolbar disappear in some circumstances. Translators are very focused on the content and the links provided by the left side toolbar are rarely needed while translating.
The idea is to hide the toolbar initially to reduce the amount of chrome and provide a cue so that users interested in it can bring it back. I created an interactive prototype to illustrate the ideahttp://pauginer.github.com/prototype-translate/pencil/compact-toolbar/index.html .
I like the idea, but I'm not sure there's a clear affordance for re-expanding the sidebar. My natural inclination was to click the small icon in the top-left, which does expand the sidebar but also takes me directly to the home page and leaves no way to get back to where I was.
Eventually I noticed what looks like a "configure" or "settings" icon, which appears to open the sidebar without navigating. Not sure this is ideal.
-- brion