UX improvements to snippet preview

[hedgefield]

Is your feature request related to a problem? Please describe.

The current toggle to switch between the mobile and desktop snippet preview is unclear. Based on the discussion about UX and a11y in this design issue, we have an approved product solution to build.

Describe the solution you'd like

• Rename it to Google search result preview
• The icon-only buttons for mobile and desktop will be replaced by two radio buttons (based on https://material-ui.com/components/radio-buttons/)
• Toggle will appear ABOVE the preview instead of below

cc @IreneStr

[IreneStr]

The radio buttons are based on those from Material UI. You can take some inspiration from their repo: https://github.com/mui-org/material-ui/tree/3f56ea14dbb964578eebe4258b50b2a0426c8cfb

[IreneStr]

@hedgefield During the scrum meeting, we decided to not collapse the edit fields by default, because that pushes the SEO analysis down to much.

[luckickken]

@IreneStr, @thijsdevalk and I decided a while ago to replace the radio buttons for a toggle switch. But after some consideration, I decided that this use case isn't suited for a toggle switch after all. For now, we'll stick to using radio buttons.

[hwinne]

The radio buttons will not be styled like the material-ui components within this issue. After some consideration, for consistency's sake, the decision was made that a component should be created for all radio buttons, not only the ones in the scope of this issue. A separate issue will be created to redesign all radio buttons. In this issue default radio buttons will be used.

(CC @luckickken )

[hwinne]

This issue has a PR in both the javascript and wordpress-seo repo.

[afercia]

Rename it to Google search result preview

Testing #13649 I'm wondering how this new title would look like in other languages, typically the ones that have longer translations.

For example, in Italian Google search result preview

would be translated to:

Anteprima dei risultati della ricerca su Google

Especially in the sidebar, the available space is pretty limited:

With this specific sentence, I think most of the western languages will have longer translations.

I'd suggest to consider a shorter title, which I guess should be evaluated by product.
/Cc @thijsdevalk @IreneStr

[afercia]

Oh well it's singular so it would be:
Anteprima del risultato della ricerca su Google

[afercia]

I see in the design issue a first idea was to rename the title to "Google preview", which is way shorter and maybe more immediate.

https://github.com/Yoast/design/issues/394#issuecomment-497673161

We should rename the Snippet preview to "Google preview", we're mimicking Google, so let's call it what it is.

[afercia]

One more question for product: if we rename "Snippet preview", I guess it should be renamed in the settings as well (2 occurrences in the codebase):

[thijsdevalk]

Lets go with Google preview.

@afercia Could you make a separate issue to replace the occurrences of Snippet preview in our codebase? Thanks!

[afercia]

Sure will do.

[IreneStr]

Fixed in Yoast/javascript#376 and #13649