In an extremely unscientific study, I thought I’d do a little investigating of how true this golden rule of hyperlinks is today. I started by looking at the top 5 websites, and here’s what I found:

Google: standard blue (#0000CC) hyperlinks. However, the purpose of google was and still is to get people to link, and has one of the most basic site designs on the web. Function above form, so there would be no reason for Google to even experiment with other color links.

Yahoo (home page): The majority of links on Yahoo are a blue, but not the once standard blue (#0000CC).

AOL (home page): The AOL home page is user customizable (something that I actually dislike greatly by the way), so this can change based on user.

YouTube: A slight variation on the standard hyperlink blue, You Tube uses #0033CC for most of their links. However, I don’t know that this color difference would be noticeable to common web users.

Facebook: For the most part, Facebook uses blue for their links, however it’s a colder blue than the standard.

Taking the test a little bit further, I visited the top 10 retail Websites (of 2009), and looked to see what they were doing in terms of hyperlinks:

Amazon: Like Facebook, for the most part, Amazon uses blue links, and again, a slightly cooler blue than the standard (although brighter than Facebooks blue).

Walmart: Again, blue is the primary link color, but a blue that’s slightly cooler than the norm, but still a bit brighter than Amazon. Interstingly, both Walmart and Amazon use an orange color for the rollover. Also, while different, Amazon and Walmart use very similar colors, but I don’t feel that the average shopper would notice the difference (coincidence? I doubt it…)

Target: Target is the first site on these lists that breaks from the norm, using dark greys, blacks and reds as their link colors. While I find the link colors work for Target, they also use the same red for other callouts that aren’t clickable. Target does seem to underline all their links (which is something else I question as the norm), which makes it easier to know, but I did find myself clicking on some items that were red that were not hyperlinks.

Best Buy: Best Buy seems to use 2 different shades of blue, one quite similar to the Amazon blue, and one more of a reddish blue (but not quite purple). The darker blue is for their main site navigation, the other tends to be used for links to or within the product. The color difference is subtle, #003399 vs. #333399, so I would imagine it was done on purpose, but you never know, could be an oversight?

Dell: Dell uses various colors for links, sometimes depending on where you are on the site, sometimes the promotions are offset with a different color. While you may think usability 101 would tell you to keep it consistent, it’s not as bothersome as one might think. However, there are some things I would like to see consistent (main nav, footer nav), but that’s really just my own opinion.

Home Depot: Like Target, Home Depot is another site that breaks away from the blue, and uses dark greys/blacks and the Home Depot orange for hyperlinks. It’s actually what I expected to see before visiting the site (again, like Target).

JCPenny: JCPenny uses a combination of link colors, but they primarily stick to blue (a colder blue than standard) and black. They also use the same color blues for things that aren’t links (like Target with the red), so there are some flaws in my opinion, but for the most part, I knew where to click.

Sears: White, grey/black, various shades of blue, and the standard blue are used for most of the hyperlinks on Sears.com. Interestingly, Sears seems to use the standard hyperlink blue for product specific information, and the colder blue for navigation throughout the rest of the site. While the different shades of blue are nicely used, once on a product page, it was the standard hyperlink blue that drew my eye more than the other blues. Maybe this was the intention, but I would think the push to buy should be more important than the additional product information (although I’d expect they tested this).

HP: Links aside, I didn’t really care much for the usability of the HP site, but sticking to this article, they used a blue for the links.

So, to sum it up, here’s my conclusion:

Yes, blue is probably the best color to stick with for hyperlinks. However, the standard blue (#0000CC) is probably not necessary (and I would say not common). Of course there are exceptions, but for the most part, I believe people still look for blue text to click on (and underlined by the way). In the same line, I also thinks it’s important to NOT use blue (or underline) for text that is NOT a hyperlink.

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.

As mentioned in part 1, the Competitive Buyer Modality is focused on how or why your product is the best, but more importantly how it can make them the best. They are looking for a way to “one-up” the competition. They tend to be very goal-oriented, and are usually very aware of their problem (in which your product hopefully can solve). They also can be a little skeptical about claims, but sometimes that can work for you, since they also believe they can overcome any obstacle.

I think a great way to look competitive geared advertising would be in reference to sports equipment (hit the ball farther, run faster, exercise longer, etc). Obviously most sports are competitions, so it’s smart to believe that sports enthusiasts would respond well to this type of advertising. That’s not to say all sports related products do (or should) use competitive buyer modality advertising, it’s just that there are great examples, and help to define the competitive buyer.

The Marketsense blog from appliedproductmarketing.com has some great tips on appealing to the competitive buyer:

Appeal: Drawn to superiority. Want to understand what makes your product the best.

Website: Provide proof of your competitive advantages. Demonstrate your credibility.

Information Needs: Answer questions on how your product is the better choice. Provide rational options. Share proof points.

Understand: What makes your product the best solution. They will take an analytical, logical approach.

Process: Will work through the process as efficiently as possible. They will disregard steps that waste time and resources. Let them drive. Don’t get in their way.

Time: They will work quickly with absorption. Because they hate inefficiency, quickly deliver what they need.

Risk: Are willing to take risk. Confident in themselves to ultimately solve the problem.

Decision: Want to know they have selected the best solution for the job. Will want to reach this decision quickly and efficiently.

Bringing it back to the project I mentioned in Part 1, here is an example of the solution the creative team I was working with came up with geared to the competitive buyer modality (click to enlarge):

The product offering is a credit report monitoring service, and typically, the customers were spontaneous buying modality, so there was a slight challenge to this project… Appeal to the competitive buyer modality without alienating the spontaneous buyer. So, while this project wasn’t 100% geared to the competitive buyer, there are some elements that we hoped would appeal to this type of customer.

1. Chose a colder, but strong color palette, with a very strong, bold color for the CTA
2. Strong competitive messaging with terms such as advantage, cut, speed and boost.
3. Hero image of successful looking business people, matched with  “competitive edge” type messaging. This imagery was very important, as this being a financial product, the imagery is happy, good-looking business people to imply that this product can help you succeed.
4. Messaging box for “Why be charged?” implying that you are getting something that others pay for. Competitive Buyers can also be competitive with how much something costs, and getting something for less than someone else can be important. However, on the flip side, competitive buyers can also equate price with status (i.e. most expensive = best), so it’s important to test price messaging with any buyer modality.

Again, these were changes we worked into our control pages in hopes to appeal to a broader audience. Unfortunately, it was hard for us to gauge the success or failure of this particular page since the driver to this page wasn’t always accurately matched up, but on the plus side, we did not see a huge negative impact which is always important. Given adequate testing through a full campaign (banner/text ad,  lp, ad placement, etc.) there is a lot of potential to target the comopetitive market.

I hope you found this post helpful, and hopefully it gives you some ideas of how to differentiate your creatives to appeal to a broader audience. Up next will be a closer look at the Humanistic Buyer Modality, and hopefully you’ll come back to read more.

After being reminded of the project, I thought it would be a perfect idea to write about here, so What I plan to do is actually a series of posts that discuss the different buyer modalities, and share examples of the project.

To get things started, I’ll first give a brief summary of how I interpreted the subject. To get a much more detailed explanation of Buyer Modalities, I’ve been recommended the book “Waiting for Your Cat to Bark” by Bryan and Jeffrey Eisenberg… I will admit, I haven’t read it yet, but it’s high on my list. Anyways, here’s my take on it…

The concept of buyers modality basically says that there are several types of buying behaviours that online (and offline) shoppers have. Competitive, Humanistic, Methodical and Spontaneous. I found a good way to remember the names is the acronym “CHuMS“, since understanding them, they can be your friends.

Here is the very short and sweet definition of each… I hope to discuss them in more detail in the future posts.

Competitive – The competitive buyer modality is essentially the Keeping up with (or beating) the Jones’. Competitive buyers look for reasons why your product is the best, or how your product can make them the best.

Humanistic – Humanistic buying types relate well to family or lifestyle imagery and messaging. They look for products that can be used for their family.

Methodical – The methodical buying behaviour is very detail oriented. They are comparative shoppers, and tend to do more research on products than the other modalities. They like comparison charts, and stats.

Spontaneous – The spontaneous buyers are looking for immediate satisfaction. They are less concerned with the intricate details, and just want what they want, and will find a reason to buy it.

So, that in a very small nutshell is the concept of Buyer Modalities. In the following posts, I’ll dig much deeper into the what, why and how to appeal to these different behaviours. The first step in the process is defining what type of buyer your audience is, and how to appeal to each one. Just like the old addage says, “you can’t please all the people all the time”, it’s the same is for marketing… “you can’t market to all the people all the time.” Which is why understanding buying behaviours and how to market to them is very imporant when it comes to Landing Page optimization.

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

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.

If you haven’t read Part 1 yet, take a minute to check it out and get up to speed as to what I’m trying to illustrate here.  Click here to view the full screen shot of the new creative, and I’ve outlined the key changes I made from the original below.

“Challenger” Page Outline:

1. Header
I removed the “distracting” background image and left open white space to give the logo some breathing room.

2. Headline
Created a generic headline (more of a tagline), and incorporated it into the “hero” image.

3. Hero
Downsized the actual product image, but expanded the width to fill the width of the page. Although the product shot is slightly smaller, I think it works better now that it is grounded within the page instead of “floating” there.

4. Offer / 4b. Offer
I enlarged the offer copy, and also brought it up higher on the page. This allowed for placement of an additional offer space. I also added visual cues to the offer that helps drive the user through the page to the form (user action)

5. Premiums
As with the offer, I brought the premiums higher up on the page, and again created visual “arrows” to draw attention and lead the user through the page.

6. Summary
Added spacing (“air”) and broke the copy into smaller paragraphs to improve readability.

7. Value Proposition
As mentioned in Part 1, having the value proposition can be a pro and a con… I opted to be more proactive and make the value proposition always visible, however I bulleted out the benefits of the program, and clearly explain the offer and reassure the user the value of the vine club program.

8. User Action
I slightly changed the layout of the form and added space and aligned elements to make the form more easily scannable and less intimidating to the viewer.

9. Call to Convert or Call to Action (CTA)
Created a larger, brighter and bolder CTA to draw the users attention, also changing the color from red (“stop”) to green (“go”).

10. Footer
Left the footer as is.

As in Part 1, this is just a  dissection of this particular LP. Per manager direction, all the elements from the original were required for the new design. What I hope to have achieved was to rearrange the elements not only for a more colorful, eye-pleasing design, but also to improve legibility and usability.

Only testing will prove (or disprove) whether these changes were a step in the right direction, and I’m happy to say that testing is under way. Once enough data is collected, I hope to share some of the results here and let readers know if the redesign was a success or not.

In the meantime, I hope this encourages others to look at their own LPs and try to come up with different ways to layout the content.

The first step I took in the redesign process was to break down and analyze the original (or “control”) page that I was tasked with redesigning. In doing this, I identified 10 distinct elements of the control page, which would be required on any new iterations of the page. Click here to view the full screen shot, and I’ve outlined the key elements below.

Control Page Outline:

1. Header
Topmost area of the page with brand logo

2. Headline
Typically the first and most visible statement of the offer or page title (tells the viewer the purpose of the page)

3. Hero
The “product shot”. This can be the product itself or a visual of someone using the product, or how the product works.

4. Offer
This is a more descriptive presentation of the offer (from the headline).

5. Premiums
Image and/or copy of the “premium” of free item when you order.

6. Summary
This is a short, easily digestible text block that explains why someone would want this offer.

7. Value Proposition
Additional supporting copy of what the product or offer is. Additional support and clarification of “why” the visitor should want to order. Note: Value propostion is initially “hidden” on this lp and requires user action to view content (pros and cons to this approach, particularly from a customer service standpoint)

8. User Action
In this case, it is the form the user must fill out in order to accept the offer.

9. Call to Convert or Call to Action (CTA)
In this case, it is the acceptance of the offer (after completion of the form).

10. Footer
The legal copy.

Please note: This is just a dissection of this particular LP. However, most LPs typically use a several or all of these elements. With LPs it’s common practice that “less is more”, and testing is the only way to truly know what will or won’t work for your LP (but that’s a whole different blog post).

In the next day or two, I’ll post a similar outline of the “new” creative, so you can see the differences, but in the meantime, I recommend you look at your own landing pages and break it into components (and see how yours compares to this list). I would love to hear your thoughts in the comments section.

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.