Page MenuHomePhabricator

[EPIC] Improve user access and usage of "Nearby" articles
Closed, ResolvedPublic

Description

Links

Design document

https://docs.google.com/document/d/10j1xbMJjW8tLUOdWMws6ruUxxOGbpmRWCIgaONnZSDc/edit?usp=sharing

Prototype

https://wikimedia.invisionapp.com/share/BHAEYEQAS#/218570419_01_Map_-_Map_View_-_Selected_Pin

Zeplin

https://zpl.io/Z21KiN7
Tags: T130889 [EPIC] Places, Maps


Abbreviated design document

Map View

Map view with selected pin. Center map icon in top right.Map view with ‘redo search in this area’ pill active.

The map view is the default view of the Nearby tab. The purpose of the map view is to provide users with a visual way to explore articles with location information. Users can zoom in and out and pan across the map. The map view utilizes a variety of pin styles (see below) to represent articles. Articles that are visible on the map can also be viewed in a list view (see List view section below).

Redo search in this area
When the user navigates by panning or zooming in or out on the map a ‘redo search in this area’ pill will appear at the bottom of the screen. Navigating around the map does not automatically trigger a new search, only tapping on the ‘redo search in this area’ will trigger a new search of the current screen area.

Current location
Tapping on the current location icon in the top right of the map will center the map on the user’s current location if they have location services turned on. If the user has not enabled location access they will see the empty state model from this ticket: https://phabricator.wikimedia.org/T123684

Pin Styles
Three pin styles

Unselected pins
Only one pin can be selected at a time. All other pins should be presented as an unselected pin (or pin cluster if appropriate). At the default zoom level[1] all unselected pins regardless of their proximity to one-another are presented as unselected pins.

Tapping on an unselected pin makes it the only selected pin and opens the pin preview (see Preview (selected pin) below).

When the user zooms out from the default zoom level, unselected pins (based on density on the screen) may combine to become a pin cluster (see Pin clusters below).

Preview (selected pin)
When a pin has been tapped on it becomes the only selected pin on the map view. The selected pin transforms into a larger thumbnail pin with a preview of the article floating above, below or to the right or left of the thumbnail (based on screen position).

Pin clusters
Chrome around the map has been updated, but the gif has not been updated to reflect these changes
Design inspired by: http://sfbay.craigslist.org/search/apa

GIF of pin loading and clustering (transitions are a little sped up)

When a user performs a search zoomed out from the default level, or zooms out from a previous search / position, pins that are within 50 px of each other are combined into a pin cluster. The number on the pin cluster and its size represents the number of pins represented by the cluster.

As the user zooms out, pin clusters that are close to each other (spacing to be defined)[2] or overlapping are condensed into a larger pin cluster. No two pin clusters should ever overlap.

When a user performs a search from a country level, or continent level view depending on the pin density (eg. if all of the pins returned by the search are in England vs. if articles are distributed across the world map), location (eg. user searches for a specific city or town), number of pins (eg. only two articles are returned, one in Africa and one in Canada vs. large densities of pins across multiple continents) the map may display pin clusters, or automatically zoom-in to show individual pins.

Tapping on a pin cluster will zoom the user’s view in to show items clustered within the tapped on pin cluster. If the cluster is very large, tapping on the cluster may display smaller clusters. Tapping on a small cluster of densely located pins will display individual pins.

List view

List viewExposed swipe menu on a list item

The list view provides a quick way for users to scan and browse across a set of articles.

List items
Each list item includes a thumbnail (or placeholder image) of the article’s feature image with a compass animation around it. If a user has location services turned off the compass animation should not be shown.

If the user taps on any part of the list item this should trigger the opening of the associated article. Swiping on a list item exposes the swipe menu.

Search, search bar and filters

Default stateWith active searchSearch filters drop down, saved articles disabledSearch filters drop downSearch empty stateSearch historyAutocomplete / search suggestions

Searching
Users can search for geographic locations (eg. cities like Bangalore, India; countries like Monaco; or addresses like 221B Baker Street) as well as articles (eg. Battle of Stalingrad, Empire State Building or Anish Kapoor) or topics (eg. Museums, monuments or mountains).[3]

Search field
When a user activates the search field a set of pre-populated searches as well as their recent search history is displayed. Tapping on the pre-populated searches (Top articles near you and Your saved articles) activates the pre-populated search. If a user has not saved any articles or has location services turned off they will see a standard app error message banner.

Users can remove recent searches by swiping on the list items and tapping on delete (same as on Recent searches for search across Wikipedia).

Toggle between list and map view
Tapping on the toggle in the top right corner of the screen will move the user between map and list view. The view that they are currently on is highlighted in blue. Clicking on the toggle while the search field is active will deactivate the search field as the view is toggled.

Outside of the Nearby tab

Explore feed card
See ticket:
https://phabricator.wikimedia.org/T153119

Empty states / location permissions denied
See ticket:
https://phabricator.wikimedia.org/T123684

Questions and concerns

[1] How should the default zoom level be defined?
[2] What should be the pin cluster consolidation point (by pixels, geographic space?)


Original ticket description

Hypothesis
Nearby currently resides on the Explore feed as another card. Giving this feature more space and different representation (maps) will improve user engagement and expectation.

Ultimate vision
Extend and improve the use of geolocation as a primary method for users to find and explore encyclopaedic content.

Short term goals/needs
Improve user engagement with the Nearby feature by:

  • Moving Nearby to its own tab in the tab bar
  • Adding an ability for users to view results in a map or list view
  • Updating the geolocation in real time when the Nearby tab is active
  • Allow searching on map and/or filtering
  • Ranking or sorting of search results
  • Additional animations, transitions and flash to help drive up engagement

Rationale
Low usage of the Nearby feature, which we hypothesize to be due to a combination of low prominence of the feature (buried as the 4th or lower card on the Explore feed) as well as the lack of map view and associated searching, sorting and filtering capabilities that is usually available on equivalent applications with a map view.

Additionally users have frequently highlighted the Nearby feature as unique and well liked app feature, and requested easier and more complete access to geo based browsing and discovery in comments on OTRS, iTunes and in press reviews.

Initial mocks
Initial mocks on mediawiki

Related Objects

StatusAssignedTask
ResolvedJoeWalsh
DeclinedNone
ResolvedEBernhardson
ResolvedJMinor
Resolved AMroczkowski
ResolvedJoeWalsh
ResolvedJoeWalsh
Resolved AMroczkowski
Invalid AMroczkowski
Declined AMroczkowski
Resolved AMroczkowski
Resolvedcmadeo
Resolved AMroczkowski
Invalid AMroczkowski
OpenNone
Resolved AMroczkowski
ResolvedJoeWalsh
ResolvedJoeWalsh
OpenNone
ResolvedJoeWalsh
ResolvedJoeWalsh

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
JMinor removed RHo as the assignee of this task.Nov 3 2016, 10:13 PM
JMinor added a subscriber: RHo.
cmadeo claimed this task.Nov 7 2016, 9:48 PM
cmadeo moved this task from Needs Design to Design Doing on the iOS-app-v5.4.0-Hiking-Boot board.
cmadeo added a comment.EditedDec 13 2016, 6:27 PM

Building off of @RHo's work, here are two preliminary prototypes of the transitions, states and interactions on the nearby tab:

Separate Map and List
Default map view which toggles to show a full list view of nearby articles
https://wikimedia.invisionapp.com/share/HF9QNBNJ3
This prototype is an updated version of the prototype that the videos above are based on, with distinct map and list views. In this prototype I’ve updated the pin designs to make them smaller and not much else has changed. Pros and cons are outlined in the first screen of the prototype.

Integrated Map and List
Map view with sliding list overlay featuring expanding article cells
https://wikimedia.invisionapp.com/share/6E9RB7XVY
This prototype is built around a single screen experience. There is a list view which slides up from the bottom of the screen when the hint is tapped or when a pin is selected. Pros and cons are outlined in the first screen of the prototype.

Bottom toggle map and list
Default map view with a rounded toggle between map and list view at bottom
https://wikimedia.invisionapp.com/share/G99SNTIRY
This prototype is built around a single screen experience. There is a floating search box and a bottom toggle between the default map view and a list view overlay. Pros and cons are outlined in the first screen of the prototype.

Bottom toggle map and list
Default map view with static search header and visual toggle between map and list view.
https://wikimedia.invisionapp.com/share/E69SNZX78
This prototype has a toggle between two separate screens (map and list). The toggle is located on a static search bar at the top of the screen. Pros and cons are outlined in the first screen of the prototype.

Search bar toggle
Default list view with static search box and visual toggle between map and list view.
https://wikimedia.invisionapp.com/share/XY9SOH7TD
This prototype is built around a single screen experience. There is a floating search box with a toggle between the default map view and a list view overlay. Pros and cons are outlined in the first screen of the prototype.

Initial thoughts on subtasks/order of development:

  • Build a map tab with current position/reposition logic
  • Pin preview and actions
  • List view
  • Search in maps
  • Pre-filled searches (Most Read, Highest Quality, etc)
  • Dealing with large zoom scales and pin clustering
  • RTL, localization and dynamic type
  • Analytics and metrics

To be further broken down by tech.

cmadeo added a comment.Jan 4 2017, 1:22 AM

Pin clustering
In areas with high pin density, or when a user has zoomed out on the map, pins are clustered.
https://wikimedia.invisionapp.com/share/P39WIX6VH
This prototype illustrates an approach to clustering pins on the Nearby tab map view. Pins are clustered based on geographic proximity outside of the default map zoom level. Pros and cons are outlined on the first screen of the prototype. Cluster styling inspired by http://sfbay.craigslist.org/search/apa and Apple Maps.

Exact clustering logic and animations to follow upon approval of design.

cmadeo added a comment.Jan 4 2017, 1:44 AM

Also @JMinor, not sure if we want to include any of these tasks as subtasks of this epic? Some might require breaking down of their own*:

As a user who as denied location permissions to the app, I want to know what I am missing
https://phabricator.wikimedia.org/T123684

App should not ask for location permission during onboarding
https://phabricator.wikimedia.org/T152150

As a user viewing an article, sometimes I want a map view
https://phabricator.wikimedia.org/T118297

Update Nearby feed item to work with new maps tab
https://phabricator.wikimedia.org/T153119

*Full disclaimer: still figuring out what constitutes an epic vs stand alone task!

cmadeo updated the task description. (Show Details)Jan 5 2017, 11:45 PM

@cmadeo could I have the asset for the Nearby tab bar item? Need one for selected and one for deselected - I've attached the history tab bar icons for reference. Thanks!

cmadeo added a comment.Jan 6 2017, 8:48 PM

@JoeWalsh let me know if you need a different format or size.


@cmadeo could you render them at 24pt by 24pt? It looks like they are 48 by 48 currently

@JoeWalsh, sorry about that! Updated:


cmadeo updated the task description. (Show Details)Jan 12 2017, 1:34 AM

Updated the description to include an animation of pin loading and clustering.
The .mov file can also be downloaded here: https://drive.google.com/file/d/0ByziXGUvZZTzOEotNU5iVXViTG8/view?usp=sharing

JoeWalsh claimed this task.

Or this:
https://en.wikipedia.org/w/api.php?action=query&format=json&maxlag=200&generator=search&gsrsearch=1+nearcoord%3A37.77666667%2C-122.39&gsrlimit=50&cirrusIncLinkssW=1000

You can also combine those last parameters and weight them to get different results.

This on puts weight on incoming links as opposed to page views

Does having gsrsearch=1 make it only return articles with 1 somewhere in the text?

JoeWalsh added a comment.EditedJan 23 2017, 6:54 PM

@Fjalapeno also, is it expected that there are warnings for invalid params for both cirrusPageViewsW and cirrusIncLinkssW?

warnings are expected, because they are not publicly exposed (we need to know what works before they get exposed)

sorry, you can remove the 1:

https://en.wikipedia.org/w/api.php?action=query&format=json&maxlag=200&generator=search&gsrsearch=nearcoord%3A37.77666667%2C-122.39&gsrlimit=50&cirrusIncLinkssW=1000

cmadeo updated the task description. (Show Details)Jan 23 2017, 8:17 PM
JoeWalsh added a comment.EditedJan 24 2017, 4:16 PM

@cmadeo @Fjalapeno @JMinor I pushed an alpha build (1047) with some basic searching and sorting by the params Corey mentioned. There's no clustering or article popover but it should be good enough to get a basic idea of the results. If it's helpful, I could add more fine grained control over the cirrusPageViewsW and cirrusIncLinkssW but right now it just switches between no param, cirrusPageViewsW = 1000, and cirrusIncLinkssW = 1000.

[edit] Make that build 1048 - updated with a different app icon and shared group container so that it can live side by side with the beta & release builds.

@JoeWalsh @JMinor After you let me know what works, let me know and I will create a ticket to have these profiles added publicly so they can be used in production.

You should be able to use them in beta until that happens.

Also note, some folks in analytics thought it might be nice to actually do an A/B test of some type to determine the best results. Not sure you want to take that up, but just throwing it out there.

@cmadeo apologies if i missed in one of the mockups above, but what happens when the user taps on an article cluster? also, is there any sort of loading state indicator if the network request for the places takes awhile?

@JoeWalsh, I didn't design a loading state indicator, but that would be a good idea! I wonder if we should maybe use the yellow system notification for this? or do you think that it'd be possible to show a some type of progress / loading indicator?

My initial thoughts on selecting pin clusters was that tapping on a pin cluster will zoom the user’s view in to show items clustered within the tapped on pin cluster. If the cluster is very large, tapping on the cluster may display smaller clusters. Tapping on a small cluster of densely located pins will display individual pins.

If a user performs a search from a very zoomed out state I'm assuming that the clusters will have fewer articles in them than the amount that exists for the covered area (I'm assuming there's a limit on how many results we can return at a time) so this would potentially mean that performing a 'redo search in this area' will uncover articles that were previously not exposed?

Definitely open to suggestions and thoughts on clusters / zoom!

@cmadeo the yellow notification or a spinner would work - maybe just the system "network is busy" indicator is enough? I'm not sure that there would be enough loading status to make a progress bar worthwhile.

I pushed an alpha build (1050) with basic clustering and tap to zoom into a cluster (it's rough and there's no animation but hopefully it's good enough to get the idea). I think after using it a bit I'm thinking showing a list might be better, but let me know what you think.

Thanks @JoeWalsh, just started playing around with the clustering. I think one issue for now might be the level of granularity for the pin clustering. Ideally at the default zoom level pins would be displayed as individual pins and not as clusters. Perhaps the smaller pin style (no thumbnail, ~15x15px) might help with displaying more individual pins at default zoom levels?

There is a list view in the designs above (users will be able to toggle between list and map view) but were you suggesting more of an exposed list of places when a user taps on a cluster?

Thanks!

Also I'm going to be updating the InVision prototype today as some aspects of the prototype are outdated.

Some notes from Reading Design team meeting:

  • There should be a threshold for showing suggested searches (eg. if a user has <2 saved articles with geographic locations associated with them we should not show 'Saved articles' as a suggested search
  • Is there a limit to the number of saved articles we can show on the map at one time? For instance if a user has 300 saved articles that have geographic locations associated with them, can we represent/serve all 300 of these articles simultaneously or is there a cap?
  • Saved articles subtitle should be 'X places found' to clarify that it is not representative of all of a user's saved articles, but instead their saved articles which have a geographic location associated with them.
  • 'Articles in the news' lacks a solid use case and should be the lowest priority of the suggested searches. If it is pursued later then we will need to find a way to communicate context (eg. the news story itself) on the map and list views.
  • Tab bar icon will need to be updated as compass is no longer relevant.
  • In the future we might want to add a message / text area on the map to communicate notes on saved places by users or relevant (news?) information.
  • We might want to explore having different pin shapes for different article types (eg. saved articles shaped like bookmarks).

@cmadeo was thinking either in the same style popover as the article callout is now or similar to how Apple Maps handles it (in this case, would also probably make sense changing the single article callout to this style)

I pushed alpha build 1051 with the pin size updates - that was next on my list so had it ready to go. Things can still get a bit crowded, I need to work out some clustering issues. Also- ignore the article view popover that is presented when you tap a pin - it's just a placeholder until the actual view is done.

cmadeo updated the task description. (Show Details)Jan 26 2017, 12:37 AM
JoeWalsh added a comment.EditedJan 26 2017, 9:51 PM

@cmadeo @JMinor I pushed another alpha build with clustering updates and an updated popover. I think I need to re-work the popover. The current implementation uses the system default popover.

The downsides of this implementation:

  • It takes a tap to dismiss the popover before you can tap another article
  • It can't have the transparent background and custom drop shadow that the mockup has

Presenting the popover in a custom way would fix this issue. Should I move forward with fixing the popover or move on to the search bar and the map/list toggle?

[EDIT] While working on search, I found an easy workaround for the double tap issue. There might be a way to do the clear background & shadow as well.

@JoeWalsh I think its fine to pause on popover and move to basic search implementation in particular...

@cmadeo @JMinor are there more details about how these autocompletions work? Is it only ever places? Would normal terms like "buildings" or "bridges" be in the list as well?

@JoeWalsh I could see two options here, depedning on what teh completion suggesters are available.

The easy path is to use the standard keyword autocomplete and then mark in the UI or filter to only results that have a geo coordinate associated with them.

If the performance of that is too slow or data costly (even with some progress indication), I could see using a built-in geo search like MKLocalSearchCompleter.

@JMinor @JoeWalsh looks like we could run 2 queries on MKLocalSearchCompleter to get the functionality above:

  1. One with no bounds to get "global" completion
  2. One with bounds of the current view port to get local completions (or maybe some minimum fixed radius like 5 miles)

I was looking into options with the MediaWiki API and we would not get anything better with the current APIs. It is something that we can look into building (likely based on Wikidata as @JoeWalsh suggested)

Let me know if the MKLocalSearchCompleter is sufficient.

@JoeWalsh On the page images limit of 50 results… still working that. It was limited to 50 results for performance reasons. So it might not get moved. Just asking them if they prefer that or making 2 requests.

I am also out to the services team on possibly wrapping all this in RESTBase - will let you know.

For the recent searches, if it's a text search, should tapping on it perform the search in the current viewport or move to the viewport that was searched previously?

Example: I'm looking at Boston on the map and search for Tea. I move the map to SF, bring up the recent search list, tap Tea - does it search for Tea in SF or move map Boston and then search?

@JoeWalsh I would imagine that it would search for Tea in SF. That being said, if the recent search is for Fenway Park and I've moved the map to SF, I'd expect to zoom back over to Boston.

@cmadeo @JMinor how many searches should be kept in the place search history?

JMinor added a comment.Feb 1 2017, 8:57 PM

@JoeWalsh can we reuse the same constraints as we do with recent searches for articles?

@JMinor I don't see any code that prunes the recent search list to a maximum length - the ability to prune the list is there, but nothing actually calls it.

JoeWalsh added a comment.EditedFeb 2 2017, 10:02 PM

@JMinor @cmadeo I pushed a build (1062) with a menu for adjusting the clustering parameters. In the map view, you shake to show and hide the sliders. They're set up so that moving right is more clustering, left is less clustering. Max indicates the zoom level when the map will stop clustering, delta is how "clustered" they are at a given zoom level, and agg is how aggressively they will pull other nearby items into the cluster (this does nothing if there are no clusters as defined by delta). If you find settings you like, better than the defaults (17, 4, 1) let me know what they are. And just a heads up - everything is reset to default when the app exits.

@JoeWalsh here are the icons. Map + List icon will need to be replaced as these are placeholders currently.

cmadeo added a comment.Feb 6 2017, 8:29 PM

Updated the Places scratchpad with two new locations (Hefei, Anhui, China and Brooklyn, NY, USA).

Some quick thoughts:

  • When I clear my search on list view, I can't 'undo' this action by clicking over to the map. It would be nice if I could escape out of my clearing of the search box by switching my view.
  • It was quite hard to be able to find Brooklyn, NY, USA as a suggested search (I kept seeing business names instead).
  • Would it be possible to limit the suggested searches to searches that yield results on the map? Occasionally I would click on something that looked interesting and I'd be moved on the map but be shown a message that there were no matching searches.
  • For locations that don't have very many related Wikipedia articles the differences between the searches (Top by links, top articles, etc) was barely perceptible (examples include Hefei, Anhui; Dixon, IL; Northampton, MA)

Based on recent conversations I have a few proposed updates to the pin styles:

  • Unselected pins have two primary presentation styles (zoomed in and zoomed out). Zoomed in pins include a thumbnail image if available or a placeholder if the thumbnail isn't available.
  • Reduced pin cluster size (following @JoeWalsh's lead on this one!)
  • Increased size of the selected pin thumbnail and added the compass animation.

The main goal with these updates is to address legibility issues with unselected pins on the map.

If these seem reasonable, I'll update all of the mocks / update this ticket + Zeplin.

cmadeo added a comment.Feb 7 2017, 1:01 AM
Proposed update to places tab header (updated list icon, tweaked map icon)Proposed update to the toolbar (updated Places icon)

I have some small proposed updates to the header of the Places tab:

  • Tweaked the map icon slightly to have a 2px outline
  • Updated the list icon to fit the iOS icon guidelines (2px strokes) and also changed the size of the icon to better fit the toggle.

Additionally I'd like to propose a new icon for the Places tab (to replace the compass). The compass feels directional and made more sense when the name of the feature was 'Nearby.' For the updated icon I aimed for something that felt universally related to places and landed on this droplet pin shape. Unfortunately we will not be using a droplet on the map presentation, however this droplet shape is commonly used to convey the idea of a place or a location.

You can see the proposed changes together here:

JoeWalsh added a comment.EditedFeb 7 2017, 6:43 PM

@cmadeo could I have the icons for the search suggestions (https://zpl.io/Z1TSEJx) at half the size they are in zeplin? Thanks!

[EDIT] And also the updated tab bar icon & toggle icons from your most recent comment? Double thanks!

cmadeo added a comment.Feb 7 2017, 9:24 PM

@JoeWalsh here are the assets! Let me know if you need a different size. I'll move back to Zeplin for exporting icons after this project, but unfortunately the screens are at 2x (my mistake)

Two quick thoughts:

Would it be possible to keep selected pins selected while the user moves the map? Users would still be able close the pin by tapping on the map or on another pin, but panning left or right or zooming in and out would keep the pin open.

My use case here, is tapping on a pin from a zoomed outstate and wanting to zoom in for a closer understanding of its geographic location.


Just rethinking some of the search box interactions.

Currently clearing a user's input in the search box opens up the search dropdown. Would it be possible to have tapping on the 'x' in the search box return the map to the default search (Top articles nearby) without opening up the search dropdown? This way users can clear their search without having to make a new search decision (and keep the map/list open). This is similar to the interaction between tapping in the search box vs. tapping on the 'x' in the search box on Google maps.

Two visual updates:

Search this area pill


Updated text Search mapped area.
Updated spacing 12.5px above and below text, 25px L + R of text. Randomizer pill should be updated too.


Current location


The truth is that I designed this button to be too small. I'm going to play around with some larger presentation styles and placements for this button. In the meantime though, adding a slight shadow might help with visibility of the button on land areas.

Shadow hex #000000, 20% opacity
Shadow placement X=0, Y=2, Blur=4, Spread=0

cmadeo added a comment.Feb 8 2017, 7:01 PM

@JoeWalsh thanks!

Feedback from Reading Design team:

  • Update pill text to "Search this area"
  • Make the opacity of the top bar on Places 100% (no transparency) to match the top bar on other screens in the app (this might also help with the optical illusion that is currently occurring where the top bar on Places looks shorter than the top bar on the rest of the app)
  • It might be frustrating for users to not be able to turn off the filter of 'Top Articles' without having to select another search term. Do we want a way for users to just view all articles in the mapped area (regardless of quality?). This isn't something that we should necessarily make a change to now, but should be incorporated into user testing.
  • Shorten the 'Saved articles' icon in the tab bar by 1px to make the icons in the tab bar more optically aligned. See image and attached updated icons below.


cmadeo added a comment.EditedFeb 10 2017, 12:25 AM
Animation for popover

Download the .mov here: https://drive.google.com/file/d/0ByziXGUvZZTzZ1ZnTTBSeUtWck0/view?usp=sharing

Added a little bit of bounciness and slowed down the animation slightly. I was hoping to match the places of interest pin animation on Apple maps.

Location pointer

Added a small triangle to denote the direction that the phone is pointed in.
The tip of the triangle has a radius of 1px

cmadeo updated the task description. (Show Details)Feb 10 2017, 10:02 PM

Updated designs on InVision (https://wikimedia.invisionapp.com/share/BHAEYEQAS#/218570419_01_Map_-_Map_View_-_Selected_Pin) and Zeplin.


There are some notable changes to the search page to better match the app's search screen:

  • Updated the height of the suggested searches / recent searches boxes to 59px
  • Updated grays throughout to follow the style guide colors
  • Small spacing tweaks (12.5px above and below each list element, tweaked the gray search type icons for alignment and bumped text on recent searches over to align with text of suggested searches)
  • Under related searches if there are no searches or a limited amount of searches do not show the gray lines that separate searches, instead just leave this area blank (see above)

I also made a few small tweaks to the header on the maps view:

  • Updated the color of the search box to fit within the style guide
  • Added a shadow to the bottom of the header bar to match the shadow on the top of the footer/tool bar
cmadeo updated the task description. (Show Details)Feb 10 2017, 11:04 PM
cmadeo added a comment.EditedFeb 21 2017, 8:12 PM

@JoeWalsh, just a few quick items that could use design updates:

Updates/tweaks

  • If a user has no saved items, the 'Saved articles' search suggestion should not be shown
  • Center map on your location icon is currently centered, but needs to be updated to be optically aligned instead (see below)
  • Center map on your location button should have a corner radius of 2px
  • Spacing between search box, toggle and center on map button could use some fiddling (see below)

Animations

  • Pin transition points will need to be tweaked on iPad (this is a todo for me!)
  • The selected pin transition looks great but feels a little laggy, slow. Could we work together to speed it up a touch?

Missing elements

  • W icon is missing on placeholder thumbnail pins (LMK if pdfs are needed)
  • Icons are missing for actions on popover (LMK if pdfs are needed)

Thank you!

This comment was removed by JoeWalsh.

@cmadeo could I have a large version of the W (@2x the size of the small)?

@JoeWalsh let me know if you need a different size:

@cmadeo thanks! I realize they're vector assets and should be infinitely scalable but iOS renders them out at given sizes based on the point size in the PDF.

With the location arrow, could I get a version of the icon with it tweaked to be offset with 0.5 pt spacing at the top and 1 pt of spacing on the right so that when the system centers it, it will be optically centered?

@JoeWalsh, no problem! It's not hard for me to export these :)
I'm not sure if the transparent background version worked, so I also uploaded one with a white background. Let me know if neither of these is what you are looking for though!

cmadeo added a comment.EditedFeb 21 2017, 11:55 PM

Also from @RHo:

Currently you cannot edit search term.

Steps to reproduce

  1. Open Places tab
  2. Enter in "New York" and select to go to that location.
  3. Tap on the search bar again where "New York" has been entered to update the search term to "New York City"

Expected
Tapping on the search term brings up the keyboard to allow the user to add 'City' in after New York.

Actual
Tapping anywhere on the search clears the search term entirely.

cmadeo added a comment.Mar 3 2017, 6:26 PM

@JoeWalsh could we tweak the sizing of the blue, circular current location pin? Could the interior blue be the same size as the green pins (on mid zoom level) and you can keep the white padding the same size it currently is.

Also I think that the X to close on the search overlay looks reasonable to my surprise!

@cmadeo yeah - I can update that. Also, we should probably switch to using an image for the pins, the rendering is kind of sloppy using built in view properties:

JMinor updated the task description. (Show Details)Mar 7 2017, 9:08 PM
JMinor updated the task description. (Show Details)
ABorbaWMF added a subscriber: ABorbaWMF.

Testcases updated. Moving to Needs QA.

Tested and appears to work. I did a number of tests using the devices below.

iPhone 7+ - iOS10.2.1
iPad Mini 2 Retina - 10.2.1

@Nicholas.tsg Can you please take a look on your iOS devices. Thanks!

Tested on iPhone 7 with iOS 10.2.1 and iPad Air 2 with iOS 10.2 (I don't have an iPad Mini 2 at home right now but this may be close enough).

This is fixed as I reproduced the @RHo steps on both the iPhone 7

and the iPad Air 2

cmadeo updated the task description. (Show Details)Apr 19 2017, 12:22 AM
JMinor closed this task as Resolved.