Embracing Your Portfolio Visitor’s Scroll Behaviour

Portfolio Principles: Week 04. First appeared in my mail list.

This episode is part of a series called Portfolio Principles. In this series, I help people to build a more effective portfolio. Get weekly portfolio building tips.
All opinions my own.

You imagine your visitors to move slowly on your portfolio. You imagine them to read every line. Look at every image. Watch every video.

This is an illusion.

People are extremely busy and have an extremely short attention span. My portfolio statistics speak for themselves. The average visitor stays just 2 minutes on my portfolio.

So in reality, your visitors don’t move slowly. Your visitors move extremely fast. In the mid-nineties, people weren’t really used to scroll. It was encouraged to put important content above the fold. However, today there is no fold. Scrolling behaviour is absolutely natural. In fact, your portfolio visitors hardly ever release their scroll wheel.

So if your visitors don’t behave as you want them, you can do two things. You can either be stubborn and force them to slow down. As a result, they won’t even look at half of the content on your portfolio. Or you embrace this as a given. See it as an opportunity. Optimize your portfolio according to their scrolling behavior.

Is your portfolio scroll friendly?

Here are six tips to improve the scroll ability of your portfolio.

1. Think about Visual Hierarchy

Visual hierarchy relates to arranging your elements in such a manner that implies importance. In short, it is about the order in which your elements catch the visitor’s attention.

There are numerous ways you can influence the order in which your visitors see your content. You can make important elements bigger. You can put words in bold. You could even boost the saturation of your image. To catch all these methods into one sentence, we can say that objects with the highest visual contrast will be noticed first.

It is crucial to consider your visual hierarchy, because a scrolling visitor will only notice the elements with the highest visual contrast.

Visual contrast is precious because it is limited. What I mean by this? Think of a room full of people, but nobody is speaking. The first person to start speaking will have the most impact. Everybody will hear him. If another person wants to be heard he needs to speak a bit louder. The next person might have to start screaming. At some point, a level is reached when nobody can actually be heard anymore.

What if you would translate this example to your portfolio? Imagine you want to make an impact with a certain element of your portfolio. Let’s say you definitely want people to see your concept video. You shouldn’t just make your video very large, but also make sure that all other elements scream for less attention.

One trick to judge your visual hierarchy is by squinting your eyes. Elements with a high visual contrast will be visible best. Try it for yourself.

2. The images should tell your entire story

Images inherently have a higher visual contrast than text. That’s why a scrolling visitor will notice them first.

The beauty of images is that they can capture an incredible story. One image can say more than a thousand words.

That’s why I argue that your projects should be understandable just by looking at the images. In order to improve the effectiveness of your images, it helps to show the context. For example, if you would try to explain an app design you did for a restaurant, don’t just show the app as a screenshot. Show the app, on the phone, in the restaurant, being used by a customer.

3. Use video with consideration

Playing a video requires a scroller to stop. Click a button. And wait.

So although videos are great to communicate complex concepts they aren’t scroll friendly.

If you still decide to include a video, keep it as short as you can. Just ask yourself: “If a visitor spends two minutes on my portfolio, how much do want the video to take up his visit?”

Also, treat your thumbnails as images. This means deciding an effective thumbnail that actually also shows context. This way people can experience some of the advantages of images, but still decide to stop scrolling and watch the video.

4. Use GIFS instead of videos

I know that long GIFS can easily take up tens of megabytes. You don’t want this, do you? It slows down your entire portfolio. Honestly, this is what I love about GIFS. It forces you to keep them really short. You have to communicate your message in a few seconds. A scroller can just glance at them, and get your point.

Another great thing about GIFS is that they autoplay. That’s why it does not require an interaction to play. Do you know what makes a scroller happy? Exactly! Not having to release his finger from the scrolling wheel. Happy scrolling!

5. Make text scannable

A scrolling visitor does not read, he just scans. If you embrace this behaviour you can ensure your visitors still understands the main message of your text.

Here is a bulleted list of tips to make your text better scannable. Why a bulleted list? Because it helps you to scan!

• highlight keywords
• use meaningful sub-headings
• keep your text short
• keep your text focused on your core message
• use bulleted lists

Remember that your images should tell the entire story? Text can be used to go into more depth. Write text to support your images, not the other way around.

6. Never scroll jack, seriously

Scroll jacking is method in which the user’s scroll behaviour is manipulated. I have seen this being implemented in various ways. For example, Apple is using it on your Mac Pro page. Have you tried visiting that page in under two minutes? You simply cannot. Do you feel like you are in control? No you don’t.

That’s why I urge you to stop scroll jacking. Don’t even consider it.

Is your portfolio scroll friendly? Try it for yourself. Happy scrolling!

This episode is part of a series called Portfolio Principles. In this series, I help people to build a more effective portfolio. Get weekly portfolio building tips.

If you enjoyed reading this article, I would appreciate it if you hit the “Recommend” button.