Cart 0
David Sparks. UX Professional, Creator, Maker, Problem Solver.

The Fold Is Dead.

This was originally posted on August 5, 2015

I want to talk about what phrases like "The Fold is Dead" and "There Is No Fold" mean, why they're being said and how it changes the way we create websites.

Our terminology changes so often, at times it can be a struggle staying up to date with new learnings. A little house cleaning can be helpful, and I'm of the opinion it's time to retire "the fold".

In my work, the term still comes up from time to time. But it's no longer a helpful way to communicate or solve the problems it was meant for.

Origins Of "The Fold"

In the beginning, the fold referenced the main crease through the middle of a newspaper. This may seem obvious, but it is important to understand where it began.

Newspaper editors designed the front page so the most important headlines were above that middle fold.

People who walked past the newsstand would be able to see the important headlines without picking up (i.e., scrolling) the paper.

Why We Adopted The Term "The Fold" To Describe Web Layout Requirements.

We were spoiled in the early days of web design. It was easy to rely on users viewing your website with an 800x600 monitor resolution.

If you were lucky your main users had 1024x768 resolutions, but you had to know your audience to design for that and it wasn't common.

Mantras are sometimes useful for following successful techniques. The one I use the most now is "You are not your users".  When it has come up in meetings, clients seem find it relatable. That doesn't mean it will be as helpful in 10 years.

Positioning important content above the fold was a golden rule.

Today it's still used as a reference point, but this type of page organization has a few flaws. Let's examine some of these issues.

Two Reasons The Fold Is Dead.

UX Myth #3 Poster by Zoltán Gócza

1. We Mistakenly Believed Users Didn't Know How To Scroll.

People Dont Scroll.jpg

The primary motivation for designing above the fold was the belief: "users didn’t scroll". They didn't know how to use the hardware (mouse and keyboard), or they didn't realize content was off screen.

If we take a look back we see something a little bit different than expected.

A study by Jared Spool done 1998 revealed users preferred scrolling instead clicking.

It seems unlikely users didn't know how to use their hardware or didn't want to. How else did they get to your site in the first place?

That leaves us with users not understanding there was content off screen.

It’s my opinion that the problem didn’t even exist in the way we think it did.

It was a misunderstanding of what users were trying to do on the website mixed with unhelpful content. Perhaps if we weren't so worried about putting everything important above the fold, users would have learned to scroll more often.

2. There Is No Stationary Point To Aim At Anymore.

Fast forward to 2015, mobile is quickly taking over everything. There's no reason to think this trend will not continue.

Thanks to the iPhone, scrolling is now the second or third most important user behavior after the tap. With swipe completing the trio.

Android Screen Size Fragmentation

Android Screen Size Fragmentation

The iPhone also dealt the final blow to the fold by leading the way for an unimaginable amount of new screen sizes.

There are so many new resolutions, anticipating where the fold will be on a given device is impossible. There will be more sizes in the future. The image shown above is just Android device fragmentation.

The 2 conditions that caused our adoption of the term the fold no longer apply and one may have been incorrect from the start.

What Can We Learn From The Fold?

All along the fold was a tool intended as a guide for effective content hierarchy.

It taught us that the most important and relevant content needed to have the lion share of focus. However, there are many ways to guide attention to certain areas of a page.

We have also improved our understanding of user psychology.

Following the old rules becomes more complicated when trying to build trust and confidence in a user base.

Positioning a newsletter sign up field at the top of a page before gaining their trust can have a negative impact on conversion rates.

It's the difference between a hard sell and a soft sell. But today's customer is faceless and can leave before you knew they had visited. A few short years ago people didn't shop online much and many were scared to. In the end, we all prefer being treated like a person, and for that the soft sell works better.

It's less important that a page element has certain X/Y coordinates than it is having the page cater to the primary function (i.e., business goal). Sometimes that means the primary action works better bellow the fold. It can seem counter-intuitive at times.

Since it is counter-intuitive a page design catering to the primary action is more effective. Sometimes, many times, it means the primary action is above the fold. But that's not because of the fold itself. It's because the user task, user expectation and business goal were all aligned.

In other words: meaningful placement > immediate/high visibility.

User needs should direct the page architecture, and content hierarchy should enable user discovery.

Information Architecture > The Fold

What we've learned since the early days of web design is: thoughtful information architecture (IA) and clear page hierarchy, works better than the fold did.

Where to place elements on a page is part of an IA/UX process. In those processes, the goal is not to put certain items in specific places. It's to lay everything out in a meaningful way.

Term Replacements

While the strategy of the fold no longer works, there are situations where you need to communicate with others that an element being in the immediate view for the user is a core requirement.

The need for describing this is why the terminology has hung around.

With that in mind, the only way to actually retire the term is to establish a new descriptor.

Some options that I think may work:

  • Onload View

  • Default Screen

  • Window Home

Certainly not as catchy, but the idea is to describe the on load position of the device window. The "start view" of a web page.

This is just a starting point though and a discussion on a new term would be helpful.

Summary Of Why The Fold Is Dead:

  • New devices have made predicting where a user will experience the fold impossible.

  • Users knew how to scroll all along when the content was helpful.

  • We have better tools to decide content structure (e.g., user needs, usability, information architecture, journey mapping etc…).

To Close I’ll Pose A Question For Discussion.

“Less content above the fold may encourage more exploration below the fold”

— Joe Leech

What if our concern to keep important page content above the fold is what caused users to not scroll?

It’s my opinion that designing for the fold was the root of the problem to begin with.

Users didn’t have to scroll, all the important content was above the fold. User behavior developed over time and we all noticed nothing of value was ever placed lower on the page. So we stopped looking. Mobile screens are so small designers have had to accept that important page elements and content will be off screen and the world didn't end. People still consume the content, if it's any good.

It’s safe to retire this term and finally lay the newspaper flat on the table, unfolded.

Food For Thought:

Blog-Post-Banner---Bike-Nerds-Podcast.jpg

Work: Identity For The Bike Nerds Podcast

This was originally posted in August 23, 2016

About a year ago my friends Kyle Wagenschutz and Sarah Studdard told me about a new side project they were working on and asked if I'd like to create the logo. Excited to hear about what their project was, I jumped at the chance and I'm really happy with how everything turned out.

The side project is The Bike Nerds podcast on the OAM Network. It's full of big ideas, community love, star wars, bikes and other great things. 

The podcast is trucking along at full speed with 24 episodes ready for your listening pleasure at the time of this typing. This seemed like the perfect time to share.

Getting Started

Step 1: As with most designs, I started with a sketch. None of which made it to the final version, but it's always good to start visualizing letters and word groupings that way. 

Step 2: Next on the list was to gather content for inspiration. I started doing some color research, looking at how other people had illustrated bikes before, and trying to get my head around what the logo needed to communicate. 

Step 3: Mockups are the most fun part of the process. My process was to crank out a bunch of versions with small tweaks as I went along. This preserves early ideas and helps keep you from losing progress or going down a road that sucks with no way to turn back. 

The Main Concept

After sketching and trying a few things it seemed obvious that a brain and bike belonged together. I wanted to make the brain look like it accidentally looks like a bike, not that a bike outline was just shoved in there. My favorite little part of that is a throwback to the old banana seats a lot of bikes had when I was really young. 

Brain Stem, Bike Wheel, And Headphones.

I wanted to add some sort of brain stem and noticed that the bike wheel sat perfectly over that area. It also sat where the ear is more or less. Once the wheel opened up, I thought it looked just like a pair of headphones. 

I realized that the headphone chord could turn into the silhouette outline of the person and that tied everything together. I couldn't have planned all the happy accidents in this logo, they all just sort of appeared during the process.

Type And Colors

Once I was satisfied with the core mark, all that was left was color and type which didn't take too long. 

secondary logo.jpg

That's A Wrap

I want to say a big thank you to Kyle and Sarah for asking me to work on this project, for everything they've both done for Memphis, and a huge congrats on the successful launch of their podcast. 

I encourage everybody to take a listen as soon as possible. 

Bike Nerds Links:

NighttimeDesign-Logo4.png

A Case For "Nighttime" App Design

This post was originally made on July 27, 2015

While using my iPad in bed one evening, the white backlit screen blasting my retinas with melatonin disrupting blue light, I had the thought:

"Apps should know what time of the day it is, and how much ambient light is around me, then adjust their design to my environment."

We know people use their phones and tablets in the bed all the time. We also know it causes sleep problems.

@DigitalSkraps you should start to do unsolicited night time app designs.

— John Lloyd (@j_lloyd) July 23, 2015

Why not take this into account in our designs?

This idea resulted in a tweet and my friend John Lloydsuggested I mock up some examples.

So here we are.

Let's Start With Google

First up is the Google app. It's probably my most frequently used app so it seemed like a good place to start. It's also the app that inspired the tweet above.

Google iPad app home screen

It's minimal design uses a large amount of white space, and that space is very white.

Right in my eyeballs at 10:00pm with one lamp on.

When my eyes would start to sting I kept thinking about the eco-friendly version of google, "Blackle", which had a black background.

The thinking was, it took more power to render the color white than it did black on a digital screen, therefore using the bootleg version of Google with a dark design would save the planet.

But we can start with saving some eyeballs.

Google iPad app home screen - "Nighttime" concept

An app that knew the time of day could automatically switch to a darker design that was easier to use in low-light environments.

Ambient light data + time of day would = the perfect combination.

but I don't want to ask for too much.

Mock-Ups

Here is an iPad screenshot of the home screen as it currently exists.

Referencing Google's material design color library I tweaked some of the colors to be much darker.

Google iPad app results screen

I recognize this is off brand for what Google has done in the past so they probably wouldn't execute the design in the same way, but it makes a good example of what "nighttime design" might look like.

Here is a mock-up of the same home screen using a darker color palette.

This simple change would decrease the harshness of the white light once the sun was down.

I'm not sure if this approach reduces the amount of blue light from a technical standpoint, but it is at the very least less intense on your eyes.

Next Is The Search Results Screen.

Google iPad app results screen - "Nighttime" concept

This one is a little more complicated since there are text contrast needs, but a few small adjustments can have a big impact on how harsh the light is.

Again I changed the colors based on the material design library to keep it as on brand as possible.

The only goal here was to change colors, not design or strategy.

It's Not Fool Proof.

I can imagine situations where the user would not want the night design and prefer to use the traditional color scheme. There would be a need for the ability to turn this functionality off in the settings section.

Aside from that use case I think using a color palate more suited for night would be more comfortable on the end user, if not potentially a little bit healthier.

Appended:

My friend JD Graffam shared this mac app that can make changes to your screen in a similar manner. Flux »

 
 

It all started when…

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Phasellus sodales massa malesuada tellus fringilla, nec bibendum tellus blandit. Sed a ligula quis sapien lacinia egestas. Mauris egestas at nibh nec finibus. Fusce at massa nec sapien auctor gravida in in tellus.

Nulla lectus ante, consequat et ex eget, feugiat tincidunt metus. Sed a ligula quis sapien lacinia egestas. Aenean eu justo sed elit dignissim aliquam. Phasellus sodales massa malesuada tellus fringilla, nec bibendum tellus blandit. Aenean eu justo sed elit dignissim aliquam. Vivamus sit amet semper lacus, in mollis libero. In sit amet felis malesuada, feugiat purus eget, varius mi.

 
NTD-Instagram-Post-Banner.jpg

Nighttime App Design - Instagram

This article was originally posted on August 20, 2015.

In a previous post, I made a case that nighttime app design should be a common practice.

The Premise

your phone knows what time it is and how much ambient light there is. Apps should adjust certain aspects of the design based on this available data.

The Purpose

An improved viewing experience with a hope that maybe it could be more healthy for everyone as well.

Instagram Nighttime App Design

The next app on my list is Instagram.

I chose darker shades of blue to stay in the same ballpark brand wise.

To reiterate, the main goal was to cut down on the harsh white light where possible and make the color tones less intense.

Day & Night Comparison

It may be worth noting that the concept design aspect of my Nighttime Design posts are a little different than other concept designs. The reason being, I'm not proposing new use cases, new features or a new User Interface ideas. These mockups explore different color options that will lower the overall screen brightness.

The changes are minimal, but that's been my intent. To make nighttime use more pleasant, nothing else. Thanks for reading!

Side-by-Side-HSO.jpg