Once you’ve defined your content and mapped out the basic layout of each page, you need to add in all the extra elements that your website will need – remember that the page should only ever contain the elements a user might need to support them in their task. These can include:
• Calls to action. CTAs can take a variety of shapes and forms, from in-text links to large buttons.
• Forms. These are interactive fields where users can enter their contact details or other information, for example, to sign up for a newsletter or enter a competition.
• Search. Many sites can benefit from having a search function, both to help users navigate and to make finding specific information easier.
Calls to Action
Successful CTAs are simple, quick, clear actions that don’t require the user to do anything scary or make a commitment. They should always do exactly what they state to instil confidence and clarity. It’s all about managing the user’s expectations – do they actually go where they think they will, or perform the action they expect?
Positioning
The primary CTA should usually appear above the fold to capture the attention focused here. Other CTAs can appear below the fold, and the main CTA can also be repeated lower down.
Prioritisation
A single web page can be built around one CTA, or could incorporate a wide range of possible desirable actions. This all comes down to what the page and website overall is seeking to achieve, based on the business requirements.
When multiple CTAs are used, there should be one primary one that stands out strongly and the others should be more muted, playing a supporting role. CTAs can be differentiated through colour, shape, placement and size. The less choice, the better.
Clickability
Any CTAs that can be clicked must look ‘tactile’, or touchable. This means they must stand out somehow from the background and from static elements. One approach is to make the button look like a realbutton, standing out from its environment. Another train of thought advocates for the ‘flat design’ approach as a more elegant and modern expression of this.
Quantity
Finally, be sure not to overwhelm users with too many choices. Stick to one central CTA per page, making it obvious to users what the main goal, action or outcome of the page is.
Forms
Forms are extremely useful tools for gathering user information and encouraging interaction on the site. Users are generally familiar with them and have some experience filling them out, and there are lots of web conventions that govern how these should be set up. As a general rule, the shorter you can make your form, the better. The fewer fields a user has to fill out, the more likely they are to complete the process.
Steps and sections
Simple forms with only a few fields can be assembled as a series of boxes. For forms that are longer, for example, those in eCommerce checkouts or complex registration processes, it makes sense to split them up into manageable portions – and manage a user’s expectations by clearly indicating what the next step is.
Relevance
Simplicity is a key consideration – forms should be as short and clear as possible. The effort must be equal to the reward gained. All of the fields included must be clearly relevant to the purpose of the form, otherwise the user may get confused or suspect that you are harvesting their information.
Assistance
It is a good idea to include help for users filling out forms. This is especially the case where a specific field requires inputs to be entered in a certain way – and doubly so for password fields with special rules. Users will not instinctively know the rules associated with specific fields, so you must give plenty of guidance along the way.
Validation means giving the user feedback on the inputs they have submitted – whether correct or incorrect. Validation can happen at two points – after the user has submitted the form, or during the process of filling out the form. The latter, called ‘live inline validation’, usually results in a much better user experience as the users know that their information is correct before submitting the form.
Search has three useful functions on a website – not only does it help users to find specific things, it also serves as an essential navigation aid for larger sites, and collects valuable data from keyword research about what the user is looking for. For the most part, the way the search functions is created by the web developer, so we won’t go into any technicalities here. From the UX practitioner’s perspective, there are some important non-technical principles to bear in mind.
Positioning
Search will either be the primary starting point for your site, or it will be a useful additional tool. In the former case, for example, on a large eCommerce site such as Amazon, the search tool should be positioned centrally and visibly to encourage the user to use this as the main navigational tool. In the latter case, best practice dictates that it should be in the top right corner, or easily accessible in the sidebar.
Accuracy
The better you can interpret what your user is searching for, the more relevant and accurate the search results can be. Google works very hard to fine-tune its search algorithm to ensure that users don’t just get what they searched for, but what they actually wantedin the first place.User research can suggest why someone would search your site in the first place, and what they would typically be looking for. Popularity and recentness of content are other key considerations.
Results
When it comes to displaying search results, there are a few key questions to ask:
• How many results should be displayed (per page)? Ten to 20 results per page is generally a good benchmark.
• What order should results be in? Most popular first? Cheapest? Newest? Closest match? This will depend on the nature of the site.
• Can results be filtered? Some websites allow users to do a second search constrained to the results of the first one.
• What happens if there are no results? If no search results are found, this should be stated clearly, followed by a list of the closest match of content to the search query – it’s quite possible the searcher didn’t know the exact term from what they are looking for or made a typo (though the site should be forgiving of these).
