David Clarke is CEO and Co-Founder of BGT Partners, a 2011 and 2010 Ad Age Best Place to Work in the U.S. BGT creates interactive marketing and technology solutions for global corporations that strengthen brands, develop more engaging relationships and transform businesses.

It’s time to take tablet design seriously and evaluate how your brand’s web presence caters to tablet consumers. As usual, Apple is the primary driver behind tablet growth, and the new iPad is yet again redefining the tablet experience and pushing the boundaries of how we use the web.

But what does it mean for your web presence? Below are three ways for your brand to excel in the tablet revolution so you don’t get left behind.

1. Prepare Your Site to Go “Beyond HD”

Just as the demand for high-definition technology forced broadcasters to convert their shows, the new iPad may force brands to make their websites retina display-friendly. With the new iPad, your site is not going to look the same as it did before. The original and second-generation iPads both have a screen resolution of 1024 x 768, but the new iPad’s resolution of 2048 x 1536 is double that in both directions.

The retina display’s pixel density is so high that your eye is unable to distinguish individual pixels. And with a 44% better color saturation than before, coupled with A5X quad-core graphics, images on your site will pop off the screen and be crisper and sharper at any size. Existing apps will be updated automatically, and they will look better, but as Tim Cook stated during the unveiling, “If a developer takes a little bit of time, they can do little things that are mind-blowing.”

What does this mean for your brand?

To really take advantage of the retina display, brands need to put more emphasis on high-quality imagery, colors and overall attention to design details. Let’s face it — a poor design will make you look even worse in HD, while high-resolution imagery and a broader range of colors will ensure your site stands out.

2. Prepare for Voice- and Gesture-Controlled Interfaces

New iPad
Do you remember the movie Minority Report? It featured Tom Cruise swinging his hands and using his voice to control a computer screen. This was fiction 10 years ago, but voice- and gesture-controlled interactions are rapidly moving from fantasy to reality. Gesture-controlled video game systems like Nintendo’s Wii and the Xbox Kinect have been hugely successful, and LG recently came out with a voice- and gesture-controlled TV. That’s not to mention the splash that Siri made in the mobile world.

Although the new iPad doesn’t include Siri, it does include a voice dictation feature. However, voice- and gesture-enabled websites are bound to be a key part of the future web experience. In fact, Apple recently filed for a patent called the “Three-Dimensional Imaging and Display System,” hinting that the company is exploring gesture-controlled interactions.

What does this mean for your brand?

Well for now, Siri only works with a few of the iPhone’s built-in apps (email, search, calendar, etc.), but just imagine what will happen when Apple opens Siri up to third-party developers. Brands will be able to create Siri-friendly apps (for mobile and tablet) to allow customers to use their voices to carry out mundane tasks, such as paying your electric bill or transferring money from one account to another. To prepare yourself, focus on your key customers and their most important tasks and consider how your current apps can be improved through voice-controlled interactions.

3. The New iPad Is a Tipping Point for Tablets

New iPad Resolution
With the explosive growth of tablets and mobile, people are accessing the web on an increasing array of devices, and your consumers are now expecting your site to work equally well on their desktop, smartphone and tablet. But how do you accommodate for this when there are hundreds of different devices and screen resolutions? Creating separate sites for each device on the market can be expensive and difficult to manage, as the landscape is constantly changing.

What does this mean for your brand?

A smart approach to this challenge is implementing responsive web design, which utilizes one set of code to display content effectively across all devices. Gone are the days of creating entirely separate websites in parallel desktop and mobile versions. Now you can construct an extremely flexible website to handle multiple environments.

A responsive design responds to the user’s behavior and environment based on screen size, platform and orientation. As the user switches from a laptop to iPad, the website will automatically switch to accommodate for resolution, image size and scripting abilities. Essentially, your site will scale to whatever device your customer is using.

In Summary

Before you do anything, start with a thorough audit of how your current website performs on the new iPad. Look at imagery, colors, fonts and overall opportunities to improve the visual experience. Next, start the planning process to integrate voice and gesture-controlled interactions into your site — this is the future of tablets. Finally, convert your site design to one that’s responsive so it can be viewed optimally on every device in the market, starting with a tablet.

Follow these steps and your brand will not only be “beyond HD,” but will also excel in the tablet revolution.


The New iPad Details Hit Apple.com

The new 9.7-inch iPad has 2048 x 1536-pixel retina display, 5-megapixel camera (with the same optics sensor from the iPhone 4S) and 1080p video recording. It is available March 16 in black and white, powered by A5X chip (with quad-core graphics) and supports 4G LTE networks. It’s 9.4 millimeters thick and 1.4 pounds.

Wi-Fi only iPads cost $499 for 16 GB, $599 32 GB and $699 for 64 GB, while 4G versions cost $629 for 16 GB, $729 32 GB and $829 for 64 GB. Pre-orders start today, and the devices will be in stores March 16 in these 10 countries: U.S., UK, Japan, Canada, Switzerland, Germany, France, Hong Kong, Singapore and Australia.

Credit: Apple.com

Click here to view this gallery.

More About: Business, contributor, features, ipad, Marketing, tablets, web design

For more Dev & Design coverage:

The Customer Experience Series is supported by Webtrends, providing the unified, customer intelligence to deliver real time relevance in every marketing campaign, every digital channel. Learn how.

Bounce rate is the enemy of every website — it’s the percentage of visitors that come to your page and don’t go to any others within the same site. It can be frustrating and costly, especially if you’ve invested time and money into SEO and paid ads to get visitors to your site — you don’t want that hard work to go to waste once the person hits your page.

Businesses need to make sure their first impressions reel in the visitor in order to reduce bounce rate and to keep the person engaged with your brand. To help you combat pesky bounce rates, we’ve put together a list of usability considerations that can be used to lower your site’s bounce rate and improve visitor retention. From optimized page layouts to faster loading, there are a number of ways to keep web surfers hooked.

1. Be Mindful of Ad Placement

Let’s face it, no one likes looking at advertisements, but the reality is that many sites could not survive without them. Advertisements are a necessary evil that allows content providers to make money but too many advertisements can be a big turn-off to your readers.

Advertising that’s too close to your site navigation can cause accidental clicks, which force visitors to leave your page — unintentionally, and in frustration. Too many ads above the fold means your readers have more to wade through before getting to the heart of your site. Also, ads that interrupt your content or present themselves as if they were a part of your website can cause confusion and frustration.

Keep advertising prominently placed but far enough out of the way that visitors can still use your site without having to navigate around a sea of ads.

2. Lazy-Load Third-Party Content

The more third-party services, widgets and content your site contains, the slower your pages will load — and the faster your users will leave. By lazy-loading third-party content (loading content via AJAX when it is needed, after the initial page load) can greatly decrease the perceived load time and allow visitors to start accessing your site’s content while other media loads in the background.

3. Contrast Is Key

No one will stay on a site they can’t read. Of all of the ways to increase accessibility of a site, perhaps the biggest and easiest is to simply use good contrast. Not only does this make the site more accessible to visitors who may have difficulty seeing, but also has the overall effect of making important content easier to find and focus on. Contrast can be a powerful tool for directing the reader’s attention to where you want it to go.

More and more people are accessing the web via mobile devices, which means your site will be viewed on a variety of screen resolutions — in any number of lighting conditions — so your site needs to be as readable as possible in these situations.

4. Have Clean, Accessible Navigation

Just as no one will stay on a site they can’t see, they also won’t stay on a site they can’t navigate. Navigation should be prominent, clear and easily accessible. Consider repeating sidebar or top links in the footer and make sure click targets for menus are large enough for use at small resolutions. Avoid drop-down menus or provide alternatives, since these are inaccessible on touch devices.

If your site has a large amount of content, include search functionality and a site map to help visitors easily find the information they’re looking for.

5. Your Message Should Be Immediately Obvious

One of the biggest causes of a high bounce rate is visitor confusion. If a new visitor to your site has to figure out or hunt down information telling them what your site does, that’s an immediate red flag. Your site’s purpose should be immediately evident, and expressed clearly in both its design and its content.

Tour pages and feature pages can be a great way to give additional information to users looking to learn more, but they shouldn’t be a necessity to understand what your product, service or site provides. Use headlines and graphics to highlight important features and key information. Your content should be organized and supplemented in such a way so that it guides the reader through the experience.

Finally, make call-to-action items descriptive and easy to find. Consider, for instance, the difference between the vague “Learn more” versus the more descriptive “See a list of product features.”

6. No Distractions, Please

Once you’ve gotten a visitor to your site and have managed to engage them with your content, don’t do anything to interrupt that! Keep animation to a minimum and, whenever possible, avoid serving audio ads and disruptive fly-outs.

Interstitial ads, pop-up ads within your text content, and interruptions to speak with live chat representatives and sign up for newsletters can all turn a reader away from your site in a matter of seconds.

Treat your users with respect. Allow them to use your site for its intended purpose by presenting well-organized information clearly … and then getting out of the way.

7. Have a Responsive Layout

Earlier, we touched on mobile site usage and how increasing mobile traffic creates new concerns regarding readability and navigation. If your site gets a large amount of mobile traffic, then you probably want to go one step further by building your site around a responsive layout.

Responsive design is a good (often better) alternative to having specific mobile and large-screen versions of your site. A responsive layout uses techniques, such as CSS media queries, to rearrange and scale content based on screen resolution.

For that extra attention to detail, don’t forget high-resolution images and stylesheets for retina display. This greatly improves image sharpness and fidelity, making your site much easier to see on a small screen on devices supporting retina display technology.

Depending on the purpose, complexity and functionality of your site, multiple versions for web and large-screen may be a necessity. However, for the majority of sites on the web, a responsive design is a great way to ensure that your blog, web app or ecommerce site is easily accessible on a wide number of devices.

What other suggestions do you have for lowering bounce rates? What’s your pet peeve? Let us know in the comments.

Series supported by Webtrends

The Customer Experience Series is supported by Webtrends. What if you could deliver real-time relevant campaigns across social, mobile and web channels? That’s not wishful thinking. It’s customer intelligence. Webtrends shows you how with guides that help you market smarter and retain customers for the long haul with recipes for success and secrets of digital marketing. Go get a guide.

Image courtesy of Flickr, iDream_in_Infrared

More About: bounce rate, Customer Experience Series, features, mashable, web design

For more Dev & Design coverage:

Pinspire vs. Pinterest

It doesn’t get more blatant than this. Pinspire is pretty much a pixel-for-pixel Pinterest clone, created by the serial digital ripoff artists at Rocket Internet. It’s a bit obscene just how much of a copycat Pinspire is — from concept to functionality to the cursive-style logo. Will it be as lucrative for the Rocket’s Sawmer Brothers as their other projects, an eBay clone they sold to the real auction site for $50 million or the European deals site that Groupon gobbled up? Or will someone finally serve them with a cease-and-desist letter? If that happens, someone please pin it.

Click here to view this gallery.

In the world of social media, discovering that worthwhile original idea for your app or website is by far the hardest thing to get right. It’s so hard, in fact — and the field so potentially lucrative — that many parties who jump into the field tend not to bother. Why should you create something original when there are so many successful sites and services that you can just rip off?

At least that appears to be the thinking behind many Internet companies whose concepts, web design or apps appear to owe a lot to other, more successful forebears. Once you start looking, it’s not hard to find digital ripoffs. At best, they’re quirky homages inspired by a successful digital brand. At worst, they’re ersatz imitators looking to cash in on someone else’s idea — just a step or two above malware.

Perhaps that’s a little harsh. After all, the humor writer Josh Billings once said, “About the most originality that any writer can hope to achieve honestly is to steal with good judgment.” If you substitute “web designer” for “writer,” he may have been talking about the state of digital design today. After all, it would be impossible to find a design that isn’t at least a little derivative.

SEE ALSO: Top 5 Web Design Mistakes Small Businesses Make

Still, there’s a difference between borrowing some core design ideas and wholesale imitating. In social media, where the essential premise of connecting and sharing with your friends provides a basic architecture, perhaps the line between the two is blurrier than in other fields. After all, Facebook was called a MySpace clone, which was called a Friendster clone before that. But they are (and were) nothing like each other.

While building on existing concepts will always be part of design, so too will mimics, where the cloning is so pervasive and total that the site is nothing more than a copy of the original, merely slipped into a different skin. Here are the 10 most flagrant design ripoffs in social media today, at least to Mashable‘s eye.

More About: BlinkList, Copycats, delicious, DianDian, digg, DZone, Facebook, foursquare, Funded By Me, hacker news, heello, instagram, kickstarter, picplz, Pinspire, pinterest, reddit, scvngr, Social Media, trending, tumblr, Twitter, web design, yammer

For more Dev & Design coverage:

This post originally appeared on the American Express OPEN Forum, where Mashable regularly contributes articles about leveraging social media and technology in small business.

Sure, having a website for your business serves a practical need: to draw net-surfing users to your product or service. However, it’s also much more than slapping on a run of the mill two-column template and calling it a day. Nothing kills an online buzz like a poorly designed or drastically outdated website. Dry and boring default templates, broken assets, confusing pages and invasive widgets do nothing but harm a page’s style, which in turn reflects poorly on the company.

2012 is heralding a new wave of innovative web technologies and design, and a page that stays in step with these trends is bound to pique interest and lower your bounce rate. Even more, a well done and on-trend website remains effective well after the year is over, reeling users in with thoughtful design and building a design-conscious and taste-making reputation. Keep these tips in mind when you clean up your company’s website, and stay ahead of the curve for the new year.

1. Don’t Be Afraid to be Bold

Mail Chimp. Instagram. Pinterest. All of these websites are joined together by a commitment to bold designs and layout. Whether it’s an exaggerated footer, a turn to minimalism or a bold and new typeface, incorporating a key graphical element to a website speaks volumes about the overall composition of the layout — and a keen level of attention to detail. Opting for a bold design element is a great way to modernize a website and keep it on trend in the coming years.

A bold design can be obtained with very little money, especially for those who aren’t necessarily experienced in coding. For example, webpages operating on a WordPress can find a host of free templates that offer a wide range of customizable options to suit any business. New and exciting fonts can be found via Google‘s open API font styles and require a simple set of code to be dropped in for compatibility with a website. Inspiration and how-tos for more hands-on DIY upgrades can be found at coding/design blogs like A List Apart, One Extra Pixel and Mashable‘s Dev and Design channel.

For those with a little more cash to burn on a proper contractor, 99 Designs relies on crowdsourcing to gather great designers for companies looking for a reliable and cutting edge renovation. Companies on 99 Designs are allowed to name their own price, which means a promising design on a budget.

However you choose to go about it, a bold design dusts off the cobwebs on your old page and keeps it fresh for years to come.

2. Use HTML5 … With Care

For the last couple years, people have been buzzing about HTML5, and it’s not just chatter; HTML5 offers a lot of exciting flexibility that can make a website truly interactive. Seamlessly embedded videos, drag-and-drop interfaces and dynamic message posts are all achievable via HTML5, and with relatively little code work.

But it’s not enough to just call up your freelance web designer and throw up some HTML5 features. As with any programming language, there’s always an issue of browser compatibility. While your new and shiny UI outfitted with dynamic HTML5 might look stunning to a user running on the latest version of Chrome, your high-tech page may look like a series of broken features — or nothing at all — to a less tech-savvy user running Internet Explorer 7 (and there’s a lot of them).

This issue has been longstanding in the Internet world, but there are precautions to take in order to ensure that every user has a pleasurable experience on your website without you making a major investment. Modernizr is an open-source, JavaScript-based tool that offers feature detection for HTML5, and it’s just-as-snazzy brother CSS3. Instead of doing simple browser detection, Modernizr will figure out just what features the user’s browser can support and react accordingly. If a user is operating on an incompatible browser, then Modernizr will automatically decide whether to switch to a JavaScript-based fallback of the features or just create a downgraded version.

Make no mistake, this solution shouldn’t be implemented by a newbie to code, but it does provide a simple way to implement exciting and revolutionary features while still providing support for the little guys.

3. Cut the Fat

The traditional layouts for websites often call for separate pages that encapsulate the “About,” “Contact” and other informational areas of the website. 2011 saw minimalist designs from multiple websites, and that often translated to cutting these pages in favor of a sleeker overall design (think Tumblr). Some companies chose to forgo nearly everything to produce a strongly graphical one-page website — blogs like One Page Love and successful networking tools like Flavors.me show that people are drifting towards a bold singular statement that makes a big impact on fellow users.

As we move forward in 2012, further exploration into one-page websites is a given. But a single-page website has both its pros and cons. HTML5 can help create a one-page website that cleverly contains all necessary information via pop-up boxes or other media, but the amount of information that can be on a one-page website is still relatively limited. Do you want your website to make a bold statement about your company and focus less on a blog-style format? If so, a one-page website could be right in your wheelhouse. Are you more interested in showing off testimonials, case studies and blogs from your employees? If yes, then this trend would be worth passing on.

However, that doesn’t mean to forgo trimming entirely. Culling the best parts of your website and truncating the rest will result in a sleeker, more intuitive design — and sleek never goes out of style.

4. Tie in Social Media Intelligently

This tip could also be titled “Quit it With the Widgets.” Announcing your social media presence on your own website is an absolute necessity, but it needs to be done with care. Automatically updating widgets that stream in social media presence seems intrusive and outdated, not to mention that they can be a hassle for a DIY designer to install and maintain.

To put it simply, social media should absolutely be a presence on a business website, but it should not be a dominating presence. Integrating social media, whether in graphic links or a social ticker, should be done with the user’s eyes in mind. It’s simple on paper, but can be difficult to execute. When social media is done intelligently and with consideration, your website instantly will look socially connected and organized.

Are there any other ways you’re keeping your website ahead of the game? Let us know in the comments.

More About: design, features, HTML5, mashable, open forum, trending, web design

For more Dev & Design coverage:

Daniel Alves is the design director for the small business web design division at the digital marketing and web design company 352 Media Group.

If you read the business news that followed Black Friday and Cyber Monday, you would remember that this year’s online holiday shopping season was predicted to be the biggest in history. Many reported that online sales were up a whopping 16% compared to 2010.

However, despite these impressive trends, ecommerce websites only convert 1-4% of their leads, on average. On the other hand, some of the best ecommerce websites convert upward of 15% of their visitors. So how do they do it?

While there are many factors that go into creating conversions, one thing is certain: Great ecommerce websites successfully connect a user to a product with a system that is efficient, easy and fun.

When designing your ecommerce website, keep in mind there are three basic steps in an online shopping experience. First, a user must find the product she wants. Second, you must showcase the product well. Third, you need to seal the deal with a seamless checkout process. Read on for more details.

1. Finding the Product

Believe it or not, the biggest reason why a shopper won’t buy something on a given website is not due to its price, your customer service, or a lack of buyer’s intent. Surprisingly, the biggest reason ecommerce websites fail is because shoppers can’t find what they are looking for.

So, why is it so hard for websites to guide users to their desired products? The key to understanding this phenomenon is understanding your users.

Great web design has the ability to cater to different user needs in a unified user interface. For the users who know exactly what they are looking for, your job is to help them find their desired product in as few steps as possible. Some users might need more hand-holding, while others just want to casually browse. Each type of shopper presents unique challenges, as well as unique opportunities.

  • The Power Shopper: Power Shoppers know exactly what they want, have sophisticated shopping strategies, and don’t want to waste time casually perusing your website. For these shoppers, your first priority is to provide them with an awesome search bar so they can type exactly what they want. In terms of design, you want to make sure your search bar is large and presented with enough contrast so it’s easily visible. Per conventions, place it in the top-right of your website and make sure it is consistent across the entire website.

    As for functionality, it’s pretty much expected that your search bar should provide suggestions as you type. This allows your shoppers to type a few characters and be presented with potential choices, without having to type out the product’s entire name. This auto-complete feature can also be leveraged to cross-market products related to the product users are looking for. If you do include these suggestions, make sure to clearly label them as suggestions, not actual results of the search.

  • The Recreational Shopper: If you’re not a recreational shopper, you probably know one. This type of shopper would prefer to spend an entire afternoon at the mall casually exploring any store that piques his curiosity. They don’t see shopping as a means to an end; they’re shopping for the experience.

    While these shoppers are more likely to jump ship and not purchase from you, they provide an incredible opportunity, due to their tendency to be more adventurous and impulsive in their shopping habits. Because these shoppers respond to visual cues, you need to wow them with dynamite photography, featured item showcases, unbeatable deals and the occasional unique surprise.

    Don’t worry, you don’t have to blow your marketing budget with a tricked out homepage to lure in shoppers. In fact, some of the best ecommerce websites accomplish an eye-catching and entertaining storefront with simple and creative techniques. A popular women’s clothing website, Free People, shows off a traditional model spread, but presents a simple, unique twist when you move your mouse over one of the images.

  • The Reluctant Shopper: This type of shopper is generally uncomfortable and nervous about shopping online. She is typically less tech-savvy and needs more guidance throughout the entire shopping experience. One of her biggest concerns is privacy and security; therefore, she responds well to promising statements of trust and customer service. Because online shoppers cannot physically touch the item they are buying, promoting return and refund policies greatly increases the likelihood they will do business with you.

    For finding products, these shoppers benefit greatly from gift guides or “Shopping Wizards:” The customer answers a few pre-qualifying questions, and the site provides suggestions that suit her particular needs.

2. Showcasing the Product

Once a shopper zeroes-in on a product, the conversion clock starts ticking. Your number-one goal at this point is to get the user to add the item to his shopping cart. While there are several different ways to arrange a product detail page, several important components will help retain shopper interest and make him more likely to commit to a purchase.

  • Photos: Humans are visual creatures and high-quality photography is the key to showcasing your product. If you can only give them one photo, make sure the product has a distraction-free, neutral-colored background. If you do show your product in a lifestyle-oriented setting, make sure the product is overtly emphasized, so as not to confuse the shopper and take attention away from the product.

    If your design doesn’t allow you to display the photo at such a large size, make sure you give shoppers the option to view the photo in a modal window. Don’t offer them a zoom tool that limits them to a small quadrant of the photo. There’s no reason to not display a large photo in its entirety.

  • Price: Price is perhaps the biggest reason why a shopper will abandon your website and look elsewhere. While determining prices is outside the scope of this article, you can do a few things to help sweeten the deal. First, display the price boldly and clearly. Don’t make users register or add the item to their carts before showing them the price. This will certainly annoy users and cause them to leave in droves. If your price is discounted from the suggested retail price, show them the discount because everybody likes to know you are giving them a deal.
  • Reviews: Social influences have a profound effect on our shopping behaviors. You can tout the virtues of your product with fancy and elaborate prose, but shoppers won’t believe one word of it until it’s been confirmed by an independent customer. While positive reviews will motivate users to take the plunge and purchase an item, negative reviews give you a unique opportunity to either make product changes or respond to customer concerns publicly. This open and proactive approach to giving and receiving feedback ultimately gives your website more credibility, which translates into loyal customers and repeat sales.
  • Add to Cart: Because your call-to-action entices the user to click on the “Add to Cart” button, you must give plenty of attention to optimizing it for conversions. Try the following tips to increase your conversion rate.

    Use the words “Add to Cart.” This may seem like a no-brainer, but shoppers can either be apprehensive about the commitment of “Buy Now” or confused when they see “Add to Bag.” The convention of the words “Add to Cart” is non-committal, and leaves them comfortable to keep on shopping. It’s your most important button, so don’t hide it. Use bold colors that contrast well with your design and attract attention. Try choosing a color that is not used anywhere else in the design to really set it apart. By making the button plainly visible, shoppers won’t have to wonder how to add items to their shopping carts. Any time spent searching for the “Add to Cart” button is time in which the shopper will reconsider her motivation to purchase.

    When your shopper clicks on the “Add to Cart” button, make sure to show her some indication that the item has been added to the cart. Don’t take her to the shopping cart. If you take her away from the product page and force her to the shopping cart, you lose the opportunity to cross-sell, and the user will be less likely to keep shopping.

  • Related Products:Offering shoppers suggestions gives you the opportunity to feature items they wouldn’t have stumbled upon otherwise. Some shoppers might not be savvy in searching, but are more likely to wander through your website based on the suggestions they receive. Because the biggest reason for a lack of conversion on ecommerce websites is not being able to find the desired product, this feature gives you the unique opportunity to customize the products your customers see based on their browsing history.
  • Deals: Without a doubt, shoppers are responsive to deals and promotions, and the king of all deals is free shipping. Marketing guru Seth Godin dedicated a whole chapter of his book Free Prize Inside! to Amazon’s success with its free shipping model. In order to offer this and still make a profit, make a minimum purchase amount, but don’t make it too high. A minimum purchase amount will encourage shoppers to spend a little bit more just to get free shipping.

3. Sealing the Deal

So, you’ve gotten your shopper to add a cornucopia of products to his shopping cart, but it’s not time to break out the bubbly yet. One of the biggest hurdles a shopper must overcome is the often plagued and cumbersome checkout process, beautifully portrayed in this video.

While shopping is fun, spending money isn’t. Your job is to get customers through the payment as quickly and painlessly as possible. I’ll offer some helpful tips.

  • One-page checkouts increase conversions. Long forms with many steps require the browser to load a new page, proving detrimental to a shopper’s patience. One A/B Split Test study determined an improvement of more than 20% when users were able to checkout with one click of the submit button.
  • Provide instant chat. A study by BoldChat found that 76% of shoppers want to have instant access to a customer service rep during the checkout process. Instant chat not only lets you help your users with technical problems, but it also allows you to encourage them to complete their order.
  • Follow up. If you’ve been keen enough to capture a customer’s email address in the first steps of the checkout process, you have a unique ability to recover a lost sale if she decides to jump ship.
  • Don’t require registration. A Forrester Research study found that requiring users to register before checking out decreases ecommerce conversions by a staggering 23%. While registering users is a great tool for identifying repeat shoppers and making the checkout process more streamlined, make this an optional step. Also, consider using Facebook Connect or other social media sign-in widgets. These tools allow shoppers to register with your site without having to create a unique account.
  • Use cookies. A cookie is a small amount of information a website puts in a user’s web browser so that it can remember something about him/her at a later time. You can leverage this simple tool to remember a user’s shopping cart or shopping history, so when they do visit your website again, they can pick up where they left off.

Selling online is as much an art as it is a science. You need the creative prowess of both a marketing and design genius to attract customers, and the keen eye of a usability guru to make conversions happen. However, implementing the suggestions provided above should help increase your conversion rate, and lead to happy and satisfied customers.

Image courtesy of iStockphoto, MarsBars

More About: Business, contributor, ecommerce, features, online shopping, trending, web design

For more Dev & Design coverage:

Robert Laing is the founder of myGengo, a 500 Startups company that helps businesses all over the world go global with convenient, affordable and high quality human translation service that scales.

Let’s delve into the topic of website localization to learn exactly what every company needs before going global. But first, to define localization: the translation and adaptation of content for foreign markets. Simple enough, right?

Now, take a close look at five important points to remember when it comes to website localization. 

1. A Picture is Worth a Thousand Words

Let’s assume that the images on your company website are already geared towards your intended audience. When going global, it’s best to rely on images that are culturally appropriate and sensitive. Do this well and you’ll boost your company’s ability to connect with those visiting the site, not to mention, foster a healthy relationship with potential customers.

Let’s take a look at an example of good website localization. In the screenshot above, notice how Zynga Japan, the company behind Farmville and Cityville, incorporates the Japanese flag into its homepage banner. Clearly, the image is appropriate for a website intended for a Japanese audience.

Don’t forget that the way one audience perceives a particular image can differ greatly from another reacts. And then there’s the fact that what’s acceptable for one target market can take on an entirely different meaning for another. For example, a thumbs-up gesture in one culture is a positive affirmation, whereas in another, it could mean, “Up yours, pal!

Keep these things in mind when localizing the company site and you’ll be one step closer to connecting with your target market. Here are some other things to consider.

  • Attention to Detail: Mistaking the Italian and Mexican flags, for example, is bad news.
  • Cultural Sensitivity: People have strong feelings about things like colors, symbols and metaphors. Does the color white symbolize purity or death for your intended audience?
  • Risk Assessment: Aim to avoid any unintended consequences that could be embarrassing or potentially hazardous to your company.

The bottom line: When building trust and earning customer loyalty is the objective, images can make all the difference in the world.

2. Adapt and Adjust

Make no mistake, a one-size-fits-all approach doesn’t work with website localization. People do things differently around the world; therefore, companies going global must adapt and adjust to succeed. Let’s compare the English and Japanese websites of Rakuten, the company behind the largest online shopping mall in Japan, to explain this further.

Notice that the Rakuten USA website (above) is simple and clean when compared to the Rakuten Japan website (below). Of course, know that Japanese websites can oftentimes appear overly busy to the non-native eye.

In a blog post titled The Puzzle of Japanese Design, Sean Hussey, former employee of Rakuten USA, offers his perspective about the Japanese company: “We tried to develop our products with clean designs and interfaces, which came in direct contrast with the home company’s approach. It was understood as a cultural difference…Japanese sites are full of text, images, animations, clashing colors and scroll-scroll-scrolling layout choices.”

The bottom line: The style and design of a well-localized site means staying consistent with local norms so it looks and feels familiar and usable to your audience.

3. One Language, Two, or a Combination of Both?

Question: If a major component of the localization process is content translation, then why do some companies purposely exclude the translation of certain keywords, tabs, menus, taglines and slogans when localizing their website?

The short answer is that no one ever said website translation had to be an all-or-nothing process. In fact, in some cases it can be beneficial for a company website to blur the language lines rather than opt to translate the whole thing from start to finish. If you want to see this in action then check out the Japanese myGengo site.

Now let’s take a look at one example: Airbnb‘s website is used by people around the globe looking for local accommodations away from home. Specifically, Airbnb provides a platform for its users to rent from “real people in 19,732 cities in 192 countries.” The tagline appears on the company website, where I’d now like to draw your attention. 

In these two screenshots, notice the tagline used for the Chinese version is in English (not Chinese), yet the Italian version of the website has been remained in its local language. Why one and not the other? Also, check out the photograph of the happy friends at the top of the page. In both examples, the words below the image are in English, and haven’t been translated into Chinese or Italian. This is because localization isn’t always a science — it’s an art too.

Here are some points to keep in mind when tackling the language component of your website localization.

  • Language Lengths: Some languages appear longer when written or typed. Do the words “Invite Your Friends” fit as nicely in Italian as they do in English?
  • Emphasis: Foreign languages are cool. If you want to make your page pop, using a non-native language might be your secret weapon. Just be careful with translation!
  • International Appeal: Localization is all about going global. Translating some (not all) of the content on your site into another language might be an excellent way to strengthen your international appeal.

The bottom line: When done in moderation, there’s absolutely nothing wrong with mixing languages on a localized website.

4. To Translate or Not to Translate, That Is the Question

A company’s slogan/tagline can be one of its most important branding assets. When a memorable phrase follows a company’s name, people are more inclined to remember it. That said, making a brand stick in the hearts and minds of potential customers is by no means an easy feat. This is especially true when crossing borders and languages.

What is the most effective way for a company to keep its brand identity strong as it expands into new markets around the world? It all depends. Here are a few points worth mentioning.

  • Brand Identity: Consistency plays an important role in maintaining a company’s image.
  • Nuances: Culture systems, belief systems and worldviews shape the way we think about the words we use.
  • Target Audience: Know your audience. What may be considered funny in one language may be insulting in another.

Let’s take two examples.

A. Wikipedia, The Translation Path

Wikipedia, a company with a clear and precise mission (to be the free encyclopedia of the world), has a tagline to echo its vision. In the screenshot to the left, you’ll see the same tagline translated into each of Wikipedia’s languages.

In this case, when translating the phrase “the free encyclopedia,” there isn’t too much room for a mistranslation (don’t hold me to that). If you believe the same holds true for your company’s tagline/slogan, then perhaps opting for the translation might be a great idea.

B. Facebook, The Non-Translation Path: Everyone knows Facebook has completely changed the way people communicate with the world, but how does Facebook communicate with its users? Let’s compare the English with the Japanese version of the Facebook homepage to see what stands out.

The English page says, “Facebook helps you connect and share with the people in your life.” The Japanese page says, “Using Facebook, you can connect with friends, colleagues and classmates to deepen your connections. Also access Facebook from cell phones and smartphones.”
Notice that the Japanese page mentions users can access the site with phones, but the English page doesn’t. That’s probably because 95% of the Japanese population are mobile subscribers. The same study explains that Japan uses the mobile Internet more than any other country in the world. It appears Facebook crafted its Japanese homepage with this point in mind. So, what can we learn here? If you want to maximize your outreach potential, you’d better know your target market inside and out.

The bottom line: Having a carefully localized slogan/tagline for your company can be an effective way to foster relationships with potential customers in new markets.

5. Down to the Last Detail

A successfully localized website is one that appears to have been developed locally, even when it wasn’t. Since localization mistakes and oversights can be awkward for website users and potentially embarrassing for the company, make sure to get it right — it’s absolutely worth the time and effort. The last thing any company wants is to turn away potential customers from its website before those visitors ever have a chance to experience the product or service. Generally speaking, website localization means giving some extra attention to things like:

  • Dates: Month, day, year vs. day, month, year.
  • Time: 12-hour vs. 24-hour time.
  • Color: Avoid local color sensitivities.
  • Currency: Pay attention to conversions and formats.
  • Phone Numbers: Formats are different around the world.
  • National Holidays: Holidays are country and region specific.
  • Geographic Examples: Keep it relevant for your audience.
  • Website Language CodesISO codes are important to know.

Let’s take a look at the two images above. The first image was taken from Apple’s U.S. website, and the second from the UK website. Can you spot the differences between the two? Here’s what I came up with.

  • Date: U.S.: May 19, 2012 vs UK: 19-May-2012.
  • Time: U.S.: 9:41 a.m, vs. UK: 09:41.
  • Color: Look closely at the colors behind the girl.
  • Bonus: What’s going on behind the girl’s shoulder in the UK version of the photo. Is that a tail?

The bottom line: When the aim is to make it look like you’ve developed the website in your target market, the details are incredibly important.

Final Thoughts

And there you have it: what every company needs to know when localizing its website. With the help of the Internet, expanding into new markets continues to become easier than ever before. Of course, going global, and doing it with style, requires a strategic game plan, a comprehensive vision. Good luck, and we’ll see you out there soon!

Image courtesy of iStockphoto, tumpikuja

More About: contributor, design, features, international, web design, web-2.0

For more Dev & Design coverage:

One of the most common misconceptions about director/architect-level designers is they do less work (produce fewer wireframes, specifications, etc.) than junior-level designers. In fact, their work is more complex than people initially imagine when starting out in the field. You have to balance many ideas, requirements, and people, and have to make independent decisions that will cost thousands, if not hundreds of thousands, of dollars. The buck stops with you. This is a level of responsibility you have to endure, if not enjoy, to thrive in higher-level design.

When I was an entry-level designer, I would be handed various interaction design problems and asked for a solution. I would then present three or four solutions to my immediate managers and be done until the next such request. I was always curious what happened after I handed it off. I came to realize that there were several more handoffs, each getting more precise and more fierce as it moved up the chain of command. Different teams would have to get involved, then team leaders, then finally stakeholders, each giving opinions on changes, personal ideas, and ways to try and cut costs. The balancing act that you must do for that is beyond the scope of this article, but I will try to help you deliver the best possible solution you can.

This article is an overview of how to deliver completed designs to other teams or stakeholders in the highest levels of design. I am not going to explain details of design process, because you likely have one of your own, your team’s, or your company’s. I’ll specifically tackle how to walk into a large meeting to present deliverables and get the best reception possible.

I should also add that my experience is with large corporations, such as Microsoft and Apple. How I present ideas to colleagues may be very different than how a vendor or a design agency would present an idea. My strategies for delivering designs are meant to influence a set of peers to maintain the best possible experience for the user. Your focus should be entirely on what’s best for the customer.

Share Documents in Advance

Include all relevant documents including the specifications, executive summary, UX testing materials and, if possible, other requirements that stakeholders have given you. If they want to read before the meeting, you should facilitate that in every manner possible. Air out your dirty laundry, include links to past specs and meeting notes if applicable.

The importance of this step is to help them prepare for the meeting. It’s bad form or just bad judgment to introduce a new idea or direction in a large meeting without proper warning. The initial kneejerk reaction will most likely be negative. Resistance to change is inherent. It’s better to give them as much preparation material as possible to facilitate a speedier meeting. You’ll be able to presume understanding of the concepts or reference the materials you have sent out during the meeting with more confidence. I like to include past UX testing findings with notations. This lets me speak directly about the customers’ needs when discussing solutions: “As you can see, six out of seven customers were searching for a way to do X. This pushed us to design a solution for X.” Also remember at the beginning of the meeting to make sure everyone got the materials and to ask if anyone had any questions.

Some examples of documents that I have given out prior to meetings:

  • UX findings, executive-level summaries (two to three sentences discussing the results of an entire testing round)
  • Excerpts from books describing certain design ideas or thoughts (one in particular I have given out several times is Barry Schwartz’s The Paradox of Choice)
  • Links to or wireframes of past designs and findings, or conclusions gotten from those designs
  • Links to TED talks (Barry Schwartz gives a great one)
  • HTML/Flash/WPF prototypes in a ZIP so they can play with them before they see them in your presentation
  • Sketches or drawings of past designs
  • Links to specific points in videos of UX Testing for particular quotes

Know Your Colleagues

Be familiar with each of the personalities in the room, and why are each of them has been invited to the presentation. Determine the roles of each member and make a mental note of the history your design team has had with them. Try to anticipate what each person might challenge you with. Think through questions that each may ask and try to determine if there will be any “gotcha” moments beforehand.

At Microsoft, from my recollection, approximately 50% of the employees have a title that’s some variation of “program manager,” or PM. This is a very general job title and can represent so many different types of roles. The PMs I usually came into contact with were software PMs, whose job is to watch the money. They keep track of the timelines, the budget, and generally keep an eye on all the different teams working on a particular feature set. They ensure everyone is working as hard as they can and that we finish on time and on budget.

When presenting to a group of PMs and developers a significant change to current thinking or process, the reactions will be varied. Many things are on the minds of the participants, including timeline, amount of code, impact on the customer, impact of the footprint (memory or cycles), etc. The developers may invite the challenge of trying to come up with something ingenious to solve the problem of developing your solution, but the PMs may want to keep resource utilization to a minimum. Conversely, the developers might not want to get that deep into the code for something they see as arbitrary and unnecessary because it will have a low customer impact, while the PMs push for more “wow” moments. This is why it’s important to understand where each of the meeting participants is coming from. If one of the PMs is constantly fretting about deadlines, be prepared to speak directly to how your designs will actually affect the deadline.

Do Your Homework

Are there any academic papers relevant to your designs? Have you checked ACM? Developers and PMs react positively to peer-reviewed academic papers given as support for design decisions. Being able to cite testing results or give specific examples from an academic paper is worth its weight in gold.

It’s also worth investigating whether there is any company history that might bear on your work if this is an ongoing version of a product with significant development history. Has this particular solution been tried before and failed? If it did fail, be prepared to speak to that history and how your solution is different and an improvement. Be specific. Have all raw notes, summaries, and findings from user testing ready to go. Be prepared to deep dive into the results as much as you need to be. Be able to cite specific testing answers if need be; more times than not, it’s very useful. I have found that when PMs or developers don’t want to do a particular piece of a design—perhaps because of the number of hours it will take or its perceived risk to the stability of the build—they will hammer it incessantly, challenging the thought process, the reasoning, or the design process. These concerns are easier to respond to when you have user testing results ready at hand, and have organized them in a way that anticipates how you might need to use them to respond to concerns.

When you start designing a particular feature or add-on to a product, remember that you are not the first. There should be a massive amount of documentation on why the designers got to the point you are at now. If you were designing for Microsoft Office Help, for example, you would not expect to go in fresh. There is a massive amount of documentation, designs, test results, and other political/corporate decisions that went into where it lies.

Before presenting some new and interesting feature or add-on, always make sure that you have researched the history behind it first. Talk to some of the senior people; do they have any recollection of that particular feature ever being introduced? Can they recall any unwritten corporate decisions, legal problems, or technical issues that led to its currently not being implemented? Research the idea or feature to the best of your ability to help prepare yourself for speaking to why it should be implemented now if it wasn’t in the past.

Understand the Technical and Engineering Requirements

If you don’t quite understand why engineers cannot implement a particular requirement, ask questions. Generally, you will find a dev or two who loves helping with and learning about design. It is very helpful to have an ally in the development team, someone you can confer with, bounce ideas off of, or get good development advice from. In my experience, there is always at least one developer who is more design savvy than a normal developer. Relationships with this type of person are invaluable in the design process. Feed your designs to your design-savvy developer for feedback on the complexity of implementing the designs how it would affect the product technically.

Be friendly with developers. They are not your enemy (most of the time). Developers are fearful of designers’ ability to create thousands of lines of code with a simple sketch. So instead of approaching your design work simply from a designer’s standpoint, approach it as someone who would also have to build it. Whatever you get approved, someone is going to have to labor over to actually implement.

Be precise and be exact if your aim is to get full sign-off on a design. If you don’t get this detailed in your review, expect to have to do another review when you do. Do not go into a meeting and describe a “slow animation that sweeps from the left;” do go into a meeting and say, “The animation begins and lasts for 0.3 seconds, and here are four slides, from 0 to 0.1 to 0.2 to 0.3 and the resting state at 0.4.” But even this isn’t enough. Make sure you have talked to a developer first to see if this can even be implemented in the manner that you want it to be.

Understand the overall system ramifications of your design are beyond the scope of this article, but I would suggest you gain a familiarity with all the workings of your particular application or solution have on whatever system it may be running on. This includes, but it not limited to, the variables that are changing hands, the memory load, the machine cycles, the net connections, etc. Try to understand as much as you possibly can before asking the next level of stakeholders. What is the effect on the rest of the application or experience? You don’t want the entire experience to pay a tax (in whatever machination that may come in the form of) for a small feature that it shouldn’t have to pay.

Conducting the Meeting

At the start of the meeting, explain the goals for the meeting and what you want everyone to get from it. What you’d ideally like is universal buy-in and strong approval for your design so it can get sent to production, but if you don’t get that, don’t freak out. If you do get rejected, try to understand everything you can about why you got rejected. What were the specific points that supported their criticism? Can you fix them? Take critique well. Remember that arriving at a solution is not easy, especially when you’re working with larger and more complex systems. You may get approval for 90% of the design, but stakeholders might request tweaks or different variations on particular details. This is the easy part. Tweak or do these variations in quantity—three or four of each—and present them to a smaller audience, sometimes only the dissenters. This should help you get to the next level. Iteration is part of the process. I have personally gone through 8-10 design iterations on a particular feature before I finally got approval. Don’t think of it as 20% rejection, think of it as 80% approval!

Some additional tips for running the presentation:

  1. Try to keep questions until the end of the presentation, remembering to leave ample time for questions and challenges. Depending on how radical, new, or complex your solution is, be prepared to spend a larger portion of the meeting receiving and responding to feedback.
  2. If you get challenged, ask questions. Try to understand exactly what they are saying and understand their reasoning. Also try to make sure everyone else in the room understands it. This is very important if you need to explain the challenge to your team after the meeting.
  3. Answer direct questions directly. If you do not know the answer, say, “I’ll find out and get back to you.” Then get back to them with an answer soon after the meeting.
  4. Answer direct challenges directly with all relevant documentation. If you don’t have it, do not try to persuade them with vague answers. Tell them what you have, why you made the decision, and let it stand on its own two feet. Do not get defensive beyond reason. If something is challenged, explain how you got there and let it rest. Do not repeat yourself (this is rule #1, as repeating yourself will make others feel talked-down to). Do not defend the solution like it is you personally. Do not fumble for answers. If you can’t answer the challenge directly, respond with “I’ll find out for you.” Letting feedback get to you personally is unprofessional. You are not an artist delivering a masterpiece.
  5. You may encounter unreasonable challenges and you can get “edge-cased to death,” which is what I call it when people try to kill things with the most unreasonable of problems. I also call this the “one-armed man in Uganda” challenge. I actually had someone bring up a one-armed man in Uganda as a possible customer and therefore we needed to think of him when designing a solution. This can be extremely frustrating, but if you have critically thought-out your design beforehand, you will be prepared.
  6. Though you may feel you have answered someone’s question or challenge completely, ask the person if he feels you’ve completely answered his question. Just because you think it answered it does not mean you have.
  7. Be transparent about the entire process you took getting to the design. Have slides ready showing testing subjects, iterations, sketches, and any other materials that you may have collected along the way.
  8. Address problems with the design honestly. Be transparent about all the things that have given you headaches over the course of the project. Helping people understand the journey you’ve been on helps them respect the destination all the more.
  9. Talk about the user or the customer directly. Your job is to ensure the user has a great experience, not to make the developers happy. As you move up the ladder of stakeholders, you will find a common trait: they all care what customers think. Speaking directly to how designs affect customers will keep the conversation rooted in your sole purpose, to make the customer happy on all levels.

Always remember to do what is best for the user. You aren’t there to make your colleagues happy or sad. In the end, you all have the same goal. You all want to make the customers happy and create a piece of software that you are proud of. This can be one of the hardest parts of working in the UX field. Trying to be a voice for the user’s point of view in decision-making. Senior colleagues will all have their own ideas what is best, so use the user’s perspective as an objective frame of reference for responding to them. Don’t explain things in terms of your own opinion; rather, speak in terms of the user. Don’t say, “I picked this because it was a cool design;” instead say, “We chose this design because it tested amazingly well with current/future/target customers.”

Closing the Meeting

Go over what you have agreed upon and ensure it’s clear. Give action items with dates to everyone who needs them. If someone assigns you an action item but says they need to find something first, call that out; if they don’t find that something, you shouldn’t be responsible for the action item. Schedule meetings immediately following other dates and action items. Your job is to get this through to production. Your job is not complete until it is.


Discuss the meeting with teammates who were not available to attend. When discussing challenges that were brought up, give them the best representation possible rather than being dismissive of them or making straw men of opposing arguments.

An Unspoken Truth

This piece of advice I have saved for the end is generally not talked about in senior level/corporate design circles, but it I think one of the most crucial aspects of getting approval for a design. I think it was best said by a very respected designer and dear friend of mine (who shall remain nameless): “The best way to get a design approved is to let them think it’s their idea.”

I cannot emphasize this enough. By leaving strategic holes in your design and allowing others to come up with conclusions or obvious fillers, it reinforces their own personal stake in the design. This will get them personally involved in the approval process as one of your biggest advocates, since they’ll equate defense of your ideas with defense of their own. This whole idea is rather sketchy, so use it with caution. You will be giving up some ownership of your design, but in the end remember your goal is to make the best experience for the user. It’s about them, not us.

Image courtesy of iStockphoto, Yuri Arcurs, Flickr, poolie

More About: Business, design, mashable, web design

For more Dev & Design coverage:

The Leaders in Design Series is supported by Volvo.

Jesse Thomas founded the creative agency JESS3 as a student in 2007. In a few short years, he managed to climb an impressive entrepreneurial ladder. The company has completed projects for Facebook, Google and Nike, among dozens of other tech companies, publications and brands.

Thomas spoke to Mashable about his proudest moments, which include the NASA campaign that checked astronaut Doug Wheelock into Foursquare from outer space. He also reveals the clinical nature of design, explaining that sometimes his work feels more like plastic surgery than an academic endeavor.

Read on to discover where Thomas began and what he sees for the future of design.

Q&A With Jesse Thomas, Founder of JESS3

Explain in your own words the concept and work behind JESS3.

“Our approach to design and strategy is very academic and surgical. Some days we feel like brain surgeons at a top military hospital, other days we feel like plastic surgeons.”

We embody the youthful spirit of our team and clients by constantly pushing to be as great as the masters we study. The vision of JESS3 as an agency has always been to experiment with cutting edge technologies and creative techniques for application in advertising/marketing efforts. Our drive is combining social technology with raw creativity. We have always been interested in visual storytelling and have recently been focusing on data art.

Our approach to design and strategy is very academic and surgical. Some days we feel like brain surgeons at a top military hospital, other days we feel like plastic surgeons. Our clients allow us to think big, and we like that. My goal for JESS3 is two separate paths: [to become] an agency conglomerate like WPP, [and to develop] product design and services like Microsoft.

Your list of services reads like a six-page diner menu. Is there anything you don’t do?


We focus on the things we are good at. But part of being independent is trying things out and seeing what works and what doesn’t. Our core focus has always been interactive design, but as we started doing more information design projects, we needed to have in-house research people.

Our clients wanted us to focus on just strategy, so we started hiring people to do that. We saw an opportunity to combine our infographics design with the modern version of PR, in which the focus is targeting bloggers, so we did that. And clients wanted us to build them large installations for their events, and it seemed straightforward enough, so we learned the bits we weren’t familiar with and made it happen.

The name JESS3 is somewhat eponymous. How did you land on it?

Years ago when I was a student … Eminem was quite popular, and he was writing his name in all caps with the second E as a 3, but because it was in all caps it was subtle. People told me it was a bad idea to use my name, but I looked at successful brands like Ogilvy, and thought about the lineage of consultants like lawyers and doctors, and realized that naming something after yourself is how it’s always been done. Plus, I always liked putting my name on stuff, and it was an excuse to print up stickers and write my name all the time.

Define your own design philosophy and how it continues to influence your company.

We always strive to get things right the first time. Being precise with creativity is not easy, and thus we have needed to hire a team of dedicated professionals that share the same passion for accuracy. We often mock-up multiple directions to find that perfect one, instead of forcing one process to produce that perfect product. We never know what the next project might be, but we can plan ahead and use our experiments in new client projects. We operate like a creative lab in that sense.

What are the projects you’re most proud of?


I’m most proud of our diverse body of work: from an outer space Foursquare check-in for NASA to a stop-motion video production for Google. I am most proud that Facebook asked us to build a site for their 500 million user announcement. It was such an honor at the time, and we continue to work with Facebook.

Where should today’s designers be looking for inspiration?

Look for inspiration in the real world. The web is a great place to start, but strive to see for your own eyes the best works of the world. Go outside and take a pen and paper. I also use Delicious to save all my web links for inspiration, and I still love magazines like Monocle and Wired. Dribbble and Forrst are great new interactive design communities that didn’t exist a year ago. Go there! Communities like Kickstarter, Behance and Etsy are great new places to meet like-minded designers and be inspired by their work. And make sure to always study the history of design — those that forget history are doomed to repeat it!

What’s in the cards for future design?

“Audiences didn’t want rich websites. They wanted the illusion of a lighter option, which to purists is simple, soulless crap.”

Design is on the front lines of everything from saving lives to entertainment. I think you will see more exciting partnerships between industries like music and design. Perhaps it is a combination of game, website and music? Google, for instance, has a sweet small team called Data Arts, which created Arcade Fire’s Wilderness Downtown.

One key thing to look for in the future is better, more accessible tools. Right now we have a huge gap between professional and consumer, which I think will close in the future. I think it totally sucks that Apple and Adobe don’t get along. Apple is the kind of brand that should offer better design tools natively. Motion and Final Cut Pro are great for video and animation, but where are Apple’s Photoshop and Illustrator killers?

Ten years ago we had glorious Flash sites, and that kind of rich experience is what got me excited about digital design. Then web 2.0 came along and social networking made it cool to have a lame website with no design. Somehow we allowed ourselves to step back for the sake of scaling across mobile and unprecedented growth. Audiences didn’t want rich websites. They wanted the illusion of a lighter option, which to purists is simple, soulless crap. Social networking killed the web-design star!

Series supported by Volvo


The Leaders in Design Series is supported by Volvo. Experience the newest Volvo for yourself. Step inside the 325hp 2011 Volvo S60 T6 R-Design at volvocars.us.

More About: Advertising, data visualization, design, features, Leaders in Design Series, mashable, web design

For more Dev & Design coverage:

Daniel Alves is the design director for the small business web design division at the digital marketing and web design company 352 Media Group.

The navigation bar is the most important design element on a website. Not only does it guide your users to pages beyond the homepage, but it’s also the singular tool to give users a sense of orientation. With this in mind, it’s important to adhere to time-tested design and usability conventions. Doing so will give your users a comfortable and easy reference point to fully engage with your content.

Despite the necessity of an accessible navigation bar, usability studies on navigation across the web aren’t positive. One study by User Interface Engineering shows that people cannot find the information they seek on a website about 60% of the time. While this failure rate might be acceptable for your average blog, a business website simply cannot afford these stats. Even worse, many users often find navigation usability extremely frustrating, citing annoying hover errors and inconsistencies. Another study by Forrester found that 40% of users do not return to a site when their first visit is negative.

So how do you ensure that your users are able to quickly and easily find the information they need?

The Basics

Employ these basic concepts to help users move more efficiently through your website.

Start with content. Believe it or not, most websites start backward, meaning a designer will suggest navigation items before determining all the content possibilities. This isn’t entirely unusual — often the content isn’t ready before the design process begins. Jeffrey Zeldman, a usability guru, suggests, “Content precedes design. Design in the absence of content is not design, it’s decoration.”

It’s important to properly analyze and organize all your content into a logical and highly usable structure before even considering design choices. Once you accomplish this, only add complexity if absolutely necessary for your users.

Don’t overwhelm. The main role of a navigation bar is to provide your user with a choice. Overwhelming a site visitor with too many options impedes his ability to quickly make a choice. A navigation bar with five to seven channel items is sufficient organization for most websites. Plus, it fits nicely in the width of most website designs. Once you reach eight navigation options, you severely limit readability and usability due to width constraints.

Keep it simple. Use precise and recognizable words in the navigation bar. Refrain from long phrases that consume screen real estate by limiting each navigation item to 12 characters or less. Also, don’t use words that an average user wouldn’t completely understand. People are used to conventions; therefore, err on the side of familiarity. For example, use “Contact Us,” not “Get in Touch” or “Let’s Talk.” Finally, leave out unnecessary words that don’t add anything to the navigation item. Instead of “In the News,” consider simply “News.”

Actions on the right. Because people read from left to right, they naturally expect action links on the right-hand side of the navigation bar because moving right suggests moving forward. Use the left side for more informational links. The exception is the “Home” link, which as a backward action, should be furthest left.

Avoid Flash, for the most part. While Flash is generally frowned upon by usability experts, it presents aesthetic possibility. Flash’s biggest problem is that it typically is not implemented in a way accessible to screen readers and mobile devices. And while you don’t want to implement the actual navigation with Flash, you can get away with embellishing an HTML/CSS Navigation Bar with Flash to add visual interest and retain usability. One great example of this is the Atlanta Botanical Garden website (above).

One-Level Navigation Bars

Now that you know a few basic principles about creating a highly effective navigation, let’s learn from already existing navigation bars, including one-level bars, drop-down multi-level bars and mega drop-down bars. While you’ll ultimately decide which type of navigation works best for your website, we can show you what to do and what not to do depending on the type of navigation bar you eventually choose.

Apple vs. CNN

Experts have often heralded Apple as the gold standard in web design. The company has managed to distill everything it does into seven links, not including the logo and a search bar. It’s the epitome of simplicity and straightforwardness — from one of the largest companies in the world.

To its credit, CNN has to cover an entire planet of news, which makes it somewhat understandable that its site features a whopping 16 navigation bar links. While this navigation structure might work for CNN, it’s highly unreasonable for your average personal or business website. Cramming this many links in the full width of the website hinders readability by forcing a small font size and very little negative space on either side of a link. On a practical level, it’s a huge chore to read through every single link to decide where you need to go.

Drop-Down Multi-Level Navigation Bars

Drop-down menus became very popular at the end of the ‘90s during the dot-com boom because they allowed a user to get to any page on a website with one click. While that may seem like a huge advantage at first, the option presents several usability problems if done incorrectly. Many users find these types of navigation bars frustrating because they require precise cursor movements in order to successfully move through deeper levels. With this in mind, it’s best to reserve ample vertical and horizontal space for each link so that users can navigate without clicking on the wrong page.

Denny’s vs. Sony

Earlier this year, Denny’s new website design that was met with mixed reviews. On one hand, the website featured an innovative and technically complex browsing experience, but for many critics, it was overdone. The navigation bar features gimmicky JavaScript “enhancements” that actually slow the user down. For example, when you hover over a link with the cursor, it takes a fraction of a second for the animation to fully reveal its contents. Even that fraction of a second is slower than our mind’s ability to move forward.

Sony, sticking true to its understated style, provides a no-nonsense drop-down menu that gets the job done efficiently. Sony’s helper icons next to links specify parent and action links. Overall, Sony’s navigation bar responds instantly and manages to stay out of the user’s way with its subtle yet effective design.

Mega Drop-Down Navigation Bars

Mega menus are the newest design craze for large sites with a lot of depth and categories, such as Zappos and The White House. These menus are usually only two levels deep, but the second level features a large panel complete with images or multiple columns of links. The benefit to these menus is that a site not only provides more links for the user, but also includes context and hierarchy within those links.

Target vs. Lowe’s

A mega menu’s blessing can also be its curse. Sure, these navigation bars give you more room to include links, but without proper hierarchy and context, mega menus can quickly turn into a sea of unnavigable options. Perhaps the best example of this is Target.com. It doesn’t take long to see that the company has crammed way too many links in its mega menu, without the proper hierarchy or context.

While it might seem convenient that a user can get to Target’s “Spice Storage” department directly from the second level of its menu, is that really necessary? Including links like this creates too much noise and doesn’t let the user focus on the important higher-level category items. Another big no-no is the sheer size of Target’s menu. Some of the mega menu panels exceed the height of a standard 13-inch laptop screen size. The last thing you want is to force someone to scroll down to use your navigation menu.

Target could learn a few things from Lowe’s website. Lowe’s has managed to provide a wealth of links with plenty of hierarchy and context. For every panel of links, the company has made the most popular and timely links stand out by elevating them to large blocks of thumbnail images.

By distinguishing the most popular items, Lowe’s makes it easy for users to access the links they’re most likely to click anyway. The thumbnail images also contribute greatly to context. By providing recognizable images for their most popular categories, the user doesn’t even have to read to understand which part of the menu he’s in. It’s akin to walking by Lowe’s brick and mortar store, and scanning the contents of each aisle to zero-in on your desired product.


When choosing a navigation bar type, start simple. Evaluate your content thoroughly and ask yourself what your users need to access quickly. More often than not, a complex navigation system is an indicator you need better content planning and organization. If you absolutely need to give your users so many options directly inside the navigation bar menu, follow the principles mentioned above to create an efficient and enjoyable experience for your users.

Image courtesy of iStockphoto, mkurtbas

More About: contributor, design, features, How-To, web design, Web Development

For more Dev & Design coverage: