Wp-calypso: My Home: Add notification dot on sidebar nav item when something needs attention

[danhauk]

Following up from https://github.com/Automattic/wp-calypso/pull/39784#issuecomment-599755387, let's add a notification dot to the sidebar nav item of My Home when the site setup checklist is incomplete.

The design

• 8px dot
• Dot is using --color-accent variable with --color-surface 1px border
• Right aligned with the other "status" indicators like current plan name

Interaction

To help draw more attention to the dot, we animate it in a beat after the initial screen loads. Subsequent routes (e.g. going from Stats to Pages) won't have the animation. Then we can animate it out when My Home is clicked and bring up a dot on the content as a beacon of where to look. This creates a stronger connection.

In this prototype, the user's initial screen was Stats. You can see how the dot animates in 500ms after the screen is loaded. Then when My Home is clicked, you can see how we animate out and pull attention to the checklist item.

When to show the dot

For now, we'll only show it if the site setup checklist is incomplete. Once complete, the dot will be removed. If a site is launched and they still haven't completed the checklist, we still show it.

In the future when site-wide notices are pulled out of the sidebar, this design is scalable to use when there is a new notice displayed on My Home.

[gwwar]

For folks looking into this, also note that Simple site that transfer to Atomic without the checklist complete should also not see this dot.

[Aurorum]

I've started working on this and will open a PR, but I just wanted to seek some clarification.

@gwwar Instead of repeating all the lines of code and imports needed to make this work again in a different file, do you advise creating a separate selector for this instead? Maybe shouldCustomerHomeDisplayChecklist?

https://github.com/Automattic/wp-calypso/blob/1a90a02665af6bdaab5df5b74d041ca77584ed4a/client/my-sites/customer-home/main.jsx#L660-L661

[gwwar]

🤔Let's maybe give you a more streamlined API endpoint for that (cc @mmtr @kwight) . Let's assume we query for this value on each layout render.

If you're interested @Aurorum, maybe start with a PR for the client view update that passes visibility of the dot with a prop. This is something we can definitely tidy and make code simpler on the client.

[Aurorum]

Thanks @gwwar! I've done so in #40259.

[danhauk]

Interaction

To help draw more attention to the dot, we animate it in a beat after the initial screen loads. Subsequent routes (e.g. going from Stats to Pages) won't have the animation. Then we can animate it out when My Home is clicked and bring up a dot on the content as a beacon of where to look. This creates a stronger connection.

In this prototype, the user's initial screen was Stats. You can see how the dot animates in 500ms after the screen is loaded. Then when My Home is clicked, you can see how we animate out and pull attention to the checklist item.

[Aurorum]

I created a PR for the animation in the sidebar in #40326. :)

(I'm assuming that adding it to the Checklist would require it to be displayed in the Sidebar first)

[gwwar]

As a heads up @Aurorum we're also investigating on if a notification in the bell icon would make more sense for bringing attention to an incomplete site setup list (just in case you were wondering when this would be live).

I'll also be trying to triage in any good up for grabs tasks in https://github.com/Automattic/wp-calypso/milestone/306 if you were interested in helping with more issues 💖I'm hoping we can add in a few specs for new customer home cards soon.

[Aurorum]

Thanks @gwwar! I have quite a lot of time available now due to the isolation caused by the virus, so I'll take a look at them soon. :)

[mmtr]

After some discussion among the team we decided to start with utilizing the existing notifications panel rather than adding another dot to the sidebar.

• The original problem of users getting lost was brought up before My Home became the default logged in page. The risk of not knowing where to go has been lowered by making My Home the default.
• The sidebar doesn’t show on mobile but the notification bell is in the masterbar so it’s always visible.
• We tried adding a dot to the inline help icon in the bottom right corner but it didn’t perform as expected. There are likely other factors in play there, but it’s worth noting.
• If we start adding dots all over the place, the dot starts to lose meaning. Dot fatigue.

We'll open a new issue once the requirements are clear. I'm sorry we cannot use your awesome work @Aurorum!