Landing Pages: The Complete Guide to Effective UX Design
What do Landing Pages do?
All online experiences should end in action, and landing pages are the moment the excitement your campaign generated crystallizes into a leap of faith. From simple ‘buy now’ buttons to more complex experiences, landing pages represent a commitment or decision from the visitor.
It is where people “land”. They are excited and curious, but are they willing to take the next step? This consideration makes landing page design a top priority when designing any kind of campaign or online experience. Sometimes it takes a little experimentation to get it right.
Motivating users to click, buy a product, fill out a form, or any other action means creating trust and confidence. The choice or commitment the user is making and the reward they get should be clear, and they should be able to take the action easily, on any screen or environment.
The success of the page depends entirely on people taking action, which will drive the strategy. Each landing page has its own purpose, function and audience, which constrains your design, depending on what the landing page is used for. These choices call for bursts of creativity but also intuitive design. Here are some best practices in building engines of action.
How to Ideate, Prototype, and Design Effective Landing Pages
One of the most evocative concepts in conversion design is the idea of a “information scent.” That’s the idea that site visitors follow a scent of the information they want as they navigate through the pages of a website’s landing pages.
At the ideation stage of creating a new landing page, designers should lay out the trail that they want visitors to follow. Then, during prototyping, you can assemble the most effective elements to engage conversion kicks at turning points.
- Focus on your core services and products
It’s a different world than it was even a few weeks ago and the user has changed. Make sure your offerings are evolving with them. Before you begin the design process, the team has to come together around a coordinated vision. Landing pages can help you continually articulate the core value prop in your service and product statements and to test it fast and often with your target audience. The landing page is the fast way to convey that message without requiring a full site redesign. Can you encapsulate your offering in a short headline, brief description and clear, unambiguous call to action?
- Consider your customer journey
A landing page may be the final destination of a campaign or online experience, but it may represent any number of inflection points in the customer journey. When the customer is ready to take action to learn more, take the next step or join a newsletter list, the landing page should facilitate their action with the least possible friction or difficulty. When they are ready to take action it should be immediately apparent how to do so and what the result will be.
How Effective UX and UI Elements Can Move Customers Along Their Journey
The customer journey is not a straight line. Viewers drop off, come back, bounce around from page to page and often seek outside input before taking the next step. The more effective your UX and UI elements are, the less they will need assurance from online reviews or friends and relatives. Apply design elements that reduce friction and guide users along to the next step.
- Practice Effective Page Layout and Design
Visuals go directly to the emotional core of the buying decision in a microsecond. The best landing page is simple and clean, providing a clear path to the visitor. While it has to communicate a simple message, it must also strike the right tone and mood to appeal to the user without overwhelming them. An effective layout is visually appealing without being too busy. Users seek familiarity, so small departures from the norm can make a big difference, and A/B testing will help you learn what visual vocabulary appeal to the audience you are trying to reach. The core benefit should be clear to the user and clearly linked to the action.
- Plot Out Your Copy and CTA Placement
What copy and language are you using? What is your offer? These will drive
All of your design choices, so lay down the basic formula and then choose the elements that support the language and intent. For example, a warm invitation requires a different style then a more formal offer. The purpose of copy and CTA is to reinforce the decision they have made when they landed on the page, and drive them to take action.
- Don’t Forget About Mobile Responsive Design
Mobile access to the web passed laptop and desktop browser access several years ago. Still many designers tend to start with a wide screen format and then subtract elements to make it work on mobile. We strongly recommend the opposite approach – starting from a mobile responsive design template and then building progressive enhancement for the larger screens. Mobile first design prioritizes the mobile user, which ensures the page is viewable in any environment. It’s best to consider the customer journey and what kind of device the user is likely to be using. Testing can ensure that the experience is appealing and functional on any device.
- Enable Users to Navigate Among Your Landing Pages
In a recent survey by Google-partner Wordstream, 40 percent of landing pages contain 1-3 links that lead viewers off the page. The number one destination for that link is the company homepage, connected to a logo. The problem is that once they hit the home page, you have lost the primary value of the landing page, which is to tell you where the viewer came from. There are arguments for and against additional links, but make sure that your primary focus is a link to another landing page that keeps your origin data clean.
5 Examples of Landing Pages That Convert Users
The landing pages with the best conversion rates balance five design elements for maximum impact: emotional images, appealing typography, strategic white spaces, motivational colors and relevant CTAs. Take a look at some of the best in the field.
- Emotional Images
Some images are purely functional while others pack an emotional punch. Landing pages from Apple are designed to focus your attention on the devices using repetition and stark background color differentiation. You can do more with less when you start from the emotion you want to convey, and when you have a beautiful product.
- Appealing Typography
Even a small family business can become a major player on the web by mastering the art of typography. Busy Beaver Button Co. shows how many different font and style choices can coexist on a tiny landing page without being distracting.
- Strategic White Spaces
White space, or in this case gradient space, can make all the difference in the world. The BorderBuddy landing page demonstrates how to eliminate the hassles of transporting goods across international borders with a clean line of white text, two CTA buttons and a thumbnail. Not only is it mobile friendly for people on the move, it is as simple as the product promise.
- Motivational Colors
There’s a lot going on in the landing page for Gift Rocket, a site for sending cash gifts online. Instead of boring the viewer with details, this landing page conveys the core concept in a strong, central image of a rocket, surrounded by color-coded gifts. The colors are soft enough to not distract from the CTA, but dynamic enough to grab the viewer’s attention and stand out from the crowd. The range of colors suggests there’s something for everyone here.
- Relevant CTAs
The evolution of Dropbox landing pages is a lesson in how to deploy CTAs that drive action while occupying minimal screen real estate. Software for storing documents in the cloud could be a bit complex to explain, but they do it in three words: Your Stuff, Anywhere. With the extra space they can add two CTAs. See how Dropbox CTAs have changed over time to attract more enterprise clients.
Use the Best Tools for Prototyping and Design
You don’t have to reinvent the wheel to excel at building landing pages. The best tools on the market for prototyping and design give you the initial framework for your landing page and bring your team together around a clear vision of the goal.
Rely on UXPin for real-life prototyping tools and show your team how your landing pages will come to life. If a picture is worth a thousand words, an advanced collaboration tool like UXPin is worth a thousand pictures. Sign up for a free trial today and start building website landing pages that drive action. .
