Path towards Advance Web Designing Part 5 – Call to Action Elements – 4

Rate this item
(1 Vote)
Shape and Size of CTA Shape and Size of CTA

There are some designing tricks and tactics to design message of CTA effectively and inclusion of icons and smart images makes more sense to them. Similarly, using shapes, and size of CTA along with colors and other basic properties of UI elements bring desired outcomes on the table.


Let’s check some good hints for designing CTA in modern concepts.


Useful Hints for Designing Messages of CTA

  • Try to say something meaningful through primary as well as secondary CTA messages.
  • Try to use verbs that can encourage some actions or trigger emotions to take actions through CTA. For instance, Buy, Shop, Watch, Compare, Download, Test drive, … are strong candidates against Click, Get, Try, See, Read, … like weak verbs.
  • Try to use Active Voice or tense instead of passive voice in language of CTA message because active tense is stronger and effective to trigger quick actions.
  • Try to create Urgency in your CTA message. Creating some sort of urgency help us to tempt and take actions by users. For instance if you say your offer is expiring in a few days or hours users will rush to catch it.
  • Try to create scarcity anyhow for your product or services so users won’t postpone their decision for later days and take quick actions to secure some for them before others grab it. For instance, if you show that a few quantities have left for that product or services, they may rush to grab it immediately.
  • Try to use simple language so any level of users can comprehend it easily
  • Use a bit large or bold font on the button for the primary message and relatively smaller for secondary message to differentiate them
  • Try to assure that the language of CTA messages should clearly calls for a specific action instead of confusing users for more than one actions


Usage of Icons or Images for CTA Message

We know that button itself is a graphical element and our message is textual element so if we add effective and relevant icons on or around our primary messages as well as along with secondary messages in some cases, may prove as spices to add more flavors.


Sometime users don’t like to spend more moments in reading our textual message or have difficulties in case of mobile experiences. Thus, adding icon may aid something to describe the essential actions or additional info regarding the CTA button at a glance.


Of course, you must be careful while adding icons or tiny or small images along with CTA message or as standalone instead of CTA text message.


  • Make icons relevant and clear to define or support the CTA message
  • Make icons easily recognizable and highly efficient to deliver desired CTA message visually
  • You can use some innovative or unique icons, if you provide enough visual or textual clues to guide your users initially and repeat it frequently so it becomes convention
  • Try to avoid usage of icons or images in emails on CTA, as most of the users or email clients themselves disable images by default to avoid performance issues


Size & Shape of CTA Button 

It is well versed that the size of any UI element decide its importance on the interface and capable to grab the eyes of onlookers or hide the elements behind. Therefore, always a big size of CTA buttons or elements play vital role in conversion. Therefore, UI designers make CTA elements of bigger shape and size in order to grant it the desired priority.


Generally, CTA buttons have rectangular shape and hardly square because modern CTA elements always consisting some copy or texts on it and in order to make it fit, we have to design CTA in rectangular only. However, sharp corners of rectangle have not much eye shooting effects, therefore, seasoned UI designers always make them of rounded corners or at least on the end of CTA.


Corners of CTA

There are some theories behind preferences of rounded corners for CTA like rounded corners points inwards so it draws immediate attention of readers inside i.e. content of CTA. Against these, square edge is keeping attention away. If you think at psychological point of views, rounded corners are capable to settle your subconscious because by nature we, as an animal, avoid sharp edges considering them as threats so we like rounded shapes the most.


Fortunately, modern smart UI elements have icons and images as CTA so shapes are varied in nature and robust at look. If you have to design multiple CTA buttons in the same UI, shape and size are not enough to differentiate them. It is colors, which can play vital role to distinguish your primary buttons against the secondary or tertiary buttons. Moreover, nature of copy written on the button can decide its importance in hierarchy as well as actions to take place.


In short, if you look at the UI designed by UI designers at Lujayn, you will notice that we have designed CTA elements with subtle, life-like shadows with tints of some highlights on it to grant some depth. Thus, that CTA seems real-life like button stitched on the web wall!