Above the fold content is very valuable

[anthonydillon]

Describe the bug The space above the fold is extremely valuable and the default strip spacing is pushing a lot of content down.

Should we:

• simply use is-shallow above the fold?
• reduce the default space between strips?

Screenshots

[clagom]

CC @lilyvidenova ^ this was mentioned today during the Charm Hub meeting

[lilyvidenova]

This is why I'd like to prioritise building the next A/B test case where we surface more information above the fold.

[clagom]

Although it's mainly about the Suru pattern to begin with (hence it's on Vanilla), A/B tests on s.io can proceed in parallel

[spencerbygraves]

Using is-shallow is an option, but it might not always work where we have illustrations that need some space top and bottom. We also have some different Suru strips that are less tall.

If we need some other options we should work with @waynecrosby and @marcushas.

[bartaz]

I'm not sure how much it is a Vanilla issue at this point. Sure, we have different depths of strips, but suru itself is not yet in Vanilla (although it soon should be).

It seems to be a common pattern on our sites to have a big suru-hero strip on the top, so at this point it seems to be more a design decision on page level rather than something we should enforce in Vanilla, but obviously we can and should provide necessary tools.

But on the other hand, to have a contrary example, on canonical.com recent redesign we even enforce only having a hero on whole size of the screen.

Don't we worry about "the fold" there?

[spencerbygraves]

@bartaz I think you're right that it's on a case by case basis. We should have Suru options plus shallow and deep.

[anthonydillon]

The point here is that if documenting that above the fold use is-shallow does not suffix then we may need to concerned a more shallow strip or row set up. That allows for highly dense UI's. On the other hand, it is also not possible to replicate Canonicals full-height strip using Vanilla.

I am trying to reduce the custom styling and come to some design and UX consensus on this issue as it has arisen many times. For example, SSO project.

[spencerbygraves]

Now that this has come up a few times, I think we should be sensitive to it when designing. For example, we may want to use a deep strip on ubuntu.com takeovers, but a shallow strip or no strip at all on a store page. The Suru strip was recently removed from Charmhub.

I think it's better to have options, rather than saying we should only ever use is-shallow above the fold. Some guidelines on usage would be helpful.

Something more dense than shallow might be worth looking at, 1rem for example.

[bartaz]

Shallow variant for the strip is available and should work with suru strips (although it makes things look quite dense for a homepage):

The specific aspect of suru (especially big ones) is, that because of the slanted bottom backgrounds they require additional padding which pushes things farther to the bottom:

[lyubomir-popov]

I also think allowing only shallow strips above the fold comes at the expense of creating impactful welcome screens / banners.

Bold elements like the diagonals simply need the extra depth to be effective. Below a couple of examples that were often cited when we first discussed the bold diagonals in suru. I think it is obvious that shrinking either to a 300px tall banner would kill the effect.

It is a separate question whether every page requires such a treatment, so I'd also vote to choose between suru strips or high density, rather than trying to have both and ending up with something that is neither particularly impactful nor very dense.

[bartaz]

I guess in snapcraft case that raised this issue it doesn't really look bold or impactful. Lack of an image on the right make the whole thing look quite empty and wasted space:

[matthewpaulthomas]

I’ve often wished that Vanilla used less padding in general, for two reasons. First, more padding increases the chance of illusion of completeness, where people don’t bother scrolling further because they think they’re already at the end. (Especially when the current strip is white, and the next strip is grey, creating a “false floor”.)

Second, if people can see more of a task on screen at once, I think they’re more likely to be confident in being able to complete the task. This is because they can more easily guess how long it will take, and because they can more easily see whether they have handy all the information they’ll need to provide.

The second issue is specific to app-like pages, so I guess it boils down to having app-like pages on ubuntu.com with brochure-centric paddings. Maybe we could (as @lyubomir-popov suggests) have brochure-or-not being an author choice for individual pages. But it might be tricky on pages which are mostly brochure and partly app, or vice versa.

[anthonydillon]

I agree we have condensed app UIs and spacious brochure-style UIs but as we are creating more and more functional UIs. I would like to suggest we need something in the middle. By defining, that language it will make it easier to communicate with a shared vocabulary.

That said, we have a number of methods of tweaking the padding in Vanilla already:

• Using is-shallow strips
• Adjusting the scaling factor in Vanilla
• etc.

Therefore, this could be resolved by documentation.

[lyubomir-popov]

As @anthonydillon said we can do this easily with the tools already in vanilla.

@matthewpaulthomas Hero elements aside, would it be helpful to add a couple of examples that take the same brochure site content and tighten it up progressively? Happy to do that if you can point me to a page you find too bloated by white space.

[matthewpaulthomas]

“Hero elements aside” is changing the subject quite a bit, because the example in the original report shows a hero element and almost nothing else! ubuntu.com/ in its current state is an even more prominent example. And with the upcoming design, I predict there will be a big dropoff right here —

— even though it’s already “below the fold” — because it combines (a) lots of padding spanning the page with (b) a row of news-outlet logos and (c) a transition from white to grey. Each is a weak sign that you might be reaching the end of a page, but combined I think it will be a strong signal.

So one thing that might help is just to have smaller hero elements. However, here are three non-hero examples of lots of padding:

• In the UA plan chooser, the visual design uses much more padding than I’d imagined, and therefore has less above the fold. It’s following Vanilla quite reasonably, and partly it’s from a difference of opinion about using headings vs. labels. But partly it’s from padding throughout Vanilla, for example inside (and between) image buttons, and inside text fields.

  

• ubuntu.com/kernel/variants is not really a brochure or app page — it’s a third genre, a reference document. But it was laid out like a brochure, resulting in several single-paragraph strips with lots of space between them.

  

• Our various “Docs” front pages are much less information-dense than they could be, requiring more scrolling to find the info you want (or to compare similar topics while trying to guess which contains the info you want). For example, with a maximised browser on my three work screens (iPad, 1280×800 laptop, and 1366×768 laptop), the Vanilla docs front page shows only 12~14 of the 71 topics without scrolling! Partly this is dubious prioritisation (always showing “Get started”, regardless of your knowlege level), and partly it’s a bug (#3197), but partly it’s also excess padding between sidebar elements and between sidebar sections. (Compare the density on sketch.com/docs/ or any Microsoft Docs page.)

  

[lyubomir-popov]

@matthewpaulthomas I only said "aside for the hero" as we already have the shallower versions of the strip that can be used there, so from vanilla perspective it seems a matter of choosing which component to use rather than revising components, would you agree with this? Or do you feel the 3 flavours of strips do not provide enough choice and should be revised?

Thanks for the examples, I'll experiment and see how much I can compress the use of white space.

[spencerbygraves]

Let's try to stick to the original issue, we can create others that are related to this.

@anthonydillon and I have discussed trying an update to the Snapcraft homepage to see how we can improve and learn from it. This could then inform what we do on similar pages. We have flexibility within Vanilla, let's try to use it better before creating new options.

@cristinadresch can we find some time for this please?

[cristinadresch]

@spencerbygraves sure! do you think it would be an iteration of what was done for this? https://github.com/canonical-web-and-design/snapcraft.io/issues/2970

[spencerbygraves]

@cristinadresch yep, sounds good. Thanks 👍

[bartaz]

It doesn't seem this needs solving on Vanilla level. Pages that need to have more content above the fold should use shallow variants of strips.