Wp-calypso: Sites: "Add New Site" call to action in bottom of sidebar looks a bit janky

[lancewillett]

Steps to reproduce

1. Sign up for a new WordPress.com site (this occurs with 1 site only)
2. Look in sidebar menu for "Add New Site" — bottom left
   

   What I expected

The Help and Support Chat to be similar layout to other views it Calypso.

What happened instead

Layout looks jumbled:

Browser / OS version

Tested in Chrome on Mac OS X.

Context / Source

manual-testing by @beaulebens

[mtias]

cc @jasmussen as we discussed thus previously.

[jasmussen]

Great catch. Looping in @andreabadgley as well, as it's a question of _support chat button discoverability_. How visible do we want the button to be? Where it sits currently, does it hold what you feel is the "right" visibility, as far as chat support volume goes? Would it be better to put the Support Chat button inside a dropdown menu together with Help?

[andreabadgley]

Thanks for the cc, Joen. @kriskarkoski opened https://github.com/tinkertinker/wp-calypso/issues/54 suggesting that we surface the _Support Chat_ link in the sidebar only when a user has an active chat. I agree with his suggestion, especially while Happiness works to nail down our ability to support live chat via wordpress.com/help/contact (see happychat issue 108 linked below), which is not as high visibility as the _Support Chat_ link would be.

However, even with Kris's suggestion to display the _Support Chat_ link only for active chats, we'd still need to plan for the link's design in the sidebar since it would sometimes appear there. Or, perhaps a couple of alternatives would be:

• Bundle it into the Help menu like you said, with a notification dot when there is a new chat message from the operator (https://github.com/tinkertinker/wp-calypso/issues/57).
• Strip the words and use only the chat icon.

[kriskarkoski]

Another option might be to put some sort of icon (with new message indicator) in the bottom right for collapsed but active chats since clicking it would open a chat in a similar area (either the bottom-right corner for narrow windows or the full right side for larger ones.

[jasmussen]

Here's an alternate mockup:

The major downside here is lack of text labels. But perhaps compared to burying chat in a dropdown box / popup bubble, icon-only navigation strikes a sufficient balance?

[mtias]

I like that. What about when you don't have a chat going on? Would you show only help with the text?

The (?) can still have a popover if we ever want to have direct links to different places (invoke a contextual guided tour, link to help, docs, etc).

[jasmussen]

I like that. What about when you don't have a chat going on? Would you show only help with the text?

There are a couple of use-cases here. If you have an ongoing chat, but no new messages in it, it might look like this:

If you don't already have an ongoing chat, and chat support isn't available, it could be this:

The (?) can still have a popover if we ever want to have direct links to different places (invoke a contextual guided tour, link to help, docs, etc).

Yep!

[mtias]

Let's do this! cc @rickybanister for the "add new site" popover (Jetpack / WP.com).

[rickybanister]

That looks great @jasmussen!

The popover issue is #6400

[mtias]

One more reference here would be the multi-site view since that view doesn't have the "Add New Site".

[rickybanister]

@mtias can you clarify what you mean a bit more?

It might also be nice to think about how we can avoid covering that link with 'status bar' urls as you hover each of your sites or sidebar links.

[mtias]

@jasmussen screenshot above applies to single site users. If the user has more than one the "add new WP" moves to the "switch site" panel.

[rickybanister]

Why not have the footer be the same in both places? It's a nice advertisement for adding a site or connecting Jetpack if we can make all the links fit nicely.

[jasmussen]

I think I agree with @rickybanister on this one — if we believe in the icon-only navigation for help and chat (which I do), we might as well utilize the benefits this gives us to make single and multi-site sidebars behave the same.

[jasmussen]

Suggested a 24x24 chat icon to Gridicons which we'll need for this change here: https://github.com/Automattic/gridicons/pull/182 (the previous icon was drawn on an 18x18 grid).

[jasmussen]

To get the ball rolling I started work on the new sidebar footer in #8578, but I'll need some code help to bring it home, thanks.

[folletto]

we might as well utilize the benefits this gives us to make single and multi-site sidebars behave the same.

If we go for the solution of a different view for the footer in the site picker (Multi-Site), thus changing also the footer in the sidebar navigation, I'd suggest to do them entirely different: site picker with just add site, and the other with just help and chat. No shuffling of icons.

That said, I'm totally fine in having the same footer in both screens. It's slightly disaligned with the left-to-right hierarchy we are following, but it's a compromise we can have for this specific bit as the gains in keeping it always the same seems relevant enough for me.

+1

[rickybanister]

Always the same! It will require no visual transition.

[mtias]

It will require no visual transition.

I think it will require a refactor of the picker, right now it comes with its own footer and it slides on top of the other.

[keoshi]

Just want to say that looks beautiful, @jasmussen !

[davewhitley]

Some suggestions, perhaps they have been discussed before:

may not help since translated string could be long

• Remove "Add" from Add New Site
• Remove "Support" from Support Chat

I'd suggest to do them entirely different: site picker with just add site, and the other with just help and chat. No shuffling of icons.

agreed

What does it look like if I have multiple sites? The Add new site button is not there when you have multiple sites.