[Planting Flow - Design] Add Annotation when locating a tree

[ri0nardo]

When the pin to locate where the new tree is planted, its not very clear. The direction is to add annotations on the screen to give the user directions on what to do.

Do we want annotations on the top of the screen? Then have button below that state "use my location" (Geolocate) so the user doesn't have to drag a pin to the specific location. Once the geolocate button is pressed, do we make the user press the button again to "confirm" the location? If geolocate is turned off for the user, do we want a button to say "plant here" so the tree stays?

Resources: https://dribbble.com/shots/16099487-Prkd-Concept-App/attachments/7950086?mode=media https://dribbble.com/shots/6746914-DailyUI-029-Map/attachments/6746914-DailyUI-029-Map?mode=media https://dribbble.com/shots/7038046-Pick-up-point-selection https://dribbble.com/shots/6975675-Wayfinder https://dribbble.com/shots/16786064-Taxi-Driver-App https://dribbble.com/shots/16520555-Cab-booking-app-UI https://dribbble.com/shots/6132161-Add-campaign

[Daudsarfraz]

Can i solve this issue? Please assign this issue to me. so i will contribute in this issue.

[ri0nardo]

@zoobot when i used the app to plant a tree, i had to tap the hovering face to continue. I am proposing to add buttons stated in the description of this ticket. Do you think that the geolocate and confirm button is a good idea? I want to reduce it to one button pressed rather than two.

Also I think with the addition of buttons could potentially save the pin graphic for the time being.

[zoobot]

When the pin to locate where the new tree is planted, its not very clear. The direction is to add annotations on the screen to give the user directions on what to do.

Do we want annotations on the top of the screen? Then have button below that state "use my location" (Geolocate) so the user doesn't have to drag a pin to the specific location. Once the geolocate button is pressed, do we make the user press the button again to "confirm" the location? If geolocate is turned off for the user, do we want a button to say "plant here" so the tree stays?

I am confused about this a bit. Currently we have a geolocate button AND a tooltip that says what to do. Are you seeing our current geolocate button and tooltip? Is the tooltip different than what you are wanting with the annotation? Can you rephrase and/or write a list of exactly how you think the plant button/geolocate would ideally work in situations where user does and doesn't have location services? Thanks :) @ri0nardo

[ri0nardo]

So the tooltip to a degree work on desktop since you have to hover over the pin for it to give you direction on what to do.

I just tried it on mobile, and the tool tips do not appear when I tried to hover over the pin. That is the issue that the tool tips only appear occasionally or not at all. The directions should be explicit clear by being a banner of sorts on the screen. The real confusion from testing is that everyone thought the planting circle graphic is a loading icon.

Also the issue is that geolocate button isn't clear from it being on the top right corner of the screen. For a better UX that theres a button that states what to do. cause a person could have a shaky hand and accidentally drag the tree to the wrong location.

For a person who doesn't have geolocate, there would only be a "confirm button" so they pick a location

For Geolocate, I am not sure if it automatically know you gave access to app to know your location. But if we had a button where it said "locate your self" and if worked, they could also drag the pin and press the confirm button to input the information. But if it failed, they would just drag the pin to the appropriate location.

I added super rough mock of the one idea I had to make the process more clear for new and existing users.

[zoobot]

OK I think I get the issues now.

1. We need to have a tooltip/speech bubble/message ALWAYS show on mobile AND desktop. It should not be disappearing randomly when the planting button is on.
2. Perhaps can we change the tooltip to look MORE like a speech bubble than it does now and have "Pin me to planting location" or "Drag me to planting location"? https://codepen.io/run-time/pen/VNRBJd
3. Instead of confirm location button, the sidebar comes out immediately and longitude/latitude Are larger, at the top and change as user moves the pin. so it doesn't look like its part of the form. OR have the lng/lat in the tooltip AND have a confirm button?
4. To fix the pin looking like a loading bubble, could we add a black crosshair centered on the nose?

Do you dislike the tooltip entirely or just that it disappears? IF the tooltip is fixed so it doesn't disappear, would you still rather the message is on the top or bottom instead and doesn't move with the pin? @ri0nardo

[zoobot]

As far as the geolocate button, I don't think we should have a second geolocate button but perhaps have a tooltip that points to the geolocate button saying locate yourself?

Geolocate button icons are standard on most maps, so we should keep to that standard for people who know it and point it out for people who don't, when the planting button is pressed.

[ri0nardo]

OK I think I get the issues now.

1. We need to have a tooltip/speech bubble/message ALWAYS show on mobile AND desktop. It should not be disappearing randomly when the planting button is on. I am onboard for this.

2. Perhaps can we change the tooltip to look MORE like a speech bubble than it does now and have "Pin me to planting location" or "Drag me to planting location"? https://codepen.io/run-time/pen/VNRBJd I don't exactly like the idea of it being a speech bubble. I was just playing with the planting tool and it was annoying how the tool tipe drags around and is delayed when I move the tree pin. But I do like the quotes you proposed.

3. Instead of confirm location button, the sidebar comes out immediately and longitude/latitude Are larger, at the top and change as user moves the pin. so it doesn't look like its part of the form. OR have the lng/lat in the tooltip AND have a confirm button? The reason I am proposing a confirm button is that if the location was wrong and the sidebar popups up on mobile, its sort of frustrating each time you move it you have to close the menu. On desktop I don't see it as an issue, but this is more of a mobile tool. But we could test this out. I dont want to just down the route I am proposing.

4. To fix the pin looking like a loading bubble, could we add a black crosshair centered on the nose?

We can try may solutions. From my testing, many testers said it was confusing. The crosshair centered could look like a sniper. But I am more on the side of exploring many solutions.

Do you dislike the tooltip entirely or just that it disappears? IF the tooltip is fixed so it doesn't disappear, would you still rather the message is on the top or bottom instead and doesn't move with the pin? @ri0nardo

I am not opposed to the tooltips. they are great for the tree nodes. But in this scenario I like the idea of having a designated area for the directions. That is why I am bringing up the uber driver app many times.

I tested the mobile app with the tooltips, and the delay isn't optimal for mobile. See screenshot. Also on google maps web app, the geolocate button is significantly larger, I think we can increase the geolocate button to match the sizing of the plant & adopt buttons on mobile. On desktop the sizing it fine. see screenshot @zoobot and anyone else viewing this thread.

[mwpark2014]

I'm getting lost in this discussion so maybe something we can talk about in the next meeting.

I personally like having annotations in the bottom area rather than a speech bubble that follows the plant tree marker. Feels less distracting.

I still think it's unintuitive how geolocate is tied to planting a tree. Maybe it has to do with when you first try to plant a tree, there are two popups that come up and make it really difficult to proceed - 1) Permission to know your location and 2) A login/signup screen. I almost never want to plant a tree because of how annoying these are. Or maybe I'm just not familiar with the geolocate icon states. It's not obvious to me in the screenshot that clicking on the geolocate button will snap the planting tree marker back to my geolocation. I would have thought that clicking on the geolocate button would turn off geolocation, because I'm not used to the "on but unfilled" geolocate state

[zoobot]

1) Permission to know your location and 2) A login/signup screen.

Once the user hits plant, geolocate is on by default in mobile use so the user will get prompted. It will need to be allowed by the browser. The options are allow, deny, ask, these are browser settings the user can choose.

What do you propose for default mobile and desktop for geolocate settings?

What do you propose instead of having the user log in to plant a tree? When/how is a preferable time to log in?

[ri0nardo]

I still think it's unintuitive how geolocate is tied to planting a tree. Maybe it has to do with when you first try to plant a tree, there are two popups that come up and make it really difficult to proceed - 1) Permission to know your location and 2) A login/signup screen. I almost never want to plant a tree because of how annoying these are. Or maybe I'm just not familiar with the geolocate icon states. It's not obvious to me in the screenshot that clicking on the geolocate button will snap the planting tree marker back to my geolocation. I would have thought that clicking on the geolocate button would turn off geolocation, because I'm not used to the "on but unfilled" geolocate state

This got me thinking about how we can have anyone plant a tree without an account. Since the public tree data is attached to an organization, but not an account specifically. But I still understand that we need to tie a tree to an account to "track" where it came from. But I do agree the pop ups are frustrating, but we do need to ask permission to use location. The main scenario I see geolocate being extremely valuable is when someone is standing in a location, and it gets the user coordinates. Personally I understand my specific location on a map, but with the evolution of tech throughout the years people have depended on a phones location rather than knowing where they are. I have many friends who would get lost if they walked outside and walked 6 blocks. But there are areas we have to sacrifice on the user experience side to make this work.

[ri0nardo]

1. Permission to know your location and 2) A login/signup screen.

Once the user hits plant, geolocate is on by default in mobile use so the user will get prompted. It will need to be allowed by the browser. The options are allow, deny, ask, these are browser settings the user can choose.

I just tried the geolocate button, and it did not indicate if it was working. (I tried on my phone) I pressed it on and off, and the pin did not move. (My location is on). So we need to have some indicator of what went wrong, or how to make it work for users. If I can't understand whats going on, thats an issue.

[zoobot]

The main scenario I see geolocate being extremely valuable is when someone is standing in a location, and it gets the user coordinates.

This is exactly why we currently have geolocate on by default in mobile, so a user can stand over a tree hole and get the exact lng/lat without having to do it manually. Once the user logs in and allows location services once, the popups are done. I am not sure how else to solve these issues as A. The browser requires location permission popups, B. We want to keep track of who's planted a tree so it can be tied to user profile, tree history, etc.

I also get annoyed about having to log in to every single app, but I don't know what an alternative would be for planting.

[zoobot]

1. Permission to know your location and 2) A login/signup screen.

Once the user hits plant, geolocate is on by default in mobile use so the user will get prompted. It will need to be allowed by the browser. The options are allow, deny, ask, these are browser settings the user can choose.

I just tried the geolocate button, and it did not indicate if it was working. (I tried on my phone) I pressed it on and off, and the pin did not move. (My location is on). So we need to have some indicator of what went wrong, or how to make it work for users. If I can't understand whats going on, thats an issue.

I just had that happen when I tried too, after you mentioned it. the issue was that chrome was not allowed by the os settings but location services WAS allowed in the browser.

For this we should possibly add alerts or feedback message about what to do or at least to check location settings. Not sure what options we have for the os location services to find out if its on.

[ri0nardo]

1. Permission to know your location and 2) A login/signup screen.

Once the user hits plant, geolocate is on by default in mobile use so the user will get prompted. It will need to be allowed by the browser. The options are allow, deny, ask, these are browser settings the user can choose.

I just tried the geolocate button, and it did not indicate if it was working. (I tried on my phone) I pressed it on and off, and the pin did not move. (My location is on). So we need to have some indicator of what went wrong, or how to make it work for users. If I can't understand whats going on, thats an issue.

I just had that happen when I tried too, after you mentioned it. the issue was that chrome was not allowed by the os settings but location services WAS allowed in the browser.

For this we should possibly add alerts or feedback message about what to do or at least to check location settings. Not sure what options we have for the os location services to find out if its on.

Yes, how google maps has the gray text box at the bottom of the screen wasn't annoying to me. If anything to me it was very useful. If we had a popup screen that would frustrate the user 100%. We want to avoid popups at all costs. How google also has a "help" hyperlink is also useful. So writing that up even though an extra task will go a long way to fixing the location issue.

[zoobot]

Great! :)

[ri0nardo]

I want to leave a note, all the mobile testing i did was on safari.

[mwpark2014]

What do you propose for default mobile and desktop for geolocate settings?

For desktop, we do not tie geolocation with the planting feature. They are two separate features.

For mobile, I understand why we might assume that the user would like to use the geolocation when they use the planting feature. But what I'm saying is that they should still be distinct but instead we should guide them to use the two features together. Some UI element that suggests "we can see that you want to plant a tree. do you want to plant it at your exact geolocation? Here's how to do it!" And the user has a clear expectation that activating the "plant at my exact geolocation" will require a permissions popup.

What do you propose instead of having the user log in to plant a tree? When/how is a preferable time to log in?

This is a tricky question. Partly depends on how important it is to "We want to keep track of who's planted a tree so it can be tied to user profile, tree history, etc.".

One solution we can do is allow users to create a new Tree without being redirected to auth0. Instead, we give them an option to associate it to their account or to create it anonymously. Then we can allow users to claim trees at a later point to tie it back to their user profile, tree history, etc through 1) manually claiming then logging in or 2) an automated way using an identifier cookie that we can tie to all users who use wtt. If they log in at any point (to see their history for instance), we can associate that cookie with that account and tie all previously created trees with the account. This approach could get sophisticated and would require a full spec imo

@zoobot @ri0nardo

[mwpark2014]

Actually, I have different issues with the login pop up as well so maybe some of my frustration could be solved in other ways.

1) The login redirected is unexpected. I didn't click login or sign up so why am I on this full screen popup? I didn't expect this when I clicked on "PLANT".

Maybe this can be solved with replacing the PLANT button with a login button that says something like "Log in so you can plant a new tree"

2) The full screen popup is so annoying to get out of. There's no obvious X or way to close. I end up using the back button to get out of the login page, which actually breaks the planting feature since it then allows me to fill out the form and attempt to submit even though I haven't logged in.

We should fix the back button bug, and we shouldn't direct to the login screen unless a user clicks on something that explicitly says "login" or "sign up" IMO

[ri0nardo]

To add to the annotation:

• [ ] Will give directions on to move the pin to the specific location
• [ ] An Address or coordinates will appear on the bottom of the direction to give more info on what is going on and where you are looking.

[ri0nardo]

[ri0nardo]

[mwpark2014]

Should we pin the final mocks and requirements to the opening post for whoever ends up picking up this ticket? Might be hard to dig through all this conversation 😅

[ri0nardo]

Should we pin the final mocks and requirements to the opening post for whoever ends up picking up this ticket? Might be hard to dig through all this conversation 😅

I am breaking tickets up which I already started doing. So i am making design its own ticket and implementation its own ticket. I also break the main epic up into smaller epics for implementing features.

See #503 for main epic See #516 for implementation epic 1 I haven't made an implementation ticket for this yet as I was researching ways to annotation on mobile.

[mwpark2014]

Ahhh, that's my bad. 👍

[ri0nardo]

[zoobot]

I am on the fence about this one as it looks a tiny bit like a gender symbol... ♂, ♀, ☿,

O--- reclining tree O-|-- reclining lady <--O reclining man

What do you think about using the tree logo thing or something like the maintenance buttons?

I like the Frankenstein and message area on the bottom!!

[ri0nardo]

I am on the fence about this one as it looks a tiny bit like a gender symbol... ♂, ♀, ☿,

O--- reclining tree O-|-- reclining lady <--O reclining man

Great callout. My view is that

1. I call it out as a pin with the directions below.
2. Generally maps use "pins" for location, so people would be familiar with the icon.
3. Its simple and gets to the point.

But I did consider using a tree, but wanted to follow convention for the first version.

What do you think about using the tree logo thing or something like the maintenance buttons?

I can try it out, but wanted to test out the pin first. If the pin wasn't clear enough I wanted to try out other icons.

[ri0nardo]

@zoobot since the "planting" button is for adding trees, vacancies, dead trees, existing trees, etc. Is it already clear enough that the function includes all these actions? For me I soon find out about these options once I get to filling out the tree info.

I'm trying to figure out if we can clarify that these other options also serve a purpose in the planting feature.

An example is that we add a little more text in the annotation stating "place your pin at the vacant spot, etc". Or is it fine as is?

[zoobot]

What do you think about a selector or checkboxes that says:

1. new tree
2. request a tree
3. vacancy for a tree
4. report tree problem

At the top of form? Default would be New Tree.

[ri0nardo]

I was thinking of keeping the form the same. I was considering renaming planting to "Add Tree" (where the first button is), but at the same time it might not be clear. I would say we could just see what the response is with the current MVP? And if we do need to clarify / change anything we can do it later?