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.

I struggled with this question about 8 months ago when I did the last update of my portfolio, and I’m struggling with it once again. Taking a look at both old and new projects, and projects that are currently on my portfolio and projects I want to add. It was a tough decision then, but now I think I have a lot of new projects that I think are worthy of being up as well.

So now, I am forced with so many questions – Do I remove projects that are currently up? Do I add projects done before my last update? Do I limit the number of examples? Having moved almost exclusively to web, do I remove print and logo categories? All these questions, with mixed feelings of what the answer might be.

I’ve often heard that a small portfolio of just a handful of your absolute BEST work is really what matters. However, having experience both searching and hiring for jobs, I tend to disagree. I think a diverse portfolio showing different projects (whether it be different clients, brands, or channels) is extremely important. The more clients or projects you worked on, the more pieces you should ideally have for your portfolio. If you are serious about your craft, every project you do should be portfolio worthy (although I’m not suggesting you add EVERYTHING to your portfolio), so a numerical limit should not be imposed. If it’s a good representation of your design sense, then add it.

When I am hiring a new designer, I also like to see older works. I’m a big believer in constantly learning and improving, so projects across a long time span can show me the progression of the designer. I can overlook some less than inspiring pieces, if you have been able to improve in the long run. Even though I tend to be my own worst critic when designing, I still have trouble deciding what to pull from my portfolio (yes, I have a large portfolio). But, what I try to do is have a diverse collection, a good representation of old and new, and even some student projects, which I personally think are great to have.

Another issue is, I often work from a “templated” layout on the web (particularly with email). While I wouldn’t want to put each and every campaign in my portfolio, I did try to select some visually different emails, within the same layout, to show my ability to make the layout flexible, so that each campaign can be unique in its own way.

To me, it’s not simply a matter of how many pieces you have. I’ve seen great portfolios with a handful of pieces, and great portfolios with dozens of pieces, and I’ve seen very poor portfolios with those numbers as well. The true purpose of a portfolio is to showcase your strengths. If that can be done with just a few pieces, great. If it takes more, that’s fine too. If a Creative Director (or hiring manager) is serious about what they are looking for, they will pay close attention to the work as a whole, no matter what the number.

The one cautionary tip I will give to those with a large portfolio is to be clear about your role in the project (and be honest!). Don’t try and misrepresent yourself, as it will catch up to you in the end. If you were only the production artist, following the lead of an Art Director, be sure you’re clear about that. If you were only the Front-end Developer on a beautifully designed Web site, make sure you state that. And be prepared to speak about your roles in the interview process.

Now… back to the daunting task of updating my own portfolio….

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 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.

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.

Lot’s of great info here for all levels of CSS. I’ll be honest, I haven’t read all of these, I’m putting some faith in the guys at toxel that this list is legit, but I do visit a lot of the sources sited here (Smashing Magazine, Noupe, NetTuts among others) and have always found some great information.

Hope you all find this info helpful!

The goal of gotoAndLearnFlash is to have users find the Flash tutorials they want, and write their own reviews to let future readers of this site know whether the tutorial was really helpful or not. While my goal here is to find the best free online Flash tutorials the net has to offer, I simply don’t have the time to review each and every tutorial I come across. That is why I encourage users to check out the tutorials, come back and rate or review them for future readers.

Currently, there are only a few tutorials listed, but I try to add more and more when I can. The biggest hurdle is I really would like to review any tutorials that I post, but I simply don’t have the time. So, I’ve been posting some Flash tutorials without an editorial review in hopes that users will add their own reviews in the comments section. Better than a rating system, I believe a user review will help gauge whether the tutorial is really worth checking out. If you enjoy my tutorials, check out www.gotoandlearn.com to find more Flash tutorials from other authors that I found helpful.

If you haven’t visited psdtuts.com (and it’s sister site nettuts.com) I recommend you check it out. They always have some great, high-quality tutorials on Photoshop (while nettuts.com is focused on Web development tutorials).

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

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 fourth part of a Flash tutorial on making a Flash game similar to the old BreakOut game for Atari. In the first part of our game tutorial, we created the movement for the paddle and the ball. In the second part of the Flash tutorial, we set up the bricks and applied the script for the collisions of the ball with the bricks. In the third part of our Flash game tutorial, we added scores to our flash game. Now, for the fourth part of our Flash game, we will have the game advance to a new screen when we “win” the game.

Demo:

Let’s get started!

Let’s open up our Flash files from Part 3 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_game4.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 added a score using dynamic text to our Flash game. What we want to do now is have the game advance to a new screen when the player “wins” the game, or clears the board of the bricks. To do this, we will be advancing the game based on the players score. The first step in order to do this is to add the next “You Win” state (or screen) to our Flash file.

On our movies main timeline (Scene 1), add a new layer called “You Win”, and move the layer under the “actions” layer. Click on frame 1 of our new layer, and add a blank keyframe (“Insert > Timeline > Blank Keyframe” or F6). Because we don’t want the other layers to be visible on frame 2 of our movie, select the 2 keyframe of all the layers below our “You Win” layer, and control-click (right-click) and select “Remove Frames” from the flyout menu.

Click on frame 2 of your “You Win” layer, select the Text Tool (T), set it to “Static Text” in your Properties Panel (“Window > Properties > Properties” or command-F3) and click on the stage and type something like

“Congratulations! You Win!” <return>
“Your Final Score Is:”

You should now have something similar to Fig. 1.

Select the Text Tool (T) again, and draw another text box below this text. In the Properties Panel, set the dropdown to “Dynamic Text”, in the “var” field give it a name of “scoreFinal” and select the “center align” paragraph setting (Fig 2).

Remember that in our previous tutorial, we added a stop(); action to frame 1 of our “actions” layer in our main timeline. So, if we were to test our movie now, we would still only be able to play our game and we would never see the “You Win” frame. So, what we need to do now is add some script that tells our Flash movie to advance to the next frame IF our score equals the “winning score”.

Open the Library window (“Window > Library” or command-L). Double click on your “mc_Brick” symbol in the library to bring up symbol editing mode. Click on frame 2 of the actions layer, open the Actions Panel (“Window > Actions” or alt-F9) and add the following code under the existing code:

if (_root.score == 160) {
_root.play();
}

What this is saying is if the dynamic text box on the main timeline with the var name “score” (which we set up in our previous tutorial) is equal to 160, than play our main timeline. We use 160 because there are 16 bricks worth 10 points each: 16 x 10 = 160. So, in order for our score to equal 160, all the bricks must be hit by our ball. Once that is done, we advance to the next frame of our main timeline (_root), if our score is less than 160, we remain on frame 1 of our main timeline (because of the stop(); action we already applied).

—- ads by google —-

Return to Scene 1 of your movie. Click on frame 2 of our “actions” layer and add a blank keyframe. With frame 2 still selected, open the actions panel and add the following code:

stop();

scoreFinal = score;

What this code does is stops our movie on frame 2 and sets our dynamic text box with a var name of “scoreFinal” (which we set earlier in this tutorial) to be the same as whatever the text is in our text box with the variable name of “score”. Of course you could simply say “scoreFinal = 160“, since we know that the score is 160 if they hit this frame, but I’m going to set it dynamically in order to give you a teaser for the next part of this series which is what happens if a player loses. After all, what fun is a game that you ALWAYS win??

For now, go ahead and test your movie. The game should play just like it did at the end of the last tutorial, but now when you have all the bricks cleared, you should see the “Congratulations…” text. Obviously, this “You Win” page isn’t the most exciting thing in the world, so I would hope that you might play around and stylize this on your own.

I hope you enjoyed this tutorial, and hopefully you’ll come back soon for the next part of the game tutorial. Thanks for reading, and if you have trouble, the commented source file is available below to help you along.

Continue to Part 5 >>

Source Files (Flash 8): Flash Tutorial: Breakthru Flash Game Part 4