[UX] Design stalled state for Global Loader 1.6

[jonbell-lot23]

There's a state between "turtle" and "fatal error" where things may hang, and we need to design a safety net for that.

Design POV Loom: https://www.loom.com/share/394a8f0382f249848d46bf3426fca9b0

• Don't use a custom icon because it causes an awkward state change uncessarily
• Require a long hover or click to get small tooltip message

The whole proposal is around being understated but providing a way to get out of a stalled state.

[jonbell-lot23]

cc @bvaughn, see Loom above to see my POV around how to do the "dead turtle" state.

[bvaughn]

@jonbell-lot23 This proposed UX seems reasonable! What's the new pop-out look like?

It's not a tooltip (because those disappear when you mouse away from the target– so you wouldn't be able to click any call to action in it).

It's not our standard modal (because those are center aligned in the app and have a kind of standard style that I think would be a bit heavy for this sort of thing).

I'd be happy to just make a UI that looks good to me if I were implementing this. Just wanted to ask if you had any preferences or thoughts about what it looks like.

[jonbell-lot23]

You are totally right -- I was thinking of a "mini modal" for the exact reasons you describe. Basically a tooltip that doesn't go away until you click off it. (a better way to describe it is a toast)

Please feel free to implement as you see fit, and also happy to define more if you'd like!

[jasonLaster]

@bvaughn feel free to go for it. For what it's worth i think a good looking tooltip would probably achieve the goals and if not we can always ratchet it up too.

[jonbell-lot23]

feel free to go for it. For what it's worth i think a good looking tooltip would probably achieve the goals and if not we can always ratchet it up too.

This feedback has been well noted over the last few weeks, but my design POV is still that it's very important to not dead-end a customer without an actionable link in this scenario. A tooltip that says "sorry" is not a full-credit answer. They need a call to action when we've gotten this far down the failure path, meaning they need more than a tooltip.

[jasonLaster]

re CTA: totally. re modal vs tooltip vs toast: lets see what feels right

[jonbell-lot23]

100%, high five

[jonbell-lot23]

(Closing this for GitHub iteration tracking reasons. We're at a good place with the design, so now we're in discuss->code it up territory)

[bvaughn]

As I look at picking up this issue, I have an additional small suggestion: the idea of delaying 15 seconds (or some amount) before we make this tooltip/click popout available seems strange to me, given that there's no external visual state to indicate that anything has changed.

I think if loading is slow enough that we show the turtle, we should show the popout if the user clicks on the turtle.

I think doing anything else would feel broken. (e.g. If I've clicked the turtle before, and saw a popout, but now I click it and nothing happens- why?)

[jonbell-lot23]

Yeah, that makes sense. Curious to see where you land on this, let me know how it goes.

[bvaughn]

Decision that I went with (for now) was if the user hovers for a second (or clicks) on the turtle, we show the pop-out. Otherwise we don't.