Part
01
of one
Part
01
Need to uncover research that helps us understand the best placement for a persistent or "sticky" CTA (especially on mobile)
With as many smartphones as there are being used in the world today, a CTA being placed in the appropriate location is important. When looking at placement according to thumb zone and the Gutenberg diagram, it should be located at the bottom of the screen and either on the right side or in the center. The right side is considered the terminal area where users plan their action.
FINDINGS
The best placement for a sticky "CTA" would be at the bottom of the screen, either centered or to the right. This is based on the "thumb zone" and the "Gutenberg Diagram". While in general people typically are going to touch the center of the screen, it would seem that would be a logical place for a CTA, however on mobile in particular, it's not an ideal place for ease of use. Things to consider when determining location are:
3) Make sure to have whitespace margins- This make the user feel confident they aren't pressing anything in the content of the site.
Natural eye movement tends to progress to the right side of the screen, which makes the choice to put the CTA placement in the bottom right-hand corner of the screen.
Thumb Zone
When looking at the 12 best practice for a call to action information and placement, the best thing to remember is the "thumb zone". The phrase was coined by Steven Hoober. These are the spots that are easiest for the thumbs to reach, making it a popular location and also the most used. Data models suggest that users typically hold phones differently and therefore it needs to be in a user-friendly location for a seamless experience.
Gutenberg Diagram
The other factor to consider for CTA placement is the Gutenberg design. This design is based on reading left to right and up and down. In the diagram, a Z is placed across the screen. The theory states that users expect to take action at both points of the Z on the right-hand side and therefore call to action should always take place on the right side of the screen. The bottom right side is considered the terminal area of the screen. This is where users stop reading and plan their course of action. The bottom right-hand side is a perfect spot for the CTA since users are ready to act.
Other Factors for Better CTA's
In looking at factors besides the theories of where people are going to touch a CTA, it's important to think about what is already working. If you look at criteria like send buttons, next arrows, and submit buttons, they are typically on the bottom right-hand side of the screen. This again makes this location for a logical choice for CTA placement.
Other things to consider with a CTA are its color. Hubspot and Dmix conducted studies with a green and red CTA to see if color affected use. The red had a 21% higher use rate with Hubspot and a 34% higher use rate with Dmix, indicating that color does make a difference.
CONCLUSION
In summary, there are two main theories that suggest the best placement would be in an area that the thumbs can reach as well as either at the bottom right or the bottom center. Both the Thumb Zone and the Gutenberg Diagram are well-used theories. Another factor to the point of putting the CTA placement at the bottom right is that is typically where the submit, next, and send buttons are currently located. Finally, natural eye movement progress from left to right and up and down, so when a user gets to the bottom right-hand side of the screen they are finished reading and ready to select from the CTA.