Site requires much more scrolling when in element packages

[lukeschaefer]

I came to this site due to redirects from the Polymer Elements Catalog, and find it a lot less enjoyable to use. After thinking about it a while, it's due mostly to the amount of wasted space in the site. For example, compare these screenshots of the element catalog and webcomponents.org. For the same package, the Polymer site shows 15 elements, while the webcomponents.org site shows 4, and you have to scroll to see the rest.

This is due mostly to a bunch of wasted space above, having to do with the collections that are inside this collection. Meanwhile, what collection this is in is put in the sidebar to the right - which I think is a very confusing design. Breadcrumbs might be better, since it seems like these collections can be nested arbitrarily. Or if it's a many to many relationship of collections to children and parents, then at least put both concepts of in collection and contains these collections in the sidebar so they're logically related and give more space to the content.

There's some smaller points too, like each element's row in the screenshot has a logo on it, but does it need to? These are all components of the same collection which are all polymer elements. I see the same logo 8 times in the one page already. At least get rid of the giant one on the top right, and put it inline with the collection metadata.

Here's a really poorly thrown together mock of a quick way to make better space of the screen.

[samuelli]

Thanks for the feedback @lukeschaefer!

Some info:

• its many parents & many children.
• the elements have the logos of the author, which can ideally extend to beyond just the PolymerElements author. Uses the same thing as search. The big one of the right is the author of the collection.

I've been working on the element page density, what do you think of taking some of that style to the collection page here?

• Move nav to left
• Dense author info (the current big logo shrinks down)
• Navigation (children & parents) moved into left sidebar

[lukeschaefer]

Hey Sam! Thanks for the quick response.

1. Since it's many parents & many children, that definitely makes things a little trickier from a design point of view, I totally understand how that's hard to untangle.

2. Ahh so collections can have elements not made by the author of the collection? Fair enough then

3. Definitely like the improvements to the element page, particularly with moving the sidebar to the left - I think that will carry over well into the other pages, but I didn't want to be a stickler about that!

4. Not sure what you mean about the big logo shrinking down though.

Now that I'm home I had time to make a little closer example of what I mean - and in making it, realized another big thing is contrast. I super simply just adjusted the contrast in photoshop in my mockup - but I think having slightly darker borders/text is nice.

Another thing is that stronger and more consistent color choices might give visual clues to what something is without having to rely solely on page hierarchy. For example here there are three collection-cards visible on the page, each with a different color border (indigo, green, blue). Having them all be the same color would make it more obvious that they're all the same concept. Author cards could be blue, collection cards could be green, elements black - or whatever.

[samuelli]

Yep, that mockup is similar-ish to what I'm thinking.

One point though, is that there was an aim for consistency throughout the site. Collections are always cards with a set color. This is used throughout, including search results. Elements are only ever cards on the featured home page section, but otherwise always in uniform lists. I'm hesitant to make them look more similar as I think that's an important distinction to maintain.

Colors could work, at the moment, the color is always the same for the same collection, intended to aid visual recall if you use a particular collection a lot.

[lukeschaefer]

Ah I see, I didn't catch that they had consistent colors. Maybe then on the element page the color could be found there to make that connection more apparent?

I also think the header could be improved a bit. Right now there's two layers of headers, which I'm not a huge fan of if it can be replaced by one. I actually didn't realize until just now that the text to the right of the search bar is search suggestions or popular searches. It's easy to kind of glance over and filter it out as just 'navigation stuff' but maybe that's just me. I wonder if there is a way to incorporate them into the search box as suggestions, that pop up once you click on the box. Then move the search box into the upper header.

Here's what I mean by the one-line-header.

And when you focus on the searchbar you get the suggestions, giving more context to what they are. I also compressed the results a little bit.

[samuelli]

Hmm, I think it'll be best to back burner the one-line-header idea for now since I don't think its a particularly bad problem as both headers disappear and only one re-appears on scroll up.

Do you think you'd be interesting in sending some PRs for this @lukeschaefer?

[lukeschaefer]

I'd be definitely interested if I get the bandwidth for it (fellow Googler here, btw)