Page MenuHomePhabricator

Open enlarged mapframe map with 'Map Details' panel closed instead of open (and rename it)
Closed, ResolvedPublic

Description

Right now, when a user enlarges a maframe map, the "Map Details' panel loads in the open state and is one of the most prominent things the user sees (see below).

In the first place, the panel does not give "map details" at all: what it does is promote the use of other, external maps, like Google Maps. So, at a minimum, it's misnamed. And the button and label are not conistent: one says "More details" and one says "Map details."

But also, I have to ask: is this panel really the most important functionality on the page--so important we need to show it every time? It literally has nothing to do with the map the user is looking at; it simply provides a way to look at different maps of the same thing Couldn't that be on the other side of a button click instead. If our maps are so useless we really feel we ALWAYS need to offer users alternatives, then so be it. Let's just rename the button and panel and move on.

But if we feel that the always loading the map with this panel open overdoes things a bit (I do), the let's open maps with this closed (and rename the button and panel).

To Do's

  1. make it so that when the user clicks to enlarge a map, the External Maps (or whatever) panel opens in a default closed state.
  2. Right now, the button and panel have different labels. Let's make the button and label consistent and more descriptive.
  3. I propose: External maps or Other map services

Additional design details

Initial (closed)Panel opened
  • The "external maps" button, with the "newWindow" icon from the icon repo is used as the entry point to open the external panel.
  • When the panel is opened, the actions that were aligned to the right of the map, are pushed to remain over the map (e.g., notice that the close icon remains over the map).
  • The panel title is "External use", and two sections are available: "Coordinates" and "Map services".
  • The selector of type of map, lists the default option as "Standard maps", to make it more clear that other kinds of maps are available as options for the user to chose.
  • Map services are listed using the service name and the external icon. Clicking will open the corresponding map in a new tab/window.
  • For a given type of map, if there are more than 7 options only the first 4 will be shown, and a "more" option will be available to show the rest. If there are 7 or less options, all of them will be listed.
  • The chevron pointing own icon that closes the panel is replaced by the "arrowNext" icon which is an arrow pointing to the right.

As a reference the current panel is shown below:

Details

Related Gerrit Patches:
mediawiki/extensions/Kartographer : masterFollowup Ie6bdead6dcb: Improve sidebar styling and display
mediawiki/extensions/Kartographer : masterUse 'next' instead of 'arrowNext'
mediawiki/extensions/Kartographer : masterTweaks to map details panel

Event Timeline

Restricted Application added a project: Discovery. · View Herald TranscriptFeb 21 2018, 6:02 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
jmatazzoni triaged this task as Lowest priority.Feb 27 2018, 12:05 AM

I proposed an illustrated some changes below:

Initial (closed)Panel open
  • The "external" button, with the "newWindow" icon from the icon repo is used as the entry point to open the external panel.
  • When the panel is opened, the actions that were aligned to the right of the map, are pushed to remain over the map (e.g., notice that the close icon remains over the map).
  • The panel title is "External use", and two sections are available: "Coordinates" and "map services".
  • The selector of type of map, lists the default option as "Standard maps", to make it more clear that other kinds of maps are available as options for the user to chose.
  • Map services are listed using the service name and the external icon. Clicking will open the corresponding map in a new tab/window.
  • For a given type of map, if there are more than 7 options only the first 4 will be shown, and a "more" option will be available to show the rest. If there are 7 or less options, all of them will be listed.

As a reference the current panel is shown below:

Is this ready to be worked on?

jmatazzoni added a comment.EditedApr 2 2018, 7:04 PM

In T187919#4096852, @Mooeypoo wrote:

Is this ready to be worked on?

Yes, I think so. My only refinement has to do with Pau's suggestion of renaming the More Details button "External." I think we could still be a little more specific (external what?), and I'd like that button name to match the name of the section label in the panel. My top suggestion is simply External maps, because that can also be the name of the label.

@Pginer-WMF, would that work for you? I see that you're kind of working in the idea that the coordinates are also for "external" use. I don't think it's a problem with the label "External maps", but if we want to tie everything up neatly we could change "Coordinates" to "For coordinates"—meaning, these are the external maps "for" those coordinates.

Pginer-WMF updated the task description. (Show Details)Apr 3 2018, 1:33 PM

I updated the description with new mockups. "External maps" seems a good option to unify the button and the panel title.
Regarding the coordinates label, I left it as just "coordinates" since using "for coordinates" may have localisation issues (i.e., "External maps" + "For coordinates X, Y" may make sense as a sentence or not depending on the language).

I'll move this ticket to RFP, and further adjustments can be done as separate tickets (e.g., removing/replacing the "V" dropdown was suggested in the design review).

Looks great. Thanks!

Change 423826 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/Kartographer@master] [WIP] Tweaks to map details panel

https://gerrit.wikimedia.org/r/423826

What does the down arrow next to "External maps" do? If it closes the side panel, then it should point to the right.

What does the down arrow next to "External maps" do? If it closes the side panel, then it should point to the right.

The chevron pointing down was left out of the current iteration of changes, but it definitely needs review. We can consider an arrow pointing right as you mentioned or even remove it completely (since users may already know the path to open it since we present it initially close).

If it does not add too much complexity for the ticket, I'll support using the "arrowNext" in this round of changes, and later reconsider further adjustments in separate tickets. We may want the panel to have an opening transition that makes it appear from the side to reinforce the metaphor, or removing the icon if it feels redundant in actual use.

I'll update the ticket description to include the updated version:

Pginer-WMF updated the task description. (Show Details)Apr 5 2018, 1:04 PM

Thanks for bringing that up Ed. Moriel and I were just wondering about the same issue yesterday. The right-facing arrow seems like an improvement, since the user perception will be that the panel slides out from the right. Thanks for updating the design Pau.

@Pginer-WMF I've implemented the mockup to the best of my ability without the accurate distances. It looks fairly close to what you have.

The only thing I'm missing is the color for the hover effect on the external services items...? We could add it in a followup, but I wasn't sure which color to use.

@Pginer-WMF I've implemented the mockup to the best of my ability without the accurate distances. It looks fairly close to what you have.

Great. Where can I see it? I tried with a map in beta but was not updated.

The only thing I'm missing is the color for the hover effect on the external services items...? We could add it in a followup, but I wasn't sure which color to use.

The light blue color is Accent90 (#eaf3ff). There is more information about colors in the design style guide.

@Mooeypoo, when and where will we be able to see this, please?

@Mooeypoo, when and where will we be able to see this, please?

When someone reviews the change...

I'll add the color on a subsequent change so it doesn't hold this up.

I implemented the hover color in the current patch. I'll poke the team about reviewing it.

I've merged the patch.

I noted that in the map services dropdown, when you select "Topological" there are no features services so by default you only see the "View more" button. No big deal but it looks weird initially.

Change 423826 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Tweaks to map details panel

https://gerrit.wikimedia.org/r/423826

I took a look to the map in beta. It works as expected, but there are a few aspects that we may want to polish a bit:

  • Avoid the "View more" option when there are few options. If there are 7 or less options, all of them should be listed (without a "view more" button).
  • Items in the list of map services get highlighted when hovering anywhere in their row, but users can only click only on the label and the icon. The whole row should be interactive, and the highlight should expand from edge to edge of the panel.
  • Make the panel distance consistent in all sides. Ideally it should be 16px to all sides. This may require to distribute the padding through different elements (an example below).
  • Remove the instructions text "View this location in one of the services listed below. You can filter the list by map type:".
  • Add to the "View more" button the same padding that items in the list have so that the left edge of the text is aligned.
  • Adjust the coordinates text color to use Base20 (#54595D).

I included a CSS example on how to support some of the above changes (those about layout):

.mw-kartographer-description {
		display:none;
}

.mw-kartographer-mapdetails-coordinates-latlon {
	color: #54595d
}

.mw-kartographer-mapDialog-sidebar {
	padding: 16px 0 !important;
}

.mw-kartographer-mapdetails, .mw-kartographer-filterservices {
	padding: 0 16px;
}
.mw-kartographer-filterservices-list-item {
	padding: 4px 16px !important;
}

.mw-kartographer-externalservices>.oo-ui-buttonElement { /* "View more" button. Couldn't make a better CSS selector */
	margin-left:16px;
}

@Mooeypoo, Please also make the button name "External maps," not just "External," so that it matches the header in the panel. Thanks.

Pulling it back to 'in development' to work on the fixes with a followup commit.

Etonkovidova added a comment.EditedApr 13 2018, 7:18 PM

@Pginer-WMF Three minor questions
(1) - previously the coordinates for the displayed map were shown in the section 'Map details'. I guess this was a main logical reason to name the section 'Map details'. :

Now, the coordinates are listed under 'External maps' label - no potential source of confusion to users? And naming the button "External" there would be no hint that there is in fact, some additional info on the displayed map :

(2) Any reason why Coordinates are displayed on two lines?
(3) I read through the discussion about naming the button "External" - would be hard to translate (and understand, in my opinion). What about standard "More options" wording?

  • Avoid the "View more" option when there are few options. If there are 7 or less options, all of them should be listed (without a "view more" button).

Done.

  • Items in the list of map services get highlighted when hovering anywhere in their row, but users can only click only on the label and the icon. The whole row should be interactive, and the highlight should expand from edge to edge of the panel.

Actually, they can click either the label or the icon, but I can see how that's not very clear.

I am switching those rows to be a link, and the label to be an actual label rather than a frameless button -- but that means that we lose some of the OOUI behavior on those buttons, like the colors and things like accessibility markers (when tabbing through, focus, etc).
I can override the colors in the CSS, but we should test and make sure the other behavior is still okay.

  • Make the panel distance consistent in all sides. Ideally it should be 16px to all sides. This may require to distribute the padding through different elements (an example below).

Implemented the style you gave below. The only comment I have for note is that the list of items seem a lot more compact (less internal margin in there?) I think it's fine, but I want to make sure that's what you intended.

  • Remove the instructions text "View this location in one of the services listed below. You can filter the list by map type:".

Done.

  • Add to the "View more" button the same padding that items in the list have so that the left edge of the text is aligned.

Done (with your styles)

  • Adjust the coordinates text color to use Base20 (#54595D).

Done (with your styles)

I included a CSS example on how to support some of the above changes (those about layout):

Thanks! That was super helpful! I implemented verbatim, and added a class for the button to make that style easier to implement too.

@Mooeypoo, Please also make the button name "External maps," not just "External," so that it matches the header in the panel. Thanks.

Done.

Change 426149 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/extensions/Kartographer@master] Followup Ie6bdead6dcb: Improve sidebar styling and display

https://gerrit.wikimedia.org/r/426149

Change 426227 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/Kartographer@master] Use 'next' instead of 'arrowNext'

https://gerrit.wikimedia.org/r/426227

I've replaced 'arrowNext' with 'next'. The next/previous icons are rotations of the expand/collapse pair, and this action is 'collapse'. Also the arrow icons haven't been used anywhere yet (according to T141801 their usage is "Planned in MinervaNeue").

Change 426227 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Use 'next' instead of 'arrowNext'

https://gerrit.wikimedia.org/r/426227

Based on comments on the patch, I reset the item list to be OOUI buttons so that they follow the accessibility requirements, and also that they work the same in Apex, which the previous <a> design didn't have.

That means that the hover effect is built-in OOUI for buttons, which means -- none. @Pginer-WMF if we put hover effect on these buttons, that's overriding the styleguide. @Esanders Also made a good point about OOUI's hover color being grey, not blue. What do you want done here?

You could look into subclassing SelectWidget.

You could look into subclassing SelectWidget.

I thought about that, but it kinda reminds me of what we had to do in the Notifications popup, too. We started with a SelectWidget and we ended up changing out of it fairly quickly.

If we subclass SelectWidget, we end up overriding all behavior (including listeners for things like 'mousedown' as well as 'click' etc), so it ends up being a widget that overrides everything "just" to have the styling, and it's not just SelectWidget, it's also OptionWidget that needs to be overriden to undo the prevention of event propagation and to set it up with a <a> tag.

... on the flip side, if I create my own widget without SelectWidget (just with <a> tags), I'll need to force it to have OptionWidgets' hover/general styling...

I am not entirely sure what strategy is better. In the Notifications popup we had x-wiki bundles that made the choice easier (no SelectWidget) but here we really have a straight forward list.

Subclassing SelectWidget *and* OptionWidget for this list, honestly, looks like an overkill, but if we aim towards "as little maintenance as possible" then maybe that's better, seeing as it will get the updated versions of styling,etc from OOUI "for free".

That means that the hover effect is built-in OOUI for buttons, which means -- none. @Pginer-WMF if we put hover effect on these buttons, that's overriding the styleguide. @Esanders Also made a good point about OOUI's hover color being grey, not blue. What do you want done here?

The general idea is to have a list of clickable elements, which I assumed we had a standard component for, but I don't see an example in the demos. The hover color to use on lists is still an open issue, so let's use the standard to make sure it keeps aligned if it changes in the future.

That means that the hover effect is built-in OOUI for buttons, which means -- none. @Pginer-WMF if we put hover effect on these buttons, that's overriding the styleguide. @Esanders Also made a good point about OOUI's hover color being grey, not blue. What do you want done here?

The general idea is to have a list of clickable elements, which I assumed we had a standard component for, but I don't see an example in the demos. The hover color to use on lists is still an open issue, so let's use the standard to make sure it keeps aligned if it changes in the future.

The "standard" is not a standard.

I am using OO.ui.ButtonWidget. They have no hover color.
If I use OO.ui.SelectWidget, it has hover colors, but will be requiring heavy modification to itself *and* a child class for OO.ui.OptionWidget, just to have the hover colors.

The OO.ui.ButtonWidget method works, except it doesn't have a hover color, so I can apply the color requested, or apply no hover. Either way, going the SelectWidget route and overriding/shutting-off all click/mousedown/focus events sounds a lot more evil than applying the style...

Screenshot taken with the latest patch:

@Mooeypoo, Please also make the button name "External maps," not just "External," so that it matches the header in the panel. Thanks.

I'm looking on beta and don't see the change to the button name. Was this change made? If not, please make it, unless there is some issue I'm unaware of. I don't think the word "External" on its own will mean much to people. Also, I'd like the panel title and the button to say the same thing.

If there is a problem with 'External maps," we could go for something like "Other map services" or "Other maps of this location." But I'm not sure the latter would fit on one line as the title of the panel.

I'm looking on beta and don't see the change to the button name. Was this change made?

The patch will be merged later today and should appear on beta shortly after. We'll let you know.

Change 426149 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Followup Ie6bdead6dcb: Improve sidebar styling and display

https://gerrit.wikimedia.org/r/426149

I'm looking on beta and don't see the change to the button name. Was this change made?

The patch will be merged later today and should appear on beta shortly after. We'll let you know.

Merged. Should be on beta now or shortly.

Etonkovidova added a comment.EditedApr 20 2018, 11:09 PM

Checked in betalabs.

Reviewed with @jmatazzoni and @Volker_E - the following are no-issues.

(1) (seems to be specific to beta) Unnecessary horizontal scrolling in the side panel:

(2) On enwikivoyage (and on https://maps.wikimedia.org/#7/45.936/10.481) 'Switzerland' is displayed in four different languages (as long as the name of the country is displayed, it will be in four different languages):


Now it displays four names only with zoom 5 and lower. Other zoom levels will display 'Switzerland' in English only.

(3) No tooltips for the right arrow icon.


(4) enwikivoyage does not show layers options when 'More details' is clicked.

The layers options are shown when the side panel is open. I did not see any particular reason why it might be bad, but it's curious that previously we had a different behavior.

(5) Unbalanced positioning of the arrow icon and (maybe) of external links icons:

Compare with previous layout :

Etonkovidova closed this task as Resolved.Apr 24 2018, 10:56 PM
Etonkovidova added a subscriber: Volker_E.