CTA button & Visual Hierarchy
What’s a CTA button and why is it important?
A call-to-action (CTA) button is an interactive element of any user interface both web and mobile: its major aim is to induce people to take certain actions that present a conversion for a particular page or screen, for example, purchase, contact, subscribe, etc.
Some may think that a sufficient call-to-action button design applies only a big size and bright color to accomplish all its objectives. Still, there are much more aspects ensuring the effectiveness of CTAs. Let’s see what they are along with the practical examples of their appropriate usage.
What makes a powerful CTA button design?
Size
Since CTAs’ prior goal is to draw users’ attention, designers usually try to make them stand out among the other buttons on the screen, especially via noticeable size.
Large buttons have high chances to be noticed and clicked still you have to keep some limits. Market leaders often provide recommendations on the effect sizes of buttons in their guidelines. For example, Apple says that CTAs in mobile UI should be at least 44Х44 pixels, while Microsoft recommends 34Х26 pixels.
Color and shape
To make the buttons even more noticeable it’s vital to choose sufficient color and shape. The moment our eyes perceive color, they connect with the brain which gives signals to the endocrine system releasing hormones responsible for the shifts in mood and emotions. Psychology science has specific branches devoted to the influence of different colors and shapes on our consciousness.
Color Meanings:
- Red. Confidence, youth, and power.
- Orange. Friendly, warm, and energetic.
- Yellow. Happiness, optimism, and warmth.
- Green. Peace, growth, and health.
- Blue. Trust, security, and stability.
- Purple. Luxurious, creative, and wise.
- Black. Reliable, sophisticated, and experienced.
- White. Simple, calm, and clean.
CTA: buttons and background colors should be contrasting enough so that CTAs would stand out from the other UI components.
Colors have their own hierarchy which is defined by the power of influence on users’ mind. There are bold colors such as red, orange, and black which can easily draw attention. On the other hand, there are weak, or soft, colors like white and cream which work better as a background.
Shape meanings:
- Squares and rectangles meanings: discipline, strength, courage, security, reliability.
- Triangles meanings: excitement, risk, danger, balance, stability.
- Circles, ovals, and ellipses meanings: eternity, female, universe, magic, mystery.
- Abstract shapes meanings: the duality of meaning, uniqueness, elaborate.
Traditionally, CTA buttons look like horizontal rectangles since people got used to perceiving this shape as clickable buttons. In addition, it is recommended to design CTAs with rounded corners because they are thought as they point inside of the button drawing attention to the copy.
What’s Visual Hierarchy?
Visual hierarchy is initially based on Gestalt psychological theory which examines users’ visual perception of elements in relation to each other and shows how people tend to unify the visual elements into groups.
As the copy content is usually a major source of information in UI, designers need to present the data gradually. By segmenting copy elements into different levels designers help users easily go from one piece of copy to the other and perceive the information in the right order.
One more thing to mention is that while creating typography for mobile products, designers are recommended to keep the number of layers within two. The thing is that small mobile screens don’t provide enough space for three levels. That is why the elements of a secondary level such as subheaders step aside to make mobile UI look clean.
Visual hierarchy tools
Copy Content
Efficient and engaging copy content in user interfaces is defined by two equally significant basic criteria: the quality of writing and the appropriate look. Words and visual elements should mutually support each other, exist in harmony and provide organic consistency. So, every single piece of copy should be thoughtfully analyzed and created in a way corresponding to the general design concept and enhancing positive user experience via successful interaction.
Proximity
As we said above, visual hierarchy is built upon Gestalt principles, so designers pay deep attention to the proximity of UI elements. As people tend to unify the visual elements into groups, UI components need to be placed that way so users could categorize them. If some elements are placed in a certain proximity, users automatically perceive them as a group. Designers can use proximity as a tool which helps to divide the content into subcategories.
Repetition
If people notice that some elements look similar, they may automatically unify them into one group. That’s how repetition works. Designers repeat some patterns for different objects on purpose so that users could unify them. For example, a website with a great amount of body copy at a page can highlight the most important sentences with another color. Seeing the sentences in this color users can follow from one key point to another.
This article is quoted from the source below:
