Posts Tagged

web design

F-Shaped Scanning

Elizabeth Technology June 2, 2022


Web pages have many rigid requirements. Some things need to be at the top, no matter what, or the user won’t be able to find them, even if it doesn’t necessarily mesh with the vibe of the page. Others need to be at the bottom, but if the page is especially long, users may be tricked into thinking there’s no ‘bottom’ to the page – some blogging websites, for instance, allow for forever scrolling because it makes it easier for the user to just keep scrolling mindlessly.

Things like contact buttons need to be in multiple places for service sites, but may only be needed at the bottom for content sites (for legal reasons). Many service websites actually take it a step further and include a chat that automatically opens when the page loads. That, too, is subject to the concept of F-shaped scanning!

F-shaped scanning essentially says that a user is going to start at the top edge of whichever way their language reads. English readers start at the top left and move right, while in a language like Arabic, readers start at the right side and move left. Users then track titles, scrolling to keep the relevant title header or bullet point at or near the top of the page while reading. They also glance down to the next title or header, creating an F-shaped scanning pattern as they look from side to side.

The Search Bar

You may notice that Google puts its search bar left-of-center after searching. Most search websites follow this formula – it allows your eyes to continue straight down to the results. While not strictly necessary any more, when Google was just starting out, people didn’t know what to expect. You went straight to a website from an address you already knew, you didn’t have to search for it. It was alien. It had to be as user-friendly as possible to make itself viable against paper competitors like Yellow Pages.

This all makes sense, right? Yet Wikipedia puts the search bar on the right of the page, not the left. And where Google puts the search in the middle on Google’s home page, Wikipedia actually puts it near the bottom. Why?

In certain cases, familiarity and usefulness of a brand make it possible to break rules. Most everyone knows what Wikipedia is, so they’re willing to stay on-site for 2 more seconds to locate the search bar! For smaller businesses, they have an extremely short window to make their functionalities obvious. As in seconds. Sometimes not even that! If the customer has to search for the search bar, and the website isn’t an essential one, they may just up and leave!

Text Alignment

Most websites in English-speaking countries align their text to the right – meaning the text forms a flat line along the right side’s margin, and the left side is sort of deckled. Some books space the words so that both sides are flat, but that can look a little strange when there are three big words in a sentence and so the         w e b p a g e   o r   b o o k   h a s     t o     o v e r c o m p e n s a t e    to make the words fit in that format. That’s sort of a pitfall no matter which direction the language goes – if you want equal kerning, you can’t have straight lines on both sides of your text. Make the leading edge of your text straight, and it will only be off on one side.

Rarely, you’ll see the text centered in a page – this is a pretty distinctive look because it makes the sentences in the page more symmetrical, and highlights both the really long sentences and the really short ones. Commonly, you’ll see this on websites that are only one page long, and as such don’t need to gear themselves for long-term reading. is one of my favorite examples of the concept.

A factor that also needs to be considered is the margin. When you go to a professional news site like the New York Times, the margin is smaller on the left than it is on the right. This is because they’ve put their secondary links to the right of the page – you look there second (because of F-shaped scanning!) and they don’t want to distract you from the article you’re currently reading. Having a straight line next to the side you start reading from also helps you orient yourself to the paragraph. However, as you get further and further down into the article, it begins to look a little silly – there’s a large blank area on the right for no visible reason once you get past those links and ads.

The Atlantic, another news site, fixes this by making the margins equal and simply narrowing down the side-link area. Is it better? It’s more balanced, but now both sides have a chunk of white space, and while the text is not unreadably small, it is noticeably smaller than, say, Mozilla Firefox’s Pocket articles, which enlarge the font and still manage to get those related articles tabs in on the side.

Long story short: organize your website with the important stuff either right, or centered, up top!

What’s the deal with Google.amp links?

Google And Fast Loading

If a mobile site takes even a second too long to load, users navigate away. This is a well-studied phenomenon, and all companies can do is try and optimize loading so the user gets some feedback before they bounce.

Facebook created Instant Articles, an easier-to-read and easier-to-load format than the original old method of simply copying and pasting a link to your wall, which worked fine on desktop and not so well on mobile. Ads, videos, and assorted other tidbits really slow loading down on mobile devices, even on WiFi. Consumers agree via engagement: Instant Articles is great. After all, who likes autoplay videos? Google sees a fantastic channel for improving loading times, pictures how it could monetize it, and begins to assemble the Accelerated Mobile Pages project, or .amp for short, and introduces Google.Amp links. You search something on mobile, you find it, and instead of being taken directly to the site, you’re taken to a Google.Amp page that optimized the site for you.


How does it work?


How does .amp make things load faster? Well, firstly, dynamic content doesn’t show up. Everything on that .amp version of the page is as simple and easy-to-load as possible.

That means if you’ve mistagged a menu, the consumer might not be able to see it. The same goes for embedded videos and music clips. If your site is really reliant on those things being present to function, allowing .amp links is a bad move!

Secondly, the website is stripped down to its bare bones: website creators are given a small selection of tags to build out their website, which usually results in something plain, but quick-loading. If the website is really, really insistent on keeping all of its content, .amp links are unfortunately unable to help. .Amps are a trade-off!


And Results


It makes some websites downright ugly. People using .amp links have very limited tags in their toolbox, so the end websites almost always look really similar. Sometimes that’s a good thing, sometimes it’s bad. After all, if you, as a business owner, spent however many hours going back and forth with a designer (or designing a site yourself) only to have to cut most of it when signing up for those .amp links, you might be a little mad, right? Menus, color options, images – if all of it goes missing, it may as well be written in plaintext. One critic complains that this makes it easier for fake news and disinformation to squeak into the regular news stream, because when all pages look the same, all pages receive the same quality assessment from readers who don’t know better, whether they deserve it or not.

.Amp links can negatively impact search ratings and valuable data for the client website, as well. People see the page via Google, not the host’s website. As a result, the brand gets out there and impressions improve, but the website itself can’t track that data as effectively. If you’re trying to navigate the complicated world of SEO optimization, then that’s a major issue.

It also has the potential to limit ad revenue. If the ad takes too long to load, it takes to long to load, and the end user never actually sees the ad. Most Google ads function by clicks – that means that customers clicking or tapping the ad is the only way the website gets money from them. As a result, unloaded ads = lost potential revenue.


Good Results?


However, the ability to load the website so quickly is often worth it to small business owners. Customers are impatient and often expect instant feedback – with Google.amp links, they can provide that instant feedback, usually for cheaper than other speed-up options, like redesigning the site or removing certain content features.

Besides, many users actually like the lack of ads. The mobile web is riddled with annoying popups and other assorted garbage that makes sketchy websites even more annoying to navigate. Of course customers are going to pick a .amp if it means not having to struggle with jerky, autoloading videos and annoying, jumpy ads. Not to mention that .amp links take away windows for viruses!


Google and… Data


It’s not a secret anymore. Google is always gathering data. It knows what device you’re using, it has some understanding of who you are as a person, and it’s using it to build ads that people like you are more likely to click on.

Google primarily started the .amp project as a way to compete with other data hogs like Facebook and Messenger. Why? Data, valuable data. You clicked on X? We’ll show you more articles about X! You clicked on a fashion article? Why, we just so happen to have ads from Calvin Klein’s newest collection.

Now, sometimes this is good – many people find new and interesting things via algorithms. Sometimes this is bad for the consumer, where they get ad after ad about dog food despite not having a dog because they clicked an article about dogs, and sometimes it’s bad for society at large, where conspiracy theorists get more and more misinformation funneled to them via the algorithm. Nothing tells Google to stop. Once you start on a path, it takes some serious effort to get algorithmically plugged content away from your feeds.

.amp links are obviously not the only things tracking you. Anything with Google anywhere is tracking you. Adsense is tracking you. But .amp links are part of the problem, and Google is getting your info before it’s getting filtered down to the actual website’s owner.


Turn It Off!


While turning off customized ads won’t stop the data collection, it will mean you’re less likely to see oddly specific, creepily accurate ads when you’re just trying to browse. As for the .amp links, turn that off too. .AMP links are giving a lot of power to Google, and some of the information you accumulate during normal browsing may very well be sucked up by Google.

Look here: and here to control how you’re seeing ads.