Trends come and go, but some of them are built to last. Once you start leveraging microinteractions, there’ll be no going back!
Read on to find out what microinteractions are, why they matter, best practices, as well as 15+ stand-out WordPress templates with UX interaction design at the center.
What Are Microinteractions?
Microinteractions are small, subtle moments where the user and design interact. Even if you haven’t been aware of them before, they’re all over the apps and websites you use. They can be used to quickly showcase how a user should interact with a site without using any words.
“Microinteractions convey system status, support error prevention, and communicate brand. They are initiated by a trigger, are single-purpose, and can make the experience engaging.” – Alita Joyce
A good example is a website’s scroll bar to show how far a user has progressed down a page and subtly show the action that’s required. Microinteractions like this remove the need for the word ’scroll’ being used in the right-hand side of every page!
Why Use Microinteractions?
There are lots of reasons to introduce UX interaction design into your websites, such as:
- Increasing user engagement: By showing people how to interact with your site, you also encourage people to act in a certain way.
- Lowering cost: It can be a relatively straightforward way to increase user engagement, especially if you use microinterations from a web design template.
- Giving feedback: You help to guide the users in their web experience, showing them how they’re expected to interact.
- Making your site more emotive: These slight movements and interactions actually have mighty power in encouraging users connect with your site. Giving small visual cues can make visitors feel like they’re having a two-way conversation rather than being a passive observer.
- Creating a memorable experience: With so many websites out there, you want to do everything you can to stand out from the crowd! Microinteractions can offer a unique, memorable experience as well as help to create an identity and personality that users will associate with the brand.
Microinteraction Design Best Practices
Whether you’re designing microinteractions from scratch or selecting high-quality web templates with microinteractions, there are a few things to remember:
- Simplicity is key: If you overcomplicate the animations, you can overwhelm or confuse the user. Try to remove any unnecessary elements.
- Predictability isn’t always a bad thing: Time is short and microinteractions can form a pivotal part of showing users how to interact with your site. If used on a form, for example, they can explain which piece of information is needed and when.
- Be consistent: Similarly, map out your interactions and check you use the same type for specific movements on your site. If different microinteractions are used to indicate the same action, it can risk confusing your user.
- Fast loading time: Microinteractions should offer feedback straight after the user has scrolled or clicked. If it takes too long to load, users might not connect it to the way they’ve interacted with your site and therefore it loses relevance.
- Remember purpose: As with all design, don’t just add a microinteraction because you can. It should either be there to surprise and delight (and therefore entertain), or reinforce and show how a user should engage with your site. Be strict on yourself!
Examples of UX Interaction Design
Once you know about microinteractions, it will be virtually impossible to find a modern website that doesn’t use them! Common places to find microinteractions include:
- Carousels: Interacting with sliders, such as swiping or clicking to see more information or dismiss content.
- Buttons: Clicking to spark actions, such as ’contact us’ then directing to a contact form. Color changes or animations may also be used to show that an action has taken place.
Button interaction by @takaneichinose
- Loaders: Animations or progress bars appear when the user is waiting for information to load.
Liquid loader interaction by @aaroniker
- Navigation: When users hover over content on menus to reveal submenus or further info.
- Notifications: From when a notification appears to the way it disappears or changes when a user clicks or dismisses it.
WordPress Templates With a Focus on Microinteractions
Now you know more about microinteraction and the way UX interaction can improve your web design, read on for my pick of 10+ WordPress templates with stand-out microinteractions.
1. Animal Rescue - Shelter Charity WordPress Theme
Check out the clever use of animation within the Animal Rescue WordPress demo. The Wildlife Rescue theme, for example, uses microinteraction when users hover over the navigation bar, with colors appearing over the highlighted words and a dropdown appearing over chosen sections.
The call-to-action buttons also switch to a 3D effect when the user scrolls. Imagery zooms in slightly when hovered over it.
2. Kidscool - Children, Kids & LMS School WordPress Theme
Microinteractions can play a really pivotal role in websites aimed at younger people (and their parents) as they can add a sense of fun! Check out the PreSchool Demo within the Kidscool template and you can see some great microinteraction examples.
The windows of the animated rockets on the homepage, for example, change color when the user scrolls over them. There is also a rocket at the bottom of the scroll bar and when the user hovers over it, it moves slightly as if it is getting ready to blast off!
3. Drake - Personal Portfolio WordPress Theme
If you’re after a portfolio WordPress template for yourself or a client, then Drake is a good one to have up your sleeve! If you pick the Main Demo template, for example, content blocks such as the ones within the ’My Advantages’ section are highlighted in green as the user scrolls. The feature gives a nice sense of uniformity and reassures the user that they’re interacting with the site in the right way.
Also check out the secondary scroll bar which uses iconography to signpost key website sections. The icons turn green when the user is in each section, showing visitors how much content they still have left to see.
4. Lumi - Tech Startup WordPress Theme
Launched in February 2023, Lumi is a relatively new WordPress template but already comes packed with features. The Mobile App demo, for example, uses subtle microinteractions like the calls to action changing color when the user hovers over them—this also helps them to stand out in the user experience. The cursor is attached to a green circle which is a refreshing touch.
5. Uncode - Creative & WooCommerce WordPress Theme
Looking for a shopping WordPress template with microinteractions? It’s your lucky day! Check out the Shop Ajax demo, for example, and users can press the heart icon to favorite items—the icon then changes color to show they’ve successfully interacted with the product.
Also, if a user scrolls over a product that is available in other colors, small circles of alternative colors also appear without clicking. It’s a clever feature that saves visitors time and may just help to convert more sales!
6. Nvisor - Business Consulting WordPress
Released in March this year, Nvisor is a ThemeForest newcomer but it has already picked up several five star reviews. The call to action on the header changes color via an eye-catching diagonal fade. Take a look at the team section too and the names also change color when the user scrolls. Features like this not only help the design to stand out, but they also tie the design together.
7. Masterstudy - Education WordPress Theme
With more than 18,000 sales, Masterstudy is a popular education WordPress theme! There are 18 demos to choose from so you can base your website around whichever one suits your business best. The Classic LMS, for example, use microinteractions across the site, including when the user scrolls over the ’teacher courses’ section to reveal more information without clicking.
Like many of the best WordPress templates, the navigation bar is also a great example of UX interaction design. Simply scroll over the bar to reveal a secondary navigation to help you find where you want to be!
8. uDesign | Multipurpose WordPress Theme
With over 52,000 sales, uDesign has plenty of fans! With 57+ pre-built demos covering businesses as varied as farm stores, yoga studios, and fashion outlets, it’s also a great option for a wide range of sales.
The Main demo, for example, uses microinteractions in the main call to action—see how the heart twists around under the cursor. One really useful feature of this demo is the arrow in the right-hand corner. A single click will bring the visitor back to the top of the site, but take a look at the circular progress bar that surrounds the arrow—it shows you how far you’ve progressed down the site with a simple symbol.
9. Cariera - Job Board WordPress Theme
Published back in 2017, Cariera has been around for a while but is updated regularly to make sure it has all the features you’d expect from a modern WordPress theme. As users scroll over categories, they change color which in turn encourages people to click to further information. Users can also favorite latest jobs to remind them to return later to apply.
10. Kalles - Versatile Elementor WooCommerce Theme
With more than 30 homepage demos to choose from, you’re spoiled for choice when it comes to Kalles! The Home Fashion Default, for example, uses interesting iconography such as spinning arrows over product imagery to allow users to compare to other items.
There are some great other subtle details like icons across from the navigation bar to show information such as search, profile, favorites, and shopping basket. When the user hovers over each icon, they change color.
11. NowaDays - Multipurpose WordPress Theme
Like many of the best WordPress templates, Nowadays comes with loads of useful features like unlimited colors, 800+ Google fonts, free updates, and WooCommerce support.
There are 25+ designed layouts to help you create your perfect site too. Check out Homepage 01, for example, which uses microanimations in various places including below the headers to each section. As the user scrolls, the headers become underlined, which helps to draw attention to them.
12. Squaretype - Modern Blog WordPress Theme
Are you a blogger or are you creating a website for someone who is? Then... Enter Squaretype! The Squaretype Main Demo, for example, cleverly uses UX interaction design across the site, including play buttons in the corner of every content piece which turn into pause icons when the user hovers. Also notice subtle features such as the writers’ names becoming underlined as the user scrolls.
13. MyDecor - Elementor WooCommerce WordPress Theme
Are you building a website for furniture shops, organic food stores, fashion outlets, or electronic stores? Then MyDecor may be the WordPress template for you! The Home 01 layout, for example, uses microinteractions throughout—just scroll over imagery to see the photos twist slightly. When users move over icons, they waggle too! And finally, an arrow at the bottom right of the page changes color under the cursor.
14. Tastyc - Restaurant WordPress Theme
This WordPress theme has been designed for foodie businesses including restaurants, coffee shops, catering companies, and pubs. The 01. Restaurants / Cafes demo, for example, uses an animated icon that almost looks like a mouse to show the user how to interact with the site. Call to action buttons also zoom slightly when a visitor hovers over them.
15. BAUEN - Architecture & Interior Elementor WordPress Theme
Take a look at this stunning architecture and interior WordPress theme! The demos are all beautifully designed, with well-organized content against eye-catching photography.
Check out the subtle arrow in the circle the bottom right-hand corner—users click the arrow to return to the top of the site and the circle fills to show how much of the content has been viewed.
16. Upsidedown by Automattic (Free WordPress Theme)
If you’re after a free WordPress theme with microinteractions, then Upsidedown could work for you! This copy-heavy site is eye-catching in its simplicity, and could work well if you’re looking for a site to list key information such as events or recent book releases.
Free WordPress themes don’t tend to have as many features as premium ones, but... well, they’re free! When users hover over content in this theme, it becomes highlighted—a subtle but useful way to use UX interaction design!
Over to You!
Now you’ve seen my pick of 15+ of the best WordPress templates using microinteractions, it’s time to build your own website. If you haven’t found exactly what you’re looking for, then head to ThemeForest to see the full collection. Happy building!
By
