search

Joystream / atlas

Whitelabel consumer and publisher experience for Joystream
https://www.joystream.org
GNU General Public License v3.0
100 stars 44 forks source link

Comments Design: Video page — LoFi mockups #2086

Closed toiletgranny closed 2 years ago

toiletgranny commented 2 years ago

User stories

  1. As a content viewer, I want to see other people's comments under a video I'm watching.
  2. As a content viewer, I want to react to other people's comments under a video I'm watching.
  3. As a content viewer, I want to sort other people's comments under a video I'm watching.
  4. As a content viewer I want to leave a comment under a video I'm watching.
  5. As a content viewer, I want to reply to other people's comments under a video I'm watching.
  6. New As a content viewer, I want to delete the comments I left in the past.
  7. New As a content viewer, I want to edit the comments I left in the past.
  8. New As a content viewer, I want to see the edit history of comments that were edited in the past.
  9. New As a channel owner, I want to delete comments under my videos.
toiletgranny commented 2 years ago

Comments & reactions are ready to be reviewed! Find out all about it from:

  1. This Loom video update (17 min)
  2. This Figma prototype (if you want to follow along with me like I'm Bob Ross)
  3. (Optional) These visual explorations for comments or these visual explorations for threads

The key open questions are:

  1. @dmtrjsg, @bedeho What do we do about reactions for comments?
    1. We drop the idea entirely (the most time-efficient option, but also a bit disappointing for the design team and probably end-users)
    2. We proceed with the idea of having a predefined set of reactions being stored on the blockchain,
    3. ⭐️ We proceed with the idea of having a predefined set of reactions that are not stored on the blockchain (my recommendation)
    4. We proceed with the idea of awards instead of likes or reactions (this is the most time-consuming option, and it also opens up quite a lot of other questions; at the same time it's a very entertaining thing for the entire team to work on [the list of awards, illustrations, the copy around that] and it for sure will look stunning in the marketing materials).
  2. @kdembler Can we have two transactions being processed for the same user simultaneously, as long as they're not conflicting with each other? For example: when processing a transaction for comment, would it impose any technical challenges if the user was able to like/dislike a video or leave a reaction under a comment?
  3. @kdembler Can we sort and display comments based on the number of reactions? And also their time of posting (newest to oldest and vice versa)?
  4. @kdembler Can we replace the default OS emojis with custom ones, preferably Twemojis from Twitter?, globally within the app? Examples of other products already doing this are Discord and Twitter.
bedeho commented 2 years ago

Excited to review!

dmtrjsg commented 2 years ago

Loved watching the walkthrough! 🎬 👏 🤣 Totally made my evening 🤟

Comments/questions/ suggestions:

  1. Signing transaction -> Beautiful ui treatment 🥇 😍 . I understand that you make a point that we are better off with showing more granularity of blockchain transaction steps in the notiff snackbar? I acknowledge @kdembler and I asked for this to be removed for non-negative scenarios in Video like/dislikes. If after putting it altogether it feels like we are leaving users "to hang in the dark for too long" - I'm ok to bring them back. Hard to tell how this will feel without testing it in the app, but perhaps we can start on the minimalistic side and add the intermediate blockchain transaction steps shown if it feels like users are getting confused?Version from Pioneer has some copy examples for blockchain transaction steps
  2. Reactions range - I'd say there's no harm in showing reactions powered by emojis, and if the worry is to have too many of those, that's a great problem to have! We can always show top 5-10 and expand to see the rest on click? I'm curious to see what others think? At the very least I'd suggest to do a Maze test on different reaction sets and see which side our community is on.
  3. Reactions utility - from my perspective ranking comments by popularity, would be independent of reactions used. It would be based on comments and overall reaction counts independent from sentiment. If sentiment is considered, reactions can get tiered for simplicity, but that's a topic for the future.
  4. We need to define an emoji approach for typing a comment. There are variations with different licensing and from cross-platform and community-familiarity perspective an open source Twemoji seems a reasonable choice. This can then be (re)used for reactions ❓

    Discord supports the use of emoji via shortcodes that are displayed as images from Twemoji. Native emojis inserted are also converted to shortcodes and displayed with images where supported.

  5. Sorting Default sorting "Top" Implies showing own user comment on the very top and the rest sorted by "popularity"? Interesting idea, but I'd do it in more conventional way and Show default sorting by Most Popular On Top (Default, formula based on replies and reactions), Newest On Top, Oldest on Top. Are we using the same component as for sorting the sections on content discovery pages?
  6. Transaction fee calculation - I've seen you explored the transaction fee display in the comment field, thats the right direction! I think we could do it on the fly even as user types (with a few second debounce). With regards to the copy of tooltip, I liked this tone of voice that Nina chose for the video reactions, we could re-use?
  7. Wrt Awards, purchased for tokens, this one I would definitely leave, and come back after we have more clarity on #1883. Awards concept is covered separately here> #1999 , let's keep it out of scope for comment reactions 😉
  8. "Keep my comment on top" - Noticed that Youtube has "pin" comment function. Which seems to be quite handy and simplifies the logic with filter options. Suggest to use this instead of "Top" option in sorting. Screenshot 2022-02-14 at 21 45 56
bedeho commented 2 years ago

Preamble

<3

Questions

Feedback

Out of left field

A note on the bloody signer!

This is worth sharing with the rest of the design team.

While we are going to keep storing important things on the chain, there are at least two reasons why we should be going through extremly elaborate design paths to try to work around it.

  1. Atlas will not use Polkadotjs apps forever, ther are other signers coming online, (like https://talisman.xyz/), which I believe will not require every single signing to have a popup interaction, by allowing the person to mark the site as "trusted" up to a certain limit of spending or something like that.
  2. Atlas, or other forks of it, are very likely to make fully hosted versions of it, where the server side is able to sign on behalf of the user, or, where the server side holds an encrypted version of the keys of the user, which the user can then sign with in the browswer locally without an extension. There will be tons of experimentation and innovation here, the very secure & full user custody path we have taken is not going to be the only one.

Reply to Dmitry

If after putting it altogether it feels like we are leaving users "to hang in the dark for too long" - I'm ok to bring them back.

IF you are referring to the time period from when a user signs off in the signer and before the transaction is fully confirmed and processed: isn't the very clear spinner/progress bar animatinos and the frozen interactions quite a clear way to capture their attention and communicate that something is in progress?

I'm curious to see what others think?

See my comment above

dmtrjsg commented 2 years ago

Thank you for the replies @bedeho!

isn't the very clear spinner/progress bar animatinos and the frozen interactions quite a clear way to capture their attention and communicate that something is in progress?

For under few seconds this would be 100% ok, but if it takes around and even more than 10sec (which may be the case with adding latency/ poor network connectivity/ slow machines), then showing granular intermittent stage progress makes this wait time easier for the user. I may be biased, but it felt handled ok on Pioneer, while just blocking interfaces for more than 3 seconds is a little off-setting. I am not against starting w/o the toasters and add them later based on feedback / user sessions rec review.

toiletgranny commented 2 years ago

Thanks for all of your comments, gens! I appreciate your thoughts and I'm glad to hear you liked the video update. 😆

@dmtrjsg

  1. Signing transaction — Okay, there might have been a misunderstanding between us, it seems. I thought the ask in the https://github.com/joystream/atlas/issues/1985 was to just drop the toast message for after the transaction has been signed in Polkadot, but to keep it for the time the Polkadot extension is visible. That's, by the way, how I ended up updating Nina's designs for video reactions and it just felt natural for me to do adopt the same approach for comments and their reactions, right? If I'm honest, I believe it def makes sense to display a loading toast notification in the app for the time the Polkadot extension window is visible because otherwise how do I know, as a user, which transaction triggered in Joystream I am signing? Let me know if you agree.
  2. Reactions range — "that's a great problem to have" maybe I'm overly optimistic, but I sense we might end up having this problem much sooner than it seems. We don't see this being an issue in Slack/Rocket/Discord because of how messages are ephemeral and once a message is sent it's very quickly covered by another one, and then another one. With comments, on the other hand, they're here to stay, especially if we're sorting by the top ones by default. That's why I would strongly vote for keeping the number of reactions limited at this time. Doing an A/B Maze test would most probably tell us that people prefer having freedom of reactions, and I get that. The reason I think it is risky to rely on an A/B Maze test, in this case, is because how most people would probably not realize the true consequences behind this.
  3. Reactions utility — "from my perspective ranking comments by popularity, would be independent of reactions used" Absolutely we can do that. The reason I'm advising not to is that, for example, we might end up having negatively-rated comments being listed at the top, simply because they received the largest number of reactions, which I'm assuming is not something we would like to have. See an example below. Unless I'm in the opposition here, in which case I in democracy I trust. :D For me, it's yet another reason to go with a limited number of reactions. image
  4. Twemojis — That is precisely my recommendation here. To have Twemojis being used not only as icons for reactions but also anywhere within the app, as a replacement of OS-specific emoji glyphs.
  5. Sorting — Actually, the idea I presented in the Loom update was to have the user's comment listed at the top only after sending a comment, until the page is refreshed. But I just double-checked and it seems like YouTube's approach for this is closer to how you described it (the user's comment always stays at the top) and I think it totally makes sense, hence I recommend it. Regarding the labels themselves, I don't think that the On Top part is really necessary and that we could easily go with 3 options: Most popular, Newest, and Oldest but perhaps we can put it to the test with out upcoming usability tests, what do you say?
  6. Transaction fee calculation — Actually I have discussed this with @kdembler last Friday, as I wanted to learn more about how exactly this fee calculation would work, but the response I got was that for now we simply don't know; hence the only thing we can do as of today, if we don't want to end up displaying totally random numbers, is just to say that in the future there will be some fees involved. In regards to the tone-of-voice, it's actually my modification to this copy, but sure — I can reuse it for the comments box! 👍
  7. Awards — got it, noted!
  8. Pinning comments — What you're referring to is the ability of the author of the video to pin their comments underneath their videos. Just wanted to make sure if this is something you had in mind? If so, of course, we can add it to the list of user stories. Just please let me know if I'm understanding this correctly.

@bedeho

  1. "How much of the description field of a video will be shown by default?" — As of today, AFAIK, there are no limits for this, but I 100% agree this can break the experience. To me it sounds like something that is best tackled outside of the comments epic. @dmtrjsg, wdyt?
  2. "How much of the description field of a video will be shown by default?" — Wasn't included in the scope/user stories and the initial time estimations. Commenting systems on most popular social media platforms don't support this and if I'm being honest, I can def see how it's not crucial to have this level of sophistication in the formatting of comments underneath online videos. @dmtrjsg let me know if we're adding this.
  3. "I did not see a signer pop-up for all interactions that would require a transaction" — If you mean the Polkadot browser extension window that's only because — at the end of the day — it's still just a Figma prototype. But, of course, we're having this signer pop-up for every single transaction.
  4. "Does "show replies" button unpack full hierarchy of possible comments, with mutipl elevels, or just the immediate next one? — It unpacks all replies. Judging by your question I might not have made it clear enough in my video update, so: my recommendation is to have only one level of replies. If you want to reply to a reply, you can still do so, but your comment will be displayed in the same thread level, starting with the member's handle to indicate who you are referring to.
  5. "Sign in to add first comment: can we drop that illsutration, make it similar ot be the first comment — Absolutely, consider it done.
  6. "I think your analysis leading to introducing awards..." — Absolutely, I understand.
  7. "I think you analysis of the restricted emoji identifies a real potential problem..." — Thank you for your perspective on that. Please, see my replies to @dmtrjsg's comments above (points 2 & 3).
  8. "I think the idea of freezing more interactions that open the signer before..." — Thanks for your perspective on this. Ideally, we can also see @kdembler thoughts on this.
  9. "on-chain this certainly works" — Great, good to know!
  10. "I think we def. should hide the license and category fields..." & "I am not sure whether doing anything with this now is worth it" — Totally valid points imho, please see my 2nd point above.
  11. "While we are going to keep storing important things on the chain..." — Oh great! That's what I needed to hear, thanks for saying this. Again, if every single little reaction requires a transaction, my #1 greatest fear about all of this is that we will simply end up designing a feature nobody wants to use because of how much hustle there's around hitting a thumbs up icon. But if the future ahead is being painted in bright colors in terms of the online signers, then I guess we just need to do what we're doing and be patient for a while, right? cc @dmtrjsg
kdembler commented 2 years ago

Wow, a lot to unpack in this thread! Thanks for going so deeply into this @toiletgranny and of course for this amazing update :D I will try to address some of the points raised by all the participants:

Simultaneous transactions Shouldn't be any issue with that from a technical perspective. I think there's no real value added by blocking parts of the UI when one of transactions is processing. For example, when the user is submitting a thumbs up reaction, I think we should still allow them to post a comment or submit another reaction. So would advocate to make all those as async as possible

Sorting comments Sorting based on reaction should work, although I agree with @dmtrjsg that if we want to use some kind of sentiment to drive popularity, that'd be best tackled in the next phase and we should just use reactions count for now.

Surfacing own comments sounds good, but does that apply only to the most recent comment, or all the comments that I made?

I think pinning comments certainly sounds like an improvement for the future, outside of the MVP

Custom emojis I agree with Twemoji pick and that it makes sense to use that for both reactions and inside descriptions/comments

Reactions range I think we should go with a pre-defined set of reactions. Having all the emojis available can potentially spur some offensive messages, with just use of emojis, which would be much harder to moderate than comments. Also I think users will be more likely to use reactions if the choice is simpler. We can always add more reactions later if needed

Transactions fees Agreed with @toiletgranny, let's just let users know it's free for now and think about this at a later point, once we know more details. This will need to be handled in many places in the app so it looks like a great candidate for a future epic

Bloody signer Agreed that this is a pain to work with, but I think that's still a bullet we have to bite. Agreed with @bedeho on his points, let's wait for the ecosystem to develop until we work around the problem.

Also agree with your concern @toiletgranny about users not wanting to use the feature because of that, but I think we may be overthinking that a bit. We can always see how it turns out and iterate later.

Rich text features I agree that we definitely could spice up the descriptions with some additional text formatting, possible also for comments, including the mentioned quoting. These features would likely be correlated though so I'd suggest it's best to revisit both of those in the future, in some "rich text" epic

Nested replies I'm a bit mixed here on which approach would work best. That is, infinite nesting (Reddit style) or single level replies (Youtube style). Both approaches have some advantages although I like Reddit thread-like replies since you can better structure focused discussions. This is worth exploring more in both directions I think

toiletgranny commented 2 years ago

Thanks a million, @kdembler!

Regarding nested replies, my hypothesis is that people don't have rich and structured discussions on video-sharing platforms as often as they do on discussion websites, such as Reddit. If you feel like my hypothesis is false, I think it can be validated very quickly through a simple google form.

Assuming I'm right, I can see two ways out of this:

  1. We can either acknowledge the status quo and use it as an opportunity to keep that simple & clean UI on a single-comment level (as opposed to making everything smaller/more compact just to anticipate having multiple nested threads),
  2. Or we can challenge the status quo and try to make things differently by actually going for multiple threads. But then there's another hypothesis I have: with potential fees for adding comments in the future, I can hardly see this creating an environment for complex and meaningful discussions.
dmtrjsg commented 2 years ago

@toiletgranny This is an attempt to clarify the scope which we are moving forward in this issue:

  1. Signing transactions. Based on comment from Klaudiusz on async handling, let’s try and go without blocking ui components (but show progress spinner). Show toaster once before signing, and not throughout transaction(s) executing.

  2. Reactions range - re limited set, I thought about abusive implications which is a fair comment towards restricting. How about choose different set variations from the lib and test them out in ABN? Or better let’s start with asking an open question “if you only had 7 emojis in your reactions, which ones will you pick?” Maze candidate. This is best done via separate Maze test.

  3. Reactions utility- we can re-sort the comments later, simply by changing what “popular” means. I guess that’s subject to us storing reactions in the interpretable manner, name, but surely its the case. @klaudiusz can confirm.

  4. Sorting comments - Agree with three options: Most popular, Newest, and Oldest.

  5. Transaction fees - sure, let’s park. I thought the implications on design scope are minimal, and we could always carve this out to develop later. Since we are parking it, I suggest to remove the notion of transaction fees from there altogether.

  6. Pinning comments - not needed if we can move in the direction of showing own comments on top without this feature. __ New questions:

  7. Description field, license and categories > Let’s add to backlog if we cannot get away with simply hiding licensing and categories + expandable “show/hide full description”.

  8. RTF for description field and Quoting others> Let’s add to backlog.

  9. Nested replies vs single level replies > Nested definitely inspires interaction between viewers more and I think Video comments section is hardly a place for making threads super popular. However, can we consider taking best of both subject to the real estate on the page… as in up to X levels of threads? And you can “start a new” thread by @reply? Let’s discuss with voice on the meeting.

toiletgranny commented 2 years ago

Thanks, Dmitry! That helps a lot!

  1. Signing transactions — Great, got it!
  2. 🗨️ Reactions range — Fantastic! Regarding determining the final set of reactions, I'd hope to discuss it briefly today during our design sync, but I don't think it's something that would stop us now.
  3. 🗨️ Reactions utility — Exactly! It's also something I'd hope to briefly discuss today, as there are lots of possibilities here for calculating the score of each comment.
  4. Sorting comments — Roger that!
  5. 🗨️ Transaction fees — Not sure if I understand what do you mean by "notion" in this case. Can we discuss this later today?
  6. Pinning comments — Awesome! Makes total sense.
  7. 🗨️ Nested replies vs single level replies — The implications of going for multiple threads (nested replies) might not be super obvious, so I agree it's best to discuss it today.
dmtrjsg commented 2 years ago

Transaction fees - I was under the impression that we show Transaction fees are 0. But sure, lets discuss and agree the best treatment knowing that transaction fees will be a separate epic and will touch on quite a few inputs/ confirmation screens.

Nested replies - I am not going to fight for multiple layers and happy to proceed with one, under the premise of VIDEO is the core focus of the page, and not the comments/ collaboration and we are risking to overwhelm the user if too much is going on in the comments.. Best to validate with testing ofc 😇

toiletgranny commented 2 years ago

A recap on the decisions we made during the tech <> design sync meeting:

  1. Pinning comments — We'll introduce a toggle (or something to that extent) for the user to decide whether they want their comments to be pinned to the top or not, as long as they're in the main thread. By default, this setting will be enabled. (@kdembler @dmtrjsg — you guys are ok with this? ✅ I'm proposing this because that's how YouTube does it now, so we can match the potential expectations)
    • In the case of replies under other user's comments, enabling this toggle could simply bring these comments to the top (not the replies themselves, that's important), but displayed below the user's comments in the main thread (if there are any). Again, guys, you cool with this? ✅
  2. Description and license — We agreed to tackle this in the scope of work for comments and reactions. The exact execution to be reviewed later.
  3. Deleting, editing, disabling comments etc. — As @kdembler brought our attention to an issue we haven't seen before, we decided to unpack this after the tests this week to see if and how will this impact the current scope we agreed on earlier.
  4. Nested replies vs single level replies — We agreed to proceed with one level of replies (so no changes compared to the last video update).
  5. Transaction fees — We'll not be removing information on potential future transactions fees from the UI from the testing prototypes, as we want to see how people with different web3 knowledge levels will react to the copy and the overall communication (in the UI) around it.

Please note, that pinning comments and the updated behavior for hiding overly long description and video details is not going to be included in the usability tests tomorrow & on Friday.

dmtrjsg commented 2 years ago

💯 all g, just one small thing to add "hiding overly long description" > part of this epic (together with license and category info)

kdembler commented 2 years ago

I think we should be careful with wording of "pinning" as for me this suggests marking something as "pinned" for everyone. In terms of functionality I actually had something slightly different in mind, I thought about toggle (or tab, or something else) that makes the view show only my comments (or potentially my replies to other comments). I would advocate for the default view to fully follow the selected sorting option and not distinct my comments in this regard.

dmtrjsg commented 2 years ago

@kdembler I see how you want to detach showing own comments from any sorting logic, and I am with you on not messing with the component or logic for that matter.

Is it getting complicated to have a pseudo-section with own comments to be shown/ hidden with a toggle on TOP of the sorted comments? ..OR does this still require to somehow carve out own comment entry from full set under sorting and hence undesirable..?

While not ideal from my personal perspective I guess a separate tab makes more room for multiple comments and replies. Let's see if we can handle this smoothly on the design side, and if still suboptimal perhaps we can discuss this again in favour of better ux? (after testing ;) )

kdembler commented 2 years ago

I think section on top works as well!

bedeho commented 2 years ago

Goes without saying: you guys got this, I am not longer paying attention to this deliberation!

toiletgranny commented 2 years ago

@dmtrjsg @kdembler @bedeho Thank you all again for your thoughts on comments on this. Based on our discussion above and the results of tests with users, here's what I'm about to start preparing for developers: https://www.loom.com/share/5f2584456b0b4570b8dde714baa3b4cd (sorry it's lengthy, I was a bit tired when recording this).

If there's anything else you feel like we should discuss around comments & reactions, now is a very good moment to bring this up.

dmtrjsg commented 2 years ago

Thanks for the overview, really like the edit and delete comments treatment - nice attention to detail! My 5p:

kdembler commented 2 years ago

Looks all good to me! Regarding points @dmtrjsg brought up:

"For now transaction fees do not apply" to "Transaction fees are being calibrated while on TestNet and will be managed by the community via the Pioneer governance app on MainNet."

Just to be clear, we will introduce fees before mainnet launch

Stacked notifications with show more is best treatment for this imho (since you want each linked to signing each transaction, so bulking them up (11 case) is less desirable.

I'm not sure if I understand your comment. Are you saying that it's better to have a separate snackbar for each Polkadot interaction and use the "Show more" technique presented in the video? If so, I disagree, what does the user actually gain from having 11 snackbars saying the same thing? I think we can convey exactly the same information with a single snackbar including the number of pending transactions, without cluttering the UI.

Show my comments on top - let's not include this into filter drop down options but either find a separate place for checkbox or a mini-toggle?

I agree.

dmtrjsg commented 2 years ago

@toiletgranny fyi

1️⃣ Fees final copy: "Transaction fees are managed by the Joystream community in the separate Platform Governance Application - Pioneer, and will have non-zero values on later versions of TestNet and after MainNet launch." Link "pioneer" to testnet.joystream.com

2️⃣ Notifications - version three (aggregate toaster with counter of pending transactions) is the way forward, after discussing with Klaudiusz.

3️⃣ Comments on top to be a separate control.

toiletgranny commented 2 years ago

Thank you for your input, guys! @dmtrjsg @kdembler

  1. ✅ Got it! The copy is quite lengthy, I'm afraid, so we'll have to make the popover scrolled inside (see below). It's not terrible, but if we're looking for a cleaner UX, we could try fitting that into one short sentence and have a "Learn more" button placed below. The requirement here would be to have some help center with a full explanation to which we can link. https://user-images.githubusercontent.com/35307309/155968162-e530c505-7908-49c6-99d1-acea9d54244b.mp4
  2. ✅ Got it!
  3. ⚠️ Having "my comments on top" as a separate control will clutter the UI with a setting that, as we've learned through moderated tests, will most likely not be used by the majority of users. Are you sure you want me to do that? What is wrong with having it in the dropdown?
dmtrjsg commented 2 years ago

Comments and reactions are stored on blockchain, meaning every action needs a wallet signature to take effect. Transaction fees apply.

Learn more >

toiletgranny commented 2 years ago

A quick note from a design <> tech sync meeting:

  1. We decided to drop the control of having our own comments being listed on the top,
  2. We decided to leave a trace of deleted comments (rather than making them completely disappear), with 2 possible scenarios:
    • A comment deleted by an author,
    • A comment deleted by a channel owner or a moderator.
  3. We decided to extend the scope with 2 new user stories:
    • As a channel owner I want to delete comments under my videos.
    • As a channel owner I want to enable or disable the comments section for my videos, separately.
toiletgranny commented 2 years ago

@dmtrjsg Based on the last week's discussion, I'm continuing work on this in #2285, based on the above discussion (including the video updates and Figma prototypes shared in this thread). I believe this issue can be closed.

dmtrjsg commented 2 years ago

Closing as done, progressing to HiFi