Six Tips for Designing a MouseOver Landing Page
Motion graphics can enhance any website and help engage site visitors. Hover features show the user something exciting is about to happen and invite them to click where you want them to. Use motion to your advantage on a landing page by highlighting the call to action (CTA) or links to pages that will lead buyers through the sales funnel.
The average conversion rates for landing pages is around 2.35 percent, but that number can vary widely. Your goal is to outpace the industry average and build from there. While there are dozens of factors that go into enticing a casual browser to become a buyer, adding mouseovers is just one element in the conversion equation.
Buttons and images that change when the user hovers over them are visually appealing and create a strong customer experience by engaging the user and adding something unique to the page. The person doesn't have to work quite as hard to see additional information, such as when the hover effect is used for a dropdown menu.
However, you can also make mistakes with a mouseover. Here are six tips for designing a mouseover that works for your site visitors and helps increase your return on investment (ROI) on your landing pages.
1. Add Subtle Color Shifts
Hover effects don't always have to be striking. They can also encompass gentle effects that set off a button or some text. Create a CTA button that changes color when the user hovers over it or some text that turns to bold or becomes highlighted with a mouseover.
The last thing you need is a page filled with mouseovers, as that can irritate your target audience. Instead, focus on highlighting only the most important components of your page and moving the user through the buyer's journey.​​​​​​​​​​​​​​
Fan Studio's landing page is already vivid and eye-catching, so they don't need a lot of hover effects to draw the user in. This mobile app and game design company focuses their attention on the CTA button on their landing page, which starts out as a medium green and shifts slightly to a brighter neon green when you hover over the words "Get a Quote." They also highlight the words "Business of Apps" within their text. As you mouseover the text, the color of those words changes from white to blue.
2. Showcase Important Information
Another idea is to create shifts in the text on your page. This doesn't necessarily have to be clickable information — it can also be things you want to draw the user's attention to. You can do this with color, as seen above for Fan Studio, but you can also use italics, slightly larger type or create more of an animation effect, such as smoke rolling in from the side. Think about what is most likely to grab the attention of users and what your competitors haven't tried yet.
3. Create Easy Access to the Menu
One of the advantages of mouseovers is offering easier access to things such as expandable menus. However, if you don't show the user that your site navigation expands in some way, they have no way of knowing there are additional subcategories and perhaps even sub-subcategories. Think about your customer's experience on your landing page and how hovers can increase the ease of using your navigation.
PBZ Manufacturing offers a mouseover dropdown menu for site visitors. There are six main navigation categories on their landing page, keeping directions simple. However, when you hover over About, Capabilities or Industries, you're offered additional choices to better direct you to the right location.
4. Use a Pop-Up Effect
Think about your landing page like it's a face-to-face sales pitch. If you were standing in front of the consumer, what information would you most want to ensure they had? You'd likely read the person's facial cues and body language to gauge their interest in different products and then give them more detail on the ones they seemed most interested in. When a person lands on your website, they show their interest with the areas where they pause.
You can use mouseovers to your advantage by creating a pop-up box if they hover over a certain spot on your page for more than a few seconds. You can use words or images to create this effect and offer more information on the things the user seems most intrigued by.
5. Design a Game
You can also use mouseovers to create a fun game on your site. This works particularly well for app and game designers as well as creative types. When someone moves their mouse and sees elements on the page change, they realize it's all just for fun. But it also tends to grab them, and they will hang around a few extra minutes. The more you engage site visitors, the more likely they are to stay on your page and see what else you have to offer.
Tomer Lerner is a top designer whose landing page highlights why he's won awards for his work. When you move your mouse around, the geometric elements floating about shift and turn to follow your mouse. They aren't clickable and there isn't any purpose other than engaging the user. But they're fun and interesting and make you want to click the hamburger menu in the upper right to learn more.
6. Include Ghost Buttons
Want to add a bit of mystery to your site or a special secret area for top fans? Ghost buttons aren't visible when the user first lands on the page. However, you can create them so that when the person mouses over them, they suddenly appear.
Ghost buttons give you the option to only highlight one main element on the page at first so as not to overwhelm users. Then, you can slowly add in additional options as the user moves through the elements on the landing page.
small Effects Equal Big Conversions
When it comes to freshening up your landing page design, small effects such as a changing color scheme on a button can have a dramatic impact on how your customers respond. There are many different ways to utilize mouseovers, from a pop-up to a slide-out to a video appearing. Think about the goal of each effect and the action you want users to take, and your hover effects will soon drive your buyer toward completion of the journey rather than driving them away from your site.
Lexie is a graphic designer and UX strategist. She loves taking her goldendoodle on long runs and checking out local flea markets.
Visit her blog, Design Roastand follow her on Twitter @lexieludesigner
Back to Top