[Feature] Rich content previews

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

Since Superhero is all about privacy it will be good the users to know and control which third party services will store cookies. Something like list with check boxes in the profile page.

As for above mentioned YouTube and SoundCloud could be on the list of third-party providers.

I think there shouldn’t be all possible audio and video platforms - just these one that the users like and are willing to tip more often.

Which other providers do you think should be included?

2 Likes

Your question is related to this (probably you have already seen this post above).
I’m not sure about the full list of providers but we can always add more later. @bruteforce.chain I’m just not sure (regarding the dev time it will take) if we need to have personalized cookies preferences in the user profile settings or we can go with general “allow third party cookies” checkbox for the MVP.

@bruteforce.chain asked me to unite design-related work on Rich content previews and Post without tipping into a single XD file.

The unified XD source (Posts and Tips.xd) is placed into the following directory on Nextcloud:

Direct link: https://nx3594.your-storageshare.de/apps/files/?dir=/P1/Superhero/Superhero.com/Desktop/v2/Posts%20and%20Tips&fileid=601661

Directory: …/P1/Superhero/Superhero.com/Desktop/v2/Posts and Tips/

UX/UI comments and elements are updated. Suggestion for the intended behavior of User Profile ID Card. Mouse hover states for some interactive elements are added to design:

I’m suggesting also minor change of the design of polls displayed in the tip feed:

@bruteforce.chain, @maxkpower please check the design suggestions mentioned above. These should be communicated to the devs that are currently working on the rich content previews.

1 Like

[DESIGN] Third-party cookies warning message and Cookies Policy user settings:

TEXT: Texts.pdf (215.8 KB)

LINKS:

Direct link: https://nx3594.your-storageshare.de/apps/files/?dir=/P1/Superhero/Superhero.com/Desktop/v2/Cookies%20Policy&fileid=840649

NextCloud Directory: …/P1/Superhero/Superhero.com/Desktop/v2/Cookies Policy/

@maxkpower @bruteforce.chain @atanaskrondev.chain

Isn’t this cookies section consuming too much vertical space?

  1. I don’t think so. It’s present only when the User Profile setting is open (Edit mode). When the user clicks on “apply” all settings will be collapsed. There might be other user profile settings in the future (in even more sections) but they will be displayed only in edit mode.
    View mode VS Edit mode of User Profile is currently implemented.

  2. Also, we already discussed with @atanaskrondev.chain that as far as Cookies policy section is concerned the changes made take effect immediately (opposed to taking efect after user clicks on “apply” btn). The reason for this is that user may click on several cookies options and then click on any other navigation link assuming that the changes are kept and applied.

@milenradkov.chain and @maxkpower,

However there is another valid feedback I received while discussing it with @atanaskrondev.chain.
The Cookies policy section makes more sense after the User Info section followed by the not-editable stats section (tips sent/received etc.)

I’m updating the design now to address this issue.

I will note two things here:

  • we are not strictly talking about only cookies its basically allowing the website to track you, in what ever form they want (logging your ip, setting cookies, using other identification & storage methods)
  • There is no such thing as allowing all cookies, at least in the backend, you have to specifically store the consent for single domains. This can be build in the frontend of course.
1 Like