Did you know that 90% of traffic from Google comes from websites ranked on the first page of the search results? And that 90% of this traffic comes from websites listed as organic results? This knowledge forms the basis for search engine optimization (SEO) - the process of optimizing a website in order to generate traffic from search results. There is a vast amount of specialists implementing SEO strategies on websites. The biggest misinterpretation of SEO however, is that this can easily be implemented. Graphiq believe that this is something that should be integrated into web development, and this is why we think you should put your money on a web designer instead of an SEO specialist. With this in mind, we'll provide some design-related SEO best-practices below.
Graphiqs guide to SEO:
Google can not determine whether a website is user-friendly or not, but they do have great insight into user behavior. This insight helps them determine whether a website is relevant to users, which ultimately determines the ranking of a website. If your website is chaotic and difficult to navigate, chances are high that users will bounce because they could not find what they were looking for. Such behavior can result in a website being assessed as irrelevant and will hurt your SEO. To avoid this, a website should have a thorough and user-friendly design.
Check out Don Norman’s principles for interaction design for indicators of what makes a user-friendly design and design-related SEO practices:
This is the simple idea that the more visible an element is, the more likely it is that users will know about it or know how to use it. The same idea applies the other way around. When something is out of sight, the user will not know about it nor how to use it. Sounds simple, right? The difficult part is prioritizing which elements are the most important for the user experience and prioritizing their visibility. If everything is visible, it will clutter the interface and be confusing to the visitor.
Feedback is about clarifying the action and accomplishment of a user. It's about signaling and indicating to the user where they are and how they can interact with your website. There are several forms of feedback in interaction design, including visual, tactile and audio. To signal that a button is clickable you could implement a change of color or expansion while the user is hovering over it. The solution is to design the experience so that the user is never left guessing about what action they have taken and the value of it.
The purpose of constraints is to limit the interaction possibilities for the user and guide them from action to action. This relates to visibility and constraining the amount of information to simplify the user interaction. Too many possibilities leaves a cluttered interface and a confused user. Think about the customer journey and how you want your users to interact with your website. How can you guide them to your desired action?
Mapping is about the natural relationship between a control and its effect. The mapping should be as intuitive as possible and give users clear feedback. Horizontal sliders and vertical scroll bars are perfect examples of good mapping. When you scroll down while reading this article, you can see a bar to your right that moves with you and indicates where you are on the page. Sliders used for filtering are another great example, clearly indicating an increase or decrease in value as you move it.
Consistency relates to predictability and the expectations of a user. It's about having a consistent reaction to the same action. Design consistency is expressed through color, size and shape. Ensure that similar actions have similar visual expressions. If you have several call to action buttons in different shapes and forms that redirects to the same page, the user is left confused as to what to expect from clicking each button. Consistency throughout the interface is important across all devices and leverages trust and usability.
Affordance can be seen as clues that have the purpose of showing people how to use an object. The affordances should be so intuitive and obvious that no instructions are needed to use it. In web and interaction design, affordance is vital to ensure users know how to access the information that they need. An example of a strong affordance is the blue underline to indicate clickable links. While many web designers have moved away from the blue links for aesthetic reasons, it's important to remember the purpose of this affordance.
The speed of a website is crucial for ranking in search engines such as Google. Users constantly get more impatient and expect a website to load immediately. Actually, almost 50% expect a website to load in 2 seconds or less. And 40% of consumers will leave a website if it takes more than 3 seconds to load. Therefore, you need to make sure your website loads faster than this. You don’t want to lose a potential customer to a competitor because your website is slow, and lose visibility in Google as a result.
Seconds matter. You have to be aware that for every second it takes to load your website, you will lose potential visitors. Focusing on page speed is essential to succeed as a company and to convert website visitors. To check your website speed you can use the Google Page Speed test. If it turns out you have a slow page load, this should be fixed, because it will hurt your SEO. These are some adjustments you can do to speed up your site:
Compress your images
Large images are the main causes for slow-loading pages and low scores on Google's Page Speed Test. The best thing you can do to optimize page speed is compressing images. Using compression tools, you can reduce the size of an image by 50% and hence, reduce the pressure on page loading. There are several tools for image compression. If you're using WordPress, that powers over a third of all websites, a great plugin to use is Smush. It's one of the fastest tools out there and with one click you can enable automatic image compression.
Use browser caching
Another tool that can have a huge impact on your page speed, is browser caching. Loading every image and every page element, every time someone visits your site requires a lot of effort. This is where browser caching comes in. Implementing a browser caching plugin requires little effort and what it does is remembering all the resources that have been previously loaded. This means that footers, menus and logos don't need to load again every time a user visits a new page on your site, increasing the speed drastically. A useful WordPress plugin for browser caching is W3 Total Cache.
Minify your HTML
Another adjustment to speed up your site and getting a perfect score from Google, is minimizing your HTML code. Without impacting how the browser reads the HTML, a minification process can remove any unnecessary or duplicated data. You don't have to be a coder to format, remove and shortening HTML code. Again, there are useful plugins to optimize your page speed and minimizing your HTML. For WordPress users, a handy plugin is WP Super Minify.
Now that most Google searches come from a mobile device, it’s even more important to have a website that is optimized for mobile use. Actually, Google is more concerned with content for mobile than desktop when evaluating websites. Having a website optimized for mobile users will help to improve your SEO. This indexation is called mobile-first, and this is a philosophy you should adopt as well. It needs to be easier and more efficient to find information from a mobile device.
If your website is not easily accessible on mobile devices you will be turning away users, without knowing it. These users can be crucial for your company. The more friction a website creates, the less likely a customer is to convert. Friction occurs when there’s a barrier to conversion. If a customer has to work harder than needed to achieve a goal, he or she feels friction. It makes that customer want to avoid the experience completely. Google also provides a test that allows you to see just how mobile-friendly your website is.
There are multiple ways to optimize a website for mobile users, that will also improve your SEO. Some of the adjustments you can do are:
Responsive web design
The best way to optimize for mobile users is to have a responsive web design - responsive referring to a flexible design that adapts to all devices. Traditionally, websites are designed for desktops but it’s equally important to design them for mobile. Mobile devices are very constrained by their small screen size, offering less space for content. An important element for mobile optimization is to minimize and prioritize information. This does not imply that you should remove functionality for mobile, but rather that you design your website for mobile.
Now that you have prioritized your information, you have to review how your content is displayed on mobile. A responsive design should first and foremost display your mobile content in a readable way. The text should be large enough to read - without zooming or sideways scrolling. Remember to consider which images and graphics you use too, and how they adapt to different screen sizes. Ensure that your graphics are scalable and that your images are responsive to fit the screen they’re viewed on.
Website navigation on a mobile device should be clear and obvious. In prioritizing information and designing a website for mobile first, consider how to simplify your navigation. Minimize navigation options and use clear and concise language to describe different categories and pages. Users should not have to look for the navigation menu. Consider using the classic hamburger menu to not only save space, but to provide the user with a recognizable icon. This mobile-first user-oriented focus could even improve the user experience on desktop too.
To improve the navigation and designing a mobile-optimized website, review your current website to identify any features that are not mobile friendly. You could discover elements that do not convert well to mobile devices. Sidebars are a good example of non-mobile friendly features. Consider restructuring it. Also, consider how you display buttons. Any call to action should be clear, large and impossible to miss. And do make sure that phone numbers and addresses are clickable. Think about how you can make your content accessible and easy to navigate for mobile users on the go.
In relation to non-mobile friendly features, take a look at your popup elements. Popups are a great tool to collect signups or user feedback and can be valuable features of your website. On mobile however, popups often cover the entire screen and feel intrusive and disrupting for the user. In fact, Google has taken this into consideration and popups could actually hurt your search result ranking. This does not imply that popups are useless or that they should be disabled, but you should consider testing how they impact user behaviour.
It is however worth to note that Google has announced that “page speed will be a ranking factor for mobile searches”. And as Google prioritizes mobile first, slow loading pages could hurt your search rankings for both mobile and desktop. So whether you choose accelerated mobile pages or responsive mobile pages, speed matters. The longer the page takes to load, the higher chances are that users will bounce. Ensure to speed up your checkout page too. Studies show that page speed could increase the cart abandonment rate.
Accelerated Mobile Pages (AMP) is an open-source HTML framework developed by Google for development of mobile-first websites. The main benefit for businesses and users is increased page speed and reduced bounce rate. The idea is to remove any unnecessary content to create a simplified, mobile-optimized version of the website. For WordPress websites you can install a plugin to create a lighter version of your website, changing the look and functionality to enhance the user experience. Do note that AMP are different to responsive pages, and some claim that the two are actually not compatible.
Studies show that businesses have seen a 32% increase in sales by integrating such trust-signals. Many consumers are still anxious to make online purchases, so you need to reassure them. Trust is about providing users with a guarantee that your website is secure and to be trusted. You may know your site is secure, but you can’t assume your visitors know. Here are some components that are important to ensure your visitors that you're trustworthy:
Reputation is possibly the most important trust component. It's about assuring the user that you are a reputable brand. Therefore, it is crucial to have a strong understanding of your customers. You have to know what impresses your demographic. Whether you have decades of experience or hundreds of thousands of followers, use these numbers as selling points to reassure the visitor that you are trusted and liked by others. This provides the user with what persuasion psychology calls social proof.
Testimonials from happy customers is a form of social proof that builds trust by showing that other people have used the service or product and recommend it. Adding faces and full names to the testimonials also adds a personal touch by knowing who the testimonial came from. Another form of social proof that strengthens your reputation is press mentions. Display these mentions and the media logos on your website to illustrate your credibility.
Consider offering free trials to reduce risk for the customer considerably, eliminating one more reason not to try your product. Many visitors are hesitant to give you their card details without trying the product. Running free trials can be costly, but it can increase the number of signups and result in a positive return on investment. This will also indicate that your business is confident about your product or service. Businesses count on continued use and repurchase after the free trial.
Your website is often what forms the first impression of your company. Therefore, web design is crucial for trust. It's all about the details and designing a website that looks professional and trustworthy, implementing different trust signals. Essentially, web design could make or break a sale. Great web design is about usability as already discussed, and aesthetics that's to be discussed next. And remember: "if you are not technically inclined, hire a good web design firm".
Last, but not least: the overall aesthetics of the website is essential. An appealing website will give a better first impression. This is crucial because studies show that users decide whether they will stay on your website in a span of 0,05 seconds. Because Google evaluates your website based on user behavior it’s important to make sure users form an excellent first impression and don’t bounce your page. First impressions are also 94% design-related, concerning especially visual appeal and navigation.
"Aesthetics is known as the set of principles guiding the work of an artist, including color, contrast, graphics, and layout". The aesthetic design of your website influences the perception and credibility of your brand. Aesthetics and usability are closely related and influence the overall user experience. A site that is both user friendly and visually appealing ensure a positive experience for the user. Here are some important elements of aesthetically appealing web design to consider.
The intentional use of color influences the user experience and is an incredibly powerful visual tool. Different colors have different effects and you need to consider carefully what the most effective color palette for you is. This science of how color affects users is called color psychology. Think about what you want to communicate and with what audience. Then have your color choices reflect this. According to a study, color adjustment can actually increase conversion by 24%.
I'm not going to use the classic cliche about how an image is worth a thousand words. However, I can tell you that the brain processes an image 60 000 times faster than text. According to studies, most people are visual learners and retain visual information better than textual. Using appealing images, whether that is photography or illustrations, is an important element to web design. Ensure you choose or create your visuals carefully. An interesting find to consider, is that original graphics tend to perform better than stock photos. Think about how visuals can add value to your message.
Not everything should be communicated visually. There are still advantages of textual communication and large number of users still prefer reading text. Apart from the obvious advice on producing valuable textual content, consider how you structure your content to ease visual scanning of text. You have to use headings, keywords, lists and links - not only for their typical SEO functions - but to deliver relevant and readable content for the user.
Another element to consider for aesthetically pleasing web design, is alignment. There should be a visual connectivity and balance between the elements on your website. Elements that have a clear call to action and a clean alignment could have a higher conversion rate, while a website with chaotically placed elements could have a higher bounce rate. This relates to what we discussed on visibility of elements. Consider which elements to display and how to align them in a clutter-free interface.
Finally, white space is an important, but often underrated element of design. "White space is the area between design elements. It is also the space within individual design elements". It's a room for breathing and for balancing elements. For you, it could seem like a waste of space that could be used for more information. For the user however, white space allows them to focus on the important elements, instead of being bombarded with information in every pixel. Use it to navigate the user.
User-orientation is key
The common denominator of all the best-practices in the user-orientation. We believe that this is the key to search engine optimization (SEO). If you have a visually appealing website that is easy to navigate, filled with great and relevant content, visibility and high search rankings will follow. One of Graphiq’s freelance designers can help you with the web development and user interface, while you work on creating great content. Together you can optimize your website and potentially throne on the first page in Google's search results. Submit your project for a non-committing offer, and we'll help you.