Overall, not a horrible review, considering two things. Number 1, the guys at Marketing Experiments can be brutally honest (which is actually a very good thing), and number 2, a lot of the negative comments were no surprise.

Click on the image below to view the landing page.

A couple key takeaways from the review:

1. Long and intimdating form. This is something that I’ve been concerned with for this page since the beginning. However a few things came into play regarding the decisions to layout the form this way. For starters, this was as much a re-visit of an existing page as it was a re-design. The goal was to take all the existing elements from the original, and adjust and simplify the layout, without removing anything from the original. Secondly, there were backend system constraints as well as business decisions to keep all these form fields. Definitely not the ideal situation, but sometimes you just can’t win arguments with the HiPPOs. The good news is, the webinar provides some good ammunition to revisit this argument and hopefully come up with a better solution.

2. Asking for “billing” then “shipping” info (should be other way around). Again, this is something I was hoping to change, but was constrained by our backend systems. The biggest reason I suggest asking for shipping first is because we are dealing with alcohol compliance issues, and we are unable to ship to all 50 states. By asking for shipping first, we don’t force a user to fill out the full form only to discover we may not ship to their state.

3. Using “hidden” form fields for the “same as shipping/billing” form. This is actually something we have worked on, and something we have implemented on our other brands. Check out an updated form field layout here. As you can see, this greatly reduces the size of the form.

4. Too much spacing between form fields. This is something that is actually an easy change, but probably the one area I am hesitant about changing. My feeling is the extra space actually lets the form breathe, and makes it less intimidating. Plus, in my experience, forms with some spacing between fields performed better than tightly spaced forms (although I have to admit the forms were much shorter).

5. Multiple page conversion flow. This is another test we are moving closer to. Again, due to some backend constraints, a single page is currently our best option, but a 2 (or possibly 3) page flow is something we are eager to test.

6. Moving the right content to the left (or more centered). This is also another item we are hoping to test. Simple layout changes of the existing content can go a long way in improving conversion, but like everything else, it needs to be tested.

It was very exciting to have one of my designs go through this live review during the webinar, and I hope to attend more clinics from Marketing Experiments. I encourage anyone interested in Landing Page optimization and A/B testing to check out this webinar, and any others at MarketingExperiments.com.

Testing is an important part of any online marketing initiatives. While the overall goal of testing is usually to increase conversions, which will ideally increase revenue, the real value in testing is the information you collect. What you learn from the success or failure of a test can be applied to your next test, and the one after that, and on and on. I’m finding that many people gauge conversion as the end-all-be-all metric of testing, which may often be the case. But, there are several other metrics that one can measure for success.

For instance, on a banner ad test, your CTR (click-through rate) may be your primary metric of success. An email test might also use CTR, or possibly turnover rate or open rates might be what you should be concerned with. And for landing pages, maybe lowering your bounce rate or improving your customer retention rate is the primary objective. Of course, all of these metrics will likely (and hopefully) help towards improving your conversion rate, but for the test at hand, CR may not be your top metric.

This is why it is so important to have a proper test plan prior to beginning any online marketing test. What the test plan does is establish what you are testing, how you will be testing, and what metrics you will be using to determine success or failure.

Test plans can be long, complicated documents with tons of detailed information, or they can be short, simple outlines with the high-level topics, but in any case there are 3 key bits of information that MUST be established for any test plan:

Hypothesis: Just like in scientific testing, the first thing that must be established is the hypothesis, or the preliminary question of what you are looking to learn. The hypothesis should be in question form, and be very short and simple to understand. For example: “Will changing our CTA button from red to green increase clickthrough rate?” or “Will moving the coupon code input field below the total price decrease cart abandonment?” As you can see, these are very short statements that explain what we are changing (button color or input field placement) and what we will measure (CTR or abandonment rate), without getting into the full details of how and what we need to do in order to make the test happen. Your hypothesis will drive all other information in your testing plan, and thus is the first and most important piece of information.

Prime Objective: This is where you can expand on your hypothesis with greater detail and state the specifics of what you are going to learn. For instance, using the button hypothesis above, your prime objective may look something like this: “Determine whether changing the bottom right call to action from a red color to a green color will increase or decrease click through rate on [Company Name's] lead generation landing pages.” While it may seem like we are simply repeating the hypothesis, upon closer look, you’ll see we are providing additional details, such as where the CTA button is (bottom right) and what page we will be testing (lead generation page). This hypothesis is a pretty straightforward and simple question, so in this example, our Prime Objective is fairly simple as well, but the more complex the test, the more clarification your prime objective may need. The important thing to remember is your hypothesis should be kept as short and simple as possible (and always in question form), leaving the further detail to the prime objective section.

Metrics: Here is where you state the KPI (key performance indicator) or metric that you will gauge success or failure of your test. The metric you use should be able to answer your hypothesis. Again, using the button hypothesis example, our primary metric would be clickthrough rate. As mentioned above, our goal of any test may be to improve conversion rate, but that is not the TOP METRIC for our button test. Based on our hypothesis, CTR is really the only metric we need to look at to answer our question. Some tests may require more than one metric, and I always like to add any secondary metrics (if applicable) that may be of interest or may help in future tests, but most importantly and at minimum, the metric that addresses our hypothesis should be listed. And obviously this should be a metric that you are capable of recording and viewing the data.

A fourth bit of information that many consider to be necessary in your initial test plan is Test Period (duration of your test), but I look at a test plan as a working document, and your test period could change during the actual test (you may need to extend the time period to get significant results, or stop the test if you are seeing dramatic negative impact), and thus is not a requirement at the initial stage.

There are several other elements that are extremely helpful to have in a testing plan including Measurement System, Baseline Metric and User Path, but most (if not all) of this information will be driven by the 3 points detailed above. It’s important to note, I am not recommending that your test plan should ONLY have these three points as a complete and thorough test plan will only help with current and future tests. What I am recommending is that at minimum and first priority, your test plan needs to have these three points.

View a sample online optimization test plan here (PDF). As you can see from this example, your test plan does not have to be long and complex, but it should be thorough. And while by necessity it may have technical language, it is very helpful that this plan is understandable by any member of the organization.

I hope you found this article and the example plan helpful. Please feel free to contact us to find out if we can help you in your online marketing optimization needs.

Whenever I’ve moved on from a job, it’s been very difficult to let go. I periodically (and sometimes more often then periodically), monitor the web sites I worked on or created, just to see how things are progressing. Recently, I’ve found some things not necessarily progressing poorly, but definitely not progressing in the direction I would have moved them. And moreso, not in the direction I had imagined I started them down.

The most common advice (particularly from people not in the industry), is that it’s not my problem anymore. Or that there’s nothing I can do about it. And in a way, this is very true advice. However, it doesn’t relieve the disappointment I feel by seeing something I’ve worked hard at, and put a lot of time (years, in some cases) and effort into creating. I know I can’t be bitter, especially since I moved on from these jobs by my own choice. Some of these were full-time jobs that it was just time for me to move on. Others were freelance projects that I had circumstances that were out of my control. But in any case, it’s still difficult to let go from old work.

I suppose every former client has their own good reasoning for taking the project in the direction they are, and again, I can’t say that they are doing anything “wrong” (well, except in one or two cases), but still, not easy. Today, I came across an interesting read on webworkerdaily.com: “When Clients Mess Things Up“. It offered a few tips (particularly for freelance or consultancy jobs) on what do to when clients want to push things on their own.

The full list is interesting, but I would have to say #1 seems like the best, yet also the hardest to follow pice of advice: “Take out the emotion”. This doesn’t mean to take out the emotion when you are working on the project, this means that once the project is done, and your piece of the puzzle is complete, move on and don’t let yourself fret over what happens next. Some of the other advice is to be proactive at being involved on the project in the future (which is also good advice), but sometimes that just isn’t a possibility, so you need to just let it go.

While it’s hard to let go, it can’t stop me from creating new projects, and from putting in the same time and passion into them. It just means that I have to deliver the best that I can deliver, and what happens after that is what will happen. Hard as it may be, sometimes it’s just the best thing for the designer to do.

Still not sure how I feel about Twitter yet. I was VERY reluctant to join, but finally decided that it was time to take the plunge. Mainly, I wanted to get the account name for spitshinedesign before someone else snatched it up.

Tweets are slow going so far, although a little more frequently then I expected. Only following a few key groups as well, but so far have found some useful links and information being shared. I can see how it can get a little addicting, but hopefully it won’t become too much. The upside is I’m finding myself more motivated to write blog posts in order to share them on twitter, the downside is it’s becoming a bit of a distraction at times, as I find myself reading other peoples links more than I write my own. Hopefully I will find a decent balance soon. In the meantime, check it out and follow me if you like what you see.

I have to admit, I’m actually NOT a fan of video tutorials, especially when dealing with code. I prefer to read along at my own pace, and be able to have time to work on my own code, and perform the instructions at my own speed. Many times, I find video tutorials move too quickly and a lot of times aren’t well planned out in advance, so the narrator tends to “stumble” through instructions at times.

What I found was a video series by Jeffrey Way posted on net.tutsplus.com (via Theme Forest). Jeffrey posted 15 shorter tutorials over the span of about a month, each one stepping a little further into jQuery. I have to admit, I’m only on day 8, but so far I found them very easy to follow (both his instruction and jQuery itself), and they move at an easy pace. As with any video tutorial, I do find myself pausing and rewinding, but I can accept that since the info is so clear. Yes, there are a few times when the narrator makes mistakes, but he catches his errors, and clearly explains them while going back to correct them.

I’m a little late to the jQuery party, as this series was posted in January 2009, but the info is still very relevant. While jQuery isn’t exactly new (especially in internet years), it’s still new to many designers, and these jQuery video tutorials are a great place for even the novice front end developer to start with jQuery.

It was a pretty interesting article, filled with examples of some pretty great web designs. However, I’m not sure about what they consider “trends” of 2010. Here’s the high-level list, but I recommend you check out the article to see the examples.

1. Design for Delight
2. Keypress Navigation
3. Print Design Influence
4. Horizontalism
5. Rich, Strong Typography

Again, these all had some really nice and well-designed examples for each of the topics listed. I’m just curious what makes these a trend? Most have been around (and use has been growing) for a while now, and I really question that some will catch on in the near future (keypress navigation? Clever, but why?)

Please don’t think my questioning of these becoming trends is knocking any site that uses them, or that designers shouldn’t use them. What I don’t like about things being labeled as “trends” is that people tend to follow lists thinking they are going to get a jump on what might be “fresh and new”.

Webdesignerwall.com (another fantastic site for web design) created a similar list back in January. For me this list was a little more on point (although, again I wouldn’t label them “trends”). Their list was as follows, but again I recommend you read the full article:

1. Serif Fonts
2. Big Headings
3. Custom Font Embedding
4. Texturized Backgrounds
5. Minmalist and Grid
6. CSS3 New Features
7. Mobile Design

Again, while some of these items have been around a while, this list is a little more on point because it is based on technology that wasn’t always widely available (i.e. font embedding, CSS3) or technology that will force designers to work towards (i.e. mobile design).

In conclusion, two nice lists about design that I highly recommend you take a look at. Just take them for what they are, not they claim to be. Great examples of design, some examples that might even make sense in your projects (and some that probably won’t). In any case use what’s appropriate.

Then again, maybe I’m wrong and every site in 2010 will include all of these… we’ll just have to wait and see.

It was extremely simple to set up an A/B test in Google Website Optimizer, since it clearly walks you through every step of the process. Simply click “Create another experiment”, and GWO provides step-by-step instructions for everything. No need to refer back to a tutorial (from anyone), it’s all right there!

Really, the only part that might give people trouble is adding the javascript snippets to your web pages. This, of course, should be left to page coders and not necessarily done by the person setting up the test (although GWO does provide pretty good instructions for adding the code). Fortunately, I not only set up the tests in Google Website Optimizer, but I also am the web desinger/developer, so I get to do it all (no need to wait around for someone to add the code in order for me to validate the pages!). However, I’d be comfortable handing off access to our marketing team to have them set up the tests (sans adding the code), and picking it up from there. That’s how easy setting up an a/b landing page test in Google Website Optimizer is.

I’m very excited to start using GWO more, but still just getting my feet wet so only have a handful of test running now. Since these test are on somewhat low traffic pages, it will take some time collect any significant results, but hopefully these test will provide useful information as I move forward with my goals to optimize not only Landing Pages, but full websites as well. It’s an exciting learning experience that has made going into work everyday a little more interesting.

Anyway, on to the list:

Google Analytics

Ok, to be honest, Google Analytics is not new really new to me. I’ve used for years when I launched this site. It’s a great FREE tool for basic Web site analytics. However, I’ve only used it just for the basics… there is so much GA can do! In my current position, I’ve dived deeper into the GA toolset, and encourage any Web designer to do the same. While it may not be as robust as some of the high priced analytics tools out there, it’s still pretty powerful, and a great place to learn the basics to prepare you if you need tomake the jump to the it’s higher priced counterparts.

Google Website Optimizer

A “sister product” to Google Analytics (along you can run one with out the other) Google Website Optimizer is another FREE tool from Google that allows for A/B and multivariate testing on your Web site. As someone who has worked extensively in online marketing and landing page optimization, I’m very excited to dig deeper into this tool and really see what it’s capabilities are. In fact, I’ve just recently set up my first A/B test, and hope to share that process here in the near future.

Coda

While not free, Coda is a great (low priced) text editor with some nice features, and some pretty useful plugins. Like many designer/developers, I was a regular DreamWeaver user, but as my developer knowledge grew I found myself using the WYSIWYG features of DW less and less, and for the past year and a half, used them rarely, if ever, and using just the code view of DW. Even thought I knew pure text editors were out ther, I never made the switch. Then I was introduced to Coda, and watched by DW software collect dust… I don’t know enough about text editors to say Coda is the best, but I found it a good fit for my needs.

J-Query

If you’ve read my blog before, you obviously know I’m a big fan of Flash (and like to think I know a thing or two about it…) Well, jQuery is a javascript library that allows developers to create a lot of animated effects where you’ll think it was done in Flash. The most common use of jQuery seems to be image galleries and animated navigation, but, as I’m slowly learning, there are lots of cool things you can do with it. Amont the many great things about jQurey is it’s free, easy to learn (and implement), and there are literally thousands of resources and tutorials. Flash still has it’s uses, but you might find jQuery is more suitable for a lot of things you previously thought you could only do in Flash.

Bronto

While it may not be the most robust and well-known email marketing software program out there, if you’re in need of an email marketing package, I strongly suggest checking out Bronto. Very easy to set up and use, and with some great tracking and reporting tools, I look forward to every email marketing campaign I send.

FogBugz

While it may have a funny name (that actually a struggle for some people to get used to saying…) FogBugz is a great multi-user project tracking tool with some great features to allow different users to easily communicate with each other on projects. I will say, I’m not sure if it’s the best fit for larger companies, but for smaller businesses with a lot of smaller projects that still need multiple user involvement, FogBugz is a great tool. Simple search functions to see where jobs are and who they are with, and nice email integration for updates and notifications, if you’re in the market for a tool to improve communication with your production team, definitely check out FogBugz.

That’s it. Six new (to me) tools for online design that I have found very helpful the last 6 months or so. As mentioned, I hope to put some more information about all of these tools (and others) on the blog soon, so if you’re interested in any of them, please check back.

Thanks for reading!

Some of the ones that I’ve used include:

kuler Create is a nice tool to from Adobe that helps create color themes. You can select your own colors and see what are complimentary colors, or you can create custom themes (and browse user submitted custom themes) to see how colors look when used together. Neat little tool.

FontStruct is a neat little tool by font retailer FontShop for creating, editing and sharing fonts. While the tool is very user intuitive and pretty powerful for a free access application, creating a full font family is still a long, tedious job. But, if you have a nice font style in mind that you want to create, a great tool to allow you to do it.

Dummy Text Generator is an extremely useful tool (especially when doing print mockups or proof of concepts) that creates dummy text (i.e. “lorem ipsum plorem”) for placement in mockups. It allows you to select a number of words or characters as well as the number of paragraphs to create a simple block of copy. Great for comping jobs when you don’t have final writing. It also allows you to go back to a writer with information about how much copy is needed for a job.

I’ll have to explore some of the other listed resources when I have more time, but I’ve found some great stuff from on SixRevisions.com, so I trust that this is another great list.

Level: This is a beginner lesson, but I will assume that the reader is familiar with the basic use of the Flash software including stage, timeline, drawing tools, property window, etc.

Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Description: The fifth part of a Flash tutorial on making a Flash game similar to the old BreakOut game for Atari. In previous parts, we created the movement for the paddle and the ball, set up the bricks and the script for collisions, added scores to our Flash game, and in our last tutorial, we set it up to go to a “You Win” screen. In this tutorial, we will set up a players “lives”, as well as what will happen when the player runs out of lives.

Demo:

(Refresh page if you don’t see the ball animation)

Let’s get started!

Let’s open up our Flash files from Part 4 of this game tutorial. While it’s not necessary, you may want to do a “Save As” and give your document a new name (“breakthru_game5.fla”). The reason you may want to do this is it might make it easier to review each part of the Flash tutorial later.

In our last tutorial, we set our Flash game to go to a new frame when the player “wins” the game (or clears the board). Now, we want our Flash movie to change if the player “loses” the game. By “losing” the game, we simply mean the player has run out of “lives” (or balls). So, the first thing we need to do is set up some new text boxes to display our players lives. This is done similarly to how we set up the score text in Part 3 of this Flash tutorial series. In fact, to get started, we are going to do a copy/paste of the text we set up.

Click on frame 1 of our main timeline (Scene 1), and be sure your “score text” label is not locked. On the stage, select both the static text box (where it says “Score”) and the dynamic text box (the box with the dotted line around it) (Fig. 1). Tip: It may be easier to select these if you lock all the other layers except your “score text” layer.

Choose “Edit > Copy” (command-C) to add these items to the clipboard. Add a new layer above your “score text” layer and name your new layer “Player lives”. Click on frame 1 of your new layer and choose “Edit > Paste” (command-V) to paste a copy of your text boxed to the stage. Position these boxes at the bottom right corner of the stage, aligned with your score text boxes. Double click on the “Score” text on the right side of the stage, and type the word “Lives”. Now, click on the dynamic text box next to the “Lives” text and in the Properties Panel (“Window > Properties > Properties” or command-F3) change the “var” text field to say “lives” (Fig 2). Last step is to click on frame 2 of our “Player Lives” layer, and right-click (option-click) and choose “Remove Frames” from the menu flyout.

We now have our Player Lives text boxes ready, so now we have to add the code that will dynamically change when our paddle (player) misses the ball (player life). On our main timeline, click on frame 1 of the “actions” layer, open the Actions Panel (Windows > Actions or alt-F9) and add the following code below the existing code:

var lives = 5;

This, as you probably could guess, sets our dynamic text box with the var name of “lives” to display he number 5, where 5 is the number of chances the player has to drop the ball before losing the game.

Now that we assigned a number of player lives, we need to add some script that tells Flash to take away a life when the player misses the ball. On our stage, select the white circle (ball). You’ll remember in Part 1 of our Flash game tutorial we set added some script that reset our ball if the player missed the ball. In that same section of code (the if statement towards the bottom), we need to add some additional code to tell Flash to deduct a number from our “Lives” text box. Add the bold, blue code below to your existing code (green code should have been added in part 1):

if (this._y > 300) {
_root.lives -= 1;
if (_root.lives == 0) {
_root.play();
}
_x = 150;
_y = 100;

dir = Math.round(Math.random() * 1);
speed = 10;
if (dir == 1) {
var Ang = 45;
} else {
var Ang = 135;
}
xspeed = speed * Math.cos((Ang) * Math.PI / 180);
yspeed = speed * Math.sin((Ang) * Math.PI / 180);
}
}

Explanation of the new code:

if (this._y > 300) {
_root.lives -= 1;

If our ball y coordinate is greater than 300 (goes below the paddle), subtract our “lives” by 1.

if (_root.lives == 0) {
_root.play();
}

If our “lives” is equal to 0 (meaning we have no lives left), then play our main timeline.

Go ahead and test your movie. On start, you should see that you have “5″ lives. Each time you miss a ball, you should see your lives go down by 1 number. If your lives goes all the way to 0, you should see frame 2 of your main timeline come up… but wait, it still says “You Win…”. Well, we don’t want it to say that unless we clear the board, so we need to make it say something other than that if we lose, right? Well, luckily Flash makes it pretty easy to do that.

—- ads by google —-

Click on frame 2 of the “You Win” layer in your Flash file. Select the “Congratulations…” text box, and in the properties panel, change the drop down to “Dynamic Text” and in the “Var” text field give it the name “gameOver”. You’ll notice that when you change the text box to “Dynamic Text”, the actual text in your box did not change. That’s because you can input text to a dynamic text box in Flash and have it display in your movie, but because it’s “dynamic” you can modify it using ActionScript code. So, since if the player wins, we want this text to read “Congratulations…” we will leave this. But, if the Player loses, we need it to say something else. We’ll add that code now.

Click on frame 2 of your “actions” layer, open your Actions Panel and add the following code below the existing code:

if (_root.lives == 0) {
gameOver = “<p align=’center’>Sorry, you lose! <br><br>Your Final Score Is:</p>”;
}

What this says is if our player lives is equal to zero, our dynamic text box should insert the text between the quotation marks. But hold on a minute… what’s with all the extra text here? Well, if your familiar with HTML code, you should recognize this as HTML markup language. That’s right, Flash can render HTML text in a dynamic text field! But, for this to happen, we need to tell our text box to render HTML code.

Click on frame 2 of the “You Win” layer, and select the top dynamic text box. In the Properties Panel, click on the “Render Text as HTML” button (the button with the angle brackets (<>) on it (Fig 3).

That’s it! I must say our game is looking pretty good right now, don’t you agree? We have our basic challenge of bouncing a ball into multiple bricks, we can keep score, and now we only have a certain amount of chances in order to accomplish our goal. Pretty cool. While this game seems pretty complete, there’s so much more we can do to this game, including adding a start screen, adding additional levels and making different skill levels. Study up on these tutorials, and hopefully you can figure out how to do some of these things yourself, but if not, check back soon as I plan to cover all of these steps in future tutorials!

Thanks for reading, and I hope you were able to follow along and create your own Flash game, and I also hope that they have given you a nice little primer for Flash game development. Good luck and don’t forget to check back soon to expand on our Flash Breakout Game!

Source files (Flash 8): Flash Tutorial: Breakthru Flash Game Part 5