Call to Actions
In the context of American reading patterns, it is advisable to position the primary call-to-action (CTA) on the right side of the screen, or when buttons are stacked, the primary button should be on the bottom. This approach aligns with the Gutenberg Principle, which asserts that the natural flow of reading gravity follows a downward direction. By placing the CTA at the bottom, users can quickly access it by scanning downward, minimizing the need for additional upward scrolling. Conversely, when the CTA is positioned at the top, users are required to scan downward and then upward to interact with it, potentially causing friction.
The concept of primary and secondary CTAs plays a crucial role in optimizing user engagement.
The primary CTA serves as the focal point, encouraging visitors to take the most desired action that leads to conversion. On the other hand, the secondary CTA provides an alternative action for prospects who may not be interested in the original offer. Typically less prominent than the primary CTA, the secondary CTA can still be strategically placed to engage and guide those prospects towards a successful conversion.
Primary and secondary CTAs can be categorized as either complementary or contrasting, depending on their relationship to one another. Complementary CTAs work under the premise that not everyone will be interested in the same offer. While the primary CTA represents the ultimate desired outcome, the secondary CTA can be instrumental in further directing prospects towards a successful conversion by offering alternative options or paths to engagement.
Tactile elements are crucial in mobile design.
Mobile design takes into account the preferences and limitations of right-handed users navigating with their thumbs. The thumb reach zone, which refers to the easily accessible portion of the screen, plays a vital role. Positioning important buttons, including call-to-action (CTA) buttons, within this zone ensures convenient interaction without finger strain or grip adjustments.
Stacked top primary CTA example
Slower experience
Stacked bottom primary CTA example
Preferred and faster experience
As depicted in the screens above, it is recommended to establish a standard practice of placing primary CTAs closer to the bottom of the screen. This approach prioritizes user efficiency by minimizing the need for users to navigate their eyes downward and then back up to interact with the primary CTA.
The terminal area
The terminal area, located in the bottom right section of the home page, is derived from the Gutenberg diagram. Users' eye movement typically starts from the primary optical area and sweeps across and down the display, ending at the terminal area. Placing a call-to-action (CTA) button in the terminal area takes advantage of this natural viewing pattern, making it easy for users to locate and engage with the button, enabling quick and effortless interactions.
When side by side always right align your primary actions
Placement of the CTA's should exist on the lower right side, allowing users to keep the operation moving on and continuing to the next section and conform to the reading habit that moving towards the right represents carrying forward and transferring to the next one.
Side by side button placement example
Secondary Button
Primary Button
Side by side button content example
Cancel
Sign Up