Tag: Usability

Live website reviews: lessons learned

Michiel Heijmans

Live website reviews: lessons learnedJust the other day, I was at this local event where we did some live reviews for small business owners. It’s always a lot of fun to experience live reactions to some of the statements we make. People start frowning, most of the times.

In this post, I will share the things that caught my attention during the live website reviews. The things that were so obvious that made the live website review ‘customer’ facepalm the most.

What’s the purpose of your website?

It’s amazing to see how little small business owners have thought about the main purpose of their website. “My website is to inform potential customers of all the things I can do for them.” I call BS on that. We have Wikipedia for that. As a small business owner, the sole purpose of 99% of the websites is to get people to contact you or directly order your products. It has to do with some kind of online interaction that leads to a delivery of goods or services.

During a live website review, we try to tell the person across the table as much as possible, in a way that they understand what we mean. No difficult technical stuff, no to-do list for a web developer, but things they can do themselves within WordPress (most of the times). In this particular live website review, the business owner sold Cesar Therapy. Cesar Therapy is a therapy to improve posture and movement, most commonly known to help with chronic lower back pain. It’s a matter of trust, of course. The purpose of the website is to establish trust and get the visitor to contact the website owner. My advice:

  • Add a picture of yourself to the homepage. There were nice, friendly photos on other pages, but not on the homepage. This increases the feeling of being welcome, and trust.
  • Add your phone number in the header of your website. This makes it easy to contact you. People will be delighted that they don’t have to search for your contact details in the footer or on a contact page. Make it easy to contact you.
  • Add a contact form. Contact forms allow for easy contact via email without the need for an email application. Although most of us carry our email with us on our phones, I still very much like filling out a form instead of being redirected to my email app. Show your email address in a visible place as well though, for users who prefer that.

Evaluate your current pages and menu items

One of the sites we did a live website review for, had a menu item stating ‘When’. So my statement was, that this was clearly for opening hours. It was the third of eight menu items, so I knew it wouldn’t be that simple. The person across the table sighed and said: “I get what you mean.” The page was about ‘when to contact me and what I can do for you’. “When” just wasn’t the right menu item name for that. It should be something like ‘products’, ‘treatments’ or ‘services’, and preferably even more specific.

We clicked that link and found a page that had a list of all kinds of things that this company could help a customer with. It was a bullet list containing 15 items, and the customer told me that they were currently not in Google for any of these items. To rank for a keyword, you need to optimize a page for that. We have told you that before, and will keep on telling you that. All of the 15 keywords on that page were only listed on that page. I gave the customer 15 ideas for new pages that would help them rank better :)

Why you shouldn’t use large headers

One of the websites we did a live website review for, was a site for a health coach. It was clearly about food and exercise, but a huge header image with raspberries (actually a slider,) blocked all information on my 13″ MacBook. Just showing these things helps a lot. Back in the old days, when I built websites myself, I always took a step back from my desk and stared at the design I just set up. Just for a minute. It should be obvious and immediately clear what the website is about and preferably what you can do for your customer.

A large header could prevent the user from seeing all the good information that is right below it. If you insist on using a header image, be sure to set the height to a number of pixels that will allow the visitor to see the information.

How long are your reading lines?

Another thing to consider when it comes to readability is the length of your text lines. You can find a couple of studies about this online, but there doesn’t seem to be a default solution for this. It all depends on the font type used, and the size of your font.

In Readability: the Optimal Line Length, Christian Holt mentions multiple suggested text line lengths, stating these should be 50 to 65 or 75 characters. We prefer to talk about a certain number of words per line. Ilene Strizver even takes text alignment into account in her article Line Length & Column Width. She states that non-justified text should be 9 to 12 words per line, and justified text should be 12 to 15 words. From our experience, 10 to 15 words is indeed a good read. Is that exact science? No, definitely not. It’s our experience from reading and reviewing over 1,000 websites.

Now over to you

For me, the issues mentioned in this article are some of the first things that come to mind when (re)viewing a website:

  • a website should have a clear purpose;
  • the main pages and menu have to be valuable for a visitor;
  • you shouldn’t use large headers, but present the main content immediately;
  • keep your reading lines short for better on-screen reading.

These are my pet peeves. What are the things you find most annoying when visiting a website? Looking forward to your comments!

This post first appeared as Live website reviews: lessons learned on Yoast. Whoopity Doo!

Optimizing your mobile content

Michiel Heijmans

Optimizing Your Mobile ContentI don’t have to tell you that mobile traffic is taking over desktop traffic in a fast pace. Mainly because I already did. We have been talking about making sure your website is responsive and how Mobilegeddon is hurting websites. In this article, I’d like to talk about the practical side of optimizing your mobile content for devices with smaller screens, like mobile phones and e-readers.

Optimize design for smaller screens

You have to make sure that you are not just loading the desktop website on that small mobile screen. That just won’t fit and will require your readers to pinch and zoom. Make the best use possible of that mobile screen; use a responsive website. This means you’ll have to make sure that on pages that focus on content, the screen is filled with that content and nothing else. No distractions.

Optimizing mobile content

If your site’s mobile design is optimized for mobile devices, so should your mobile content be. Responsive design means you are serving the same website, the same mobile content as the content you are serving in a desktop browser. Does that change the entire ball game? No, it most certainly doesn’t. I actually don’t think you’ll need to change the way you write content. Writing content for online readers has to do with summarizing and preparing your text for scanning. Let’s go over a few common issues.

Headings

Headings have to be short and summarize the section or paragraph they are added to. Try to focus on the main subject, while trimming away all the extras. Especially for mobile content, long headings will appear aggressive. They will take up multiple text lines and push all the valuable paragraph text down. That is of course much less of an issue on your desktop site. Can we add numbers to that in terms of font size and number of lines? No, not really. It all depends on the font you have chosen for your headings, and even the color of the headings. You might want to tone your mobile content headings down a bit, if your desktop site has vibrant colors. That will already help a lot.

Introduction

Try to explain the main subject of the page or article right in the first section of your mobile content. As with desktop sites, scrolling isn’t bad at all on a mobile site. But leave it up to the visitor if he or she wants to scroll, and allow them to make that decision as soon as possible.

In the introduction of this post, I have also added some escapes (links): perhaps this post isn’t the one you were looking for, so feel free to visit some of the other articles we have written on the subject.

Prevent scrolling back

Marieke and I have been talking about reference words quite a bit over the last few weeks. I tend to refer to headings or the previous paragraph using sentences like “This means…” or “That could…” as the first sentence in a new paragraph. For the flow of reading, even more when it concerns mobile content, that isn’t what you want to do.

This means that a visitor isn’t able to scan your article. See what I did here? The first sentence of this paragraph should have been: “Don’t use reference words to refer to a word in another paragraph, as this will mean a visitor isn’t able to scan your article”. The first sentences of all your paragraphs combined, should summarize your article.

If the first sentences of your paragraphs summarize the article, your mobile visitor can easily scan the mobile content on his phone and understand your main point.

Conclusion

The final paragraph or section of your article has to contain a short summary and your main conclusion. That also means this isn’t the conclusion of this article yet, by the way. Your article has to have a head and a tail. You are managing expectations in the introduction (head) and you are sending the visitor home with your main conclusion about the subject at hand (tail).

My posts are usually about something you can do right after reading. I hope to shed some new lights on certain subjects, but most of all I try to motivate you to optimize your website with some common sense and a variety of tools I use myself. That’s usually the first paragraph of my conclusion. Besides that, I always ask for your opinion on things or ask you to go and optimize your website. I use the last paragraph of my conclusion for that.

On a mobile device, chances are you won’t get to that conclusion. A bus might arrive, or someone starts talking to you. You are distracted. That is why optimizing your mobile content, even more than for desktop content, requires you to keep all of the above in mind.

Optimize images

On a mobile phone, images usually take up most time to load. Make sure file sizes are as small as possible. Design for performance. A few years ago, we were all claiming that image size mattered less, as internet connections were getting faster. That still goes for desktop in my opinion, but you might want to reconsider this for mobile content. Matthew Young did an article on optimizing images for your mobile website, highlighting the three main issues:

  1. Use a page speed to tool to identify which images are the culprits.
  2. Compress your images.
  3. Define your image dimensions.

Drop the full article in your Evernote: The #1 Thing You Can Do to Improve Mobile UX: Image Optimization.

There is one extra step one could take to optimize these images: serve another image on your mobile website. You can do this by using the <picture>-tag and a media attribute. Or, if you are not a (front-end) developer, use the RICG Responsive Images plugin (WordPress) for that.

Actual conclusion

In this article, I tried to give you some hands-on advice on how to optimize your content for mobile readers. If you are serious about writing mobile content, there are a couple of things to consider:

  • Use a clean design that focuses on your content.
  • Optimize your text for scrolling, by using headings, adding a proper intro and optimizing the first sentences of every paragraph.
  • Write a great conclusion, but keep in mind some mobile visitors won’t read it.
  • No text without images, so optimize your images for faster loading.

I’d like to send you off with one last advice. In this article, I already mentioned that most tips apply to both desktop and mobile content. If you are serious about optimizing your (mobile) content for your visitor, please read our eBook on Content SEO. It will help you structure the way you think about your (mobile) content. And in the end, that will bring you the biggest wins!

Our Content SEO eBook is now on sale for only $15 (normally $19). So go and read it now!

This post first appeared as Optimizing your mobile content on Yoast. Whoopity Doo!

Focus on Clarity First

Michiel Heijmans

Focus on Clarity FirstWith the current trend of larger and larger header images being used on homepages, there is one thing that seems to be forgotten a lot: the purpose of a website. How often have you found yourself browsing a website, to find out only after a couple of minutes what it is the website owner wants you to do? Or what he is offering you as a product or service?

I imagine a web developer telling his unknowing customer that he needs his website to “sell an online experience”, or “set a distinguishing mood”. Sales talks like that lead to a more challenging project (for the web developer), and more hours to bill (for the developer). Plus ongoing business (for the developer) when the website doesn’t perform like expected and needs to be changed. For the customer, that means rethinking his business just for the website, more costs and probably more headaches.

In this post I will try to explain why you should always focus on clarity first, even when using larger header images.

So, what do you do?

Especially when your product isn’t clear, be sure to focus on the benefits of hiring specifically you or buying your specific product. These should of course be the benefits for the customer. Looking at for instance business consulting, I found this website in the paid Google results:

ConsultingQuest - no clarity

This is exactly what I mean. This website allows you to find the right business consultant for your specific issue. Is that clear? I don’t think so. The *cough* slider *cough* on this website rotates a random list of empty phrases. After that, the mission is displayed and below that unfolds a one-page website ending in a contact form. Especially when you want to convince me in a one-page website, make sure that you are clear from the start. Explain why I should use you, your website or your products to reach my ultimate goal: finding the right business consultant for my problem.

Define your USP or UBR and communicate that to your new customer immediately. ConsultingQuest seems to be a relatively young business, I think this advice will surely help them improve their website.

What’s the next step?

In my own interpretation of Getting Things Done, I have a rotating wallpaper on my MacBook, asking me now and then that very question: what’s the next step? When someone lands on your website, what’s the next step? When someone clicks your call-to-action, what’s the next step? When someone buys your product, what’s the next step?

Google Drive - very clear

I like this setup. There is one clear call-to-action, that isn’t too aggressive. Although I would perhaps have chosen a slightly larger, orange button. On the other hand, most visitors of that page probably don’t need to be persuaded anymore. What I like most is that although you can assume that the visitor knows what Google Drive is, Google explains pretty clear what the benefits are: “All your work, secure, available everywhere and easy to share – $10/user/month includes unlimited storage”. What’s the next step? Get started. Not persuaded yet? Contact sales.

Now think about the screenshot for ConsultingQuest above. There is no next step presented without scrolling all the way down. Clarity isn’t just about what you do, it’s also about what you want your visitor to do.

Clarity is a combination of things

The first thing we do when reviewing a website, isn’t to check for meta descriptions or branded page titles. It’s way more personal, but still a mutual feeling we all share. We don’t want to be lost. We want clarity. It’s the experience we get when visiting that website for the very first time: do we get the website? Is it clear what the benefits are for us visitors? And where or how can I get these benefits?

The two examples above show that there are some considerations to be made when adding a huge image to your website. It can be done and might be effective, when done right. Last week, I was talking to a friend of mine about the same subject: larger images and how that might impact your conversion. Our new design has a larger header image. But that one won’t bug you on all of our pages. And holds our menu, as well as your cart. It contains a clear tagline, containing a reference to the upcoming Yoast Academy. But perhaps even more important, the header isn’t so high that it will leave you in the dark about what we offer. Right below the header, all our main products and services are mentioned with clear links to the appropriate sections on our site.

Conclusion

Be as clear as possible. And keep in mind that clarity is a combination of things. It’s not just about what you want to tell the customer, it’s about what you can do for the customer and why the customer should pick you before any of your competitors. Clarity is also being clear about the next action. It will for sure improve the user experience of your website.

This post first appeared as Focus on Clarity First on Yoast. Whoopity Doo!

10 ways to improve mobile UX

Michiel Heijmans

10 ways to improve mobile UXDo you have a mobile website? Is it responsive or did you use a nice plugin to make it look good? Does it convert? With the use of internet everywhere, your mobile website’s user experience (or mobile UX) should get as much attention as the user experience of your desktop website.

In this post, I’d like to share 10 must-do things regarding User Experience (UX) your mobile website. Let me make one differentiation to start with. Although all things mentioned in this post also apply to tablets and phablets (look that up, I hate the word), I have had my iPhone in mind when writing this post.

1. Use a task based design

Design your mobile website and it’s structure with the user in mind. He or she uses a mobile phone. He / she probably is on his/her way to whatever and needs to check something on your website. What could that be? Think a moment about the things visitors do on your website (check Google Analytics, use common sense about your business or test it). Decide on top tasks for your mobile website. And optimize mobile UX to make sure these are accessible with the most ease possible.

David Allen already told you. You need to get things done. If someone finds your website and starts browsing it, make sure they can easily find and complete what they wanted to do. On their mobile phone, there are probably loads of apps that they are used to using. Being on the go makes sure the attention span is less than normal. Distractions are everywhere, not just on the phone. Design your mobile UX to make sure they get things done, before switching to other apps instead.

2. Add a sticky menu with a search option

Mobile UX search on WikipediaOne of the main elements of mobile UX for me is search. I want my search option to always be available. When scrolling a page, when clicking to another. The thing is that although we strive to present the easiest website possible, like mentioned in the above section, there will always be elements that just don’t fit in that easy. For all that content, I’d like to be able to use a mobile search option.

If you are a real estate broker, or sell clothes online, that search option might as well be the most important element on your mobile homepage. Please show that search option in the content area in that case, and make it available via the sticky menu on other pages.

One more thing about mobile UX related to search: having the option is just step one. Make sure your internal search result pages look awesome as well. The image on the right is a nice example of the opposite. These should be ordered on relevancy, for instance, on both desktop and mobile. But what stands out most is the lack of separation of results. Make sure individual results can be distinguished.

3. No dividers needed

Following the screenshot above and that lack of separation; that doesn’t mean I want you to use all kinds of dividers on your mobile website. Dividers take up space and that might have a negative influence on mobile UX instead. Think of ways to style elements so they all look like separate sections, without the need for a divider. Use borders, whitespace, headings. There are lots of things that can be done to improve that mobile UX without adding line elements that just take up space.

Perhaps recommendations like this are all a bit more User Interface (UI) based. But I think that UI is perhaps even more important for mobile UX than for UX on a desktop website. After all the stories about thumb stretch it seems to make sense to emphasize UI. And right after that, one should realize that with all the different screen sizes, perhaps the one perfect UI for mobile doesn’t exist.

4. Use short forms

As on your desktop website, your mobile site could or should aim for conversion. Buying products, or getting a quote for your services. Subscribing to your newsletter or simply filling out a contact form are all actions that need user input. On a mobile phone, six-page forms ruin the mobile UX. If I still remember your website when I’m back in the office working on my desktop computer, I might fill these out (might – it’s a six-page form!).

For optimal mobile UX, you want to keep forms as short as possible. Remove all the things you want to ask but don’t really need. Newsletter? Just the e-mail address (with a type=email input field). Quote? Last name and e-mail address. Shop? Delivery address invoice address Address. Or at least an option to copy the delivery address to the invoice address.

5. Tone it down

Your desktop site probably looks fantastic using all the rainbow colors that were available, but on your mobile website, the effect will be negative. There will be less focus. Your website doesn’t have to be black and white only, but a nice white background, black letters and one or perhaps two supporting colors is really enough for a better mobile UX.

I did find an interesting read on blurred backgrounds in apps: Elegance and Refinement of Mobile Interfaces based on Blurred Backgrounds. I don’t think we’re there yet, but this could also provide nice visual options for certain websites. Emphasis in that sentence is on certain.

6. Button hit areas

Mobile UX: Using the right size hit areaIt’s so obvious, yet still not common. Mobile websites are usually browsed with a thumb. Google Insights checks this under Size Tab Targets Appropriately. And we need to be able to click elements with that thumb as well.

In the article Designing for Mobile Part 3: Visual design, Elaine McVicar adds numbers to that:

Ideally, buttons should be between 44px and 57px on a standard screen and 88px to 114px on a high-density (retina) screen. This allows enough area for the average fingertip to easily activate a button.

There is one thing that is closely related to button hit areas; touch elements can be too close. It’s really annoying to click a link and end up somewhere else, just because the link next to it is too close to the link you wanted. It’s in Google Page Speed Insights as well, like the button hit areas. That tool is not the holy grail of mobile UX, but if Google can test it that easily, why not keep it in mind when designing your mobile website, especially when designing elements like a mobile menu or footer links.

7. Don’t use too many font sizes

Truth be told: I almost forgot this one. Font size is really important for mobile UX. You can’t just use all the desktop font sizes on your mobile website as well. There are two reasons for that:

  1. The mobile screen size. You don’t want the title to fill the screen, you want to make sure the article starts within the first view of the page. Neither do you want the base font (like your paragraph font) to be too small to read without having to pinch and zoom.
  2. You’ll create a mess when using more than three font sizes. The size differences will be much more visible. That’s why I would limit the number of font sizes to two, maybe three.

8. Optimize for speed

Another major factor for the right level of mobile UX is speed. In our website reviews, we use multiple tools to check site speed. Most of the time, there are two main areas of improvement. The first one always seems obvious to us: image optimization. Just hiding content is a lazy design solution. But I’m guilty of hiding for instance images sometimes as well, to prevent them from loading. You should at least reduce image size using PunyPNG or JpegMini. Next to that, you should combine and minify the CSS and JavaScript files that are loaded. The less connections to the server that need to be made, the faster your website will be and the better the mobile UX.

However, there is another factor. Mobile speed depends on the speed of your internet connection as well. Wifi isn’t all around us, neither is 4G. Personally, it depends on my internet connection what kind of websites I visit. Pinterest on a carrier network usually doesn’t give the desired user experience. While their search isn’t right, Wikipedia works fine on networks like that. In the end, connection speed isn’t a factor you can easily design your mobile UX around.

9. Switch to desktop site and back

No matter how well-designed your mobile UX might be, I really like it when a website also allows for switching to the desktop site and back again. Phablets (there’s that word again) like the iPhone 6 Plus easily allow for desktop sites, but it could be more convenient to view the mobile site instead. Some mobile sites might lack certain sections you are used to on the desktop version of the site: an option to switch will help.

An alternative is to design for a multitude of browser widths to serve visitors from all kind of devices, like we have done for yoast.com. The thing is, that the number of mobile devices is growing fast, and so is the variation in browser width. It seems a lot of work to design and redesign for all widths over and over again.

10. Test your mobile UX again. And again.

Recently, we found that one of the pages on our own website didn’t work like intended on a mobile phone. We found that when clicking to it from our newsletter on a mobile phone, so not on purpose.

When serving a responsive website to your visitors, you need to make sure that every change on your desktop site is also tested on the mobile version of your site. That is the only way you can make sure your mobile website is always up-to-date.

So, in conclusion, mobile UX is about a lot of things. In this article we have discussed these 10 ways to improve your own mobile UX:

  1. Use a task based design
  2. Provide a sticky menu with a search option
  3. No need to add dividers when sections are clear to begin with
  4. Make forms as short as possible
  5. Don’t add too many colors in your design
  6. Make sure buttons and links can be clicked
  7. Don’t go overboard with font size variations
  8. Make your website as fast as possible
  9. Add an option to switch to the desktop site
  10. Test all changes to your website on mobile devices

Looking forward to your tips!

These are just 10 things I think you should take in consideration when optimizing your mobile UX. I am sure you can come up with more, and am really looking forward to your thoughts on the subject: what other things do you feel a mobile website should take in account?

This post first appeared on Yoast. Whoopity Doo!

Cultural differences in webshops (part 2)

Marieke van de Rakt

A few weeks ago, I wrote a post about cultural differences between websites. In the comments, some readers left amazing examples of differences between websites of China and websites in Europe.

For instance, this example was given by Piet from WP Tips, left is the Chinese site Taobao as seen from China, right is the international view (click for a larger view):

taobao chinese vs western

In my previous post, I wondered whether focusing on another cultural market would call for changes in design. Research has made quite clear that different cultures have different design preferences, but does that mean that you should alter your design in order to be successful in another cultural market? Will our plugins sell in China or Japan if we change our avatars into manga-characters? In his post, I will try to answer these questions.

Scientific literature: persistent cultural differences!

I decided to start by diving in the scientific literature about cultural differences in shopping behavior and shopping preferences. Cultural differences appear persistent, even within the borders of Europe. Research shows that norms, values differ greatly between countries within Europe. Moreover cultural differences are persistent between countries in Europe  and between Europe, the United States, Japan and China (Mooij & Hofstede, 2002; 2011). This research also shows large differences in shopping preferences. Mooij en Hofstede state that ‘expanding operations to countries with different cultural values than one’s own, without adapting to these differences can lead to serious losses.’

Do some market research!

Interesting? But what does this have to do with your website? Well, if you have a webshop and you want to expand your market, chances are that one country may be more prone to buy your product than another country. While biological fabrics may sell perfectly well in Scandinavian countries, the same product will probably not be that successful in southern European countries. This will be due to differences in preferences, norms, values and prosperity between the countries. It would thus be very wise to begin with some market research before taking your webshop abroad!

In our case, before expanding our market and translating the texts on our website in Japanese, I should try to find out whether or not people in Japan are awaiting our plugins and site reviews. Is there any market in Japan for our products? As our WP SEO Plugin is already largely translated in Japanese AND we have already done some sales, Japan could very well be a market for Yoast to grow in!

Alter your design?

So, differences between cultures in design preferences as well as in shopping preferences are obvious. But do different cultures react differently to the design of your website?  Will Germans buy your American cookies if the design of your American website isn’t altered? I did my best, but I could not find systematic research that precisely answers this question (would love to do that myself someday ;-)). I did, however, find some evidence that the promotional tactics (convincing people to buy your product) show little cultural differences (Kwok and Uncles, 2005).

Kwok and Uncles find ‘that despite the existence of cultural differences at an ethnic level, culture does not appear to have a significant impact on consumer responses to sales promotion’. This means that although there appear to be differences between cultures, these differences do not lead to a different reaction of people on promotional activities. Different cultures thus respond similar to changes in prices and marketeers do not have to alter their strategies in order to promote their products to different cultural groups. One could argue that a website is also some kind of product promotion. I would probably argue it is a little bit more than that.  However, we should not immediately assume that different strategies are needed in order to sell our products.

Your biological fabrics will not sell in some countries, not because the design of your website is not appealing to a culture, but because your product just isn’t that appealing in that culture. Changing the design of your website favoring the preferences of a new cultural target group will only work if the cultural target group actually is interested in your product. And even then…

Conclusion

If you want to expand your horizon and starting selling your products in different countries, you should focus on those countries in which there is demand for your product. Good market research is an absolute necessity! Large changes in the design of your website would not be my first priority. That does not mean that you do not have to alter a single thing! Making sure you use the language of your target group is important (this post in Dutch would not have such a large audience). Offering the products in the currency of your target country will help as well. Finally, make sure the website looks trustworthy and apply for the warranties of the countries you are selling your products in!

Just wished my Japanese wasn’t that rusty.

Literature

Mooij, M. De, & Hofstede, G. (2002). Convergence and divergence in consumer behavior : implications for international retailing, 78, 61–69.

Mooij, M. De, & Hofstede, G. (2011). Cross-Cultural Consumer Behavior : A Review of Research Findings, (2001), 181–192. doi:10.1080/08961530.2011.578057

Simon Kwok, Mark Uncles, (2005) “Sales promotion effectiveness: the impact of consumer differences at an ethnic‐group level”, Journal of Product & Brand Management, Vol. 14 Iss: 3, pp.170 – 186

This post first appeared on Yoast. Whoopity Doo!

How to clean up your site structure

Michiel Heijmans

This is a republish: we’ve made some minor changes to it. We decided to republish it, because this post and its content are still applicable and important now.

How to clean up your site structureWe all know that moment where your website has grown to this monstrous collection of pages. That moment when you realize that you have too many pages in your menu and the coherence of your website is nowhere to be found. And we also know what a struggle it is to clean this mess up.

In this article, I’d like to go over a number of things we would take in account (at least) when changing your site structure. It’s a tough job, and sometimes it takes a lot of rewriting and perhaps even creating new pages, but as it is a job we have postponed way too long already, why not start restructuring today.

From chaos to order: your menu

From chaos to order in your site structureThe visual structure of your website is, in most cases, presented by the menu of your website. Of course breadcrumbs and permalinks help a lot here as well, but these are not the things an ordinary visitor will take in account. The menu is. Your menu ideally consists of a limited number of top level items, to keep the website focused.

How many levels?

My personal preference would be to create at most one sublevel, but I know this will get some criticism from customers stating that they “can’t squeeze all they have to say in just a few pages”. Please realize there are more ways to get from one page to another and your menu isn’t the only navigational option on your website. More information about this can be found in our Optimize your (WordPress) site eBook.

Home and Contact

For the majority of websites, the menu starts with the Home item and ends with the Contact item. We’re used to that, and every time we review a website that lacks either one of them, the menu just doesn’t feel right. Everything between these two items should be related somehow. Either list the main product groups or focus areas of the website.

Relevant menu items

One of the sites we’ve reviewed has three major interest areas: freediving, scuba diving and spearfishing. It is clear that these items have a link between them, and therefore the menu feels natural. If these menu items had been freediving, scuba diving and Dakar Rally, that wouldn’t feel natural, right? Keep things on-topic. If you have a diving website and want to write about your Dakar experience, I’m sure you can squeeze in a blog post or link to a specialized, optimized site about it. It doesn’t belong in your menu. This is your basic site structure.

Optimizing your site structure

Joost did an excellent piece on cornerstone content that we refer to on a daily basis. Cornerstone content (in short: assigning one main page per content and linking that from related pages) shows how internal links contribute to your site structure. Although menu links are the most visible, if a visitor is reading an article and wants to know more about the subject at hand, a link in the text is more easily found than a menu item that relates to it. More information about site structure can be found in our Content SEO eBook.

Write it down

Call it organogram, call it data flow diagram or whatever name you think is suitable, but making a visual presentation of your site structure will pay off. Start with your desired (one or two level) menu and see if you can fit in more of the pages you have created over the years. You will find that some pages are stil valid, but don’t seem suitable for your menu anymore. As mentioned that’s no problem, just make sure to link them on related pages and in your sitemaps. This way Google and your visitor will find these pages. Perhaps this diagram will also show you the gaps in the site structure and you need to add pages to clean up the chaos. If you have a website for a company that develops websites, one thread in your site structure could be:

Web development → Content management system → WordPress → WordPress themes  → Responsive WordPress themes

Not all steps need to be in the menu (perhaps just Web Development and WordPress would be enough), but all pages in your site structure should ideally be set up and optimized. It will create a rich collection of pages that strengthen each other. By the way, I am sure more that one step in this example also has links to other pages in your site structure, as it belongs to other collections of pages as well.

Remove pages (redirect them!)

What I expect, is that you’ll also find pages that need urgent updating or worse: that actually shouldn’t be on your website or simply don’t fit the current or new site structure. Services you used to offer or information that just isn’t accurate anymore. Write these pages down or copy the URLs to a text file. Is there a way to redirect (301) these pages, like with our Yoast SEO Premium plugin? Preferably you should redirect the URL to a related article, to preserve any traffic that this page had. If that related article doesn’t exist, redirect to a related category page, or as a last resort to your homepage. This way the (outdated) page won’t interfere with your site structure anymore.

By the way, be sure to read this nice post on analyzing your own content by Everett Sizemore: How To Do a Content Audit – Step-by-Step.

Our Yoast SEO Premium plugin is currently in Summer Sale! Save up to 33% on your license and even more if you extend your license now!

Rethink your taxonomies

When using WordPress, an obvious site structure is provided by the Categories and Tags you have divided your posts and perhaps pages in. In WordPress, these are called ‘taxonomies’. We have mentioned this before, but 8 to 10 categories would suffice for a website. Perhaps a webshop could have more, but the top level should preferably consist of that number of categories to keep your site and site structure focused. We’ve seen sites using over 300 categories, accompanied by over 5,000 tags and more. That’s not structuring your website, that’s messing up your site structure.

For me, the basic guideline is that if I don’t think I will reuse a tag, I won’t apply it to a post. And if an eleventh category would knock on my door, I’d probably wonder if the website could use another taxonomy next to categories and tags. There are several WordPress plugins that can help reorganizing taxonomies, but most of them don’t seem to add redirects after merging or deleting taxonomies – be sure to do that, of course.

Don’t take this lightly

Although one can write this down in a couple of paragraphs, it could be a lengthy process that shouldn’t be taken lightly. When changing the structure of a large website, it could make sense to change the permalink structure as well, which can have a lot of consequences. In this article we focus on restructuring the site for user experience (and SEO), not on all the technical implications this might have if you want to take restructuring to the next level.

Tell Google about it

In the unlikely case you have constructed your HTML sitemap manually, update that sitemap after changing your site structure. In the likely case you have an XML sitemap, resubmit it to Google Webmaster Tools. In case you have removed a page that just shouldn’t be in Google anymore, delete it from your website. Redirect that page to a page that is closely related to it. If you really don’t have a clue which page to redirect to, serve a 404 Not Found error.

Let us know

Drop us a comment if you have ever struggled with changing the site structure of a (customer) website. We’re looking forward to your stories.

This post first appeared as How to clean up your site structure on Yoast. Whoopity Doo!

Thoughts on 404 Not Found error pages

Michiel Heijmans

Have you ever wondered why you should have that 404 Not Found page? What’s the use? The page is gone or broken and you don’t want people to end up there, so why not just redirect that page to the homepage of your website? They even made WordPress plugins that will help you do this, so why not, right?

Wrong. What you’re basically doing is putting people on a train they did not choose themselves. If I want to go to Paris, why send me to London instead? If a visitor wants to find a certain page on your website, give him that page or an explanation of why you can’t.

Back to basics

The 404 Not Found error means that the URL that was requested doesn’t point to a certain page. Or as Wikipedia puts it:

“The 404 or Not Found error message is an HTTP standard response code indicating that the client was able to communicate with a given server, but the server could not find what was requested.”

The page may have been deleted, or the URL was misspelled. The permalink structure might have changed or even the domain name, and redirects could have been set wrong. It doesn’t matter why the page isn’t there anymore. Just bear in mind that it’s probably your fault and not the visitors fault, and write content for that 404 Not Found page based on that assumption. Keep a close eye on your 404s, which can be done by using, for instance, Google Webmaster Tools or Screaming Frog.

Note that if you have some pages that need to go down temporarily, the use of a 503 Service Unavailable would of course be better than serving a 404 Not Found page. Smashing did an article on maintenance pages back in 2009: Effective Maintenance Pages: Examples and Best Practices.

Required elements of a 404 Not Found page

Let’s think about this for a while, because the internet is flooded with manuals for great 404 pages and everybody, including myself, has a different opinion on this.

First, I really don’t think the 404 should be a redirect to any other page. In the article 404 Page Best Practices, SearchEngineWatch also refers to this as not being the most user-friendly solution. There are plugins that semi-intelligently link the visitor to a ‘closely related’ page. This may seem smart, as that will give the visitor the information they want. Kind of. But probably not entirely. The visitor might still feel left alone on your website and click back to Google. That is the very reason I don’t like the redirect to the homepage. We test 404s in our site reviews and when we are redirected to the homepage, we will always add a chapter about creating a great 404 Not Found page, with a link to this article. Joost already explained a lot about the visitor’s mindset in that post.

That visitor expects an explanation on why you broke your website. I think just a small explanation is required.

There are a few options for why that page broke. You may have changed permalink structure. If you just did that, perhaps you want to know what the visitor did to get that 404 Not Found. Just ask him. You could also have deleted the page, as many 404s state: “The page is gone”. No. That page didn’t go anywhere but in your trash can. “We may have deleted or moved this page” is a more suitable description.

That would also mean the page is still around somewhere else. Why not point the visitor to a search form or site map? Luckily these are pretty common practices. What I also like, especially in an online store, is bestsellers or recently visited products. Keep that visitor on a shopping spree. On a blog, that would mean displaying popular articles or recent posts. A 404 page should never give the visitor the feeling that they have reached the end of your website.

Examples of nice 404 Not Found pages

Annoying elements of a 404 page

I have to mention South Park here. They did a great job on creating funny 404s, just refresh the page and the SP fans will go wild, but it’s just not the best 404. Even with the most popular listings below the fun part. Create an actual page, don’t just try to be funny, as dull as it may be.

The worst one: the dog ate the page. Note that this might be personal. Even on a pet site, a dog on your 404 page just doesn’t make me smile (but what a nice website otherwise, indeed). Even when the 404 Not Found page isn’t bad at all like on this page, it may be overdone. Or I’ve just seen too many 404s with dogs already :-)

Fun is great by the way, but make it work. Don’t get a giraffe to lick my screen and think I’ll like your website regardless of not finding what I want. Help me to get back on track. At least point me to your homepage to start over again (but don’t redirect me!).

Another pet peeve: no 404 Not Found page at all. The browser telling me your website is crappy. That’s not what you want! Make sure your website has a 404 page. Using WordPress, just add a 404.php to your theme folder and create one if it isn’t there already, it’s really as simple as that.

Lastly, because I am looking forward to examples you have for crappy and great 404 pages: the huge 404 image that is telling me nothing more than that:

Huge 404 on a 404 Not Found page

Please don’t. These are the numbers you don’t want to see on your website, so why emphasize them?

Examples of crappy 404 Not Found pages

An honorable mention for IMDB here. Film geeks will love that one, though ;-)

Why do you think your 404 Not Found page is great?

Or perhaps you have some great examples, good or bad. We’d love to see these, so please drop a link in the comments!

This post first appeared on Yoast. Whoopity Doo!

Reviewing our site reviews: highly satisfied customers!

Marieke van de Rakt

We have been doing website reviews for more than 3 years now. Recently, we decided to update our format. We now offer different types of reviews, varying in depth of the analysis and in price accordingly. After completing a review, we usually have some contact with our customers (we answer questions about the review), but we were relatively clueless about the effects of our reviews. Do people really implement our advice? And are they satisfied? Do our reviews lead to more traffic and sales or to higher ranking in Search Engines? Time for a little research!

Very satisfied customers

A few weeks ago we asked our site review customers to give their opinion about the review we did for their websites. More than 100 of our customers took the time to fill out our short questionnaire (thanks guys!). Not at all surprisingly, most of our customers (82 %) have a WordPress site. They mostly maintain a blog, or a company site. We have customers from all over the world, but the United States, United Kingdom, Australia and the Netherlands are home countries to most of our clients.

We first asked our customers to indicate on a scale from 1 to 10 how satisfied they were with the review we made for them. A very large majority (67 %) was very satisfied with our review, rating it with an 8 or higher.

graph 1: satisfaction with site review, scale from 1 to 10

About 1 in 5 customers (20 %) even rated our review with a perfect 10! That is an amazing result and we are very proud of that! People who were not satisfied mostly indicate that they had very different expectations from our review. The advice was (in their opinion) not practical and too obvious. Admittedly, our advice is a narrative and can be lengthy. Improving (the ranking of) your website unfortunately is not a simple trick or a button you can push. It will need your on-going attention.

Advice implemented

We also asked our review customers to what extent they had implemented our advice on their website. Our results show that most customers took the time and effort to implement more than half of our recommendations. On average, people tend to implement about 65 % of our advice.

graph 2: percentage advice implemented

We were also very curious to see in which areas people were most inclined to follow our advice. We therefore asked our customers to indicate in which areas they had implemented our recommendations. Our results show that the chapter ‘General SEO’ is the most implemented part of our review. Fewest people improve upon their Template Code.

graph 3: percentage customers implementing various parts of the review

No guarantees for ranking

Most important purpose for the majority of our review clients to order a website review is to strengthen their ranking in Google. To what extent does implementation of our advice actually lead to a higher ranking in Google?

Some agencies claim to guarantee higher ranking if people use their services. At Yoast we never claim such guarantees. SEO just isn’t a mathematical law. The competitiveness of your niche is a very (if not the most) important predictor for whether or not your site will rank. Our website review will give you a clear overview of all the important aspects of SEO specifically applied to your website. Whether or not the review results in higher ranking depends on your ability to implement the recommendations and on the competitiveness of your niche. That being said: what do our reviews accomplish in terms of ranking when asked at our clientele?

Higher ranking in 52 % of the cases

The results of our survey show a strong correlation between the percentage of recommendations implemented and the ranking in Google. This means that the larger the extent to which people followed our recommendations, the more people indicated that the ranking of their site in Google was strengthened. The results of our study show that half of the people (52%) who implemented 90% or more of our advice indicated that their ranking in Google had improved. Note: the other 48 % did not notice any change (only 4 individuals claimed a deterioration of their ranking in Google).

It appears that following advice not specifically written with SEO in mind, pays of in terms of SEO nevertheless: implementing the ‘General SEO’ recommendations solely resulted in higher ranking in only 30 % of the cases. It appears that clients who follow the total of our recommendations have highest chances to increase their ranking in Google.

On-going process

Trying to optimize your website for search engines is, as I already said, no mathematical law. It is by no means a trick or a button you can push. The general SEO advice is of course most specific for SEO, but aspects of UX, site speed and template code are important for improvement in ranking and in increasing traffic as well.

Our recommendations come as a package and you should implement them simultaneously as much as possible. Most of our advice will be oriented towards a long-term strategy to keep your website optimized. Optimizing your website is an on-going process, which of course can start with some quick adjustments. Our review will help you start this process and give you handles to keep it going. Interested: You are, of course, very welcome to order a Website Review yourself!

This post first appeared on Yoast. Whoopity Doo!

Site reviews: new setup, new pricing!

Michiel Heijmans

site reviewsToday we’ll be releasing a renewed setup for our site reviews.

For the past year, we have been limiting the slots for our site review orders to a fixed number per week. The demand for the service is overwhelming, and we would like to thank all customers for the trust you have in our expertise. And for the great responses you gave us after receiving the reviews:

Yoast, I have to say, that this was one of the best thousand bucks I’ve spent in IT – ever. What a phenomenal amount of insight and advise you’ve given us. Thanks, and I’m sure we’ll use you again on future projects.
Henry Meyne, CTO of Hoozon

We are very keen on serving you quality information that will help you improve your website, both for visitors and Google.

Over the last number of months, we realized that customers want to know everything. Not just what’s wrong, but also all that is right. We’ve had a number of responses saying ‘have you checked this or that?’. That is why we decided to open up the entire scope of things we check during a review.

Silver Review

We have set up a huge list of over 200 checks we perform for a review, and have written clear and to-the-point right and wrong chapters per check, like this:

breadcrumbs check

This means we will be able to do a more time-efficient review for your website, in which it will be very clear what we have checked and what areas need attention, in our expert opinion. Note that while the chapters in this checklist are templates, our team of experts will manually go over your website to see what’s right and wrong.

The Yoast Website Review team, from left to right: Michiel, Joost and Thijs. Annelieke is not on this picture - yet.

The reason for still doing this manually is simple: automatic checks should only be done when you are absolutely right that the check result is correct. We check the things that we feel are important for improving your website, and your rankings or user experience along with that.

WordPress websites

Yes. We do around 30 extra checks for WordPress websites. Simply because we know WordPress, publish a lot of plugins that will help you improve your website and know a lot of plugins that actually work. And of course we will also check the use and settings of the WordPress SEO plugin as well. This all as a free bonus, just because you are running WordPress.

More information about our Silver Reviews and ordering here!

Gold Review

Since e-commerce websites have more specified issues to take in account for SEO and user experience, we added quite a few extra checks (50+) in our e-commerce checklist.

These checks include specific URL structure and for instance have an extra focus on duplicate content. Conversion is also a larger part of these checks than in the regular checklist. Of course there also are a number of extra, valuable pages on e-commerce sites like product pages.

It will not be as extensive as our Conversion Review, but will give you some great insights on usual suspects for your website.

More information about our Gold Reviews and ordering here!

Platinum Review

We will also be offering an improved version of our current review: the Platinum Review. We will take more time to do that review and test more aspects of your website. We’ll be digging into SearchMetrics data much more and will not only be checking your website itself (as it was), but will be looking into for instance your link profile as well.

We will also ask for Google Analytics and Webmaster Tools access, for instance to check crawl errors and to see how your main landing pages compare to your preferred keywords.

More information about our Platinum Reviews and ordering here!

This is a major change

We hope this setup will allow our review team to help more customers, by reviewing a website in a more time efficient way. With all the Yoast knowledge we also share on this website and more.

One more thing

There is one more change. As the vast majority of our clients is from abroad (not from The Netherlands), and the euro-dollar exchange rate is more steady than it has been over the last two years, we have decided to switch back to US dollars for the reviews. As we had already done for our plugins.

Find out more or order your review now!

This post first appeared on Yoast. Whoopity Doo!

Demystifying Viewing Patterns

Thijs de Valk

Lately I’ve been intrigued by something called the ‘viewing pattern’ of people. This is a pattern in which people view, in this case, websites. There are really a lot of ideas about this out there. Now I’m wondering: is there one right pattern? In other words: is there one pattern we should follow when designing our product and landing pages?

Before I fully dive into the subject, let me say I’m aware that these kinds of patterns are subject to culture and education. Most probably the patterns are also vastly different for languages that are read from right to left. And of course, it could be that it’s different for men and women as well.

Viewing patterns

As I said, there are numerous patterns patterns out there. I will go into what I think are the most important ones here.

The F-pattern

As the name already infers, the F-pattern suggests that people’s viewing pattern is similar to the shape of an F:

Image source: www.nngroup.com

Users will view the top content of a page horizontally first. After this their view will go down the page, and they’ll view another part horizontally. However, this area of horizontal viewing will usually be smaller than the top viewing area. Users will end up just ‘scanning’ the left side of the page’s content (best shown in the middle screenshot).

The Gutenberg Diagram

The Gutenberg Diagram suggests that people are subject to a ‘reading gravity’ that goes directly from the top left of a page to the bottom right:

Image source: www.vanseodesign.com

Users will start at the top left of a page, and end at the bottom right of a page. However, they don’t do this by viewing everything: the Gutenberg Diagram suggests that users go there in a straight line. And to make things more complicated, the ‘Axis of Orientation’ is from left to right, making the top right area more likely to be noticed, and thus Strong, than the bottom left.

The Z-pattern

Like the F-pattern, the name of the Z-pattern already gives away its meaning. It suggests that people view a website’s content in the shape of a Z. The pattern is also known as the inverted S-pattern:

Image source: www.vanseodesign.com

This viewing pattern is already close to a more engaged reading path. People viewing a website like this will see every part of the website. The start and the end points are the same as in the Gutenberg Diagram, but the top right and bottom left will not be disregarded as easily.

Other viewing patterns

There are several others, but for the sake of keeping this post readable, I’ll only mention them. They all have great similarities with one of the patterns explained above.

There’s the Golden Triangle Pattern, which is very similar to the F-pattern. And there’s the Zig Zag Pattern, which is basically just a lot of Z-patterns underneath each other. This is usually a viewing pattern for the most engaged form of reading: people searching for something specific.

Structure and hierarchy

As I said, there are a lot of patterns and a lot of ideas of how people are viewing websites. But what can we learn from all of them?

I’m inclined to believe that people’s viewing is dictated by the structure and hierarchy of the page they’re viewing, as well as personal preference. Pan et al. (2004) concluded the same in their research, saying:

“The present research confirmed previous work in that individual characteristics of the viewer as well as the stimuli both contribute to viewers’ eye movement behavior.”

So viewing patterns could mean something when people would be viewing a website with a lack of hierarchy, but as soon as you add focus and hierarchy to your website, people will start following that hierarchy. Djamasbi, Siegel & Tullis (2011), Granka, Hembrooke & Gay (2006) and Habuchi, Takeuchi & Kitajima (2006) all concluded similar findings.

What I mean by ‘structure’ is made clear by all the ‘viewing heatmaps’ I’ve seen regarding the F-pattern. A lot of these studies have focused on search result pages, which are already content heavy on the left side. So people will obviously view the left side of those pages more. However, if you add a ‘heavy’ or large object, whether textual or visual, to the right side, people’s viewing will almost certainly be drawn to that. So, how you’ve structured the design of your page will direct how people view your page.

Similarities

I’ve not even mentioned the fact that all these patterns are, in their basis, very similar. So similar, in fact, that UX Movement reviewed the Gutenberg Diagram, while showing a viewing direction which is clearly a Z-pattern.

The patterns have all been given their own name, but you can’t hide the fact that all of them start in the top left. And from the top left they move to the right. This is either the top right or bottom right. We shouldn’t need research to know that, because most people in the western world read from left to right.

So, now what?

My advice to you is to bring a clear structure to your pages, with a clear hierarchy. Don’t be distracted too much by viewing patterns, and definitely do not read too much into them.

The best way to go is probably to have some people, who are representative to your website’s visitors, work their way around your website. This will give you far more insight than patterns and/or studies like the ones mentioned above.

Eyetracking

Having said that, we are still intrigued by these eyetracking studies, even though we’re not big fans of viewing patterns. Other areas in eyetracking are very interesting to pursue. So much in fact, that we’re planning to buy some eyetrackers ourselves and doing an independent study.

What’s your view on these things? Let us know in the comments!

This post first appeared on Yoast. Whoopity Doo!