New layout in home, search results, and pattern details pages

fcoveram commented 8 months ago

I tried a few layout ideas for the three main pages, and what you see below are the ones that convinced me the most. All your thoughts are welcome.

Home

On this page, the content area shows all categories rather than putting them behind a dropdown. This decision comes from feedback on keeping all options visible. On mobile, this bar works like the one in Showcase, where elements overflow the space and a horizontal scrollbar shows up.

The label in the sort action relies on other products I've seen, but it's open to change.

Rows in the results grid have a fixed height, and pattern images fit the available space to convey their aspect ratio.

Home

Search results

As in other site sections, this page reuses most elements from the homepage, but the filter area changes depending on the features available.

Search results

Pattern details

In this case, I changed the distribution of the title, breakpoint toggles, and copy action to allow long titles and avoid moving the toggles' position when changing between views. All labels are open to change.

Changing between breakpoints keeps the pattern viewer's height fixed on all screens and a scrollbar shows up, if needed. I would like your thoughts on this.

Pattern details

Figma file: Pattern Directory, page i5

ryelle commented 8 months ago

@fcoveram Thanks for these!

On this page, the content area shows all categories rather than putting them behind a dropdown. This decision comes from feedback on keeping all options visible.

One thing to note with the categories as nav links instead of a filters: we won't be able to combine categories (ex, show patterns in "About" and "Call to Action"), and clicking a link will reset the filters. Does that work? Will these links only be like this on the homepage?

Search results As in other site sections, this page reuses most elements from the homepage, but the filter area changes depending on the features available.

Is this specifically about search results, or all archive pages? Did you remove the categories & curation filter on purpose? (note that I don't think we can do the category-nav on search results, but we can do the category filter dropdown).

Changing between breakpoints keeps the pattern viewer's height fixed on all screens and a scrollbar shows up, if needed. I would like your thoughts on this.

On the call I suggested having a fixed height for mobile (maybe tablet), and let the "wide" size use the dynamic height of the pattern. With the buttons above the pattern, the page won't "jump" as badly. What do you think about that?

And what should the sizes be? Currently we have

Full: 1200px
Default: 960px
Medium: 480px
Narrow: 320px

My guess would be:

Wide: 1200px (dynamic height)
Medium: 800px (dynamic height)
Narrow: 400px (600px height)

On the single pattern details page, where should the owned pattern actions go?

richtabor commented 8 months ago

One thing to note with the categories as nav links instead of a filters: we won't be able to combine categories (ex, show patterns in "About" and "Call to Action"), and clicking a link will reset the filters. Does that work?

Yes, I don't think it's particularly helpful combining filters anyhow. It's unlikely to search for "gallery" and "call to action" patterns at the same time for example.

openartist commented 8 months ago

Hey, I'm new here and just getting started commenting on designs. One thing I'd perhaps consider is adding search/filter terms that get bubbled. I also wonder if having the filter options on the left would be a better UX solution ala themeforest. I like the idea of seeing the breakpoints, but maybe use typical terms? Desktop, Tablet, Mobile? My other thought is to maybe place the search bar above the filters, on desktop make it wider, maybe even span the whole width of the screen.

I'd also add a "copy pattern" button on the main directory view, not needing to go into the mainpage for the pattern.

Great work!

openartist commented 8 months ago

What do you think about getting an infinite scroll?

https://www.pexels.com/

fcoveram commented 8 months ago

To @ryelle's points

One thing to note with the categories as nav links instead of a filters: we won't be able to combine categories (ex, show patterns in "About" and "Call to Action"), and clicking a link will reset the filters. Does that work? Will these links only be like this on the homepage?

Yes. And just on the homepage, as it works now.

Search results: Is this specifically about search results, or all archive pages? Did you remove the categories & curation filter on purpose? (note that I don't think we can do the category-nav on search results, but we can do the category filter dropdown).

The design is based on the current way of displaying results, plus the sort action if that is possible. The ideal scenario is showing the search result and archive pages with the same design.

I understand the difference of these two pages from what I see in Showcase (ie: Archive, Search results), but if I'm missing other cases please include them to provide a more accurate response.

On the call I suggested having a fixed height for mobile (maybe tablet), and let the "wide" size use the dynamic height of the pattern. With the buttons above the pattern, the page won't "jump" as badly. What do you think about that?

That sounds good. We can try it. It just worries me having large patterns where scrolling down is needed to see the whole element.

Regarding sizes, I like your suggestions. Let's go with that.

On the single pattern details page, where should the owned pattern actions go?

Oh I missed this. I will add it and go back here to notify the change.

To @openartist's points

I'd perhaps consider is adding search/filter terms that get bubbled. I also wonder if having the filter options on the left would be a better UX solution ala themeforest.

We have been trying to consolidate a single pattern for all different ways of searching and browsing. The initiative is challenging and might need adaptations in specific areas. Because of that, the most reusable layout we landed on was a row that's easy to place between content areas.

I like the idea of seeing the breakpoints, but maybe use typical terms? Desktop, Tablet, Mobile?

I like the device-agnostic approach. It helps preventing that the small view is not just for mobile. Ultimately, patterns are groups of blocks placed on a page.

I'd also add a "copy pattern" button on the main directory view, not needing to go into the mainpage for the pattern.

This is definitely a "must" feature. For now, this proposal addresses a style revamp aiming for consistency across sections. But I have this feature in the radar as part of incremental improvements.

ryelle commented 8 months ago

The ideal scenario is showing the search result and archive pages with the same design.

Totally, I agree. So the only place you can select a category & curation is on the homepage? Not on the All patterns (archive), specific category archive, or search results?

Regarding the detail view header, I didn't notice this earlier but the buttons reorganize between desktop and mobile, so the tab order will not be consistent on one view. The viewport control buttons are before the favorite-copy buttons on desktop, but after them on mobile.

In fact, we probably can't do the desktop version, because the viewport controls are part of the preview, so this is all one unit:

openartist commented 8 months ago

@fcoveram What about the infinite scroll? :)

openartist commented 8 months ago

@fcoveram Also, what about making this whole area sticky with a large search field? :)

StevenDufresne commented 8 months ago

@fcoveram Also, what about making this whole area sticky with a large search field? :)

Letting data be our guide (since these changes are not dramatically different from the current site), users don't appear to be searching for patterns since they represent a very small portion of pageviews/users.

In the last 90 days, less than 3% of users have searched in the search bar (most search for "pricing").

Using page views as our guide, this is what users are doing by frequency:

Click through to page 2 of the "all" section
Click one of the following: gallery, header, query, call-to-action, banner, featured, text, wireframe (ordered by # of views)
... data becomes more evenly distributed

That would suggest to me that having a sticky menu that promotes a search-driven experience is secondary to displaying intriguing patterns on load and making it easier to click into relevant categories. I don't think a sticky menu is useful. I would also reorder the headings to match pageviews since they don't seem to have logical order after "Featured" currently.

An additional fact is that the author (https://wordpress.org/patterns/author/wordpressdotorg/) gets a significant amount of traffic which suggests to me that users don't know about the "curated" selection that is defaulted and are trying to figure out why the "Featured" category only has 4 patterns (and other categories are very limited as well) when they view it. We should be ordering by curated but not filtering by. I'll open a separate ticket.

openartist commented 8 months ago

@StevenDufresne Do you mind sharing more analytics for usage? How many have accessed this directory? Usage, attrition rates and behavior can be directly related problems with the UX itself.

fcoveram commented 8 months ago

Replying to @ryelle

Totally, I agree. So the only place you can select a category & curation is on the homepage? Not on the All patterns (archive), specific category archive, or search results?

The mockup only addresses the search results page.

My understanding about the improvement scope was about addressing the style and not touching current features. If there is room for making them more clear through nav simplification and page consistency, that's even better. I will include new mockups for this.

In fact, we probably can't do the desktop version, because the viewport controls are part of the preview, so this is all one unit

I understand. I will apply the change and detach the viewport views from the area.

To @openartist's points.

I understand infinity scroll has deep a11y issues. It's also not consistent with any other browsing interaction in the site. On the other hand, the sticky bar we defined in other ticket was the local nav. Two sticky bars seems unnecessary and brings other interaction challenges on mobile.

ryelle commented 8 months ago

The mockup only addresses the search results page.

The mockups currently in figma make more sense to me, I left a hopefully minor comment but otherwise looks good.

I will apply the change and detach the viewport views from the area.

This also looks good in figma 👍🏻

fcoveram commented 8 months ago

Sorry for not replying timely with the latest mockups.

I revisited with @jasmussen some decisions and added a section named Mockups 5.2 with all pages currently living in the Design page.

Our main conversation was around making the results grid more appealing by trying different ways of placing pattern images and their wrapper spacings. We didn't touch much and ended up with the same box but with more spacing and replacing the white background and grey border with grey background only.

In parallel, I was playing with the idea of keeping the label of sort button more simple and provide more context within the popover. I will create a ticket introducing the idea to discuss it and see if there's room for improvement in the future.

If the designs (5.2) look correct, I will move them to the Design page and mark the section as ready for dev.

StevenDufresne commented 8 months ago

@StevenDufresne Do you mind sharing more analytics for usage? How many have accessed this directory? Usage, attrition rates and behavior can be directly related problems with the UX itself.

I don't have that in hand and think we should take a closer look. I don't think this ticket is the context to do so. I think opening a new ticket would be best. 👍

ryelle commented 8 months ago

I've updated the homepage & archive pages with the category navigation and pattern grid alignment. If there are things to follow up on there, can you create separate issues for those problems?

For the rest of the changes here, I've created separate issues:

I'm going to close this issue, as it's getting hard to identify the remaining tasks. If I missed something please let me know!

WordPress / pattern-directory