Image Source: weforum.org
Imagine this: You’ve just finished your blog, and you want to post it online. Great! So you post it, but then a thought occurs. How do I know what the readers are paying attention to? Are they getting the best information from my posting? If I post this online, does that mean that someone is actually going to understand what I am trying to explain?
These are all great questions, and apart of Eye Tracking. So with that said, the question arises. What is Eye Tracking, and how can it help me with my blog post? Well, that’s what I aim to answer today! If you’ll join me, I’ll go ahead and start answering some questions!
Eye Tracking: What is it?
Eye Tracking is a usability test that tells the creator exactly what people are looking at when they come to the website or blog. It does exactly what it says on the tin, it tracks the eye.
Eye tracking is sometimes perceived as a silver bullet – the ultimate technology with which to diagnose user interface issues.
usabilitygeek.com
While eye tracking does test to see what the eye does with movement, it also tests more than that. Firstly, it tests for fixation, or what an eye would stop on. For example, the bolded word in the last sentence. The bold in that word draws the attention from the rest of the page, and helps to stop the reader from skimming past it. The other important thing that eye tracking test for is what is called a saccade. For another example, if you paused to look at the bolded word fixation, and then kept reading, just to pause again at the word saccade, you’ve successfully demonstrated exactly what a saccade is! A saccade is a movement between fixation points.
Image Source: usability.gov
The image above is a image that comes specifically from eye tracking tests. The areas in green are areas that happen to be viewed less heavily, followed by yellow areas, which get a bit more attention, followed by red, which get the most attention.
Not only can eye tracking be interesting to see the results of, it also helps your website! Eye tracking shows exactly what your audience’s eyes focus on when they come to your site. Taking the information that you receive from an eye tracking test and then incorporating that into your website can help to foster traffic, and help your website or blog to grow!
That said, there’s more to say about eye tracking. You might find yourself saying “Wow, eye tracking seems to be really useful. But I don’t have the money or time to run a huge experiment for my website.” Well, worry not!
How Big of a Test does Eye Tracking Require?
Something that might not seem particularly obvious when deciding to run an eye tracking test is just how many people make for a good test group size. If you go with a large group full of different people of different backgrounds and cultures, you might have a heavy amount of results, but the time and cost would make no sense for a smaller website that’s just trying to get off of the ground. That said, if you go too small, you might not get any information at all.
The most striking truth of the curve is that zero users give zero insights.
https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
The takeaway of this quote is that there is definitely a number that gives you less than ideal insight. That said, the idea of a number being above zero doesn’t narrow it down by a lot, so what gives?
Image Source: nngroup.com
This graph is from a test done specifically to find the right size for a usability test, which includes eye tracking. What they found helps to get a better idea of how many people are needed to find issues in usability.
While working on this test, it was found that the first user that was added above zero made the number of usability problems found jump. Then by adding a second test subject, and then a third, the number of problems found continued to rise even higher. However, once they reached a certain number of people, the amount of problems that were found seemed to halt.
As you add more and more users, you learn less and less because you will keep seeing the same things again and again.
https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
After five users, the test found that the users were finding the same things time and time again, so there wasn’t a necessity to continue adding more people to the test.
So what is there to take away from all this testing about extra users? The most concise way to put it is that you don’t necessarily need a large test group in order to find a lot of the usability issues in your website. You might just end up needing five or less!
The F-Shape Pattern
The F-Shape Pattern is a pattern that website visitors often user in order to scan through the contents of a website. The pattern oftentimes takes the shape of an F, but that’s a bit of a misleading title. While the pattern can be in the shape of an F, and often does, this reading pattern can oftentimes take many different forms as well, such as an E, or the Spotted Pattern, which involves skimming through the larger chunks of text in order to find either links or a set of words that someone might be looking for.
Image Source: Chris Mole Media
So how does F-Shaped Scanning work?
Steps to F-Shaped Scanning
- The user first takes a look and reads through the upper part of the content, which creates the top line of the F.
- The user then goes and reads across a part of the content lower down on the page, creating the second line of the F.
- The user finally scans the left side of the site, creating the vertical line of the F.
This scanning pattern resembles the shape of the letter F, but it is rarely a perfect F
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
This scanning practice creates a small problem for the website or blog creators. When users participate in the F-Shaped Scanning, it creates the issue that the user might not get the important information that comes later in the post. If that is the case, then the user might not gain what they came to this blog post for.
How do I prevent F-Shaped Scanning?
Good question. There’s a few different options.
- Headings and subheadings help to draw the eyes of the users.
- Important words need to be bolded
- Remove any content that might be unnecessary.
While there are more ways to prevent F-Shaped Scanning, these are some of the easiest ways to help alleviate the effects.
Imagine this scenario: You’ve been looking through multiple websites, desperately looking for that one piece of evidence for a paper that you need to drive the thesis home, but you’ve only got 30 minutes to find it. What a jam! Not to worry though, you’ve got it narrowed down to two different websites. Let’s call them Website A and Website Ω. What a strange name… but regardless!
Website A has its information all placed in a massive block of text. There are no headings, apart from the title, and the website overall had no bolded words or anything that might draw the readers eye to it. If you’ve got only 30 minutes in order to finish this paper, you might have to pass on Website A, due to the lack of anything guiding your eye there. Either that, or you might participate in F-Shaped Scanning in order to find the information you’re looking for.
Website Ω, however, has their information laid out in neat, organized headings. The words that mean a lot to your paper are all bolded, and there isn’t extra content that does no good for people that read the website. There is less incentive in this case to use F-Shaped Scanning.
This scenario is a common occurrence when F-Shaped Scanning comes into play. Now that you’ve become aware of F-shaped scanning, as well as some of the ways to prevent it outright, or maybe even just downplay some of the results of it, you’ll be able to use this in your own writing!
Final Thoughts
Overall, there’s a lot to think about when it comes to Eye Tracking. Making sure to have the correct amount of users to test the eye tracking, as well as the effects of F-Shaped scanning are important aspects of website/blog creation to consider.
Overall, I hope that these concepts help your blogs and websites when you create them!
Happy Blogging!
Alexa F
2 Oct 2023Hi Brandon! I think this post effectively encapsulates the topic as it is a blog post about how blog posts and eye tracking work. I especially thought the fixation and saccade section was the most eye-catching since I did exactly what you said I was going to do and it caught me off guard (in a good way). The format and structure of this blog flow beautifully from one section to the next. You successfully captured my attention and I feel like I learned so much just from this post. I found the topic of eye tracking especially interesting, as it is something I do not think about often when looking at blog posts and websites. I found this article about how experts are using eye-tracking to make mathematical and tactile strategies for students learning how to solve equations. I think it is interesting how formatting your content a certain way can help for better understanding and comprehension. Just by implementing better eye tracking into math problems and equations, students were able to learn quicker than normal. Here is the link if you want to check it out!
https://www.tobii.com/resource-center/customer-stories/tactile-visual-reading-strategies
Katharine R
3 Oct 2023Hi, Brandon. It was interesting to refresh my knowledge on eye tracking and learn something new, like the most efficient sample group size. I had no idea it was proven to be better with lower numbers of testers than higher numbers of testers. Perhaps that’s one of the hidden reasons why I’m told to limit my GD project sample sizes to 3-5 users? It seemed a bit silly to me that only one (or two) eye tracking pattern may exist, so I decided to see if there were others. Low and behold, I found an article describing three other types: spotted pattern, layer-cake pattern, and commitment pattern. These patterns essentially summarize the tips you provided at the end of your blog post; make text stand out visually, insert headings, and properly format your writing. I suppose if you were to write a hypothetical part two it could be a nice place to start.
Link: https://creativehandles.com/blog-posts/79/4-types-of-eye-tracking-patterns-how-people-don-t-read-on-web
Anna Z
3 Oct 2023I was vaguely aware of eye tracking and its importance to websites and posts, but your blog went into a lot of detail which I enjoyed unpacking. The ‘F shape’ scanning was definitely something I was aware of, and I liked the visuals accompanying your written information demonstrating what they looked like. I also loved the paragraph below it shows readers how to avoid the ‘F-shaped scanning.’ All your text was digestible and well formatted- it was easy to read and paired well with the graphs and visuals. I would absolutely recommend it to someone who wants to learn more about eye-tracking
Heather
4 Oct 2023Hey Brandon, I really enjoyed reading your post! You have a very engaging writing style that is pleasant to read. I liked the touch of humor you would add here and there and that you had a more conversational tone. Something else I really liked is that it seems like you used the same eye tracking tips that you talked about in your blog while writing (like bolding new words and important phrases)! I didn’t know what fixation and saccade had meant before reading your post, but I’m glad I learned. Your blog was broken down really well into chunks and your use of images were very strong. When you talked about the F-shaped pattern or eye tracking, that reminded me of what was taught in my document design class last semester. I don’t remember if we called it F-shaped, but there was the same upside down triangle idea. Your post got me curious about if there is a difference in how people view websites in different countries. We are a left-to-right reading country, but what about the places where you read right-to-left? After some research, I found an article that discussed how our F-shaped reading pattern in LtR reading countries gets mirrored for RtL reading countries. The article touches on a lot of other international usability differences, all of which were interesting to learn about.
Here is that article: https://www.nngroup.com/articles/international-usability-details-differ/
Alayna C
5 Oct 2023Hi Brandon, I really liked the flow of your blog. The conversational tone came off in an effective way that kept me engaged until the very end. Your use of headings and bolded words made it incredibly easy for me to pull out the important information. The saccade example was so cool in my opinion, it’ll make me actually remember what it is, rather than if you were to just put a simple definition. I gained so much knowledge from this post and feel as though I truly understand what eye-tracking is. Plus,, I even learned some of the steps to test it effectively.
Here is another website that gives more tips and tricks to learn how eye-tracking helps with website optimization!
Link: https://vwo.com/blog/eye-tracking-website-optimization/
Katelyn F
5 Oct 2023Hi Brandon. I thought your post was great! I thought you did a great job of kind of practicing what you preach. Your post was really eye-catching and dynamic. I thought the photos were great and really added to the content. The charts and eye-scanning results were so vital in my opinion for me to understand the material. Overall, everything you explained was so interesting and you did a wonderful job explaining it all. I read further about the different eye-tracking patterns. The thing I found most interesting about this site was the fact that it utilized what you talked about. They had a lot of headings, bold words, short paragraphs, and bullet lists. They also covered other common eye-tracking patterns, which I found fascinating! You did such a great job!
Link:https://creativehandles.com/blog-posts/79/4-types-of-eye-tracking-patterns-how-people-don-t-read-on-web
Mark L
7 Oct 2023Hey Brandon, I never knew there was so much to eye tracking, but you did a great job at explaining some of the nuances and eye tracking software can help in usability testing. It was interesting to read about “F Shaped Scanning”, and I wouldn’t have thought it would be such a problematic phenomenon. It makes sense to be aware of this issue and for website designers to create and design their websites to ensure users are getting all the information they need; it seems like the best option is to make websites as readable and clear as possible by using headings, links in areas that make sense (such as sidebars) and not bury them in large chunks of text.
Interestingly enough, I found an article by Conesso that encourages designers to utilize F-Shaped Scanning to their advantage; for example, by designing a marketing email in sort of an F-Shape, such as placing buttons and other important business/marketing information along that path, the eye can almost be manipulated into viewing exactly what the business/marketer wants them to view. While I’m not sure of the ethical implications, I do know that while I think it’s important to avoid creating websites where people scan ineffectively, there are also instances where taking advantage of the brain’s natural scanning pattern can be effective as well.
Link: https://www.conesso.io/blog/f-shaped-reading-pattern
Caleb I
10 Oct 2023Hey Brandon, right off the bat, I feel that you did great work job presenting about eye tracking within this post. The different ways you describe the foundations of eye tracking within the sections in the beginning is quite helpful for newer users. I think the visuals also provide great visual clarity for the audience with the images you chose to use. Think your references and quotes are nicely utilized as they complement your main points in a creative way. I feel that your information is formally presented and easy to read. I like this because it helps your post reach a larger academic audience. The visual representations such as the “F-shape” pattern are good references for learners in this subject. After researching further, I found an article from psychcentral.com surrounding the notion of identifying individuals with schizophrenia through different variations of eye tests. The website provided themes of tracking eye motions to tell if there is irregular brain function in patients. The entire article encompasses the ways in which eye tracking is medically beneficial for people when utilized in certain ways. Overall, you did a good job on this blog post, very detailed and well done.
Article: https://psychcentral.com/schizophrenia/schizophrenia-overview#getting-help-for-yourself
Unique P
8 Dec 2023Brandon,
Your post about eye tracking really made me think about how readers actually look at things online. After reading, eye tracking seems to be a really important tool for answering questions people may have online when it comes to comprehension. I also think it’s important that you make the distinction that It’s not just about eye movement; but what really grabs people’s attention and what makes people stop scrolling. Learning that you don’t need a massive test group for eye tracking was a surprise since most tests seem unattainable without a large sample size. As a web writer, your post made me reflect on how to guide the reader’s attention when they’re viewing things online. To connect to your topic for this week, I found this article on making voice interactions user-friendly. I thought it would be a perfect way to hone in on one facet that makes online interactions more engaging.
Link: https://www.linkedin.com/advice/0/how-can-you-create-voice-assistant-content-thats-mesce#:~:text=Understand%20your%20users&text=Creating%20user%2Dfriendly%20voice%20assistant,feedback%2C%20and%20handling%20errors%20gracefully.