[Feature] Rich content previews

For discussion:

Displaying rich content as video previews and tweet embeds would require different design for tip previews section for different type of content.

Embedding youtube videos allows google to track users via cookies from within the iframe of the video, thus the legal should be adapted and/or we should rethink the rich content previews in general.

1 Like

Please list different content types first:

  • Video
  • tweet
  • medium post
  • Wordpress article
  • pure text
  • single image
  • multiple images
    …?

@Darren can work on wireframes for these

1 Like

This will be reassigned after a design team discussion

2 Likes

Whats the status on this?

1 Like

@theScientress.chain @Mariana.chain @tsvetan.chain @ivaylobadinov.chain and others who read this please help here get more content types…

What is actually to be implemented?

Store previews
3rd party website preview (personal/organization website)
Merchandise/trade/sale
Event / public call (open link in new tab) - RSVP , subscription, join community, other call to action

In relation to this, a “follow” button somewhere would be nifty for content creators building their audience. I’ll post more if I think of others.

2 Likes

Maybe IGTV? What about Tik tok? younger audience but very used apps.

1 Like

@tsvetan.chain see suggestions above. Also, probably need to add the crowdfunding previews as discussed in bridge chat

1 Like

Initial Mockups (including Video and Text + Image previews).
Several other content types mentioned above are being created but I have some details to polish and think over better. I think I’m finishing this today so I’ll be uploading the different types of previews updating this post.

This screen suggets a way to use the context menu to “pin” a post to the user Channel (part of user profile, My Channel):

Details for both views:

Component 28 – 2

The idea is that the whole Preview of an article (text + image) area is clickable and opens the URL link in a separate browser tab.
The video preview has 2 options:

  1. either the whole area isa link and we open the video content only in a separate browser tab and not in the feed (as Facebook currently does for outside video content) OR
  2. we can play the video in the feed (on Superhero) and also allow the user to open it in a new tab following the external URL link.
1 Like

Based on what we discussed about the layout and the content types I’m suggesting the following designs for Rich Content Previews in Superhero feed.

Generally there are several templates according to the type of content that can be fetched by the URL. Usually the template used by other platforms for content sharing is similar to:

Title + Some subtitle (and/or text) + Image preview (or audio/video/multiple images/gif).

We introduce some new types of content such as Superhero governance polls and direct tips (to user blockchain address not to URL) during Superhero Meet call.

Direct Link: https://nx3594.your-storageshare.de/apps/files/?dir=/P1/Superhero/Superhero.com/Desktop/v2/Rich%20Content%20Previews&fileid=581819
Directory: …/P1/Superhero/Superhero.com/Desktop/v2/Rich Content Previews/

Designs (integrated into the page):

First mockup shows and explains the icons, mouse hover states, also demonstrates the implementation of User Profile ID Card. This also gives the option of tipping the user (card is shown on avatar hover or click on mobile).

Designs (Elements):

Component 28 – 4

Component 28 – 5

Component 31 – 1

Component 32 – 1

Component 33 – 1

Component 34 – 1

Component 35 – 1

Component 36 – 3

Component 37 – 1

Component 37 – 2

Component 38 – 1

3 Likes

I think the profile card is too big. :thinking:

Otherwise looks good!

I don’t mind providing a more compact version of the USER ID CARD but the idea here was to reuse the same ID card that is displayed on User Profile page. It’s exactly the size of the middle column and it also has a mobile version.

May be for the specific functionality of displaying user profile ID card on avatar hover/click we can display only some basic information and the tip button so I can design a compact version. Let me know what you think about this. @ivaylobadinov.chain what do you think?

Other oppinions about this will be also appreciated.

2 Likes

I like all of these

1 Like

I think in terms of privacy we could ask the user to consent to loading the rich content preview. Basically have a screen on top of each rich content element that the user has to click and then we load the preview element. Maybe you can draft a quick design @tsvetan.chain

I’m not sure I understand the purpose of this. If you mean the issue with cookies (such as YouTube cookies) I suggest we have some kind of general settings about this. Or may be we can display the overlay with warning about tracking cookies by third parties just once for the user. Otherwise it will be totally ruining the user experience to ask users allow cookies for each feed item in order to have the preview fetched.
Or may be I didn’t understand your point right?

Can we make the preview to be prepared and cached at the time of the tip (and be static) until ppl click on something like a “play” button (for media) that could do the job. Play being as a “consent”

yes thats what I am suggesting, but we should include a privacy warning because by clicking they need to know that they consent to giving a way their data. Basically the idea would be to not fully obstruct the preview but rather have this as an addon and when they go ahead and click anyways, the actual interactive iframe is loaded.

1 Like

So this will be required for previews of media such as video, audio. I’ll think for a way to include this warning. I’m just concerned that if the user needs to do this each and every time this will really be annoying rather than useful and desired. My suggestion:

  1. Previews of content that require tracking cookies remain visually the same as they are now (by suggested design).
  2. When the user clicks on such a preview (to play video or audio file) a warning message is displayed as overlay within the preview block. This message informs the user about possible third party tracking and asks for conscent. Also introducing a link to general privacy settings that will be part of User Profile settings.
  3. Once the conscent has been given for certain provider (YouTube for example) the user is no more asked to allow tracking each and every time there is a preview. Users are still able to change their preferences from the privacy settings.
  4. Privacy settings (will be in User Profile settings) will be generally an edittable list of content providers that use cookies and these are accepted by the user. Something like: “Allowed tracking cookies: -YouTube, -soundcloud, -someProvider” (with checkboxes).

Thoughts on this? @ivaylobadinov.chain , @YaniUnchained, @keno.chain

Not everywhere the warning. Just once clearly at the beginning. Should not be frightening. It’s standard on the web and we don’t host content so we need to integrate with third party services. Users will like it.

5 Likes