Disclaimer: This article is going to make some Web Manager users jealous, but don’t worry! Everyone will have access to these tools soon!
So, you went to WordPress training and found out that your Web Manager dreams came true… we gave you a bunch of new tools! With your department’s move to WordPress, you can now add videos, accordions, buttons, and more! I’m sure your first instinct is to use every single one of these tools on the first page you get to as a way to celebrate. But let’s not get too carried away. Just like the Stan Lee quote I use in our training sessions: “With great power comes great responsibility!”
In this post we will be looking at the best use scenarios for some of our new tools, so you can build your pages like a pro. I will be writing this with the assumption that you already know how to add these to your pages. If you need a hand getting started, check out our WordPress tutorial page and/or send me a message at firstname.lastname@example.org.
Videos are great ways to creatively disseminate information and should be used to support the information that is already on your page. Users should be able to know what the video is about before they commit to watching it; and when they do, they want the information they came for in a short and “to the point” video style. For users with disabilities, it is important to make sure the content covered in your video is represented in text format (either in the text on your page or in a closed caption transcript attached to your video). Try to limit the number of videos on a single page to 2 maximum.
More on using videos: https://www.nngroup.com/articles/video-usability/
The best time to use a button is when users have an action to complete. Some examples of this are “Apply Now,” “Register,” and “Donate.” Regular text links should be used when the desired result is to navigate to another page without any sort of action taking place. We typically add in right-aligned primary (blue) buttons the most on pages here at LU.
More on using buttons: https://balsamiq.com/learn/resources/articles/buttons_and_links/
Accordions are helpful when users only need to access a few pieces of content on a single page. This helps users find what they are looking for quickly and also reduces the amount of scrolling needed on mobile devices.
When most of the content on your page is needed by users, it is better to avoid using accordions. Users are willing to scroll through a long page when all the information on the page is relevant to what they are looking for. Asking them to click through several accordion tabs to find the information they need hurts the user’s experience.
If a page is extremely long and contains a lot of information from various topics, breaking the content up into several pages may be a better approach. If you go this route instead of using an accordion, make sure you resist the temptation to separate your content so much that pages are almost totally empty.
More on using accordions: https://www.nngroup.com/articles/accordions-complex-content/
Tabs are another helpful tool when you need to group information together. Just like accordions, there are some guidelines to consider when implementing these on your pages. “Use tabs only when users don’t need to see content on multiple tabs simultaneously.” (Nielsen Norman Group). If users need to compare content on multiple tabs, asking them to click back and forth is not the best experience for the user. Stick to one row of tabs with only one or two-word labels. If you need more tabs or longer titles, it is a good sign that a set of tabs may not be the best tool to use.
More on using tabs: https://www.nngroup.com/articles/tabs-used-right/
Carousels are also occasionally referred to as sliders (and no, I don’t mean the little hamburgers 🙂 ). They are great for putting multiple pieces of content in a small amount of website real estate. Testimonial slides and photo galleries are great ways to incorporate these on your website, but there are some other things to consider.
Users often scroll right past tools like this without taking the time to click through to see all the content within the carousel. Because these are often overlooked, don’t put important content in a carousel if it needs to be seen in its entirety by users.
If you are going to use one of these, try to keep these under 5 slides and keep your best images or testimonials towards the front where they are more likely to be seen.
More on using carousels: https://www.nngroup.com/articles/designing-effective-carousels/
This tool acts as a single accordion without a pronounced tab. Instead, users will have a little “read more” text link that they would click and expand to see more content. Although this is sometimes helpful to condense a large page, we don’t typically use it because it doesn’t give any context to what will be displayed. This causes poor accessibility for users who rely on screen readers to know what is on a page.
If you choose to use this tool, keep in mind that the content you are putting within the “Read More” section may never be seen by users who are quickly scanning your page and not noticing your link. Take some time to consider if the content you are stowing away in the “Read More” section is truly necessary for your page. This will help you determine if using this tool is even necessary.
Hopefully, these tips will help in your pursuit of professional and functional websites. Remember that the new tools in WordPress are useful when used in an appropriate manner. Always think about the user’s experience and journey through your pages. Is using an accordion going to improve their experience? Does your page content need to be edited instead? Let us know if you have any questions or need help using these new tools.
Web Content Specialist – Liberty University
Brian helps lead our WordPress transition and training efforts for the Web Content team.