Page MenuHomePhabricator

Design *Back to initial position* action
Closed, ResolvedPublic

Description

Short story
We need a control to convey the idea of going back to the initial position of the map - the fixed zoom and position as it is saved in wikitext.

Long story
Maps are interactive. An editor initially configures a zoom, longitude and latitude for the center of the maps.
Once loaded, the user can play with the map: move the center of the map away from its initial position, zoom in or zoom out.
Since T135556, a user can also share a full screen map, at the zoom level and position he is currently looking at (different from the initial position configured by the map "creator/editor").

Without a dedicated control, a user has to reload the webpage in order to go back to the initial position.
We want to provide an easy way for the user to retrieve the initial position without reloading the entire webpage. The action itself can be done very easily with JS, the only question is where on the UI, and on what element, should the user click to trigger the action.

Requirements

  • The control/action will be displayed only when the current position/zoom differs from the initial one.

Questions

  • Should we have a label displaying on top of the map such as: "Back to initial position" OR have an icon that can convey the idea without a text?
    • Done. Per comments, the undo icon seems to work :
      Screen Shot 2016-06-14 at 7.06.37 PM.png (54×56 px, 4 KB)
  • Which position? (please stick to top/topleft/left/bottomleft/bottom/bottomright/right/topright)
    • see comments
    • see T136982 (Define guidelines for positioning map controls)

Event Timeline

I wonder if we can somehow reuse the "undo" icon for this?

I wonder if we can somehow reuse the "undo" icon for this?

To illustrate @Yurik suggestion:

Screen Shot 2016-05-23 at 5.55.08 PM.png (37×85 px, 4 KB)

Source: https://doc.wikimedia.org/oojs-ui/master/demos/#icons-mediawiki-ltr

Yurik moved this task from In progress to To-do on the Maps-Sprint board.

First mockups with the Undo control.
Tell if there is one corner that works better for you :)

TOP RIGHT:

Screen Shot 2016-06-01 at 4.49.49 PM.png (724×1 px, 950 KB)

BOTTOM RIGHT:

Screen Shot 2016-06-01 at 4.51.17 PM.png (724×1 px, 949 KB)

TOP LEFT:

Screen Shot 2016-06-01 at 4.50.49 PM.png (728×1 px, 948 KB)

BOTTOM LEFT:

Screen Shot 2016-06-01 at 4.51.40 PM.png (724×1 px, 948 KB)

@JGirault , I think the best location would be to the right of the "+" symbol (zoom-in), appearing only when the map has moved/zoomed. Also, when we discuss this issue ,we should also think of how it will look without the WikiVoyage-specific customizations.

@JGirault , I think the best location would be to the right of the "+" symbol (zoom-in), appearing only when the map has moved/zoomed. Also, when we discuss this issue ,we should also think of how it will look without the WikiVoyage-specific customizations.

@Yurik here's a mockup illustrating your suggestion:

Screen Shot 2016-06-03 at 11.46.40 AM.png (364×526 px, 344 KB)

Looks good to me, but I am not a designer :D