Design Picker: Introduce category descriptions (and starter design descriptions for screen readers)

[ianstewart]

What

It's been proposed that we add "categorization" to our design screen in Gutenboarding. This issue will stub out a first pass at a set of category descriptions.

Additionally, it's been proposed that we add meta descriptions for each design for screen readers. Those same category descriptions could be used for a first pass at design descriptions as well. For now. (Have to start somewhere.)

Here, in text, to start are a short list of categories that we can assign starter designs to. (Will need a mockup later and that'll be added so we have a visual of what goes where but I wanted to jot this down first.) I think the first description I stole from @olaolusoga.

Blog Create a space on the web where you can document important content that expresses who you are.

Portfolio Share your visual work with the world with a design that displays your imagery and photos in artful galleries.

Services Tell the world about the local or online services you offer with a simple site in a professional design.

Restaurants Share your menu, add your hours, and location, and let the whole world know about takeout and delivery options for your restaurant with a Restaurant site

The descriptions we land on here could be re-purposed for screen-readers. Here's an example.

• A blog design that lets you document important content that expresses who you are.
• A design for your restaurant featuring a menu, hours, and location.

cc @ollierozdarz @rickybanister @alaczek

Why

Help users find a design easier

A/C

• [ ] Add an optional prop showCategories to DesignPicker.
• [ ] Add a list of link buttons on the side of design picker that looks like the categories for domains: https://github.com/Automattic/wp-calypso/pull/41358. consider extracting it to a component in @automattic/onboarding.
• [ ] Use the values in the categories Array from available-design-config.json to group designs and have them filtered using the list of link buttons
• [ ] Map design categories slugs to translated title and description as in this example
• [ ] Use the labels from above
• [ ] Use the descriptions from above for screen readers
• [ ] Update unit tests and integration tests
• [ ] Check i18n (Add "String Freeze" label)
• [ ] Fire Track event named calypso_design-picker_category_selected with prop { category: category_slug } when selecting a category. PCYsg-4S2-p2
• [ ] consider updating E2E tests

Related:

• New Page Layout Picker: new design with category names on the left: https://github.com/Automattic/wp-calypso/pull/49860

[alaczek]

I took a stab at categorizing designs currently available in signup:

Blog Bowen, Edison, Cassel

Portfolio Vesta, Easly, Camden, Reynolds, Mayland, (Coutoire - I'm not 100% sure about it)

Services Doyle, Overton, Brice, Barnsbury, Alves, Rivington, Balasana, Stratford, Leven

Restaurant Maywood, Rockfield, Overton

Here's how this looks like (hat tip to @ianstewart)

Things are not balanced with Blog and Restaurant categories having only three designs, while Small Business has nine. This is mostly because we added a bunch of Varia child themes to signup, which are predominantly geared towards small businesses. We have a bunch of designing in the works that should help populate the blog category at the very least.

[rickybanister]

Just for conjecture's sake, could restaurant be folded into services or the more generic 'business' or something like that? It'll be clear to customers that they're for restaurants and it does feel a bit niche to have its own category.

[simison]

Perhaps good first steps would be to...

In design storage (no UI yet):

• Add categories to different designs
• Add simple descriptions for each design, like "Dark colored design with big header image."

In design grid UI, generate ARIA descriptions for screen-readers from the above info:

aria-description="Dark colored design with big header image. Good for business sites."

All of the above could be good developer-onboarding material to get done soon (cc @andrewserong since this touches Ganon's work on these APIs?)

Note that I'm no a11y expert so that kind of description might actually not be useful. 🙃

[andrewserong]

For the Patterns API, I imagine a good place to source individual descriptions for each design would be to use the post excerpt field in the editor when we're building the designs? In the short-term, it'd make sense to add designs descriptions / category descriptions to the available-designs-config.json file.

[andrewserong]

Adding Patterns API support for a description field sourced from post_excerpt in D48611-code.

[github-actions[bot]]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

[ollierozdarz]

@ianstewart @olaolusoga @simison we've chatted about getting categories into Gutenboarding at some time or another over the past months. The reminder above seems like a good time to just try to make it happen. In my mind, the implementation (at least to start off) would just be a short and punchy list which wouldn't require descriptions.

[simison]

Yep, I think we can make this happen with small effort. I believe there even was design already, or we can reuse the page template picker design? @ollierozdarz

What categories would we have? I think listing them is an useful excercise anyway, just to understand better what we have right now.

[ollierozdarz]

@simison, yep we've got a few simple designs to choose from (depending on if we use one or two column layout) which I can surface.

What categories would we have? I think listing them is an useful excercise anyway, just to understand better what we have right now.

I think the Themeshaper (@ianstewart) himself is our best bet at accurately answering this 🙂

[ianstewart]

I think we're not too far off from what's above from @alaczek …

https://github.com/Automattic/wp-calypso/issues/45038#issuecomment-678866574

[ollierozdarz]

Cool. Thanks, @ianstewart!

[alshakero]

Here is my old attempt on design picker categories https://github.com/Automattic/wp-calypso/pull/45091

[razvanpapadopol]

@alaczek @ianstewart is there an updated list of categories we want to be displayed for filtering designs or https://github.com/Automattic/wp-calypso/issues/45038#issuecomment-678866574 shows the most recent list?

We've seen in the designs config file some other categories as well. Eg: 'small business' or 'charity' or 'non-profit'.

[simison]

Just heads up that Ian is AFK this week. :-)

I don't think those categories in the design config file were ever used and were just for an example initially, but I could be wrong, it's been a while. :-)

[ollierozdarz]

👋 @simison @razvanpapadopol, could we use @alaczek's suggestions (#45038 (comment)) for a first pass? I think there might only be one or two newly introduced designs which are missing.

In terms of implementation, I'm thinking either of these basic layouts (we'll keep the existing onboarding styles though, just showing the 2-col layout vs single-col):

In terms of initial implementation, I'm thinking the categories above the designs will be the least disruptive to the page?

[autumnfjeld]

@ianstewart @alaczek Can this issue be closed?