7 User Experience Quick-wins to Improve Your Website
As a digital marketer you are constantly working on the optimisation of your website. By means of web statistics you want to gain insight on how many and where visitors leave the site. The statistics do not always provide insight on the reason why people leave.
Online research, and particularly the real-time collecting of feedback, can offer a lot of valuable information about the visitor’s motives.
From my role at Mopinion I frequently make analyses of the feedback our clients receive. These analyses show that there is often still a lot to gain in terms of user experience. In this blog I will provide seven focal points you as a marketer can use in order to achieve quick-wins to improve the user experience of your website.
Tip 1: The loading time of the page
This seems to be an obvious point. However, from the feedback we gather for our clients it appears to be quite a jammer. Not only is it mentioned often (in some cases approximately 30% of the feedback received), but it also scores very high on the annoyance-meter. Especially for companies working in a promotion-oriented manner or with monthly cycles, you can see that they are struggling to deal with certain peaks in the number of visitors. For example, think about drawings of lotteries or mortgage providers who have to process many mutations during fixed moments of the month.
In addition it also often shows that more complicated online tools – for example a car-configurator at an automotive – are demanding a lot of bandwidth from the internet connection or have an impact on the image processing of the computer or other device. Of course such tools can offer added value for the visitor, but at the same time they also entail a risk when the process does not run quickly and smoothly.
Hosting
You may think: what can you do about it? The first step is to check whether you have sufficient bandwidth available. Have a look at flexible and scalable hosting solutions, such as cloud hosting by Amazon or Rackspace. Map the field in which you have the largest number of visitors and make sure you are running the right monitoring tools in that area, such as Pingdom or Google Pagespeed. Make sure you know what you are talking about when you meet with the IT-department…
Assets
A solution closer to home can be found in the assets you use. According to Yahoo traffic jams such as images, css and javascript document 80% of the loading time of the page. So, make sure you do not load unnecessary junk and that the files necessary are minified and compressed correctly.
In addition, it often shows that widgets and plugins are loaded at unnecessary places. So, check carefully what you need and where you need it. When you only need a plugin at 1 page for a specific tool you do not have to load it at other places.
Caching can also offer a solution. Have a look at tools ensuring that the visitor does not often have to unnecessary load the same assets. When your website runs on an unknown framework or CMS, for example WordPress, there are often caching options available in the form of plugins such as W3 Total Cache.
Tip 2: The login procedure
Regrettably, login problems are still the order of the day. The online service provision is for many companies an important part of the daily contact with existing and new customers. Just think about all the webshops, banks, energy companies and telecom providers where you login on a regular basis in order to use the service provision at, for example, the shopping environment or my-environment.
A large part of the feedback we process (approximately 5%) originates from pages related to the login procedure.
Unfortunately, a lot of people have difficulties remembering the large quantity of usernames and passwords. Apart from the human factor, a lot still goes wrong during the login procedure itself. Working with an email address is for many people easier to remember than a separate username. Avoid the use of complicated client numbers or personal names.
Stop reloading
The use of validations in the front-end may ensure more ease of use (so not collecting information through the server/database but directly in the browser, for example via Javascript and/or Ajax). An advantage is that the page does not have to reload. An example: a customer who accidently types “[email protected]” instead of “.com” as an email address.
With a Javascript or Ajax validation you can immediately provide the user with feedback on the incorrect input of the email address. By applying these kind of tricks you make it easier for the user to login. An even bigger annoyance is that all fields are completely empty after an incorrect login and that everything has to be filled in again.
Forgotten something again…?
A next obstacle often is the collection of a forgotten password. It has become more or less standard to give users the possibility to reset the password or to apply for it by email. It may seem neat to only show that option after the user has actually tried to login incorrectly.
Finally: the error-message. For many users it is annoying enough that something went wrong. Try to avoid robot-like messages such as “invalid password”. Pay a visit to that nice colleague at the communication department… You may receive a great alternative that suits the tone-of-voice of the company. A suggestion for the message above: ”You seem to have typed in the wrong password.” Already sounds a lot friendlier, right?!
Tip 3: Forms
Probably very recognisable: you have made a selection, set filters or entered data in a form and on the next page everything is gone and you have to type in all the same information again. A major irritation amongst the visitors of your site.
9% of the website feedback our platform analyses on a daily basis is related to forms. Biggest annoyances are the submission of information that has already been entered once or having to perform the same actions multiple times within forms and selections. It sometimes leads to small irritations, but usually to major annoyances.
Forms are helpful when visitors are searching for information, for ordering products and for the generation of leads. It is therefore crucial that your forms work properly. In general applies that the lesser fields you are asking for to complete in a form, the higher the conversion will be (considering the fact that some data are really essential). It makes sense that more fields have to be completed in the event of a payment or an order than when it concerns a simple lead-generation form.
When the user still has to provide a lot of information, also offer the possibility to save the form halfway through. This way the user will be able to finish the form later on.
Map your journeys
Map the most important journeys within your website and check the area where you want users to provide information or where they have to enter data. Recycle those data.
Do you know who your visitor is, make sure his/her preferences are saved and can be reused. Also use smart tools to automatically complete or supplement certain fields in a form.
Does it concern visitors who are not a customer yet? You can also make a distinction between repeating visitors and new visitors. When you, for example, offer the possibility to download content about your product, only ask for the necessary information the first time. When the visitor returns and fills in another form, make sure he/she only has to complete new fields and hide everything you already know.
Responsive forms
Given the fact that mobile use is the most popular online – in 2014 mobile use surpassed the desktop – there is a big chance your visitor uses a smartphone or a tablet. So carefully consider the available space, the touch-interface and the length of the form. Multi-step forms offer a solution because you in fact cut the form into pieces and only show 1 or 2 fields per screen. It may be useful to test multiple variants with tools such as Optimizely.
Tip 4: Finding the right page or information
22% of the feedback our software analyses for clients involves the fact that a visitor is unable to find the correct information. In the worst case the information needed is not available at all and the visitor drops out entirely.
A lot of large companies and webshops simply provide a large amount of information, sometimes just because of the large range of products. This problem cannot be solved very easily. Yet I have a number of tips, based on previous experiences, to still improve the user experience.
A first step to address this common problem is to map online journeys. Check for yourself which goals the visitors have in mind when they come to your website. Visitors often have to go through a number of steps to achieve their goal. ‘Mapping’ the journey helps you to gain insight on the issues visitors experience and where they are in need of certain information.
Click behaviour
In addition, you can use the click behaviour to analyse where people leave. On these points it can be useful to also obtain quantitative feedback. This will uncover the reasons behind click behaviour. You can have the feedback form appear actively when you, for example, signal repetitive behaviour such as going back and forth within a certain flow. A logical metric to ask questions here is the Goal Completion Rate (GCR). The question is often something like: “Were you able to achieve your goal?”, with the options “Yes”, “No”, or “Partially”. You report the percentage “Yes” as the GCR. It is obviously advisable to ask for an open explanation following the GCR-question.
Tip 5: Unclear text
Approximately 7% of the feedback we analyse on a daily basis relates to unclear web content. This may involve product information but also the content in an order flow or self-service page such as an FAQ.
People are looking for information on your website with a certain goal in mind. That goal is usually to find the answer to a question.
Visitors and customers read the information, look something up in a table or watch a video. For example to find out whether a product meets the desires, whether the pricing model is suitable or in order to solve a support-related issue.
Apart from the fact that information has to be clear and not too long, visitors also want to be able to find it immediately. So, make sure the content can be easily scanned and leave out unnecessary information, so that people are able to pick up on the important matters.
Add images and video so the whole can be easily absorbed.
Answer to your question?
On pages where it is necessary to offer a lot or more complicated information, it is always advisable to find out the way in which the visitor experiences the information. This can be done by means of simple embedded feedback forms in which you ask a question: Is this information satisfactory? The response options are “yes” or “no”, with the possibility to leave an open comment. The visitor can indicate here, for instance, which information is lacking or what is unclear exactly.
This feedback can be used to gather accessible insights on the extent to which visitors appreciate your content, whether the content is adequate and what you can do to improve the quality of your content.
Tip 6: Bugs everywhere
Too bad. Bugs cannot be avoided. They will always find a way to sneak in….
Do not get scared: there are more than a thousand browser / platform combinations in circulation. The risk of a bug appearing on your site somewhere is therefore big. Tools such as Browserstack offer the possibility to test your website in nearly all possible combinations. It then usually involves bugs in the front-end. In the back-end software itself all kinds of things can also go wrong (think about, for example, validations on forms, issues in relation to rights or problems with the output of a database).
Even with the most extensive tests, bugs may still occur after you have gone live. Your customers are usually the ones who discover them first. It is therefore advisable to give the visitor an opportunity to easily report a bug, in addition to all the test committees you organise yourself.
When you offer the possibility to report this through a feedback form, you will see that you quickly gain relevant insights. Approximately 20% of the feedback we analyse for our clients is related to bug notifications. So, do not leave the opportunity to let the customer help signalling bugs unused.
Tip 7: Mobile first?
I have also indicated the example for optimising your forms for “mobile” at tip 3. Across the entire width of the online experience applies that mobile is still somewhat neglected. That is strange considering the fact that an average of more than half of the online visits is done by means of a mobile device.
Around 6% of the feedback we receive in our platform is related to problems on a mobile device. On several blogs mobile is mentioned as an important point of attention when it concerns matters such as Search Engine Optimisation (SEO). It is therefore not only of major importance for the User Experience but also for the findability of your site.
An important point is the use of images. Start with the smallest “viewports”and then work your way up to the larger screens. Make sure the content also neatly adapts to Retina screens with a higher dpi.
As I mentioned previously in this blog, long loading times have a negative effect on the user experience, so make sure your files do not become too big and you only load the correct sizes. When you work a lot with illustrations and icons, you can also have a look at the use of SVGs (Scalable Vector Graphics). These are in fact line-files that easily scale along with your design.
Text and fonts
Also pay close attention to the use of your text and fonts. This is also one of the areas in which we often see things go wrong when analysing feedback. Stay away from too thin and complex fonts. People often have to read from a smaller screen when using their smartphone. Increase the readability by handling the space between the letters and the lines in a smart way. Also check the layout of your text on different viewports. Here you will find more information about the ideal proportional composition of text versus thecontainer.
Mobile navigation
Finally, we often notice quite some obstacles when it comes to mobile navigation. Luckily many mobile menus have already been embedded in the known templates of, for example, systems such as WordPress. But in case you do not want to use those systems, make sure you start from a small screen. The space is limited and assume they will be used by means of touch. The guidelines of Apple indicate an average “finger” of 44 pixels.
Ensure that your most important pages can be approached quickly and limit the number of options.
More information about designing mobile navigation can, for instance, befound here.
As a final tip: mobile browsers can also be perfectly tested with the earlier mentioned Browserstack.
NOTE: The percentages on the amount of feedback we have analysed belong to a research we conducted on our own feedback data in 2015. Want to see all our findings read this blog post.