Tips for Smartphone LPO｜Improvement Points to Raise CVR with Mobile UI
Published:
Last Updated:
Category: SEO & Content
Published:
Last Updated:
Category: SEO & Content
Authors: Shusaku Yosa
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
A clear explanation of the difference between MEO and SEO from the angle of what each optimizes and how it works. A prac...
A guide to using the strong tag correctly, from the angle of its difference from the visually similar b tag and how to c...
A practical guide to HTML SEO from the angle of document structure, semantic markup, and correct coding. For anyone who ...
