Show HN: Flowshare: Create and discover how-to guides for everyday software
21 comments
Love the idea, but I can't for the life of me understand why you use `onclick` handlers on `h2` elements instead of `a` links. I immediately got frustrated when I tried to middle-click one of the "curated guides" to open it in a new tab, but nothing happened. Keyboard navigation also doesn't work because of this, nor does highlighting a link to see where it will take me. Your site is broken, and I can't use it, so I won't.
> As a reader, I find screenshots and text much easier and faster to follow than watching a long screencast
This. I absolutely despise video as a medium for learning something, especially something technical. This looks really nice and I hope it's a huge success.
This. I absolutely despise video as a medium for learning something, especially something technical. This looks really nice and I hope it's a huge success.
When you quickly need to know how to do something, search google and then find the first hit to be a page with nothing but a video on it which, painfully slowly, tells you how to do it. Something which would have taken 1 or 2 lines of text, dragged out over a 10 minute video. Even more lovely if it contains config files or code which, ofcourse, you cannot copy/paste. I am not an aggressive person, but...
It's just a matter of personal preference. Videos are good for some and text for others. It's good to have choice and understandably frustrating when your preferred choice isn't there.
Screenshot-based tutorials are nothing new, and I'm curious if you've thought about the primary issue (IMO): UI can subtly change over time rendering tutorials confusing and misleading.
Just today I was looking at some Windows setting that moved and it took me extra time to find the new location of the setting. The easy answer is some kind of report/moderation process where you refresh the screenshots, but at that point I might as well just google for up-to-date tutorials. Have any innovative solutions?
Just today I was looking at some Windows setting that moved and it took me extra time to find the new location of the setting. The easy answer is some kind of report/moderation process where you refresh the screenshots, but at that point I might as well just google for up-to-date tutorials. Have any innovative solutions?
You've hit the nail on the head. Small changes can cause existing tutorials to break. My goal is to make flowshare tutorials easy to update, eg: just change the relevant step instead of creating a new guide or recording a new video. This involves some manual work and is not completely automatic, which would be better. Perhaps some sort of traversal on the web page to figure out the new location of the setting and then automatically update a guide.
That's actually a pretty neat idea. Just yesterday I spent close to an hour manually taking screenshots, annotating, aligning them, etc. This would have saved me a lot of time
Thanks ! Curious to know how many images were you annotating ?
I have examples that I've done for internal proprietary documentation with over a hundred-plus screenshots attached to a single document.
Confluence does not make this process easy, but I can usually kinda-semi-sorta force my way through. With much effort.
Confluence does not make this process easy, but I can usually kinda-semi-sorta force my way through. With much effort.
This is good! I would definitely want to use this soon for creating screenshots for one of my side projects.
shift+command+3 and then open in preview is literally the most use workflow on my macbook!
shift+command+3 and then open in preview is literally the most use workflow on my macbook!
Let me know how it goes
This looks neat. Have you thought about making this easy to publish as a how to guide on a custom domain? So companies can leverage this to create how to guides for their users?
Thank you! Yeah private guides or custom domains is something I'm exploring right now.
Flowshare looks great. Having private spaces or ability to export to PDF is crucial for business use. Also there should be a way to quickly and easily blur out private info such as credentials. Good luck with it. I'm keen to see it develop.
definitely, blurring and export to pdf is something I've heard lot of requests for.
the hacky way to print to pdf for now is to print the web page and save as pdf.
the hacky way to print to pdf for now is to print the web page and save as pdf.
[deleted]
does this work for native applications as well? as that would be a very useful feature.
also, once you're already annotating, would it be possible to zoom in on a specific area a bit?
also, once you're already annotating, would it be possible to zoom in on a specific area a bit?
Virtually all the documentation I've created over the past couple of decades has amounted to some sort of words+annotated screenshots, so this tool is most welcome!
That said, there are some issues here:
1. When you first go to the web page, there is nothing to tell or show you that what you're looking at is not an SPA, and you can actually scroll down to see more content. This is particularly problematical on iOS and iPadOS, where such affordances are vital visual clues as to what you can do.
2. A SaaS for private guides is fine for some, but I still need a way to self-host private guides. Ideally, I'd actually create the content locally, then be able to upload or share that file with others, where they could then view it locally. Creation and viewing on a shared resource like a web page should be an option, but not the only method available. And for creating guides inside of a browser, Chrome should not be the only option available.
3. When you're creating a long document, you want ways to hide other steps, so as to keep the initial document small and easy to comprehend at a high level, thus allowing the reader to expand only the steps they currently need. Confluence allows me to create collapsible elements that hide the various screenshots that I am attaching to the document I am writing, and the same would be very welcome here.
4. I'm not seeing any way to create a good section of text before or after the graphics. It looks like what you've got is just one screenshot after another, but without any way for me to provide some explanatory text before the screenshot, or any way for me to provide some additional notes after the screenshot.
5. The options for annotating a screenshot seem to be extremely limited. I've only seen small square-corner boxes around some buttons or other, and so far the only color options I've seen have been magenta. I want round-corner box options. I want arrow options. I want single and double-headed arrow options. I want different shapes of arrow options. I want thicker border and line options. I want more color options. I want the option to grey out or shadow out everything but the one thing I want highlighted. You don't have to give me a full copy of PhotoShop or GIMP, or even a full copy of macOS Preview, but I definitely want a lot more annotation options than you've shown.
6. Make your collection names and tags clickable when viewing multiple flows. If I'm looking at the main "Search" page which shows a bunch of examples below, I should be able to click on the "mail.google.com" link and have that bring up all flows in that collection. If I click on the "onboarding" tag, that should show me all flows that have that tag. And all flows should have a collection and/or one or more tags associated with it. For example, the flow at https://flowshare.io/flow/how-to-write-canned-response-in-gm... doesn't seem to be officially part of the "Google and Gmail" collection.
7. Do you have a privacy page? Do you have a page that describes how you will deal with GDPR or CCPA requests? How are you going to use our data? If we decide we want to leave your service, how do we export our data so that we can save it somewhere else, and then make sure that you properly purge it from everywhere in your systems?
That's about all I can think of from off the top of my head. More later.
That said, there are some issues here:
1. When you first go to the web page, there is nothing to tell or show you that what you're looking at is not an SPA, and you can actually scroll down to see more content. This is particularly problematical on iOS and iPadOS, where such affordances are vital visual clues as to what you can do.
2. A SaaS for private guides is fine for some, but I still need a way to self-host private guides. Ideally, I'd actually create the content locally, then be able to upload or share that file with others, where they could then view it locally. Creation and viewing on a shared resource like a web page should be an option, but not the only method available. And for creating guides inside of a browser, Chrome should not be the only option available.
3. When you're creating a long document, you want ways to hide other steps, so as to keep the initial document small and easy to comprehend at a high level, thus allowing the reader to expand only the steps they currently need. Confluence allows me to create collapsible elements that hide the various screenshots that I am attaching to the document I am writing, and the same would be very welcome here.
4. I'm not seeing any way to create a good section of text before or after the graphics. It looks like what you've got is just one screenshot after another, but without any way for me to provide some explanatory text before the screenshot, or any way for me to provide some additional notes after the screenshot.
5. The options for annotating a screenshot seem to be extremely limited. I've only seen small square-corner boxes around some buttons or other, and so far the only color options I've seen have been magenta. I want round-corner box options. I want arrow options. I want single and double-headed arrow options. I want different shapes of arrow options. I want thicker border and line options. I want more color options. I want the option to grey out or shadow out everything but the one thing I want highlighted. You don't have to give me a full copy of PhotoShop or GIMP, or even a full copy of macOS Preview, but I definitely want a lot more annotation options than you've shown.
6. Make your collection names and tags clickable when viewing multiple flows. If I'm looking at the main "Search" page which shows a bunch of examples below, I should be able to click on the "mail.google.com" link and have that bring up all flows in that collection. If I click on the "onboarding" tag, that should show me all flows that have that tag. And all flows should have a collection and/or one or more tags associated with it. For example, the flow at https://flowshare.io/flow/how-to-write-canned-response-in-gm... doesn't seem to be officially part of the "Google and Gmail" collection.
7. Do you have a privacy page? Do you have a page that describes how you will deal with GDPR or CCPA requests? How are you going to use our data? If we decide we want to leave your service, how do we export our data so that we can save it somewhere else, and then make sure that you properly purge it from everywhere in your systems?
That's about all I can think of from off the top of my head. More later.
Wow! Thanks for taking the time to write this. Great feedback and feature requests. This will definitely inform my roadmap.
I created Flowshare (https://flowshare.io/) to make creating step by step guides with screenshots and annotations as easy as recording a screencast.
As a reader, I find screenshots and text much easier and faster to follow than watching a long screencast. As a creator, recording a screencast is much easier. Flowshare gives you the best of both worlds.
You can search existing guides at: https://flowshare.io/search
Here is an example of one the most popular guides:
https://flowshare.io/flow/how-to-block-spam-invitations-from...
I'm including a link to the chrome extension which is used to create guides: https://chrome.google.com/webstore/detail/flowshare-how-to-g...
Would love to hear any feedback/suggestions.