Many web design companies often develop WordPress websites that are infused with unnecessary bells and whistles in an attempt to demonstrate creativity. Unfortunately, unbeknownst to their client, these decisions affect the businesses online presence and t.
Furthermore to poor creative decisions, user experience and search ranking are not considered in the web design process. In this article we will look at 5 User Experience (UX) web design mistakes often made in WordPress.
Only 1% of people actually click on a slider, which almost always was the first slide.
Sliders or carousels are a widely used component on websites which display a slideshow of images/promotions.
The most popularly used WordPress plugin for sliders is the Revolution slider. This plugin is often included with premium themes which allows users to easily upload images, add text, control transitions and layout.
A slider can certainly liven up a website with beautiful images or by displaying current store promotions however they can the negative impacts of using image sliders are often unknown or ignored.
- They push down important content on a page.
- Don’t function well on mobile devices.
- They can affect site performance.
- Visitors are subjected to offers they probably don’t care for.
- They are viewed the same way as banner ads.
Since sliders can negatively affect site performance due to adding additional images and code this can result in high bounce rates, lowered conversions and poorer search rankings.
Tips if you MUST use a slider:
- Try to keep the height above the fold.
- Make sure the transition speed is not slow.
- Compress JS files to improve site performance.
- Disable on mobile.
2. Contact Form (not visible/too many fields)
[click_to_tweet tweet=”In a Hubspot Study, reducing the number of fields from four to three brings a 50 percent improvement in conversion rate.” quote=”In a Hubspot Study, reducing the number of fields from four to three brings a 50 percent improvement in conversion rate.” theme=”style3″]
Contact forms are an ideal way for generating website leads when visitors land on a website.
Web designers make the mistake of using too many fields and some experts including HubSpot have found that more form fields can lead to lower conversions as displayed in the graph below.
Furthermore, it was also found that increasing the number of select boxes and text areas can also decrease conversion rates.
Most websites are developed to include 1 contact form on the contact page. By making contact forms available on all pages, on sidebars, headers and footers; can increase conversions due to their accessibility and visibility.
Contact Form Tips:
- Avoid using too many form fields
- Implement forms on all pages
- Make forms accessible
Long forms can be helpful, especially when filtering leads. It’s good practice to make long forms easier to process by breaking up form fields into sections using “chunking” or making a multi-step form.
If you’re website is developed in WordPress, Gravity Forms allows for easy form creation using a drag-and-drop builder.
3. Large images
[click_to_tweet tweet=”On average, images can make up 30-50% of a websites page weight. ” quote=”On average, images can make up 30-50% of a websites page weight. ” theme=”style3″]
A hero image is a large web banner that is placed at the top of a web page. Similar to the UX web design issues when using image sliders, hero images can push content further down the page which can also negatively impact SEO.
If an image doesn’t properly contextualize a websites content it can often confuse users aside from simply taking up precious space.
If you do choose to use a hero image its recommended to either overlay a contact form or have clear call-to-action buttons. Find out how to choose a hero image.
While hero images are great for branding and can be great for storytelling opportunities the aspect ratio often times doesn’t translate across different dimensions and devices.
The issue with using large images is their impact on loading time. Some web designers often use high resolution images that are much bigger than necessary. If you choose to add a hero image it’s recommended to keep it at 1200px wide and use a lower resolution. This will not
compromise the design and affect the websites user experience.
All images on a website should be resized and compressed. This can be done in Photoshop by saving images to a lower resolution.
For websites developed in WordPress, there are several plugins which compress images including: Ewww Image Optimizer, WP Smush and reSmush.it Image Optimizer.
4. Too Little or Too much content
[click_to_tweet tweet=”The average visitor will only read 25% of an article.” quote=”The average visitor will only read 25% of an article.” theme=”style3″]
The quote “content is king” is nothing new. I was originally coined from an essay Bill Gates wrote back in 1996 as he described the future of the internet as a marketplace for content.
Over 2 decades later those words are a pinnacle in the SEO community. There are several benefits to having well written content as it can improve search visibility, improve domain authority and position your business as a subject expert.
In web design, a website needs a balance of content and imagery. Content is what speaks to your visitors, whether its an educational article or trying to promote your services.
Many web designers fail to find the balance of content within a web page layout. Often times having too little or too much content can hinder user experience and the success of a website.
Similar to the concept of “chunking” on forms, content needs to be digestible or visitors will be overwhelmed.
- Use search terms you’d like to rank for in content.
- Pay attention to grammar, spelling and quality.
- Make content digestible.
5. Not responsive
[click_to_tweet tweet=”50% OF TOTAL ECOMMERCE REVENUE COMES FROM MOBILE” quote=”50% OF TOTAL ECOMMERCE REVENUE COMES FROM MOBILE” theme=”style3″]
Responsive web design simply means making a website adapt to screen sizes so that it can be viewed on different devices such as smartphones, tablets and desktops. Mobile search has surpassed desktop search which has made this extremely important in recent times, and this trend is still increasing.
It’s important for web designers to test their web pages using a mobile responsive tester which are available through several online tools and chrome extensions.
Failure to make a website responsive can lead to poor user experience, increase bounce rate, affect search ranking and conversions.
The benefit of having a responsive website is so that it can load quickly without compromising design and visitors don’t need to adjust anything to view content.
Businesses who don’t recognize the important of responsive design are likely to go extinct which is why it needs to be embraced.
If your website is developed in WordPress and isn’t responsive, it can be fixed simply by installing a new theme. Premium WordPress themes can be purchased on themeforest.net for around $50 which are responsive. It’s still important to test page content to make sure elements and content adjust properly.
Creating a web design that is consistent and works across all devices is key into turning visitors into customers.
6. Choosing bad typography
Choosing the wrong typography in your web design can frustrate readers and negatively impact user experience. This is why it is fundamentally important for a designer to carefully choose their website typography in order to best communicate their websites message and content.
Most visitors will scan content and in fact only likely read about 25% of an article. This is why it’s important to make sure that the copy is readable.
Keep in mind that people who visit a website are there to read its content. The typeface chosen is an extension of your brand and can affect how visitors perceive your business. The fonts chose should properly reflect your industry.
When it comes to blog content choosing a san-serif font is ideal as it is easier for visitors to absorb information. For accessibility, it’s recommended to have your font size to be at least 16px or provide a font resizer.
Don’t choose too many typefaces as this can confuse visitors and make your web design appear disorganized.
- Choose between 2 to 4 fonts to be used throughout your design to remain consistent and professional.
- Spacing is important as it can make content more readable.
- Use font weights to highlight important keywords and sentences.
- Test your fonts on different browsers to ensure that the fonts chosen are web safe
7. Not enough contrast
For accessibility and good web design practice, it’s important to choose a sufficient contrast between text and background colors. This can include text that appears on banners, images, buttons and articles.
This can enhance the experience for regular readers and not deter those who are part of the aging population or have visual impairment issues.
There are several contrast checker tools to choose the appropriate color combinations that are appropriate for those who are sensitive to brightness.
8. Ignoring site performance
[click_to_tweet tweet=”Google: 53% of mobile users abandon sites that take over 3 seconds to load. ” quote=”Google: 53% of mobile users abandon sites that take over 3 seconds to load. ” theme=”style3″]
This point coincides with the the point above about using image sizes that increase page weight but goes a lot deeper as there are several factors which can hinder site performance.
Slow page loading can negatively impact bounce rate, search ranking and conversions among other website metrics. This is why it’s important for web designers to consider several factors which contribute to poor site performance.
Find out how fast your website loads by using the online tool GTMetrix.com.
Web hosting plays an important role and can effect rendering. Think about running software on a really old computer vs one that is new and has a lot more memory and processing power. This is similar to how a server renders a website. If you’re running a large scale website that demands more resources this becomes increasingly important.
In terms of website development perspective, factors such as script minification, caching, image and database optimization can all contribute to improving site speed.
If you’re running a WordPress website, try installing plugins such as WP Supercache or WP Rocket. If your hosting with SiteGround Web Hosting then you can take advantage of their SG Optimizer.
These plugins WordPress plugins can optimize your page speeds up to 80% faster.
9. Link phone numbers
This is a simple tip but one that is often missed by many web designers and potentially lead to lost leads.
As more people rely on smartphones over other devices it’s important to link phone numbers so that they can be tapped to dial the number.
While many modern web browsers and devices (such as iPads and iPhones) automatically detect and link phone numbers, it’s still good practice to link phone numbers for click to call.
Follow the HTML tag below in order to link phone numbers on your website.
Having a professional web design that doesn’t frustrate users is how to turn them into customers before your competitors do.