How to Make Your Hotel Booking Website More User-Friendly

how user-friendly is your website is it helping you or hurting you do you even know in this video I’m gonna share how you could find out the usability of your website in addition to that I’m gonna share one pro tip you can do to improve how user-friendly it is to use your website my name is Joshua and I help hospitality providers and small business owners achieve success online with website design and digital marketing I recently came across a blog post from the team at Pegasus that went through how you could perform a usability test on your website I like to take a look at it with you let’s check it out so here is the blog post and I’m going to leave a link to it in the description of this video so they really went through in great detail what is the website usability test why is a website usability test even useful at the end of the day if it’s taken a long time for a guest to be able to find the information they need they’re probably gonna check somewhere else there’s a lot of competition online especially for vacation rental hotels and so on so you really want to make sure your website is given em the information they need I had as soon as possible time they also indicated how you could determine what type of tests to conduct should it be specific should it have a specific function that you’re checking for maybe you would like to know how quick it is for someone to book on my website can they find out about my additional services and so on they also went through how you could choose your website testers should you use familiar employees or unfamiliar employees maybe random users might be a good choice you could also find out how many testers should be used they usually recommend about five as you start using much more you start repeating the information you could also find out how to conduct the usability nuts should it be supervised or unsupervised if it’s supervised you may be able to see certain things yourself but it might be pressured to the person so you have to decide which one works maybe you could try to a combination of both you can also do a comparison site test use one of your competitors site and yours and get a chance for the person to see which one is easier to use and you may be able to learn some insight that way they also give you a suggestion of questions that you could ask check out this blog post when you get a chance now I’m gonna share with you one pro tip you can do to improve your website let’s take a look at that I recently did a tutorial that when you step-by-step how you could build your own hotel booking website now if you want to go through that tutorial there will be a link in the description or you would look somewhere on the screen I’ll link it there as well but here is the home screen of that website that we built and right on the home screen there was a search availability button very useful you could click on that button and it will open a window that you could type in the dates that you would like to check in and check out and see if it’s available so let’s try that so you could have chose a date and click search and here is the results you could have gone through the details see if the information suits you and if this was an accommodation you wanted to book with you could have just come down and choose book however this is one extra step that your visitors will have to make I’d like to show you an alternative or how you could make this one step quicker for your visitors now let’s look at this instead what if when the visitor came to your booking page they will welcome with a search availability phone just like this it’s already colored with your brand colors as you would notice this is your alternate color so it’s right here for the guests to click and search for their availability let’s look at how you could do that yourself so here we are in the backend of the website I would like to show you the tools I’m using to build this website so if we go to plugins you’ll notice that we’re using the motopress hotel booking line this is the free version I’m also using Elementor to the elements on the page and I’m using the Astra starter sites this is the new Astra starter template and a wordpress forms light which is for the contact form to the bottom of the page but we need to get that search availability form so that’s in the hotel booking light plugin and to get that we will go to accommodation and short codes again if this is looking new to you then you should take a view of that full tutorial video that we did and building the entire website so here’s what we need the availability search form so if we highlight this shortcode and we will go back to the front end so we could go to website and choose visit site and we need to add a form and we need to add it right here let’s scroll down and we’re going to select add new section let’s choose a single column let’s move it to the top we can right click let’s choose navigator and we can drag it to the top let’s move up to the top here we have it so let’s put the shortcode in this section we can come over to the elemental bar on the left top right hand corner just click on that hamburger icon let’s type in the ear that says search widget type shortcode here it is let’s select it and we can drag it so now that we have the shortcode here we could come in the ear that says enter your shortcode let’s piece the short code that we copied there you go so we now have our availability search form but this would look much better if it was horizontal across the top of this window let’s close the navigator to accomplish this we need to use a little bit of CSS coding now this code come compliments the team at WP Learning Lab I’m gonna leave a link in the description of this video where you could get this code from but let’s change that so to change the CSS code we will go to advanced and we would come down to custom CSS however will be unable to paste this because we’re using the free version of Elementor to pace the custom code we would need to get the pro version now I’ve already purchased the pro version but let me show you how you could get the pro version if you go to elements of pro elemental pro comes in three packages you have the personal for one website at $49 you have the three sites for $99 and this is basically unlimited for $199 well you probably just need one side so you could get element of pro for $49 and you will get a lot additional features not just customized in CSS but let’s activate element of pro we’re gonna go back to our back-end we’re gonna go to plugins and I’m going to activate element of pro all right now let’s go and paste that customization code I can now refresh my window just before I do that let me update the shortcode that we added and now I could refresh the page so here we are on the front end of our website let’s go and modify the CSS code so let’s click on the search form then let’s go to advanced and we can scroll down to custom CSS and you’ll notice we can no modify it we’re gonna copy the code and again I will leave this in a link in the description of this video and I’m gonna paste it here now there you go this looks much better but we’re gonna do a little bit more than that we want to raise this up slightly so it is just covering part of the image and we’re gonna change the background color so it fits our brand color to do that we will select the entire form by choosing the edit section go to advanced and we’re going to adjust the margin so let’s unlink it and we’re gonna reduce the top margin so as we reduce it will notice it is slowly moving up on the form let’s change this number let’s say 150 great now we could hardly see some of the text so we want to change the background color to do that we will select the form just the Edit column section we will go to style and we will choose the background color let’s click on classic and where we have color we’ll click on the button to edit it and we will paste our brand color I would like to use the secondary color so that’s the color that when I hover my mouse over the book button or over the search button you were gonna see it so I’m gonna come into the box for the color and paste it so now I could see the difference between the text and the background color however when I hover my mouse over the search button I could barely see the button so I want to change the opacity of the background just slightly so that we could get a contrast here so here it is this slider here is where we could change the opacity so you could take it all the way down where it’s just slightly singing the box but let’s bring it so that there is enough contrast so we could read our text properly but at the same time we could see it difference with a background color now that looks much better so there you go let’s update it and we could preview our website we now have our search form on the home page of our website but with that being here no we don’t need this button so let’s remove it we could go back select this button but instead of deleting it we will hide it let’s look at how we could do that if we go to advanced and we’ll see responsive you will see the option to hide it on desktop hide it on tablets and hide it on mobile however what you also notice when we change the responsiveness to tablets and mobile and that’s one of the things I like about the Astra theme it really allows you to build your website thinking about your mobility at the same time so if I choose tablet you’ll notice now how our search form is not looking that great so I don’t want our search form to be shown on a tablet and let’s look at mobile same thing not looking that great what we can do is hide the search form on the tablet and mobile and just leave the button so let’s do that we can go back to desktop so for the search availability button we will hide it on desktop but for our search form we will go to responsive and we will ensure it’s shown on desktop but we will hide it on mobile devices so on tablet will hide and on mobile will hide and now we could update so let’s take a final preview of our website we can click the preview changes and the button is gone this looks much better since there we go we’ve now been able to add a search form to our website we could now click on the check-in dates choose a date we’ll leave it on checkout for the next day and it’s one adults and we can click search and we could know check all accommodation and book we’ve just looked at how you could make your website more user-friendly if this video is useful to you please remember like subscribe and click that notification bells when I post more videos like this you’ll be notified I’ll see you in the next one