replayio / design Goto Github PK
View Code? Open in Web Editor NEWTasks for the Replay design team
Tasks for the Replay design team
Right now this happens:
This should be replaced with two things:
Insight
It's easy to lose track of console logs. Originally we were going to set a solid background colour for all of our print statements. (Old issue here) But something many of us have discussed for ages is the ability to highlight rows and add emojis to help find a needle in a haystack. So we're going to build that.
Next steps
Background
Focus Mode is missing some important stuff. Here's a loom proposing some good improvements.
Details
Background
While exploring Design Library 1.5, it was clear that we have three different changes, which I've split into three GitHub tasks:
The pause line in dark mode is a bit too subtle. Also, not sure if the "flash" is noticeable in dark mode.
https://discord.com/channels/779097926135054346/957390059714281482/967760989095350272
“Please open a new tab and press the blue record button to record a Replay” is not what I should see after making a new team.
The problem we're trying to solve
Focus Mode should be contextual. You should be able to be in a situation, right click on something, and automatically narrow the focus to that point. This is going to be a great feature.
Things we know
The best way forward
On the design side, I'm not sure exactly where we want to use this. I'll need help from the team defining entry points, so let's discuss that in the comments below.
Once we have the entry points figured out, I'll need help figuring out what options we want to see in the menu. "Focus here"? "Start point here" and "End point here?" We'll want to discuss as a group. I will bias towards fewer options, rather than a menu with too many options at first, but we'll see.
Design POV:
I discussed with @ryanjduffy and @jasonLaster in person, here's the summary:
We've had a lot of ideas around comments over time. Here are a few items to consider:
Auto-generated from product office hours chat
Background
We explored loading states here in Figma
Now we're narrowing in on something that can help us untangle loading from indexing in a model that's clear and understandable without being overwhelming
Proposal:
Here's a one minute Loom explaining how this could work.
Here are some visuals:
The dark theme hover background somehow doesn't show the same rounded corners that the light theme does.
https://discord.com/channels/779097926135054346/966563248776282133
@jonbell-lot23 I'll let you edit/fill in the details!
When people hit their 500 hit limit, there are two main ways to handle it:
Unfortunately, our conditional button is too subtle for people, and most people miss it. This ticket is for Jon to think up ways to make it more clear. Adding to the 500 hits error message is a good start, and there are also visual things we can do to the button itself.
(Hope it's okay for me to create an issue here as a placeholder for us to chat about something next week!)
I've been looking into https://github.com/RecordReplay/devtools/issues/6511 and https://github.com/RecordReplay/devtools/issues/5606 this morning, and I spoke with @jcmorrow a little bit to fill in gaps in my knowledge for when certain conditions might occur– and I came away with a pretty strong intuition that the timeline UI (as it exists today for public users) is maybe missing some pretty crucial information about "loaded regions" that might lead to some bad user experience scenarios (particularly as we move toward longer recordings).
Some timeline specific concerns I have:
Another topic that shook out of those tickets and the subsequent convo between @jcmorrow and I was:
Maybe we can brainstorm about this? 😁
Developers need things to be keyboard accessible, and one of the first steps for this is making sure tab support is great.
We know that in the long run, we want an Xbox/Playstation style "grab last minute" button. This is why we're doing 10 minute recordings and getting other foundational technologies moved into place.
Eventually, we'll have it working and need a design to visualise how it would all work from a user's standpoint. This ticket is to explore that.
It's been a while, we should see how this experience feels. I should also document the steps so other people can easily do it.
From @bvaughn
https://www.loom.com/share/bde37fcb2aef4a52988afb81b34718b3
From @jasonLaster
From @jcmorrow
From @jasonLaster
@oliverdealb said
"on call with Dyanboard CEO yesterday, he raised a request to be able to switch a setting in his Team so Replays are always shared by default. He mentioned Loom has a nice shortcut (cmd + shit +L) which makes it much faster to share recordings and have all of them available in the library. think this would be a nice feature for Team or Org plan settings?"
Jon says:
I don't understand the exact details yet, but yes. This sounds great and is a real pain point.
Jon note to self: we also need the ability to select a bunch of items and make them all public at once
We do a pretty good job with this basic accessibility feature of HTML but we're missing it in some spots.
Some errors are things that probably don't need further explanation (we turn the server off after 5 minutes of inactivity, you don't have permission, etc.). But lots of things could leave the user feeling a little helpless (e.g. "Something went wrong"). Especially in those open-ended cases, it would be nice to provide the user with an option other than "try again and 🤞 ". Probably some links to discord would be a good starting point, but there could be other stuff too! (I don't know if the design-discussion tag fits here but it seemed right, feel free to retag)!
@jonbell-lot23 heads up
Originally posted by jasonLaster April 22, 2022
It would be nice to explore ways in which our frontend can support situations where there are more than 200 messages to show in the console. Here are some examples:
In the Print Statement panel we currently try to show up to 500 messages, but we do not let you edit the expression if there are more than 200.
In the Console Filter bar, we currently default to disabling event listeners if there are more than 200, but I don't think we disable exceptions.
Our Analysis API supports an addPoints
call which allows the frontend to specify the points to analyze and gives the frontend a lot of latitude for deciding how the UX should work.
We should have a NextJS site for displaying documentation about guides, components, theming, figma, etc. I'll be porting over my work from this case study to start and we can eventually move to the official DocGraph library once it's published.
We'll be putting this in several places in the app:
We need to consider some other stuff, like:
Auto-generated from product office hours chat
Tracking the proposed changes here: https://www.notion.so/replayio/Hats-overview-c8fb98b59d744d5197cc7096fcb6e519
We're currently making progress on helping the user understand the replay's current loading state in #40.
To recap:
This is good and we should move forward here. There is also a larger progressive loading project which we can call insta loading.
tl;dr
Brian recently added support for creating a replay session for a partially uploaded recording. He added it to support the cloud-dev flight recorder, but it can also be used to help users view replays as soon as they click save in the Upload screen.
What changes
Prioritization
We can give this time to bake on the design/product side and implement it when we're ready. My best guess would be June/July. The obvious user benefit is that we could open replays pretty quickly.
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:
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
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
Ways you should be able to delete
Updated ticket description from Jon (May 17, 2022)
Our current share dialog has some issues that I'll describe in more detail later. Here's a Loom getting people up to speed on the history and what the design proposal is moving forward.
Original ticket from Ryan:
There be dragons in this dialog! Changing the value in "Privacy Settings" moves the recording to a new team or makes it public/private.
See also
Feedback from Ollie in this other ticket
Travis is starting soon and there are things we can do to make that transition better
Jaril gave me a customised login screen for onboarding. Now it's time to customise it!
Here's the original issue we filed for this
In this screenshot, we say "check the console" but it's not clear what we're referring to:
We are working on our Rainbow Console design, but this issue addresses a more immediate need: our onboarding process needs a way to make this line more clear.
Inspired by this bug:
https://github.com/RecordReplay/customer-support/issues/74
Every failure in Replay should message itself appropriately (and if possible, it should automatically retry without requiring user intervention).
Users shouldn't ever be left staring at a broken Replay without some idea of what happened.
We need to add a skip button and make sure the flow is good.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.