SamTV12345
Feature/tags
@jchue I don't know how much time you have. If you do have a bit of spare time could you please create some wireframes for a tagging system. I already added most of the backend implementation but I am not certain how and where to show the tags.
Can I help out? I raised the discussion, after all.
Sure. My problem is that I am not really a design guy. I am mostly clueless and don't really know what the user would consider as aesthetically pleasing. Before I implement a tag system that isn't intuitive I am hoping to get some design ideas.
So the question is
- How can I manage my tags in general. I may have more tags than I assigned to a podcast. Should this be probably a new screen or embedded in an existing screen
- Where should the tags of a podcast be shown. I don't know where the best spot for the tags are and what to do if I assign 10 tags to it.
Ok, so I used to be a designer but I was never very good so I am now not very good developer instead.
I don't have access to any software that could produce anything high fidelity but if you are after wireframes, I am sure I could throw something together; it might give you a starting point and maybe save you designing-by-code, at least.
If anyone comes forward ( @jchue ) with anything more inspiring then you can bin mine and go with the alternative. We all win!
Hi @shooftie, maybe we could collaborate on this. I've been using Penpot to create the wireframes. If you're willing to work with it (Penpot's still a little rough around the edges), I could give you access to the project.
@SamTV12345 no worries. I will do what I can.
@jchue I have tried sleuthing your email but no luck. I have hit you up on LinkedIn
I've thrown some ideas into PenPot on the "Sandbox" page.
Apologies if I knocked any of the components about. I spent a bit of time getting my head around the PenPot and my mouse doesn't play too nicely; there may have been one or two errant clicks.
Hi @shooftie, I like what you've done so far, particularly this part:
I do have a few questions:
- How is the modal opened? Is it by clicking the ellipsis or by clicking the "5 tags"?
- Inside the modal, what do the options at the top with the gear icon do?
Also, what is the purpose of the other modals? Are they just different versions of the same thing?
@SamTV12345 For your reference, in case you want to take a look: https://design.penpot.app/#/view/75aa5258-9a82-8002-8003-895a7728c3ba?page-id=c2d38506-7aed-805f-8003-8a564d9c41dc§ion=interactions&index=3
@jchue
Apologies for the confusion. I now have an understanding of how to use PenPot but I just copypasta from the other pages and didn't have time to formalise the components; some of the visuals are a bit divergent.
How is the modal opened? Is it by clicking the ellipsis or by clicking the "5 tags"?
Clicking the ellipsis, which is only visible when hovering. On mobile, push-and-hold would trigger it.
The tags icon should not be so prominent, I will bring the shade down to match the text.
It all looks a lot better if the other cards fade out except for the active one:
Inside the modal, what do the options at the top with the gear icon do?
These were intended to be placeholders for any other subscription-specific actions. I forgot to update that instance. Off the top of my head, I could think of
- "Manage feed" – links to settings page, for now
- "Add to favourites" – I know that this is not a feature yet
What is the purpose of the other modals?
Sorry, I should have been more clear. There are two versions and two states.
V1 is the better option IMO:
V2, is a bit ugly and possibly a bit less user-friendly:
Either version will need an empty state i.e. before any tags have been added to any feed; the modal will contain a list of all tags.
@jchue Not sure whether you use the feature or not but i have dropped some comments about the place
Those drafts look very promising. I like the chip design a lot. The question is easy that would be on mobile. I agree with dimming the other stories being a clear solution to know which podcast is selected.
@shooftie Thanks for the heads up; I see the comments, and I'll respond there.
@SamTV12345 Do you want to be added to the Penpot so you can see all the comments more easily? Or do you just want us to post key questions here?
@SamTV12345, I'm happy to run with the chips format. I will put together some mobile layouts to see whether it falls over.
Counterintatively, I think that there may even be more space on mobile as we can play with the entire viewport. To make life simpler we could even follow that same paradigm on desktop, i.e. rather than a small popup menu that appears adjacent to the card, that same menu is displayed in the centre of the viewport as a modal. I think that this approach has been implemented for the "add subscription" flow.
It might be prudent to increase the size of the chips on mobile for those with with large thumbs.
@SamTV12345 @jchue , this feature would be deliverable without touching the settings page at all, right? I think that it stands up by itself existing only as a popup menu. The only hole in the plan is what to do when you want to remove a tag completely. At this early stage it might just be that you have to go through all subscriptions with that tag and remove it manually rather than have a single place where that tag can be removed...?
@shooftie Do you mean whether the tags can be implemented with the popup on the All Subscriptions page without adding anything to the Manage Podcasts tab in the settings? I think so, yes. I think we should add the same functionality to the Podcast Detail page.
@SamTV12345, do you have any swagger/spec on how the API can be used for the tags?
@shooftie Do you mean whether the tags can be implemented with the popup on the All Subscriptions page without adding anything to the Manage Podcasts tab in the settings? I think so, yes. I think we should add the same functionality to the Podcast Detail page.
@SamTV12345, do you have any swagger/spec on how the API can be used for the tags?
I added swagger doc to the tag endpoints.
@jchue Exactly! This feature could be delivered in a few phases whilst still remaining useful:
- Tags are managed entirely via popups originating from tiles, wherever that may be. They could then be leveraged as a means of filtering grid/lists, maybe via a dropdown filter alongside the search field.
- They are then surfaced in list on the "settings page"
- They are then surfaced on the "subscription page"
Apologies, I have been horrifically busy lately. I will try to get some flows together tomorrow.
Shall I just continue as I have been in PenPot? Anything you want me to change, workflow wise? I am happy for you to pull my components apart and integrate them as you see fit.
Sorry for my absence, @shooftie. I'll try to get back into this. I've added more comments in PenPot.
I think the current workflow is fine. Once we make some decisions as to which designs to go with, then we can incorporate the new components into the original frames.
@jchue no worries. The difficulty with projects like this is maintaining momentum alongside work and family.
I don't really have the authority here to make decisions by myself and so I wonder whether we could plan some kind of task-list or road map so that I could exploit any free time that I have by just cracking on; I could throw together more designs or if @SamTV12345 needs any help in building the UI, I could smash out some HTML/CSS.
Might a "face-to-face" chat be in order between the 3 of us? It might reduce the latency between messages? Additionally, please don't feel bad about telling me to get back in my box, I don't want to be 'muscling in'!
@jchue no worries. The difficulty with projects like this is maintaining momentum alongside work and family.
I don't really have the authority here to make decisions by myself and so I wonder whether we could plan some kind of task-list or road map so that I could exploit any free time that I have by just cracking on; I could throw together more designs or if @SamTV12345 needs any help in building the UI, I could smash out some HTML/CSS.
Might a "face-to-face" chat be in order between the 3 of us? It might reduce the latency between messages? Additionally, please don't feel bad about telling me to get back in my box, I don't want to be 'muscling in'!
Sorry for my absence. I was pretty busy with my studies and didn't find that much time for PodFetch. If you know some React sure feel free to start implementing stuff 😄