I was reading this handy answer about Light on dark vs. dark on light: which is better for attention span? in the Graphic Design SE site and while reading the most voted answer I discovered that my attention focus point was almost a 100% just in the top first paragraph on my screen:

enter image description here

I decided to make some tests on how this can apply to a user experiencing reading in a site with text driven content.

I asked the following question:

How can I control this 100% of user attention on a certain piece of text?

So I created opacity masks of different heights to visually analyse this hypothesis:

70% opacity mask height:

enter image description here

50% opacity mask height:

enter image description here

However I discovered that I experience a different 100% attention area when the text size is bigger:

enter image description here

So, the question is, should I use this opacity masks in my blog or site to control in a certain the user's attention throughout the reading rhythm?


I think that as with large or complex forms which are tedious to complete, maybe, a user will finish a large reading if he/she gets small chunks of information instead of showing the user what's next and discover that there's a lot left to read...

  • I'm a fast reader, and I get very frustrated and emotionally wound up by the few cases where the system prevents me from reading at my pace by sloooooowwwllly revealing the remaining text.
    – Peteris
    Jul 1, 2014 at 18:07
  • So as a user, do you prefer to control your rhythm by scrolling or by scanning with your eyes and later scrolling the current content up to a certain portion on the screen? @Peteris
    – Gus
    Jul 1, 2014 at 18:43
  • with eyes; at least I can't really read during scrolling, so it's an interruption and I scroll when I need to - when the next paragraph is [partly] out of screen.
    – Peteris
    Jul 1, 2014 at 19:01
  • Surely a better strategy (from a content or IA point of view) would be to break the block of text into smaller chunks and highlight sections that will allow the user to skip or search for content they are interested in, rather than controlling where you want them to look...
    – Michael Lai
    Jul 2, 2014 at 0:43
  • Thanks for your useful insights. I discovered that this content highlighting is used by SE, however it is not for large blocks of text. The problem I identified is that I kind of feel frustrated when I aknowledge that there is a lot of content yet to read.
    – Gus
    Jul 2, 2014 at 15:29

3 Answers 3


The good part is you are trying to improve usability of long texts and use experements.

The bad part contains some items:

  1. Breaking reading experience
    Indeed users' reading experience is formed (for years) from different media: paper, digital, etc., which don't use any artificial boundaries. Instead they have natural boundaries, like page size and viewport. So your method doesn't support reading experience, but provides the other one.
  2. Breaking users' habbits
    It's known fact, users don't read in a sequental way. Instead they scan and seek over text. Your method is good for rational sequental devices, like robots, not for humans.
  3. Taking control out of user
    People freely use knives and guns and other dungerous things. And this is just a text. Why people should be forced and restricted on working with text?
  4. Technical side
    Consider a lot of different devices and interaction modes and other tech factors.

So, I'd recommend not to use the mask for general reading experience. Probably, it's more siutable for some special cases, like learning or translation tasks.

  • I'm interested in this learning part you mentioned. I'm a teacher and sometimes, when I handle large readings to my students, I wonder if this sensation of never ending reading generates the students leaving the reading. Any ideas on how to make them read? FYI, they read on their laptops.
    – Gus
    Jul 2, 2014 at 15:32
  • 1
    @Gus hi from former teacher (12+ years). From my teaching experience studens hate to read. To provide better learning experience I'd recommend to pay attention to Instructional Design field. The correct case of your method in learning process is presenting some isolated step (e.g. task, test, etc.), when you isolate needed fragment from other content. Another example is presenting some steps within learning material. In this way you provide mandatory/sequence. Jul 3, 2014 at 11:09
  • thanks for the awesome feedback. I think that you'd like this other answer I found in the Academia SE:
    – Gus
    Jul 3, 2014 at 14:31


For starters, the portion of the screen you focus on may not be the same portion anyone else focuses on. I am just one data point, but I generally focus on the bottom 1/3 of the browser window and this opacity mask would be annoying, and take a lot to get used to. You'd have to have eye-tracking software to put the focus on where the user actually wants to read.

What this actually accomplishes is reducing the usable height of the browser window, which is mostly going to be a hinderance to users.

Also, what happens when the user gets to the end of the content? Does the opacity go away at the end so you can actually read the stuff at the bottom?

Now, you aren't wrong about user attention being drawn to this area of the page, but it's probably better served as a way to highlight content briefly, like focusing on an error message.

  • The point about getting to the bottom of the page is something I didn't think about and you are right. I also considered an eye tracking software to test this. What do you think determines the portion of the screen that the reader sees?
    – Gus
    Jul 1, 2014 at 18:41
  • What the user sees and what they focus on are two different things. They see the entire screen (and may even "see" portions scrolled past in their memory), but they only focus on a small part. Seeing comes before focusing. A user sees banner ads enough to recognize what they are and knows not to focus on them. If you really need to pull focus, this method could be a reasonable alternative to a pop-up dialog or something. But don't lead with it at the expense of seeing. Jul 1, 2014 at 20:52

Your question could be broken in two:

  • do we always want to drive reader's attention when reading a text?;
  • are opacity masks the best way to achieve it?

When it comes to instruction content - e.g. manuals, on-boarding tutorials, textbooks, etc, driving the user attention may be important. In all other cases Alexey Kolchenko's answer makes sense.

If we need to drive the reader's attention and given that we have taken care of all needed to limit distractions, then the opacity mask approach seems worth testing. It seems to me like an extension to the approach of using a "read more" show/ hide button or dividing the text into sections with subtitles and show/ hide-s to show the content of each section.

Opacity masks could be applied not only to the text but also to all surrounding content - navigation menus, toolboxes, etc. It seems to be a way to bring visual hierarchy on the page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.