Tips for Smartphone LPO｜Improvement Points to Raise CVR with Mobile UI

On many landing pages, smartphones now account for the majority of inflow. Yet when you display an LP built around how it looks on PC as-is on a smartphone, difficulty of operation causes you to lose conversions. This article focuses on smartphone LPO (Landing Page Optimization) and explains, concretely and from the standpoint of raising CVR, the improvement points unique to mobile UI.

Why Smartphone-Specific LPO Is Necessary

Smartphones and PCs differ greatly in both screen size and how they are operated. Whereas a PC handles a wide screen with a mouse and keyboard, a smartphone operates a narrow, vertically long screen with a single finger. If you ignore this difference and serve a PC-based LP as-is, friction arises—buttons are hard to press, text is hard to read, form input is tedious—leading to abandonment.

The essence of smartphone LPO lies in redesigning the UI to match this difference in operating environment. The general LPO way of thinking—analysis methods and how to run A/B tests—is common, but on smartphones, improvement premised on the constraints of "one hand, thumb, vertical screen" is essential. From here, we look at those improvement points unique to mobile.

Make CTA Placement Easy to Operate with the Thumb

The center of smartphone operation is the thumb. When holding it in one hand and operating with the thumb, the range that comfortably reaches is limited to the lower and central areas of the screen. This easy-to-reach area is called the thumb zone, and placing elements that lead to conversion here is the basics of mobile LPO.

Put Important Buttons at the Bottom of the Screen

Main CTA buttons, such as sign-up or inquiry, become easier to operate when placed at the bottom of the screen, where the thumb naturally reaches. Conversely, the top corners of the screen are hard for the thumb to reach, and placing important actions there makes the effort of re-gripping a cause of abandonment. It is important to be mindful of positions the user can press without moving their finger much.

Consider a Fixed, Sticky CTA

On a vertically long smartphone LP, the CTA flows off-screen as the user scrolls. If you provide a sticky CTA fixed at the bottom of the screen, the path to conversion always stays in view no matter how far the user reads. However, covering too much of the screen makes the body hard to read, so it's important to keep the height low and confined to a range that doesn't get in the way of the content.

Design Tap-Friendly Buttons and Links

Because smartphones are tapped with a finger, the precision of operation is lower than with a mouse click. Buttons that are too small or links that are too close invite mistaps, causing stress and abandonment. Securing a size and spacing that can be pressed accurately with a finger is essential.

Secure a Sufficient Tap Area

Give buttons and links enough size to be pressed comfortably with the pad of a finger. Even if the visible text is small, taking a wider tap area itself greatly improves ease of pressing. Especially for CTA buttons, taking margin around them while using the screen width for an easy-to-press size is effective.

Leave Spacing Between Elements

When links and buttons are densely packed, you end up pressing the adjacent element by mistake. Leave sufficient spacing between elements that are operated, making a layout where mispresses are unlikely. In particular, when there is another link near a form's submit button, it invites unintended abandonment, so care is needed.

Design Information to Suit the Vertical Screen

Smartphones are vertically long, with limited width. Shrinking a PC's side-by-side layout as-is makes text small and hard to read. Premised on vertical scrolling, a design that stacks information in a single column from top to bottom is the basics.

Convey the Value Fully in the First View

The first single screen on a smartphone is narrow, and if you can't draw interest here, the user abandons immediately. Condense into the limited area a catchphrase that concisely indicates what the page offers, and a visual that intuitively conveys the value. Also placing a CTA within the first view, so the user can act on the first screen, is effective.

Arrange Font Size and Whitespace for Readability

On smartphones, text that is too small or cramped line spacing raises the burden of reading. Secure a body size readable without zooming, and provide appropriate whitespace between lines and paragraphs. Keeping each sentence short, so the key points enter the mind along the flow of the gaze, is also effective for getting people to read to the end.

Optimize the Mobile Form Input Experience

The final gate of conversion is the form. Because text input on a smartphone takes more effort than on PC, how much you can reduce the input burden greatly affects the completion rate.

Narrow Input Fields to the Minimum

Because input on a smartphone is itself a burden, narrow the number of fields to only those truly necessary for conversion. Cutting optional fields, not asking for information that can be deferred to a later step—the more you reduce the amount to input on the spot, the higher the completion rate. A form with many fields is, by itself, a reason for abandonment.

Display a Keyboard That Matches the Input Field

Make the appropriate keyboard display automatically according to the input content—a numeric keyboard for the phone-number field, an email keyboard for the email-address field, and so on. By specifying the input method suited to each field, you save the user the trouble of switching keyboards themselves, making input smooth.

Make Autofill and Error Display Considerate

Supporting address auto-completion and the browser's autofill can greatly reduce input effort. Also, convey input errors clearly on the spot, making it clear at a glance where and how to fix them. Rather than returning errors all at once after submission, a design where the user can notice during input prevents abandonment.

Don't Take Smartphone Display Speed Lightly

Smartphones often face unstable connection conditions, and slow display connects directly to abandonment. In particular, if the first view is slow to display, the user leaves before seeing the content. By compressing images appropriately, adopting a mechanism that doesn't load until needed, and reducing unnecessary elements, you can lighten the perceived speed. Improving display speed is a foundation that affects CVR just as much as UI refinements.

Summary

The tips for smartphone LPO lie in stepping away from PC-based thinking and redesigning the UI to match the mobile operating environment of one hand, thumb, and vertical screen. CTA placement mindful of the thumb zone, tap-friendly buttons and spacing, information design suited to the vertical screen, low-burden form input, and light display speed—all of these are refinements for reducing friction for smartphone users and smoothing the path to conversion. Start your mobile LPO by first actually operating your own LP on a smartphone and checking whether there is any difficulty pressing or reading.