The guide to Call-To-Action buttons

The call-to-action button is a important tool to enhance the user experience of a website. However, designers often neglect its significance. At times, they do not understand that a good call-to-action button design is not just about being impressive and fitting into the overall design of the web page. However, these buttons are too important to be designed without some understanding of its use and what makes them effective.

Functions of Call-to-Action buttons

The main purpose of the button is to invite the visitor to do something. Example: Sign up for a account, download a file or adding a product to the shopping cart.

Different types of Call-to-Action buttons

There are many different types of call-to-action buttons. Those listed below are the more common ones.

1. Add to cart buttons
Mostly seen in E-Commerce websites. These buttons usually appear on every product page. The use of add to cart buttons is to encourage visitors to purchase an item.










2. Sign up buttons
There are typically two types of sign up buttons. The first type is usually associated with a sign up form. The second type is for users to sign up for a service before they are brought to the sign up form.


3. Download buttons
Similar to an add to cart button, the download button's function is to encourage a visitor to take possession of a particular item.

4. Free trial button
Some web pages try to encourage their visitors to try out their products or services, usually in the form of a free trial. This can be a free download of a software, a free account or a free service with limitations.


Some guidelines in designing effective Call-to-Action buttons

1. Choose the correct words
The text on the button should start with a verb. For example, 'Add to cart', 'Open an account', 'Register now'. Otherwise, the button will not be meaningful and will just be a button with some text. 'More information' for instance, is not a call-to-action button.

2. Choose the correct size and color.
The size of the button is a very important factor. If the button is too small, visitors may not know of its existence. However, if the button is overly big, it may empower everything around it. The button should be sized large enough to complement with the overall design and still be noticeable. Ideally, the call-to-action button should be the biggest button in the page.

The next important factor is the color of the button. With the correct choice of color usage, it can help to balance the size of the button. The color of the button should complement with the overall design of the page. For bigger buttons, choose a less prominent color within the design so that it can fit in to the page. For smaller buttons, choose a bright and contrasting color to make the button stand out.

3. Use white spaces to make the button pop
With sufficient white space around a call-to-action button can help to make it stand out. The more white space there is in between other elements and the button, the less connected they are. Therefore, if there are elements that are irrelevant to the button, increase the white space in between. If there are other elements that can help encourage users to take action, reduce the white space in between.

4. Include icons and images
Adding meaningful images and icons to the call-to-action can help to increase click rates. For instance, a down arrow icon for a download button and a shopping cart image for a add to cart button are meaningful and influential. However, ensure that the images used helps to clarify the use of the button instead of confusing it.

5. Provide additional information
If possible, include extra information to tell visitors what to expect when they click the button. This is commonly seen in download buttons and free trial buttons. Some examples of extra information include the file size of the download and the duration of the free trial. When designing the button, ensure that the size of the call to action text should be the most prominent. In contrast, the additional information can be less visible.

Some good examples...




Some bad examples...








References:
http://www.uxbooth.com/blog/good-call-to-action-buttons/
http://www.hongkiat.com/blog/call-to-action-buttons-guidelines-best-practices-and-examples/
http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/
http://www.1stwebdesigner.com/design/worst-call-to-action-examples/

HCI current and future outlook in Singapore

As students of a module, many time we would like to ask ourself, would the things we learnt be applicable in the industry? Or would the contents taught be outdated by the time we have graduated? Fret not, this blog entry would give you an insight on the HCI's industry in Singapore.

According to IDA outlook of Singapore's IT industry in 2015,

Human computerinterfaces (HCI) have seen a relatively much slower pace of evolution than ITnetworks and other computer technologies. It is increasingly being recognised asthe bottleneck to how much our brains can absorb and interact with data.Impoverished interface technologies limit our ability to fully exploit anddigest the vast amount of virtualised data on the Internet and distributeddatabases.

The way humans interactis via our senses. Hence, improving sensors or sensing interfaces can becritical for augmenting our interaction capacity with data. By doing so, we aremoving towards the new Sensory Internet.

Detailed information could be found at http://www.ida.gov.sg/doc/Technology/Technology_Level1/20060417212727/ITR52005.pdf

This clearly show the importance of HCI to allow human to function more effectively with the evolution of newer, faster and better technology. Furthermore, IDA also implied the need for talents in this particular field.

Some of IDA future outlook of HCI’srelevant product includes:

1) digital ink technology – a paper-likethin film that functions like our daily newspaper but is formed by embeddedtiny electronics that can host changing contents in different colours, in text,image or even videos. Hence, we can imagine a future whereby we do not need tothrow away our newspapers, but contents will be transmitted wirelessly to ourdigital ink newspapers and even updated in real time. More information could befound at http://electronics.howstuffworks.com/gadgets/high-tech-gadgets/e-ink1.htm

2) New keyboard Interface - SenseboardTechnologies involves typing on a virtual air keyboard, requiring sensortechnologies such as gyroscopes or muscle sensing rubber pads. Here's a video on how the Senseboard works.

3) IRIS-on-the-move - This is a new biometric identification of a person from an individual's eye. It is as unique as fingerprint, however the eye being an internal organ, would be less susceptible to damages whereby fingerprints could be changed with a cut. A video is attached below on how effective and usable IRIS-on-the-move would be in the future.

Below are some of the jobs that are relevant for HCI industry in Singapore.

As we can see, HCI is indeed a very diverse field. User experience design is applicable not only in the software domain, but the engineering field as well - we could see that from the example of IRIS-on-the-move. So, fret not for those interested in the field of HCI, the outlook of Singapore for HCI looks great!