ProjectSidewalk
Share issue to social media to promote PS
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?
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...
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.
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 [email protected] 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.
@misaugstad @jonfroehlich I think this idea is really interesting, I would definitely be interested in taking it up!
OK, great @lstrobel. We can chat more during the Hackathon tomorrow if you're coming?
Yes! I'll be there
On Thu, Jan 17, 2019 at 3:12 PM Jon Froehlich [email protected] 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 .
@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?
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 [email protected] 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
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?
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?)
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:
- An image with the tag included in it.
- A gallery expanded version tile with that specific position
- 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.
@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.
@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.
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 :)
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
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
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
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?
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.
Any changes/ideas? @misaugstad @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
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):
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.
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!
@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!
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!
I still think bottom right corner is the right place.
It feels out of place to be next to the title.