🌫️🗜️✨ `Gizmo`: `LinkList`

[rosschapman]

In Sutty's recent heuristic review of the Convene Marketplace they noted that Piikup's vendor list lacked important visual cues like images and stronger buttons.

While Adding images and allowing button configurations to Sections would be a good start to improving the user experience, the feedback is good cause to consider that the Section Navigation gizmo does not allow enough customization for different home page use cases.

For example, currently the Section Navigation gizmo does not allow:

• Re-ordering sections

Might link list gizmo that allows full customization of title, image, CTA/button, url, card type (new concept) be a better solution for marketplace hosts or similar use cases?

[anaulin]

Here is a brain-dump of half-baked thoughts that I've been carrying around related to this topic:

• 100% agreed that we need to figure out a good way to let users customize this type of link display.
• It was only very recently, in https://github.com/zinc-collective/convene/pull/1964, that Zee created a "Section Navigation" Gizmo. Before then, this section navigation was "built in", and couldn't be removed from the bottom of each Section.
  • I am not sure if we have already removed the built-in list of sections and replaced it in production spaces with the new gizmo (I think we haven't?), thus completing this migration. And I don't know if maybe already someone is working on doing this.
  • This feels like an important migration to complete and tie up before moving into more iteration on this functionality. It will require figuring out how do we let space owners navigate to different sections if they might not have a section navigation anywhere. (Can they do that from the Space management page already?)
• From a point of view of functionality, off the top of my head, such a gizmo/component would ideally:
  • let users add or remove the list of sections wherever they want
  • let users control the text (and images or icons) on each button
  • let users control the order of the links
  • ideally, have a smart way of hiding or visually "disabling" a link when it is pointing to the current section we're on
• We should decide if we want to build this on top of a generic "list of links" gizmo, or if we want a more specific gizmo specifically to list sections (and which might or might not be based on the generic "list of links" gizmo).
  • I think it does not make sense to make a "list of links to marketplaces in this space" gizmo. It feels too specific, especially considering that the only way to link to a marketplace at the moment is by linking to the section the marketplace is in. (Also, although a space with multiple marketplaces is the Piikup use-case, and we are currently optimizing to serve their needs, I don't think it is the median use-case for an e-commerce site.)
  • We have talked in the past about having a "linktree gizmo" (https://linktr.ee/). Having a configurable "list of links" that has a "linktree style" would help us bake two buns in one oven.
  • Or maybe the right approach is to start with a "links to sections" gizmo and then later work on a more general "list of links" gizmo, which might or might not share any code with the section list.
  • Looking at the list of features above:
  • Having only a generic "link list" gizmo will make it so that users have to manage all the section links manually and keep track of them as they add/remove sections. I don't know if that's ok or if it is too obnoxious.
  • In a generic "link list", we probably don't want to be trying to figure out if we are on the same section that a link is for, and then disabling that link. Maybe that's fine for a list of sections, I'm not sure.

Having written all of this, I feel like making a new "list of links" gizmo and focusing on that is probably the way to go. Maybe we don't need the "Section" gizmo at all, and we should just delete it and let folks rely on the built-in section navigation until we have this better replacement ready.

Thank you for coming with me on this long journey to a strong agreement with Ross' original post. 👍🏼

[zspencer]

I did complete the migration of removing the old "every Section supports navigation to every other Section" functionality and added the SectionNavigation to the Entrance for https://marketplace.piikup.com. I don't think I did it anywhere else tho 🙈.

Re: LinkList deprecates SectionNavigation - I think both are useful; as the SectionNavigation automatically linking to all available Sections is a pretty strong win; and being able to link to anything is a pretty strong win. I don't think we should merge them. Also +1 to @anaulin's point that LinkList gizmo would ideally allow a Convene Space to compete directly with LinkTree and similar sites. (I would also love for us to be in a position where we had "too many gizmos" tho, so take this with an iceberg of salt)

Re: Improving Visuals - I was thinking that a neat way to do a standards-forward step would be adding opengraph support to Sections. Members could set the visuals and text the OpenGraph would show, and then when anyone links to a Section it will look fantastic. Once that worked, we would update the SectionNavigation (or the LinkNavigation) to consume the OpenGraph data. To make the LinkList or SectionNavigation more robust, we could update them to allow that data to be over-written manually by a Member or even refresh it periodically.

TL/DR - I dig it! And (for the short term) I would recommend:

• Adding OpenGraph data to Section
• Consuming the OpenGraph data in the existing SectionNavigation
• Following up eventually with a new LinkList gizmo; especially since Instagram's "You get ONE URL. ONE" policy ain't going anywhere soon.

[anaulin]

I am not sure that the images a user will want to add to a link to a section are the same as the ones they'll want to have displayed in a "preview card" or anywhere else. I also don't think that we should limit our users to at most one image per link, which is what OpenGraph dictates.

I think it would be better to focus first on building and defining the functionality we want in a configurable "list of links" or "list of sections". If any of the data we end up collecting as part of that ends up fitting the OpenGraph or Schema.org or any of the various other formats for this, then we can expose it in those formats as well pretty easily.

[zspencer]

So if we want to get people to want to buy some noms from the Vendors in the Piikup Marketplace, I could see the navigation looking like:

• A mouth-watering image that looks decent when at full-width on a mobile phone (i.e. https://www.crumbleandwhisk.com/farmers-markets)
• Alt text describing that image
• The name of the restaurant
• Flavor text describing the Restaurant that really highlights why it's a great place for catering.
• Maybe high-value context like "Catering" or "Groceries" or "Gluten Free" or "Thai" or "Desserts"?

(I am now imagining a world where what we actually work on next is the Marketplace::LandingPage that is even more specific than a LinkList or SectionNavigation and also helps us solve the "Probably should have more context on the landing page" and the "where's the search?!" problem)

[anaulin]

Yeah, I've also been mulling over the "context for the marketplace" piece. I think we could do it adding an ActionText field, editable from the Marketplace configuration.

It would be neat to have a Space-wide "image library", so when you are doing anything that requires an image, like, say, you are configuring a section link, you can choose from a gallery with all the images that have been uploaded to that Space, including, say, all the product images in the contained marketplaces. Not sure if that would scale well, though, and it is certainly not a "must have".

All that said, we gotta start somewhere, and starting with making the list of section links more configurable (and to stop linking to the current page forcatssake) is a good place to start.

[rosschapman]

💡 LinkList with Internal Links

If our Convene LinkList Gizmo has a toggle on the "url field" to show "internal links" and allow setting a link to an "internal destination" via a autocomplete dropdown of Sections or other other content types, that would also make it worthwhile over a third-party integration.

[rosschapman]

It would be neat to have a Space-wide "image library", so when you are doing anything that requires an image, like, say, you are configuring a section link, you can choose from a gallery with all the images that have been uploaded to that Space, including, say, all the product images in the contained marketplaces.

💯

Not sure if that would scale well, though, and it is certainly not a "must have".

@anaulin What aspect of scaling are you worried about? Storage cost? User interface complicatedness?

[zspencer]

Re: Space-wide Image Library - I would love for us to treat Files as an OS-level thing; We definitely should segment files by by Space; and at some point we'll want to start measuring storage + xfer (and CDN). At some point, this could be exposed to local file-systems ala dropbox/icloud drive/google drive... You know in our copious free time.

Re: Internal inks - I'm imagining something where when you add a link you can search all Linkable Resources with a fuzzy-finder or just copy-paste a URL.

This way, you could easily link to say, a Section or aMarketplace::Product or Journal::Entry; and everything looks spiffy.

Re: Auto-adding Sections - While I think the idea of say, auto-adding Sections is interesting, I think a single-purpose Gizmo for SectionNavigation is a better solution. Trying to make two things one things is perhaps as much of a drag-risk as trying to make one thing two things.

[zspencer]

P.s. I've added some updated use cases to https://github.com/zinc-collective/convene/issues/1988 based upon this conversation. I still think an independent LinkList is valuable; but I don't want to lose track of the ideas that are more applicable to the SectionNavigation gizmo

[anaulin]

Not sure if that would scale well, though, and it is certainly not a "must have". @anaulin What aspect of scaling are you worried about? Storage cost? User interface complicatedness?

I am more worried about the UX. It seems like you could quickly end up with more than a dozen of images in a Space, which would make finding the one you want obnoxious. Although perhaps that could be mitigated by e.g. showing the images in most-recent-first order. It just seems non-trivial

[rosschapman]

I use MarsEdit on mac for blogging and it has a very simple media manager that lists your images ordered by upload date with a single search input that appears to fuzzy match only on filename. As an MVP something like this would be pretty solid methinks.