Share issue to social media to promote PS

[jonfroehlich]

When someone sees something particularly glaringly bad or interesting, they could hit a 'share on social media' button (e.g., Facebook, Twitter) and it would take the current screen and share it to social media. A link back to Project Sidewalk would be included.

This would be sort of like a public feed of: https://github.com/ProjectSidewalk/SidewalkWebpage/issues/248.

I got the idea when reading this report by the Center for Independence of the Disabled, New York: http://www.cidny.org/resources/Curb%20Cut%20Survey%20Report%20Final.pdf

Thoughts?

[misaugstad]

I really like the sound of this!!

[jonfroehlich]

I still think this would be a good idea and maybe a nice initial project for a new intern? Would have to figure out how this fits into everything wrt priorities but I do think it will help us increase visibility and maybe even virality...

[misaugstad]

100% agree, I'm really into this one :)

[jonfroehlich]

We'd want to start out by doing some design research about how other sites do this (and note: I'm not talking about that like giant share bar that everyone ignores) and then creating some mocks... before moving towards implementation.

[misaugstad]

@lstrobel how do you feel about taking up this project?

[jonfroehlich]

If you want to take it on, we should chat quickly about some ideas.

Sent from my iPhone

On Jan 16, 2019, at 4:44 PM, Mikey Saugstad notifications@github.com wrote:

@lstrobel how do you feel about taking up this project?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[lstrobel]

@misaugstad @jonfroehlich I think this idea is really interesting, I would definitely be interested in taking it up!

[jonfroehlich]

OK, great @lstrobel. We can chat more during the Hackathon tomorrow if you're coming?

[lstrobel]

Yes! I'll be there

On Thu, Jan 17, 2019 at 3:12 PM Jon Froehlich notifications@github.com wrote:

OK, great @lstrobel https://github.com/lstrobel. We can chat more during the Hackathon tomorrow if you're coming?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ProjectSidewalk/SidewalkWebpage/issues/456#issuecomment-455367064, or mute the thread https://github.com/notifications/unsubscribe-auth/AMSmo5FXAcdJ_pceb8dkr0FQQ-3Y_6GPks5vEQNmgaJpZM4K-DLT .

[lstrobel]

@jonfroehlich

Based off of my research, I've come up with two general design directions that I'd like to iterate on for the social media buttons.

The first idea is to have a smaller media share button that opens up a larger context menu. Ex: - would open up:

This mirrors a design that I found on many sites that have users share images of sorts. For example, Flickr has such a menu:

Or for the Maps GSV integration:

The other design possibility is to have static social media logos somewhere on the page. This trades off time for space: it would crowd the page more but the user wouldn't have to click through menus to share content.

You can find buttons like this on almost any website.

At this point, I'd love feedback on what people think of these two routes. Or is there possibly a route that I'm missing?

[jonfroehlich]

I like the first one best. Share button on left side (what's this icon look like?) and then a pop-up to help with the share action.

What are the key platforms? I think Twitter, Instagram, and Facebook? But what do I know? I'm most interested in posting to Twitter...

Jon

On Tue, Jan 29, 2019 at 11:04 PM Lukas Strobel notifications@github.com wrote:

@jonfroehlich https://github.com/jonfroehlich

Based off of my research, I've come up with two general design directions that I'd like to iterate on for the social media buttons.

The first idea is to have a smaller media share button that opens up a larger context menu. Ex: [image: new doc 2019-01-29 22 47 03_1] https://user-images.githubusercontent.com/12887715/51963454-7c049180-2418-11e9-9226-f747ac33f087.jpg

• would open up: [image: image] https://user-images.githubusercontent.com/12887715/51963492-ad7d5d00-2418-11e9-8fbb-8159234263f3.png

This mirrors a design that I found on many sites that have users share images of sorts. For example, Flickr has such a menu: [image: image] https://user-images.githubusercontent.com/12887715/51963612-0816b900-2419-11e9-92f8-665006254508.png

Or for the Maps GSV integration: [image: image] https://user-images.githubusercontent.com/12887715/51963795-7f4c4d00-2419-11e9-80df-8e37d8beca0d.png

The other design possibility is to have static social media logos somewhere on the page. This trades off time for space: it would crowd the page more but the user wouldn't have to click through menus to share content. [image: image] https://user-images.githubusercontent.com/12887715/51963873-b7ec2680-2419-11e9-8ee2-b5409397a0fd.png

You can find buttons like this on almost any website.

At this point, I'd love feedback on what people think of these two routes. Or is there possibly a route that I'm missing?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ProjectSidewalk/SidewalkWebpage/issues/456#issuecomment-458835080, or mute the thread https://github.com/notifications/unsubscribe-auth/ABi-9VhS6LsxmhQ0mPitUgSr51qsejEiks5vIUQOgaJpZM4K-DLT .

-- Jon Froehlich Associate Professor Paul G. Allen School of Computer Science & Engineering University of Washington http://www.cs.umd.edu/~jonf/ http://makeabilitylab.io @jonfroehlich https://twitter.com/jonfroehlich - Twitter

[isavin12]

Here's a mock showing the proposed share button and pop-up on Sidewalk Gallery. I think we need to do some user research to find out what platforms people are actually sharing to. Maybe we just start with Copy Link, Twitter, and Facebook. Also if we're happy with this as an approach, I can mock up what it would look like on other pages.

I also wonder if this can/should work with Issue #340? Should sharing coordinates be an option in this share menu?

[jonfroehlich]

I like this! Nice job @isavin12!

A few things:

• Agree that we should start small with just FB, Twitter, Email, and Copy Link support
• Should (could?) the 'Share' pop-up be right above the 'share' button to improve coherence and reduce mouse travel? Something like this (need to add the gray 'x' close in upper-right):
• I've also not been particularly happy with the tag and image date info placement. I think we can keep them below the image as they are now but this will likely be something we need to change as we add in more metadata and info to the expanded card (e.g., location info, map?)

[rpechuk]

I also really like the design @isavin12 !

The first thing that comes to mind for me is that this issue is actually two part, because as of now we don't have any specific link for each point on the map. Furthermore, when someone clicks on the link through whatever media they may be sharing it what do they see? A couple of my ideas:

1. An image with the tag included in it.
2. A gallery expanded version tile with that specific position
3. The "explore" interface that we already have in sidewalk core, but drop them in that specific position.

Should (could?) the 'Share' pop-up be right above the 'share' button to improve coherence and reduce mouse travel? Something like this (need to add the gray 'x' close in upper-right)

@jonfroehlich it's definitely possible, i'm slightly torn between if it's a good idea or not because although it does limit mouse movement most other share buttons that I remember have the popup in the middle so i'm not really sure.

I can start on a purely design aspect for now or if we decide to do something with more specific links (that somehow include lat/long or any other position data we have) I can start thinking about how to implement that.

[misaugstad]

@rpechuk can you also start to look up how those little previews work when sharing links? It would be helpful to know how they are created so that we know what is even possible when designing what should go there.

[rpechuk]

@misaugstad not quite sure as to what you mean. I'm guessing you mean how exactly they are able to get to facebook, twitter, etc. If you mean something else let me know.

[misaugstad]

Sorry, I mean what is the little preview that someone sees when a link is shared with them. You see a little image of the website that you would go to if you clicked the link. And I have no idea how those things work right now :)

[jonfroehlich]

Lots of resources online. For example: https://andrejgajdos.com/how-to-create-a-link-preview/

On Tue, Jun 29, 2021 at 2:59 PM Mikey Saugstad @.***> wrote:

Sorry, I mean what is the little preview that someone sees when a link is shared with them. You see a little image of the website that you would go to if you clicked the link. And I have no idea how those things work right now :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ProjectSidewalk/SidewalkWebpage/issues/456#issuecomment-870947033, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAML55MZJ3DXPF56B7ORILDTVI637ANCNFSM4CXYGLJQ .

-- Jon E. Froehlich https://jonfroehlich.github.io/ (he/him https://www.mypronouns.org/he-him) | @jonfroehlich https://twitter.com/jonfroehlich Associate Professor, Allen School of Computer Science & Engineering Core Faculty, Urban Design and Planning, College of Built Environments Director, Makeability Lab https://makeabilitylab.cs.washington.edu/ | Associate Director, CREATE http://create.uw.edu/ University of Washington Help make sidewalks more accessible: http://projectsidewalk.io

[rpechuk]

When sharing the current preview title and description are: Project Sidewalk Help us make sidewalks more accessible, for everyone.

respectively. As of now I don't have the labels themselves included in the preview picture as that should be another issue, which I can open or I can leave it to you. I was thinking in order to make each preview more specific to what you are sharing we can include the type of label and/or some info on the accessibility issue in the title/description and I was wondering if you guys had any ideas about what should be done. @jonfroehlich @isavin12 @misaugstad

[jonfroehlich]

Thanks Ron!

When sharing the current preview title and description are: Project Sidewalk Help us make sidewalks more accessible, for everyone.

Is this a question? Are you asking whether this is what we want for the title and description? If so, no. I don't think so. I think it would be more like "Look what I found with Project Sidewalk, a accessibility problem" or something hook'y like that.

Re: preview visuals. Without a mock or screenshots. Hard to get a sense of what you're envisioning. I think it should be overall quite minimal with the focus on the picture and the problem (and the label needs to be there to bring focus to the problem). Does that make sense?

[rpechuk]

Yup that makes sense, I'll start looking into it and post updates along the way. I'm headed out for the rest of the day, but will start tomorrow morning.

[rpechuk]

Latest Screenshots: Any changes/ideas? @misaugstad @jonfroehlich

[jonfroehlich]

Oh neat, this is coming along!

I think you could have a stronger call to action and then maybe use reduced-sized icons. I also think mailing is as important as social media. Maybe something like this:

But @Luciozzz and @isavin12 are the experts.

Mock here: ShareMock.pptx

[jonfroehlich]

In our team meeting, we discussed switching out the triangle to the share button, which should be more approachable and easy-to-understand. @misaugstad shared this on Slack (not sure where it came from):

[misaugstad]

^^ this is from Youtube

[Luciozzz]

A small prototype showing my idea:

https://user-images.githubusercontent.com/18668038/136473124-2fb151ab-f067-4a7b-84c6-62b90ba9075d.mp4

Made the call to action even bigger, renamed the label, added a "copy link" function.

[jonfroehlich]

Looks great to me overall!

The share button itself is too big and bold for my tastes. I prefer the YouTube-like button that Mikey found.

Love the copy link idea!

[misaugstad]

@Luciozzz note that the list of tags can be long and flow into that area. but that works well with the idea of decreasing the size of the button :)

@rpechuk the "copy link" feature should be really easy, right? I thought that that was part of the original mocks for this!

[Luciozzz]

Then I'd say we dedicate the space below the map for data only. I tried putting the share button next to the title. I feel like this arrangement/info hierarchy is more intuitive: https://user-images.githubusercontent.com/18668038/136475345-092ca55d-d23b-4d8a-8ae5-fb4b332f6303.mp4

Let me know what y'all think!

[jonfroehlich]

I still think bottom right corner is the right place.

It feels out of place to be next to the title.

[jonfroehlich]

I feel like the solution might be to make the bottom bar three columns instead of two and the tags (Etiquitas in Spanish) section more narrow.

So something like this (though forgive the gray-colored share button):

This is also closer to @isavin12's original mock, which I find quite clean!

[jonfroehlich]

@Luciozzz any follow-up thoughts on this?

@rpechuk, would you be able to make these changes relatively quickly once we hear back from @Luciozzz?

[Luciozzz]

@jonfroehlich Ilia @isavin12 and I talked this morning, and we are thinking of adapting to a new design for the entire gallery. Mockups will come soon (this week). If we can adapt to a cleaner design we might have more screen real estate, and we can try to rearrange buttons and CTAs.

But for now, I think this looks good to me:

[jonfroehlich]

Thanks.

Note that we are generally very happy with the gallery design... do you mean redesigning this expanded view?

[Luciozzz]

We were talking about branding and planned to come up with some branding ideas throughout the week. I think the current gallery design is pretty good, but if in the future we can have our design system we can update the gallery visually but keep the original functionality.

[jonfroehlich]

Yes, just bear in mind that our dev/engineering cycles are extremely limited so we should focus on the aforementioned three major areas we emailed about. I'm happy with Sidewalk Gallery. :) (Other than the current opens, of course) We have much greater areas of need to focus on for larger design tasks.

[rpechuk]

@jonfroehlich should have time to work on thursday so hopefully yes.

[jonfroehlich]

Great!

[jonfroehlich]

Hi @rpechuk, just a friendly checkin on this. How are things coming?

[misaugstad]

@rpechuk can you remind us where you're at on this? It would be nice to roll out even a limited version of it.

[rpechuk]

I just wanted to jump in with the most recent findings. Because of the way the image is passed to the share card (using meta tags and a URL) and the fact that google street view API doesn't allow any bot scraping (robots.txt file) we are not able to pass in the placeholder still image without hosting it somewhere. @jonfroehlich @misaugstad any ideas?

See: https://developers.facebook.com/docs/sharing/webmasters/images

[misaugstad]

@jonfroehlich Ron suggested that we could temporarily host the images/crops somewhere as a way to achieve this. Does that sounds like something that's worth doing? I don't imagine that we'd want to host all of these crops indefinitely... So is it worth it if the image links end up breaking in the future? Or should we just stick with something like a Project Sidewalk logo for the image when sharing a link to Project Sidewalk?

[jonfroehlich]

I think the whole idea is sharing the actual image (that's both the fun of sharing and also what builds engagement).

So, could we host them (indefinitely) on the individual server VM per city?

[rpechuk]

One way we could do that is through an Amazon S3 bucket which shouldn't be too difficult (or expensive) to set up.

Here is a tutorial which explains how to programmatically upload images to an S3 bucket: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-node-examples.html

For pricing: https://aws.amazon.com/s3/pricing/

Note using S3 would also be nice because if we chose to only store the image temporarily there is an easy way to set up automatic deletion: https://lepczynski.it/en/aws_en/automatically-delete-old-files-from-aws-s3/

[jonfroehlich]

I'd rather we keep all images on our own servers perpetually. I don't think it should be temporary storage (as I don't want the hyperlinks/social media shares to "time out").

On Tue, Aug 2, 2022 at 2:54 PM rpechuk @.***> wrote:

One way we could do that is through an Amazon S3 bucket which shouldn't be too difficult (or expensive) to set up.

Here is a tutorial which explains how to programmatically upload images to an S3 bucket: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-node-examples.html

For pricing: https://aws.amazon.com/s3/pricing/

Note using S3 would also be nice because if we chose to only store the image temporarily there is an easy way to set up automatic deletion: https://lepczynski.it/en/aws_en/automatically-delete-old-files-from-aws-s3/

— Reply to this email directly, view it on GitHub https://github.com/ProjectSidewalk/SidewalkWebpage/issues/456#issuecomment-1203251359, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAML55OI7YMV5ATNCCMB6IDVXGKKNANCNFSM4CXYGLJQ . You are receiving this because you were mentioned.Message ID: @.***>

-- Jon E. Froehlich https://jonfroehlich.github.io/ (he/him https://www.mypronouns.org/he-him) | @jonfroehlich https://twitter.com/jonfroehlich Associate Professor, Allen School of Computer Science & Engineering https://www.cs.washington.edu/ Director, Makeability Lab https://makeabilitylab.cs.washington.edu/ | Assoc. Director, CREATE http://create.uw.edu/ | Faculty Chair, MHCI+D https://mhcid.washington.edu/ Help make sidewalks more accessible: http://projectsidewalk.org

[rpechuk]

That makes sense, there are many ways that we could do that:

One option would be to make a standalone web server either inside the current docker container or on the server hardware using either apache (https://hub.docker.com/_/httpd) or one of many other minimal standalone webservers https://gist.github.com/willurd/5720255 (although apache has the most amount of documentation and is fast at serving content).

Another option would be to keep the images on the current web server and put them into the assets folder where we could continually access them.

[jonfroehlich]

We should do the simplest possible solution that’s easiest to maintain. I say a subdir within the assets folder!

[rpechuk]

Agreed! @misaugstad any other thoughts or should I get started with that?

[misaugstad]

Nope, let's go for it! The only thing I can think of off the top of my head is to make sure that the images persist if we recreate the Docker container.

[jonfroehlich]

Found this in my idea log and felt that it related to this: