Wordpress-android: Site Switcher UI is a bit confusing

[koke]

Expected behavior

The Site Switcher has somewhat the appearance of a dropdown, so I expected to tap anywhere in the area and be presented with a switcher.

Actual behavior

Instead, there are actually four different tappable areas:

• The icon lets you change the site icon
• The title lets you change the site title
• The URL takes you to the site in a web view
• The down arrow shows the site switcher

I would argue that if you have more than one site, the latest action would be way more common than the other three, except maybe visiting the site.

Tested on Moto G5 Plus, Android 8.1, WPAndroid alpha-249

[designsimply]

Noting that these changes were updated in https://github.com/wordpress-mobile/WordPress-Android/pull/12799 as part of a larger AppBar refresh project that shipped in in 15.8 (originally https://github.com/wordpress-mobile/WordPress-Android/pull/12547). 😍

@osullivanchris, since you were involved in the design decisions, may we have your input on this one with a goal of making this issue actionable even if it's to check back in on at a later date to see if additional feedback comes in?

^{(internal references: pauD4L-8W-p2 and pbArwn-2G-p2)}

[osullivanchris]

Thanks @koke and @designsimply

I did some usability testing on the site switcher (see the comment at the very bottom of pbArwn-C9-p2), and it performed well. People understood the action for switching site, and its a lot simpler for the iA than going up a level to another view.

I did not do testing on the other tap-able areas though. I did consider this approach of making the whole row perform site switching. But I basically just left the status quote - the touch targets @koke mentioned are all the same ones that existed before for those items, just in a new layout.

I agree that site switching is a primary action. Changing site icon and site title are going to be infrequent actions, which are also available in settings. Actually, I believe one reason we left these touch targets, is that setting a Site Title was removed from the onboarding flow. So with all users arriving on My Site with the placeholder name Site Title, we wanted to make it very easy to set the real title. I suggested here that we could have a different behaviour for the first use case and thereafter (e.g. make the title and image Call to Actions initially to set them, but thereafter the user would go to Settings).

cc @frosty @mattmiklic for a second opinion?

[frosty]

I have to say I'm not a fan of having all these tap targets here either. If a user has multiple sites, it would be much nicer to be able to tap anywhere in that area – I feel like changing the site icon or title are going to be super infrequent activities. They're part of the Quick Start checklists, so there's another prompt there for new users to change them. Also, iirc removing Site Title from the site creation flow didn't change the completion rates much, so perhaps we should consider re-adding it...

Semi-related, I think it would be nice for us to add a power-user site switching shortcut – long press on the My Site icon to bring up the switcher.

[osullivanchris]

Semi-related, I think it would be nice for us to add a power-user site switching shortcut – long press on the My Site icon to bring up the switcher.

oh yes I meant to say to you! I added another account on instagram. I noticed they do this, with a double tap it also works. Cool idea anyway.

I have to say I'm not a fan of having all these tap targets here either. If a user has multiple sites, it would be much nicer to be able to tap anywhere in that area – I feel like changing the site icon or title are going to be super infrequent activities. They're part of the Quick Start checklists, so there's another prompt there for new users to change them. Also, iirc removing Site Title from the site creation flow didn't change the completion rates much, so perhaps we should consider re-adding it...

sounds good to me. I'd propose we change the entire area to open site switcher. As you mentioned changing title and icon can be done elsewhere. And visit site also has a link in the list. We would just have to change that url text to grey and remove the icon.

[designsimply]

I must admit (totally chiming in with a personal opinion) that I'm quite swayed by Chris's argument that new users should have a super easy/simple/fast way to change the site title and icon and 🙈 I really like all the tap targets! Is this because I am a power user? 🤔😬😊

[osullivanchris]

I must admit (totally chiming in with a personal opinion) that I'm quite swayed by Chris's argument that new users should have a super easy/simple/fast way to change the site title and icon and 🙈 I really like all the tap targets! Is this because I am a power user? 🤔😬😊

Haha its not necessarily my argument/my opinion. I was just articulating that side of things 😄

I do see what you mean. But I think its a lot for a first use case. And actually, not even entirely sure it would be obvious to new users. Some actual call to action "Set your site title" would be more obvious to me, than figuring out that its tapable.

cc @mbshakti ☝️ this discussion may be relevant to the NUX work as well.

[frosty]

Maybe as part of the upcoming dynamic dashboard project, we could add a simple card for folks who have just created a new site and not set a title, that prompts them to tap to change the site name?

[osullivanchris]

Totally agree @frosty it is only a big deal initially. So it makes sense to be a one time task.

[mbshakti]

This is a great discussion everyone. As I've been working on Quick Start card redesign, I noticed two problems:

1. The ability to change site icon is missing from the site settings page (however, the user can edit pretty much everything else from the site settings page).
2. For new users, it can get confusing if the way to edit site settings is too hidden. Currently, you can tap things (icon/title) to edit them, but new users may not not that as there is no visual indication that they're editable.

I explored some ways to (1) add the ability to edit site icon on the settings page, (2) have a more prominent entry point to the settings page.

Some early explorations:

Option 1: Site settings as a quick action
Here "settings" is one of the quick actions, and the user can tap it to edit their site's settings. In the site settings screen, I also added the site icon so the user can edit everything in one place.

Option 2: Edit settings button
This is actually pattern I found on Instagram & TikTok, but they have prominent entry points for editing their profiles.

If we go down this path for a potential solution, the site switcher can remain a site switcher, and there wouldn't be unexpected entry points.

Thoughts?

[osullivanchris]

Hey @mbshakti thanks for sharing the explorations!

First, I didn't realise that you could not change the site icon in site settings. That's surprising! We should definitely add it in there. I think whatever way we display it, we should clarify what it is/what it does. I think the way its presented may fudge the line between user image and site image.

The entry point is super interesting. So we already have the profile icon top right which brings you to a mix of profile settings and account settings. The categories within that are somewhat arbitrary. But it just about works. Then we have this site settings area.

I have seen some issue between users understanding the difference between Account level settings (in that top right avatar) and site level settings (currently in the menu, but moved in your exploration). I much prefer your second example to the first. That button feels like a site settings type thing. The prominent Quick Action style I feel is for more appropriate to creative actions instead of fiddly one off settings things...

If we change it, two more things I would like it to do:

• I would like the label to say 'Site settings' or maybe even 'SiteName settings'...something to make the distinction clear
• I'd like to really take into account this mix up between site and account settings. I think that button having the same width as the new site switcher gives a good connection to it being a thing related to Site. I just wonder if there's some ways to really drill this in. I worry slightly that its now closer to the avatar. On the other hand its all below the title 'My Site' indicating it relates to Site. Just wondering how we can make this really really obvious.

Another random thought. We are doing some stuff in Jetpack that is quite 'settings' led compared to WordPress. Settings type features are more prominent in Jetpack. I guess because its power users wanting lots of control and specificity. Just wonder if there's some overlap there or something we can do.

Sorry for braindump with ideas but not solutions 😄

[osullivanchris]

P.S. if you want to jam on this a bit - and look at the Jetpack/WP overlap, or have a call I'd be game @mbshakti - its an interesting one.

[mbshakti]

@osullivanchris Let's do that, I'll message you on slack.