Design
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. IsMercuryInRetrograde.com 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!
