E-Commerce website sell button 5 Point design Tips

Designing a suitable "buy button" is not enough to put the word "buy Now" on a blue rectangle because it doesn't produce the effect you expected. Luckily, once you know some basics, it's not too hard to design a suitable purchase button. First, the text on the button is very important, but there are other features to handle. Why is the text the most important? Think about it, if it is written in the curse of the word, the button design is no use beautiful. Therefore, good content is the source of money.

We will discuss an ecommerce site suitable for selling buttons that are critical to 5 point design tips.

1. Overall style

This is the first and most important feature.

You have to figure out how to turn your button into a "Purple bull." The concept of "Purple ox" is presented by Cesse Gao (Seth Godin). In short, make your product superior. I mean, a superior product is not to be overlooked, like a shiny purple cow in the middle of the meadow.

Some designers are not very good at packaging products. Creating a button that fits perfectly with the color and style of the site is fascinating. It seems to be a very good idea, unfortunately it is not.

The problem is that such buttons don't attract attention. You also don't want your button to be buried and want it to be noticed, so it should be created as a completely separate element, appearing on some sites, without the need to be consistent with the style of the site.

Take a look at the following case of the concept of "purple Bull".

Mozilla Firefox

This is a download page that looks like Firefox. Notice that at the top of the fold, there is a large green download button that looks completely different from the other elements on the page, is the only place to put the Firefox logo, and is one of the largest elements of the entire page.

All the features make the button look very eye-catching. This is a good interpretation of the concept of "purple cow". If you say you don't see it, you are just impressing someone else.

Simply put the button in the limelight.

2. Appearance

Start with the color.

If you want to use a color you've never used before, you can learn the Firefox site mentioned earlier. Use the color scheme Designerto tool to find colors that match the color scheme of your current Web site, but still keep the color contrast.

"Color contrast" here is the key. If your site is predominantly blue, you no longer need the blue button and the blue projection is not necessary. A little blue feeling element all do not need, pink, orange and so on the difference color is your best choice. I'm sure you know what I mean.

Another strategy. Orange is the most conspicuous color except red. However, it does not elevate negative emotions like red (like stopping, careful, dangerous, etc. are marked in red). The most famous orange button on the Internet can be found on the Amazon website.

Also note is the size of the button. The buttons are bigger, the bigger the better. See the Firefox case.

Someone at the design stage asked, "Can you make it a little bigger?", the answer is yes.

To be concise or to dazzle?

The button can't be too flashy. The above mentioned Firefox button is very cool, although there is an orange fox, the appearance is still a button, which must be followed. If the button is not like, who will go to click.

That's why you can't simply answer the button for simplicity or good. You have to find the right style for yourself. We can test separately, create two buttons at the same time: a simple, a dazzle, see who the effect is better. Google Web optimization tools will help you make a choice.

Take a look at the following example of a simple button

Themefuse

You can see the button is not orange fox, but still very conspicuous. In fact, Themefuse (WordPress theme Store can find) provides short code. These short codes make it very easy to create beautiful buttons.

Let's say I use the following line of code:

The resulting button effect

3. Font

Sans-serif fonts conform to all types of buttons. Because this font is very readable and suitable for use on the web. (In addition, it is more suitable for printing publications)

Try to make the text on the button easier to read because it is one of the most important text on the page. Text should not be all uppercase, mixed case is better, that is, the first letter of each word in uppercase.

Arial, Helvetica, Franklin Gothic, myriad and other fonts are very safe, can be used with ease.

We're here to talk about color. Of course, the text content should be very contrasting with the color of the button. Gray-Gray is not, you can choose Black-white, blue-orange.

In addition, the text must be highly readable.

4. Position of the button

The best location for a button depends on the design of the site, which may not be surprising. But there are still rules to follow.

Try to put it in the most conspicuous position where you don't have to be creative. Just let customers and customers see the line.

Every time you visit a website, users expect to see something in some places, such as the logo on the top left corner, the shopping cart settlement in the upper right corner, the copyright statement of the footer, etc. Your job is to find the most conspicuous position of the "buy button" and put it there.

Of course, it has to be in the most conspicuous position, which means two things:

Completely on top of the folding place. Don't worry about blank spaces, it's a friend of every web designer. Remember, it doesn't matter how much you put on a website, it's how much you can erase from it.

Change your location strategy by copying the button and placing it at the bottom of the page. This way, others can still operate at the bottom while browsing the entire page.

5. Additional elements

These extra elements can add icing to the cake and further deepen the visibility of the button. For example, arrow icons, shopping carts, magnifying glasses, logos, or various brand elements, and so on.

I am still the case of Firefox, the Orange Fox this element is very cool to use.

Experience shows that the extra elements play a role in emphasizing the buttons. For example, two arrows pointing down are very good at expressing the meaning of the download. The shopping cart icon is a great match for the Add to cart button. In the Amazon example mentioned earlier, the Magnifier matches the search button.

You can also use some brand elements. For example, the standard RSS feed stream button. Twitter's attention icon, Firefox's orange Fox download icon, the free Buy product button.

Here are some examples: