search

replayio / design

Tasks for the Replay design team
1 stars 0 forks source link

[UX] Timeline progress improvements, May edition #52

Closed jonbell-lot23 closed 2 years ago

jonbell-lot23 commented 2 years ago

Background/the problem we're trying to solve

We have made many improvements to our timeline over the last year, and this is the next step forward. These items should be as clear as possible when using our app:

  1. Where the playhead currently is [good]
  2. What regions are ready to play quickly [misleading]
  3. Messaging when things are slow/laggy/not ready [bad]

Details: What regions are ready to play quickly

We currently use a slightly different color in the style of Netflix or YouTube to say "this region is fully loaded and ready to go. Click here and everything's gonna work great." But it doesn't. It is often slow.

Proposed fix: we need better messaging here.

Details: Messaging when things are slow/laggy/not ready

It's possible to click into a portion of the timeline and not get a meaningful explanation about what's going wrong.

Proposed fix: we also need better messaging here.

Proposed plan

  1. First we should ship https://github.com/RecordReplay/devtools/issues/6671. Let's get that out as designed, then we can build on that foundation.
  2. Once that's live, we need to think about how/where we're going to message stuff. Coming soon.

The design that we'll probably land on

Other considerations

There's more thinking to do around unloaded regions. (See tickets below) Stay tuned for that.

Resources

Ticket: Difficulty using player when parts of recording are unloaded Notion: Josh, Brian, Jon notes

jcmorrow commented 2 years ago

I want to add some not-very-fun but sadly important nuance here:

We currently use a slightly different color in the style of Netflix or YouTube to say "this region is fully loaded and ready to go. Click here and everything's gonna work great." But it doesn't. It is often slow.

I don't think this is true? I think right now this is supposed to mean "we have loaded paints for this area so the video should work". Right now, AFAIK, there is no bar that tells the user "this part of the recording is loaded" (though we have discussed adding one when hovering of the new loading UI". If we do that, we should recognize that there will be at least 4 different ways for the timeline to look visually, with a different significance to each one:

1) unloaded 2) loaded/loading, video not ready 3) loaded/loading, video ready 4) loaded/loading, in the "past" (to the left of the current play position)

And I'm sure that could get confusing.

jcmorrow commented 2 years ago

And, it's worth noting, even when we do show the user which parts are loaded, just because the part of the recording where you are currently paused is loaded does not mean "everything is gonna work". Lots of stuff will still wait for indexing to be complete before it works.

bvaughn commented 2 years ago

I think we talked about the ability to differentiate between index/loaded and ready for playback (maybe connected to the paint regions?) – if we have that ability (I think we said we did?) then I think that's what we should be showing with the timeline progress bar, because that ui is primarily about playback.

jcmorrow commented 2 years ago

Yep, if you see the new 4th bar on the protocol timeline (the bottom blue one), that is what we know about where repaints fall in the replay. That doesn't mean we have the paint data just yet, we would still need to download it, but at least we could start doing that if the user clicked there.

bvaughn commented 2 years ago

Blah. That's where it went. It used to be turned on via app.features.advancedTimeline (right?) but that stopped working for me. It's app.features.protocolTimeline now I guess. That being said, I only see 3 lines 😄

jcmorrow commented 2 years ago

Yeah I introduced a bug in the paints calculation this morning where we would try and make it Infinity% wide when it was all loaded 😅

jcmorrow commented 2 years ago

It should be fixed now

jonbell-lot23 commented 2 years ago

I wrote a comment but revising it back because it didn't add a lot of new information

jonbell-lot23 commented 2 years ago

This ticket is causing a bit of confusion in my workflow because it's not closed but I'm also waiting on some other focus mode stuff before I do anything else. Sending to next iteration.

jonbell-lot23 commented 2 years ago

Hey @bvaughn and @jcmorrow, I've filed a new ticket for adding a loading indicator onto the playhead when things are not yet loaded: https://github.com/RecordReplay/devtools/issues/6833

It is likely that with that change I'll be able to close out this ticket, but stay tuned.

Update: I put together a design so if we agree with it we can roll it out. (I'll need to cut an icon, stay tuned for that)

jonbell-lot23 commented 2 years ago

I am closing this ticket in favour of other ones. The best way to keep track is on this Discord page: https://www.notion.so/replayio/Loading-buffering-loading-states-design-discussion-2c6b4e0a13f845ddb09221a3a3231631