Flash Promotional Banner Rotator’s

You’ve seen them on just about every big ecommerce site. Many banners have gone from static to rotating. The rotation offers an unlimited resource for promoting various items without taking up a ton of space on the page — and if done correctly, they look nice too.

In my last article I talked about some of the things that should be considered when developing an effective promotional banner. I want to follow that up with a short post here on how you can promote more in less space using flash for banner development.

Flash banners come in all shapes and sizes. As of this writing two example sites using them are Target and BestBuy. Screenshots of the home page for each are below as a reference point. The red outlined area in each indicates the area the dynamic flash banner is composed of.

Example of Target Flash Promotional Banner
targetbanner

Example of BestBuy Flash Promotional Banner
bestbuybanner

In today’s internet age, you do not need a whole lot of flash design experience to get these types of banners up and running on your site. You will need a little technical know how (or get someone that can do it for you) but there really isn’t much to it if you have the right tools.

The truth is, you can do this yourself with a number of free and/or affordable commercial options.

Below I’ve listed a number of links that will start you down the right path toward adding a professional looking flash rotating banner to your ecommerce site.


Rotate a Banner With These XML Banner Rotators

Free XML Banner Rotator

Free Flash XML Banner Rotator

As you’ll see, there are a number of options available to you. Keep in mind that the functionality of the banner should fit your needs. Don’t just choose a banner because it “looks cool.” Looking cool won’t get you sales. Make sure it is functionally correct and provides the opportunity to run your promotions in a way that benefits your bottom line.

Got anymore you think should be added to the list? Leave a comment below and let me know.

How to Design an Effective Promotional Banner

With the tools available today, just about anyone can design a graphical banner for a promotion. But designing a banner and designing a banner that gets results is quite different.

In general you want to design your promotion to work with the user eyeflow. Standard reading is left to right so this works best. Placement of elements within the ad also is important and should be considered.

Here are some things your promotional banner could (or should) include in order to increase it’s effectiveness.

1) If using photos the photo should reflect the promo to some degree and should have room to integrate headlines etc… without making it difficult to read. Oftentimes finding the right photo can be the toughest part. The photo should direct the eye to elements within the ad yet not overwhelm. Sites like iStock have a great selection at very reasonable prices.

Example of Good Photo Usage
bannerpromo-goodimage

Example of Poor Photo Usage
bannerpromo-badimage

2) A clear call to action. Examples would be “Shop Now”, “Start Shopping”, etc… Due to eyeflow, and depending on your layout, the best location for this is typically the right hand side of the banner (even bottom right corner is good), but that is not critical if you make it stand out and fit it within whatever eyeflow you choose for the promo.

Take note of how your eye flows and is drawn to the call to action in the following ad.

Example of Good Call to Action
bannerpromo-goodcta

Example of Poor Call to Action
bannerpromo-poorcta

3) A primary heading or focus area that grabs attention and conveys what type of promotion or message you want to deliver. Things like “24 Hour Sale”, “Grand Opening Sale”, “50% Off Sale”, “Storewide Clearance”, “Free Shipping Now Thru ‘xxx'”, “Holiday Blowout”, “Everything Must Go”, etc…

Oftentimes, but not in all cases the photo can play a role in delivering a primary focus area as seen in the examples below. The more active the photo (and with no clear “text area”) the harder it is to create focus and flow. A good ad gives the eye a starting point and then directs it in a specific pattern toward the call to action.

Example of Good Primary Focus Area
bannerpromo-badimage

Example of Poor Primary Focus Area
bannerpromo-badimage

4) Benefits to the customer. (i.e. what do they get from the offer and/or product). This is often best completed in short text or bullet point descriptions. Give them a reason to click.

Example of Good Benefits
bannerpromo-goodbenefits

Example of Poor Benefits
bannerpromo-poorbenefits

5) Avoidance of centered text. Centered text is hard to read. You want all text to be preferably left aligned and in some cases right alignment might work. The only time you should use centered text is in headers — and that too depends on the layout of the photo and message. When in doubt, left align text.

Example of Good Alignment
bannerpromo-goodbenefits

Example of Poor Alignment
bannerpromo-badtext

The above is just a very brief sampling of ad concepts. Again, placement of these items is important and should be considered during development. Promotions can vary widely and should be based upon your individual goals and objectives. Testing is key and what works for one company many not always work for another.

Got any additional insights to share? Let me hear them below.

Create Facebook Fan Page That is Welcoming to New Visitors

July 7, 2010 by  
Filed under Design & Usability, Social Media

Raise your hand if visitors to your Facebook Fan Page see your Wall comments when they arrive at your page. Now raise your hand if visitors see a well executed welcome page (and no, the Information tab does not count as a well executed welcome page).

If your visitors see a well thought out welcome page, then this post isn’t for you.

If you’re wondering how you can get your Facebook page to default to a tab other than the Wall and how you can use this functionality to keep new fans or customers, then this is the post for you.

With FBML and a few Wall settings, you can turn your Facebook page from a social media dumping ground into a fun (or serious) extension of your brand.

Here’s how:

Create your welcome page. Depending on the service(s) or good(s) you’re providing, your welcome page can include a brief introduction about you or your site. It can provide instructions for where else on your Facebook page visitors can get good deals, chat, download coupon codes or buy your products (Starbucks’ fan page does a good job of this). You can also point visitors in the direction of products they can purchase or how to connect with you in other ways (1-800Flowers.com fan page does a good job of this). Your welcome page will need to be created in HTML (which is what FBML supports). If you’re not familiar enough with HTML, you can consult with your website designer or use one of the Fan page templates available online.

1800-flowers-facebook-welcome

Add the Static FBML application to your page. (Click on the link to be taken to the page). A window prompt will ask you which page you’d like to add the application to. Select the page you’d like to add the app to.

FBML-for-facebook

Adjust the FBML Application. Once you’re back on your Facebook Fan page, you’ll need to find the “Edit Page” selection (usually directly under the image you have set for your site). Once you’ve arrived at your list of page applications, find the FBML Application and click the “Edit” option.

Change the name of the Tab. It will default to FBML; however, you can change it to something like “Welcome,” “Who We Are,” “Discounts,” etc. Paste your HTML code in the box provided and click save.

Once you’re back to your fan page’s edit page, click on the Application Settings option in the FMBL box (now called whatever you named it in the step above). Application Settings allows you set the your FBML up as a box and/or tab on your page. If you select Tab, it will stay as a Tab on the top of your page. If you select Box it will not.

Now that you have your FBML set up, you’ll need to make your new welcome page the default landing page.

To do this, head back to your page’s Edit page. Find Wall Settings and click Edit.

You’ll be given a number of options that you can select. To make your new FMBL page your landing page, select the FBML page you created. Once you’ve made your selection, hit save and voila. You’ve just created a new and improved landing page for your visitors.
facebook-wall-editing