Congratulations to our winners of a user test project from Loop11!

Dave Vogler
Jacob C. Alonzo
Clifton

We will be contacting you this weekend to give you the details on how to redeem your prize!

Thank you to everyone who participated. And keep you eye out for more great stuff from Fuel Your Interface!

Loop11 is an online usability and user experience testing tool, allowing individuals and companies to conduct online, unmoderated user testing on any kind of digital interface. Loop11 is not a survey or web analytics tool, but a user experience tool… helping you to understand user behaviour and improve your website’s usability.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

This web UI template kit is made completley with shape objects and in some cases converted into SmartObjects. So they’re totally scalable. There are no usage restrictions but if you find them helpful give us a shout. We love hearing from you!

CLICK TO DOWNLOAD

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Desktops Interfaces

BumpTop

There’s not a lot more I can say about BumpTop that isn’t already talked about in the video except that I have some hands on experience. I have used it for about 2 weeks now on both my desktop Mac and PowerBook. The learning curve isn’t as straight forward as they make it seem in the video, but it was easy enough to get user to in a week or so. My desktops (both real and virtual) are alway a mess. I have Stacks and Spaces to help me get organized, but BumpTop is more natural, and it really is what Spaces and Stacks should have been.

BumpTop’s gestures (Pro version only) work with your laptops multi-touch touchpad, but also works with a Wacom Bamboo Touch so you desktop users aren’t left out.

Yes, you’re still sitting in front of a screen but BumpTop really give you a sense of reality. The physics are superb and stacking docs in piles by random grouping or piles by type, help keep you organized.

Other notable alternative computer desktops which have been around for some time and most look at the desktop in 3D from the outside.

• DeskSpace
• TopDesk
• CubeDesktop

They have the “fun factor”, but don’t have the natural usability of BumpTop. It is because of this that they will remain a novelty at best. Don’t get me wrong, they are all forward thinking alternatives to the flat 2D experience of the last 30 or so years, but if we are truly going to change the game, even BumpTop needs to start looking further ahead.

Surface Interfaces

Microsoft Surface

I stil vividly remember my father taking me and my older brother to go see Star Wars and the scene where C3-PO is about to beat Chewy at a game of HoloChess. I wanted one of those so bad I could taste it! For the next, oh, 31 years I would be destined to compare every new technology to something I saw in Star Wars and we’re finally seeing a lot of what was science fiction becoming science FACT! In the next couple examples we’ll take a look at what we can expect to start seeing.

This team from CMU developed a D&D game using Microsoft’s Surface that makes me feel like a kid again!

Do a search on YouTube (or your video site of choice) for Microsoft Surface and you’ll find a plethora of examples of how this technology is being used. From entertainment to retail this the Surface UI will most definitely change our lives.

advanced touch-manipulated user interface

This video from TED in 2007, Jeff Han demonstrates another surface UI. By watching the video you can see how this surface differs from Microsoft’s Surface in that it has pressure sensitivity, and is nt only sitting at an angle (which may be for the purpose of the demonstration only) but it also appears to be a transparent interface. At certain parts of the video you can see the underside the surface and still see the UI, ala Avatar and Minority Report.

3D (2½D) Immersive Interfaces

Proximity Sensing

Utilizing the theory of electrostatics, we have designed a low-cost human-computer interface device that has the ability to track the position of a user’s hand in three dimensions. Physical contact is not required and the user does not need to hold a controller or attach markers to their body. To control the device, the user simply waves their hand above it in the air.

Gaming consoles like Nintendo Wii use infrared sensors that detect position and an accelerometer for speed and rotation, but are tethered by a physical controller. Yes, it’s wireless, but you still have to hold something to control actions. Looking ahead, these limits need to be lifted.

Microsoft’s Project Natal

By now I’m sure most of you have heard about Microsoft’s answer to the Wii, Project Natal. It isn’t the true controller-free gaming/navigation that has my interests peaked, but the camera with facial recognition and the ecommerce, or as I like to call it, vCommerce (virtual) possibilities that has my brain sparking, but we’ll get more in to that later.

In the video you’ll see at about two-thirds the way through the video there is a short segment where a woman has a personal shopper recommending a dress for her to wear. She virtually takes the dress off the rack, drops it on her virtual self and is able to turn from side to side, seeing how this dress will fit from any angle. How well this works, still remains to be seen, but my guess is soon we will be shopping for clothes online, not in front of our computers, but in front of our televisions. Not with a retarded looking 3D model but by looking at ourselves via video in the comfort of our own homes. FINALLY!! I can try on women’s clothes without getting chased out of the store! (did I say that out loud?)

So far, all the interfaces we’ve looked at have at least one common thread. The fact that all of them require us to be where they are located and are then confined to that space until we decide to stop using them. Which brings me to the last of our look at alternative interfaces.

Augmented Reality

Augmented Reality is here and it has the most potential for becoming an everyday part of our lives. We will wonder how we ever lived without it.

Mobile devices will be the driving factor with this new technology. Because of its ability to free us from the tether of having to be where the user interface is, sets it apart from all the rest.

Apps like Acrossair’s, “Nearest Tube” help us in our everyday lives by using something we always have with us. Our phones. There are already a few apps using augmented reality, and we’re sure to see more and more.

Consider this possibility.

You’re in (major metropolitan area) and you’re looking for the nearest (big chain department store). You launch your Augmented Reality app from your phone, enter your search term and hold up the phone. Using the phones camera, just like Nearest Tube, you get an image overlaid on top your camera view with arrows pointing you in the right direction and distance to said location.

In your preferences you have already indicated that if the distance exceeds 2 miles that the app will search for local taxi services with a 3-star rating or higher. You are in fact 4 miles from your destination, there are no taxis in sight, so you tell the app to send your location to Acme Cab Co. and confirmation is sent to you saying a cab will be there to pick you up in 5 minutes.

You arrive at your department store. Browsing around the new Spring fashions you see a end-cap display with a recognizable symbol. Open your Augmented Reality app again, point it at the symbol and a video starts playing. In this video a virtual stylist is telling you how to accessorize the garment you’re looking at, or telling you more about the products designer. Or perhaps it’s a Beyoncé’s new Dereon line and you get to watch the new Beyoncé video.

Let’s take it one step further. Using the Microsoft Natal garment idea. You have already created your virtual model and this time you point the camera at the bar code on the garment. Now you’re looking at your virtual self wearing the garment. Moving the model around from side to side you realize it must have just been the color because it looks horrible on.

From desktop alternatives to location-based augmented reality, these are the types of user interfaces we have now and can look forward to. The technology is already here. It’s up to us to think of new ways to use it.

What are your favorites? Did we miss any that are even better? Let us know!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

The size of the product catalog of your online store will decide how to lay out your site’s nav. Generally speaking, there isn’t much difference from one site to another. Looking at a handful of the sites from the top 100 list has shown that most sites with similar competitors will use the same style of navigation. Furthermore, we discover a good percentage of the top sites use a horizontal nav bar with drop down menus broken down by store front and then broken down further into various departments, brands, and so on.

This is neither a comparison nor a showcase, but rather a case study, or the philosophy behind how e-tailers use user interface design to (hopefully) get you where you need to go in as few clicks as possible.

1. The Home Page

Navigation starts at ground zero, the home page. Sites like QVC, Overstock or Amazon start their top nav differently than specialized retailers like BestBuy. Where the aforementioned sites may have an Electronics section, BestBuy’s subject is electronics so they break their top nav into “Departments” from the beginning. Sites like QVC and Amazon will take one step back and start their navigation presenting you with “Store Fronts”.

This is a basic hierarchy that tries to emulate how brick and mortar stores are physically presented. Next time your in a store like Target or Wal-Mart, look at how the store is layed out and then compare it to their online presence. See how they are similar and also how they differ.

Trends

• Horizontal navigation across the top of the page with drop down menus letting the user “jump ahead” to specific areas of the site related to that specific category. Moving from the home page directly to a specific brand is a big time saver. Less clicks equals happier customer. This is the primary means of navigation and because of this, it is persistent across the entire site. Nothing surprising here, sites have employed this type of navigation for a long time and this isn’t limited to e-commerce sites. Nevertheless, for the purposes of this study it is still a noticeable “trend”
• Large promotional advertisements, usually using “lifestyle” imagery. Often times there are multiple promotions that cycle through, one after the other. We also notice that some of these promotions aren’t static, but allow the customer to interact with them without clicking through to it. Using this type of progressive disclosure gives the user more information and helps them decide whether this is the correct path to take. It Cleans up the design by not forcing context without it being asked for.

2. The Storefront

Like we mentioned before, this is how sites like BestBuy will start their navigation. You’ll find departments like TVs, Cameras, and Computers presented to you up front, where a site like QVC will store all these under an Electronics storefront. The reason for this is real estate. Amazon.com may have more laptops than BestBuy, but because they sell so many other products, to make the UI more usable they break it down one step further.

The Storefront will also be one of your higher traffic areas and where you’ll find more targeted promotion. Next to the Home Page, Storefronts are where retailers target customers with offers and deals to persuade them to buy a specific item, or browse deeper into a department.

By this point we find the navigation will normally switch from the horizontal top nav to a vertical navigation on the left. Since now we aren’t limited by real estate, we start to realize this is where things can get confusing. We want to help the consumer narrow down their choice, so we see keeping relevant information at the top and reserving secondary options below. This secondary information varies from site to site, and range anywhere from “Buying Guides” and “Community Links” like blogs and forums to “Clearance”, “Best Sellers” and other promotional messaging.

Trends

• Again we see large promotional space, obviously now targeted depending on which storefront you’ve entered. We also noticed that products being promoted typically have a seasonal influence behind the messaging. Taking the Electronics storefront as an example, you may see cameras being promoted to capture your child’s graduation moments in the Fall and perhaps a Father taking pictures of his son at his first baseball game in the Spring. All used to evoke an emotional response to persuade the consumer to make a purchase.
• We also see secondary promotions that might promote high-rated products, or even target a specific brand if it has a promotion that entices the user to dive deeper into the site. An example would be Free Shipping on select Asus laptops, taking the user directly to the Asus Brand Page.

3. The Department Page

Depending on we’re lead through the experience, a Department Page is where the consumer really starts to make tougher decisions. They’ve made it from the Home page on through the Electronics Storefront and into the Computer Department, but do they want a Desktop or a Laptop? Perhaps a Netbook or a Tablet PC? Decisions, decisions… OH THE HUMANITY!

The Grid

Generally speaking the Department Page is also where we see grids of product show up. These product grids show us product top-line description (headline), prices, ratings, and the ability to add the product to our cart or bag. In most cases the grid page will also give us the ability to sort the grid by specific relevance. Price low to high, rating, new products, or featured items are some of the more common sorting options as well as letting the user choose how many products to display per page.

Trends

• We see some interesting trends on a few sites that offer an overview of an individual product without going to that particular product detail page, keeping the visitor from yet another click off the path. This “quick look” is like a mini product detail page giving the customer color swatches, alternate images, size choice and even sometimes sharing options posting items to Facebook and Twitter. Sites like QVC even offer video at the grid level which is “easy” for them to do since they are also a 24 hour television shopping network, giving them mountains of video to work with, and video is already playing a huge part in online commerce.
• The grid itself is getting some attention, sometimes allowing the user to switch between types of views. From the standard grid to a larger version and even list view. Whenever possible allowing the consumer to tailor or personalize their experience, even if there isn’t a lift in conversion it shows the customer you care enough about them by giving them the choice, which reinforces their loyalty to your sites brand.

4. The Brand Page

Drilling down to a sites Brand Page the customer is ultimately at a decision-making stage. Sites like Dell.com will consume you with their brand because thats who they are and that’s what they sell. When you take a site like BestBuy who has their own brand, brand pages take on a duality which can sometimes be difficult to convey. BestBuy sells Dell computers yet still needs to represent themselves to the user for a consistent experience. They also need to embrace the consumer will the Dell brand. This is acomplished with either subtly or with obvious in-your-face promotion depending on how each brands needs are met. It is as simple as brand-familiar top-line descriptions, logo usage and product images to, in some cases, creating a brand specific experience.

Factors that come into play when deciding between a heavy brand representation are many. Customer demographics, promotional appeal and strength of brand are but a few. The one thing to never lose sight of is the user experience. Never assume you know what the customer wants. Good user experience offers the customer options but doesn’t trap them into an experience they may not want. We see it offered as an alternative, but always see a clear path to where they want to go.

Trends

• We mostly see simple grids with not a lot of whiz-bang promotional elements unless that particular brand is promoting something like free shipping, buy-one-get-one, or spend $X save $Y.
• Bigger promotional space will vary based on stickiness or popularity of the brand. Brands that offer interactivity or promotions that take the focus away are usually reserved for the specific demographic. It’s the, “Just because you can, doesn’t mean you should.” mentality. For example, a Levis department page may offer a simple grid, where the Electronic Arts department page may offer some animation or video game trailer for the latest EA Game. This is ok since the video game consumer could be persuaded to “commit” with a flashy promotion or some other interactive element.

Wrap Up

This concludes our series on eCommerce UI design. From PD pages, to Footers and a Navigation study we hope you enjoyed reading them as much as we did writing them.

It’s no coincidence that we see many similarities between sites. But it’s nice to see some of them exploring new alternatives to the way it’s been done. With new technologies and the number of tech-savvy of consumers increasing, I’m sure we will start to see this happen more and more.

What do you think the future of e-commerce holds? Will it be virtual like Microsoft’s Project Natal? or will it be a marriage between the internet and television where we buy products right from our remotes based on the show were watching? Imagine watching the season premiere of House, and just as you would a DVD or Blu-Ray, pause the show, scroll through what Hugh Laurie is wearing, and buy the entire outfit he has on. There’s no telling what the future holds. But Fuel Your Interface will be sure to let you know when it does!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

In the first in the series last week we talked about the Product Detail page. We looked at two of the top 100 ecommerce sites and picking out the good parts and making suggestions to improve. In today’s post we’re going to take a trip downstairs and have a look at the footers of two more sites from the same list, Bluefly, and GAP but we won’t focus on the good and the bad but more of how the footer can be used in an overall UI design strategy. In the past footers were where you stuck information like copyright info and privacy policies but nowadays footers have become an integral piece of the ecommerce puzzle.

Often times the forgotten child in the overall scheme of a sites design. Organizationally speaking, they are the last item on the page but are not any less important than any other element of a sites structure, and should be treated strategically equal.

Bluefly.com

bluefly.com

Email Solicitation

Bluefly.com has a very basic footer. The first thing we see is an email signup form that’s titled, “be the first to know!”. But first to know what? There’s no context behind what I’m signing up for. Daily, weekly, monthly emails? Am I getting emails about the brands I’m interested in or when new items are added to their catalog? Being the first to know could be a good thing or bad thing depending of Bluefly’s email campaign strategy.

A better approach to soliciting email sign-ups in the footer would be to first give the customer some explanation of what they’re signing up for. Provide a link to more info or just come out and say it. something on the lines of…

Now we know at least how frequent, and how many emails we’re actually signing up for. There is a fine line between too vague and over explanation. In this particular case, one short sentence would have sufficed.

Link Relevance and Order

Bluefly doesn’t have many links in their footer so my next point may be moot, but the grouping of links seem out of order. It could very well be for symmetrical appearance and to keep the four column of three links, this was the most logical order, but in general people (in most countries) read left to right and top to bottom, so we want to make sure that customers can find the most frequently used information first. My best guess would be, “ORDER STATUS” and “RETURNS” even before email sign up.

I don’t have any metrics from bluefly to base my assumptions on, but items we would look at changing would be moving the email sign-up to the far right and placing order status and returns in the first column, with security and privacy next to it one column over.

I also noticed Bluefly is looking for a UI designer on their careers page, so to any of you New York UI Designers, here’s an opportunity for you to make an impact. I won’t even ask for a kick back. :)

Gap.com

Gaps

Not as far as I can see. At least not in the footer. It’s a little odd to admire a footer, but Gap really did a good job. If we have to say something negative about it, we could look at how tall it is. Or if we REALLY wanted to split hairs, the orange color is a little on the heavy side, but over all a great example of good design.

Email Solicitation

I still have a small issue with the email solicitation. We still don’t know if we’re going to get one email or several. In fact they even say “email(s)” which leads me to believe that I will in fact get more than one, or at least have the option to select which emails I will get. The reason we’re not picking apart Gap on their email solicitation is because that’s exactly what they do.

After enter your email address you’re taken to a page where you can select which emails you will receive and Bluefly does not. This is truly a User Experience faux pas for Bluefly and leave it to Gap to pull it together nicely.

Wrap Up

Next time you’re shopping online, take a look at the footer. See if you can spot things that don’t seem to fit. Think about what you would do to improve the design. We don’t only learn from our own mistakes, but we can also improve our skills by analyzing good ui design and thinking about the user experience.

Photo Credit
Header image courtesy of George Eastman House and has no known copyright on it’s usage

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Is there a magical recipe that will convert that browsing customer to a paying one? Perhaps the key is a magical button, so magnificent that the user has no choice but to click. Or maybe it is the number of licks it takes to get to the center of a tootsie roll tootsie pop?

In this series of posts over the next several weeks we’ll look at some of the top internet retailers, and see what they’re doing to achieve their success. I think you will be surprised at what we find.

The Product Detail page or PD page is where most online shoppers will spend their time. Whether it’s reading reviews, product information, or looking at alternative (alt) images, the PD page is the heart an soul of the online eCommerce experience.

For the purposes of this part of the series we will take a look at two of the Top 100 eCommerce websites of 2009, straight from the Internet Retailers Top 100 list. Well look at 1 well designed page and 1 not so well designed, and talk about the good and the bad of both.

Anthropologie

Creatively speaking this entire site is gorgeous. Anthropologie certainly has their brand down, and it’s reflected from page to page. The PD page is no exception.

WHAT THEY DID RIGHT

Simple, concise information. The customer can get all the information about the product within a glance. This works well for sites like Anthropologie who’s clientele may be more concerned with what the label says, than what it’s actually made of. But that’s ok. Some of us do the same thing with Apple products. :)

From the on mouseover zoom to the tooltip message on the “Add To Bag” button when you don’t select a color or size. It’s those little touches that improve user experience and make the sites usability effortless.

Nice use of whitespace, and typography as well as the consistent product photography, and great use of a left nav, especially the strong call out to where you are as well as breadcrumbs, this site makes my top list for the design alone.

WHAT THEY COULD DO BETTER

Just as I mentioned typography as a strong point I’d also like to point out the inconsistencies. I’m not going to make a big deal about it because it is more than likely part of the quirkiness of the brand and if this is true then who am I to tell them differently.

Next I have to point out that the placement of some features seem odd to me. Grouping “add to wish list” with “send to a friend” and social network sharing feels a little off.

On to the “Add To Bag” button itself. It is the same color as the left nav and even though the page is clean and uncluttered it could benefit from standing out a bit more. I’m not saying they need a BOB (Big Orange Button) but perhaps just a simple color change would make a stronger call to action.

Overall, Anthropologie is definitely one of the better designed eCommerce sites. Easy to navigate, consistent user interface and branding. They have carved their niche, and provide their customers with a great shopping experience. They are able to achieve this great experience because they don’t try to be all things to all people. which is a perfect transition to our next site.

Amazon

Amazon.com is the #1 eCommerce website. It’s the first place I go when I want to compare pricing. They will typically be the best price on the net and often have free shipping. Their product catalog is larger than Han Solo’s ego, and they outperform most, if not all of the competition by billions (with a “B”) in annual revenue year after year.

WHAT THEY DID RIGHT

As cluttered and confusing as Amazon may look there is actually some method to the madness so to speak. Scrolling down a PD page on Amazon is like long checkout lines at the world’s largest flea market on Christmas Eve. If you want it, it’s there and probably cheaper than anyone else. But we’re here to talk about the UI and overall design.

Amazon has clearly defined each section as you move down the page, and even though there are a million things that could distract you, Amazon does a nice job at grouping it’s content so that each section is easily distinguished.

Another thing they did right was putting the “Add To Cart” button in the same place on each PD page. With all the variable content, can you image what it would be like if the button was under, oh lets say the “Product Description”? On some products you would have to scroll 4 screens down to get to it. So, as much of a no-brainer this was, they did it right.

They also put the basic info right at the top and left a plethora of statistical info for further reading if you so choose. I think Amazon knows they are not a browsing site per se. I don’t know anyone who goes there to see what’s new, or to watch videos about a product specifically. You go there when you already have something in mind.

WHAT THEY COULD DO BETTER

Well, firstly you might be thinking who am I to tell the #1 online retailer they could do better. Well, I buy stuff from Amazon all the time. I’m a customer. The customer is always right! :)

I have a lot of issues with Amazon.com. As a designer, I wouldn’t know where to begin with attempting a redesign but lets start with the PD page. Amazon could really benefit from a tabbed structure to clean up some of the clutter. I realize this would put some things an extra click away, but from a user experience standpoint, choice suppresses conversion. I’ve said this before in a different context, but the principle is the same.

…people, confronted with a large pool of options will be less satisfied with a decision. The more options there are, the higher their expectation. So even if they have made the best possible choice, their satisfaction level has by default, dropped.

Amazon could also stand to drop so many of the up-sells or at the least moving some of the less relevant ones to a click away. Things like “Customers Who Bought Also Bought” is fine, but “What Do Customers Ultimately Buy After Viewing This Item”? Seriously? I’m sure these are extremely valuable metrics for their business, but I could care less if 2% of the people viewing this product bought some other product. The only thing this does is make me second guess my decision, potentially abandoning my cart for fear of making the wrong choice.

These aren’t just business decisions. As interaction designers, we need to take on some accountability. We’re supposed to be improving the customers experience through well thought out UI and persuading them to convert. Amazon somehow manages the conversion part very well, but leaves user experience at the door quicker than Luke left Dagobah to save Leia.

I could write pages on how we could improve Amazon’s Product Detail page, but the truth of the matter is, they’re #1 and probably will be for the foreseeable future so the point really is moot.

Summary

We’ve taken a look at 2 of the top100 eComemrce sites PD pages and talked about their good points and bad points. To recap:

ANTHROPOLOGIE
The Good

• Great design
• Clean layout
• Nice use of whitespace and typography
• Good usability
• Strong brand definition

The Bad

• Strange link grouping (wish list with sharing)
• Need stronger call out for “Add To Bag” button

AMAZON
The Good

• Clearly defined sections
• Great Add To Cart/Wishlist placement
• Important description info at the top
• Plenty of product images

The Bad

• Clutter
• Too many up-sells
• Poor layout
• Too much useless information

What say you? We would love to hear your thoughts.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

According to Automatic’s email list-group, the basic framing, left nav, and other modular elements aren’t up for grabs, but the Settings, Site Admin from MU, and Media Uploader are looking at a UI facelift. Pages like Comments and Plugins in the Admin are also being looked at, but it seems as if the 2.7 redesign will stick with us for a while. There is also an irc channel created at #wordpress-ui on irc.freenode.net.

In the SlideShare below you will see that at slide 55, Jane talks about “More UI/UX Contributors”! If you’re a UI designer who has been using this awesome piece of OpenSource software, here’s your chance to contribute back to the community and to WP by helping out. You don’t need to actually help with the UI design, but you can participate in usability tests, or just lurk and learn in the list or irc.

WordPress icon courtesy of Factory Joe

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

First off, a warning

This warning goes for anyone really, both designers and non-designers; be careful when defining just what being “productive” really means. We often can mistakenly equate productivity with the amount of money or the number of jobs we receive; productivity, in all reality, is a much broader term than we give it credit for. Productivity, in its most natural form, is the verb form of production; it basically means the act of producing, and creation. With that said, productivity is often measured conventionally in order to assess the different methods and practices we employ, and that does deserve the respect it requires. So, don’t throw away your benchmarks just yet, but do realize that it will benefit you to redefine your holistic view of productivity. Examples:

• Learning about your area of practice can be very productive.
• Learning about surrounding areas of practices that are related to yours can also be very productive.
• Taking time off can be very productive.

Say what? You mean, I can walk into my boss’s office and let them know I’m not coming in for the rest of the week, and they will give me a raise?

No.

The world isn’t quite that easy. Here’s a few ways to increase your productivity.

Note: As you can see above, some of these “productivity tips” may not necessarily be what your boss believes to be productive (unless, of course, he’s as high-class as you and is reading FUEL blogs…). Be careful in the application of the following, and remember that sometimes you do have to follow the definition of productivity as outlined by your boss’s standards. Of course, if you’re your own boss… This is article may just change your life. Or not. Let’s find out, shall we?

On to the list…

1. Become an Expert

We’ve said it before, folks – it makes much more sense for you to find an area in which to focus (whether that is design, front-end development, backend development, or even just creative production) and hone in on it. Don’t just get to the point where you know your stuff pretty well… Instead, know it so well you could teach it from front to back.
Memorize things. Read through jQuery documentation or tutorials in your downtime, or practice with pro bono work to sharpen your production skills. Find your niche, and sprint towards that direction.
The why: Being an expert will allow you to move forward in your job unhindered. Having the knowledge available to you will cut out the unneeded “guess and check” time, and will open up your freedom for creative expression.

2. Exercise

Bet you didn’t see that one coming. Don’t worry, I’m not giving you a workout plan and a bottle of overly-priced herb pills… It’s a well-known-fact that exercise will help your productivity. In particular, exercise has been studied and shown to increase your ability to learn. There’s quite a bit of science behind it, but the proof is in the pudding… What does that even mean? Anyway, just try it out yourself. “Exercise” doesn’t mean that you have to kill yourself in the gym for 3 hours a day. Listen to the latest YayQuery podcast while you take a jog around your neighborhood (or on a treadmill if it’s too cold) or go get a cheap bike from Wal-Mart and ride around town with a few friends. Even if it’s thirty minutes a day, exercise can drastically improve the way you work and the way you feel about yourself.

3. Get a Google Calendar

A much more specific example, admittedly… It’s a well known fact around FUEL that the tools Google offers are pretty great. Specifically, Google Calendar is very useful, especially if you already have a Google account.

Here’s the big deal: Google Calendar syncs via CalDAV, which means it comes automatically to your iPhone or Android, iCal, Outlook, and any other calendar program worth its salt. We know you may already be using some kind of calendar that you love. Google allows you to import calendars from feeds and local files as well. There’s no way we could list every feature here, but this would mean that you could create a collaborative calendar between you and any specific employee/coworker/family member/client/you-get-the-idea; these shared calendars also can be controlled to be “only viewable” or “show only busy/free” or “completely editable.” The flexibility is incredible.

Oh, and don’t forget, Google users… with so much of your information available on Google already as a Google account holder, integration is pretty simple with your other everyday tasks, and Google is making it a point to consolidate functionality across their different products.
Note: Don’t forget to back up your appointments before moving them to Google, just in case your computer you all of a sudden for something.

Okay, so why is this such a big deal?
Once you get in the swing of using your Google calendar, it will be accessible from anywhere you are. You don’t have to worry about downloading or adding the same entry multiple times. If you are an employer/supervisor, this could be the solution to scheduling, or any number of other things.

A Few Other Tools

Surprise for Windows users!

Since we’ve admittedly been a bit biased towards Mac OS X in the past, we figure it’s about time to throw Windows users a bone or two. (Oh come on, you can take a joke.) GNOME Do is a similar program to Blacktree’s Quicksilver for Mac users. This will change your workflow forever! Be sure to read up on its capabilities. Also, take a look at this Flickr set to see some of GNOME Do in action.

A Little bit of 7 in your X

For mac users, you may want to check out Cinch. One of the cool features introduced in Windows 7 is its window resizing shortcuts. If you haven’t seen it yet, just give it a glance at least.

What are ways you’ve employed that have made you more productive?

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

There’s a ton of these little applications floating around to change up your desktop. Check out Bowtie for iTunes, TinkerTool for a bunch of cool hidden preference tweaking for things like shifting your dock around from it’s normal centered position.

This doesn’t even touch the surface, but I found this stuff over the course of the past few days and thought it way too interesting to not share.

A cool idea

Nerdtool actually allows you to use a snippet of a website as part of your background. As I was looking through the program, I thought of a cool idea for those of you who have a domain and hosting; with a little bit of time and work, you could set up your own little networking, blogging, or RSS home right in your “wallpaper”.

So what have you done with your desktop? Show us by posting in the FYI Flickr group!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Whether you are a light user wanting to transfer your twenty-something kilobyte documents between computers across town, or you run a multi-national business and want to transfer large presentations, video files, and many other things between you and hundreds of co-workers, Dropbox has an account for you. It’s like a jump drive that gets to where you’re going before you do… and also, doesn’t ever take up space on your keychain. Oh, did we mention it has a mobile interface and a dedicated iPhone application? There’s way too much to say about Dropbox. Just go check it out here.

It’s pretty obvious how big of an impact Twitter has had on the world of Social Media, and therefore the entire web, and therefore interface design. Twitter began this year, however, with some experimental things (a la Google); one of these experiments is Twitter Lists. Obviously, because of the immense number of people who tweet daily, you can quickly end up with quite a few folks on your Follow list. How do you keep track of them? Some apps implemented lists before Twitter finally caught on. And, of course, because Twitter now supports lists, they are going to be a lot more functional (and universal) for Twitter users. Check it out here.

Everyone has wasted time on Facebook. If you haven’t, then maybe now is a good time to start. Why, you ask? Well, instead of wasting time pressing the refresh button, you now can waste time stalking your old classmates from ‘95. Or, perhaps you just want to watch the feed, as if it were a tv show. Thanks to Facebook implementing real time updates, you can do that. Thanks for making us more productive at being less productive, Facebook!

Also, don’t forget those wonderful Facebook iPhone applications. Not only are we more productive at wasting time when we’re supposed to be finishing up some spreadsheet or another… we also are able to have Facebook Chat at our fingertips while we drive! But seriously… Facebook really has taken some leaps and bounds in making the world more connected this year by changing the way we see the dynamic abilities of Social Media.

If you haven’t watched Google’s super-long introduction video to Google Wave, you can do so here. That will tell you a lot of the details… but even Google doesn’t tell you everything in that video. The truth of the matter is, Google Wave’s long-anticipated arrival will slowly but (almost) surely become a big player in the game of collaboration and Social Media, as well as blogging, in the future. As it is currently in beta (what else do you expect from Google?), not everyone can use it just yet. Remind you of any other successful social networking stories? (Okay, in case you didn’t know… Facebook was limited to college students until 2005, and only in 2006 was it opened to anyone and everyone.) Get to Waving, folks – there’s a LOT of capability here, and the more people who use it, the more powerful and useful the platform will become.

For those of you who are iPhone users, you know why this is such a big deal. It made the list not because it’s groundbreaking or because it changed any game. No, it just changed hundreds of thousands of users’ experiences. Why is this genius (and, make no mistake, it IS genius)? Well, we can’t promise these things, but it’s quite likely that Apple knew from the beginning just how badly people would want this feature. So customers sit and wait on a “big feature” of iPhone OS 3.0, which, turns out, Apple knew how to do a long time ago. So a brand new selling point of the iPhone comes out of what is, for other phones, just a normal feature. This is just another great example of why Apple easily garners lasting brand loyalty that is built on excitement and buzz. I mean, what iPhone user didn’t get excited when they heard about cut/copy/paste for iPhone? Exactly.

CoTweet is a platform that helps companies reach and engage customers using Twitter. Or so it says on their homepage. And yet, it’s so much more! Do you have multiple Twitter accounts? Or one account that you need multiple people to post to? CoTweet is the tool for you. A gorgeous web-app in the purest sense. You can schedule your tweets to post at a later date, assign DMs to users, automatically repost your tweets to dozens of other social network sites like, Facebook, LinkedIn and MySpace, monitor keywords and trends and even click tracking via Bit.ly integration. The list goes on and on! But don’t take our word for it, one look at the features page and you will easily see how this interface makes the list.

Alright, we lay down arms for a minute here to recognize the beauty of the new operating system from Windows. Sure, the editor of FYI (that’d be me) owns and uses two Apple computers, but for Christmas this year, it may just be time to spring for a dual-boot endeavor. Why? Well, there are simply a litany of really cool interface enhancements to make everyday workflow incredibly easier. It’s the little things, folks, and Microsoft has (finally) learned how little things can stack up to be quite huge. (For instance, the “Snap” feature may just make us Mac fanboys a little… territorial. Jealous is a strong word…)

Apple’s Snow Leopard fixes a lot of usability issues that have been around since Leopard (10.5). Stacks works better, Spaces and Exposé… oh, and did we mention the fact that it upgrades the entire operating system and all Apple applications to 64-bit? Just you all wait until CS5 comes out… if it finally supports 64-bit, it is expected that Mac users will see some enjoyable speed increases. The usability of every day processes has been laid out wonderfully by Snow Leopard, both for now and for the future.

There are also a lot of brand new features Apple introduced (for instance, GPU accelerated processing).

This tool can be seen in use on Abduzeedo; basically it allows all of these wonderful social networking tools that work on their own (Facebook, Twitter, etc.) to be integrated together, right on a website, such as Abduzeedo. This tool is simply fantastic for bringing it all together; talk about usability! Not only can you drag photos straight from the page to the sharing tool, but you can also traverse across multiple chat clients (that’s what Meebo does best anyway). This made the top of our list for many reasons. One, it’s extremely powerful and time saving; instead of popping open seven tabs for each and every sharing service, you just drag and drop. It just simply rocks. And we like things (and people) that rock. It’s pretty simple, don’t you think? The only negative points so far is that it’s not available to the public just yet… hearsay says 2010 will bring it to your domains. UPDATE: Thanks to one of the comments below from Meebo for this update – there is now a version of the Meebo sharing bar available! Check it out here: http://bar.meebo.com

Now, what are your top picks of 2009?

WANT MORE?

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

I’m no superhero, I just have a secret weapon. Which I’m going to share with you, right now.

Let me step out of the usual coy article-writing character, and say it up front:

You wanna kick butt? Read a lot of research papers.

Yes, research papers. The publish half of publish or perish. Dry, academic, boring, inaccessible (and sometimes expensive) research papers.

They’re simply a gold mine.

They will make you smarter, better, and yes, even hotter (when your eyes start going bad from all the tiny type, you’ll resort to getting yourself a sexy monocle).

I know, you’re thinking that this is the very definition of hyperbole. But stick with me til the end of this article. I obviously can’t force you to read citations til your eyes blur, but I would bet you money I can convince you that you should.

We all agree that great interaction design is important, or we wouldn’t be here.

So, let’s talk about interaction for a moment.

Everybody says that excellent interface is one of the big reasons Google wins. It’s so simple; it just works; it’s a big friendly question box, just sitting there, waiting to help us. And, of course, Google was founded by two very ambitious PhD students.

So, if some research came out that totally demolished our view of how people search for information, you’d think that Google would be first on the scene. Right?

Sadly, wrong.

Let’s take a look at what they’re missing out on.

The Berry-Picking Model of Search

According to Marcia J. Bates, graduate researcher in the Library and Information Sciences department of UCLA, our existing models of search are dead wrong.

She proposes a different model, more accurate by her measure (and also by mine). She calls it berry-picking.

In reality, she says, users almost never find the desired result on the first try. This isn’t just because they don’t enter the correct terms. Their very idea of what they are looking for evolves over multiple searches and their desired documents extend across multiple searches, too.

Imagine a little girl tra-la-la-ing through the forest as she picks berries. She stops at this berry bush, and that berry bush, then returning to the first because it just looks so good, taking some berries from each. Then you pretty much have got it down.

Imagine, then, a search engine that helped you when you searched like that—the natural way to search. It would show you your old search terms, so you could revisit them, in case your newest forays were unproductive. You could “pin” results to some part of the page for later, in case you found nothing better, or wanted them in addition to the new goodies you found.

Wouldn’t that be great?

Doesn’t that sound exactly like the kind of thing Google should be doing, to push the boundaries of search engine design?

Or, if not them, then a competitor trying to get a leg up?

Now: I want you to guess when this research paper came out.

I’ve never seen any of these feature ideas implemented on any search engine, ever. Have you? So this paper must be really cutting-edge, right?

Actually, it wasn’t even published in this decade. Or this century. In fact, Marcia Bates published this remarkable paper in 1989.

You could be first on the scene with a practical application.

There are tons of research papers out there, like this one, that are just ripe for the picking (no pun intended).

Thanks to the publishing model of science, there are many people who spend their entire academic careers doing research in user interface-related topics. They don’t typically develop or release software. They often don’t even offer specific feature suggestions. But they do describe reality, and tests they made, and what does and doesn’t work.

You can read their papers and come up with the features and design them yourself.

Convinced yet?

How to get started

There are four major sources for computer-related research papers online:

1. The General Web
   Many researchers and/or their universities publish their papers online for free. If you read papers, or books, that cite papers, you can often find their citation lists online for free. You can find Marcia J. Bates’ paper,THE DESIGN OF BROWSING AND BERRYPICKING TECHNIQUES FOR THE ONLINE SEARCH INTERFACEfor free. I recommend it.
2. The ACM
   The Association for Computing Machinery offers a yearly subscription of about $200 for anybody off the street, and this gives you access to a large portion of their online library. It dates back decades and is fairly searchable. You can also buy individual papers instead of a membership.
3. Other online services
   The other two major sources I’d recommend are Questia and Highbeam, although not in any specific order. They are not as affordable or comprehensive as the ACM, but the ACM does not have everything.
4. Books
   There are also many available books that compile industry research papers. Some analyze a whole body of papers so you don’t have to read and digest them yourself.

One more easy place to get started

If you’re new to research, I can recommend no better place to start than the personal information textbook Keeping Things Found. The author talks about berry-picking, among other things. (It’s not a bad read, either.)

In conclusion…

Most user interaction professionals never bother to read a single research paper. Those who do, have a huge leg up on the competition. And a greater chance of making happier users.

Research papers are available, they give you a professional & competitive edge, and they’re not terribly expensive (sometimes they’re free). Usability researchers even tend to write better than, say, philosophy PhD’s.

You’ve got nothing to lose, and everything to gain.

It’s time to kick some interface designing butt! Now, go read.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Well, obviously we aren’t talking about needing any kind of extended astronomical knowledge; space is the area with which we choose to do things. Today we will talk about this area in many different ways.

White space

White space is the area within a design where there is no imagery or text; it is instead a solid color (more often than not it is actually white). White space is an essential part of any design. Our eyes naturally desire balance; but balance doesn’t mean a fifty-fifty draw of color space “A” versus color space “B”. Rather, it is a psychological interpretation of a physical visualization. (Don’t worry… it’s not as confusing as it sounds.) The use of white space allows for a place for your eyes to move in order to escape the text; this makes the text itself a much more effective means of communicating.

Huh?

Okay, so if you don’t understand, white space is essentially the “breathing room” in your design. If it looks crowded, well… it probably is. The way our minds perceive things is different from the way we might calculate them. Reason might tell us that as long as the letter isn’t misconstrued by another color object, too small, or too large, then it is readable. But as we have learned in the past, design itself is not a science; rather, it is an art that observes science and rationality within the process of execution.

What does this mean for me?

Essentially, it means think about your design and the amount of resting space you have. Since we are talking about interfaces, obviously you should go through the process of using the interface multiple times; if anything stands in your way of using the interface, it’s probably time to shift some things around. Don’t be afraid to space out your body copy and headers. Use this breathing room to section different portions off from other portions (for instance, navigation from content, and content from sidebar, or whatever is applicable).

On the other side of the coin, if the white space you are incorporating detracts from usability, it is probably time to reconsider; for instance, body copy line spacing shouldn’t be so large that you aren’t able to differentiate between a new paragraph and a new line. Use white space, as we have already said, to your advantage, not for your to-do checklist.

Rule of Thirds

One easy way to ensure a good use of white space is by employing the design principles of composition; allow your design to follow the rule of thirds or the golden ratio, both of which are very common and effective design practices that apply a little bit of science to the art. The rule of thirds splits the composition into nine equal parts (separated by two horizontal and two vertical lines). The golden ratio is based on many historically congruent sources, including the human body; it has been used for the design of sculpture and the progression of many types of art.

Read the White Space

Of course we have talked about visual white space; but what about textual white space? When people read, they look for resting points in the dialogue. This, in a way, can be considered white space. Be sure to allow your creative vocabulary its time to shimmer AND its time to stay sheathed. Not everyone necessarily appreciates your large vocabulary, much less do they care to take the time to read your seventeen-syllable words and overly-complex sentences. Take a breath! Haven’t we already said this?

If all else fails…

Sometimes in design, we realize that every tip we heard about “best practices” doesn’t apply to a particular job. As much as it pains me to say it, there are times when white space just simply doesn’t have its place in the design (newspapers are a perfect example for those of you print and page layout designers). Consider the psychological implications of the design, always. Understanding your audience is the first step to success, and ultimately is the most important concept in interface design.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Big Goal Number Two

As an interface designer, you are often given assignments with one big goal in mind: make this interface as usable as possible.

Now, ancillary to this goal are a lot of “mini-goals”, such as maintaining a holistically congruent branding image, communicating certain messages, conveying certain feelings, developing for certain platforms, and the list goes on.

But what if we have been missing out on big goal number two?

Let’s take a step back, as many of us probably often forget to do, and look at the reality of our situation.

On a daily basis, we as interface designers don’t have the task of designing an interface that targets everyone in the entire world (such as Google, eBay, Amazon, or Yahoo). Instead, we are given a target audience to build an interface for. This usually takes a backseat as one of our mini-goals, but we need to change our thinking. This needs to become our Big Goal Number Two.

“Target audience” is a pretty familiar term for most interface designers. Most of us know that we have to understand demographics and psychographics of the target audience, and study them in both quantitative and qualitative ways. We know that we should take into consideration all of the data we gather about the target audience in order to build our specific interface, and so on and so forth…

The Principle of Disagreeable Design

What we often forget to realize is that while we are designing for a specific group of people, we are effectively designing against everyone who is left over. What this means is that you are no longer designing with the “accidental audience” in the back of your mind. The target audience becomes the only focus, and therefore you estrange the rest of the world. This is an important principle to understand, for one simple reason.

Designing for an elite group is more effective!

Okay, so of course, you build your rules and boundaries around that ever-so-important target audience. But without the Principle of Disagreeable Design, you wouldn’t really be able to commit to that group completely. You still employ your overarching “best practices” and ideas that are rooted in the status quo’s opinion of what is usable, “good” design, or any of a number of other adjectives we use to describe our somewhat shaky “objective” design standards. Sometimes these shaky standards are the cause for a compromise when it comes to Big Goal Number Two, and we don’t connect with our target audience as efficiently.

But what happens when you take a daring leap towards an elite group that rejects almost everyone in the whole world? In fact, it DOES reject everyone except your target audience (the elite group)? That same daring leap that rejects an enormous number of people, as a tradeoff, very closely knits you as the communicator to your target audience.

That leap may be the difference that your interface needed to go from functional to awesome.

Note: I know what you’re thinking. Don’t take me out of context here and say that “that crazy editor at Fuel Your Interface is an interface-design-usability-relativist!” (Okay, let’s face it… none of us are that dramatic… I hope). Of course, there are almost always some things we retain as understood musts. For instance, text that is meant to be read must be able to be read. These are the obvious ideas.

Why does this work?

Tribes, by Seth Godin; Published by Portfolio Hardcover, 2008

Web marketing guru Seth Godin discusses this idea in his book, Tribes (check it out here). Seth’s big idea is that everyone belongs to at least one tribe, and almost certainly to more than one tribe. Each of our tribes have distinguishing characteristics that set them apart from other tribes. These have been referred to as “sub-cultures”, “sects”, and, in our case, “target audiences.” What is it about your target audience tribe that sets them apart from every other tribe? What are their defining characteristics? Do they have quirks or a specific language and terminology that is unique to only them (can I get a shout out from the Star Trek fanatics!)? Do they have a corporate emotional connection to a certain object, animal, idea, or even person? Maybe they all wear a purple shirt on a certain day of the year, or perhaps they are committed to going environmentally “green”. Asking these questions will push you towards taking the leap that will knit you closer with your target audience (while unashamedly rejecting everyone else).

It works because this tribes psychology goes beyond the simple process of categorization of people. People find a sense of belonging within a tribe. If everyone was allowed to be a part of every tribe, there would be nothing special about being a part of it. So, tribes allow only those who subscribe to their particularities to “join,” though the process of joining is rarely formal.

So, in the same way, if everyone uses your interface, what’s so special about using your interface? Instead, very acutely pursue your target audience. This will, in the end, be the most effective way to achieve BOTH of your big goals.

Conclusion

In conclusion, it should be noted that this in no way means that you should reject outsiders directly or textually; this article, rather, is to help you realize the value in rejecting traditional practice if it means a more accurate and efficient communication to the people that matter: your target audience. They are by far the most important objective, even if focusing on them means that you end up estranging the “accidental audience”.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

It’s Thanksgiving. A day to eat turkey and pie. A day to watch a parade, and then football. A day to think about the Mayflower, if you feel like it. A day to… give thanks. And I, as editor, am very thankful for the readers of FYI. That’s why I am giving out four Google Wave invitations to four of you.

The selection process will be random as always, but to be eligible, you must either add @fuelinterface on Twitter and tweet an @reply with the following message: “@fuelinterface A Thanksgiving Google Wave invite would be awesome!” (or something along those lines), or comment here on this post.

Thank you all for reading, commenting, and tweeting around with us!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Vector vs. Raster

A smart object is basically a vector object inside Photoshop’s (mostly) raster world. If you don’t know the difference between vector and raster, a basic rundown goes like this;

Vector images are created by using calculated lines. This essentially means that the curves, shapes, lines, et cetera are displayed as a result of a lot of calculations on the part of the program you are using (in this case, Illustrator and Photoshop). It’s kind of like an extended version of what you learned with point-plotting, sine waves, and function graphs in geometry, mixed with colors and transparency values.

Raster images are basically plots of color on a pixel map. This means that each pixel in your image is assigned a color, and depending on what kind of file, sometimes an alpha value.

If this still doesn’t make sense, the best thing to remember is basically that vector images can be blown up or shrunk to any size and will not lose quality; a raster image will lose quality if blown-up above its original size. Vector, thus, is the preferred format for logo design and typographically based design. However, vector images are somewhat limited in their ability to be manipulated in Photoshop. Be sure to check out the last tip in the article for a possible workflow-based solution to this problem!

What is a smart object?

A smart object in Photoshop can be one of two things.

1. A version of a raster layer that doesn’t lose quality when it is transformed down and then back up
2. One or multiple vector lines/shapes/information

Today, we will only be dealing with the second variety.

Traditionally, vector images are created inside Illustrator; however, as many designers have found, it helps to be able to move from Illustrator to Photoshop fluidly. One of the easiest ways to do this is by using – you guessed it – copy and paste.

So, say we need a striped design we have created inside Illustrator for a design we’d like to finalize in Photoshop. What is an easy way to get it into Photoshop? Cmd or Ctrl + C, of course! With the document open, copy either with the copy keyboard shortcut (Cmd or Ctrl + C) or by going to Edit > Copy.

Switch to your active document in Photoshop and either use the keyboard shortcut for paste (Cmd or Ctrl + V) or choose Edit > Paste. You are given the option to paste with different forms. Smart Object is one of the choices. Make sure the radio button next to smart object is selected, and press OK.

You then have the option of transforming the object in the same manner as you would if you chose Edit > Free Transform. Here, you can scale, skew, etc.

Once you have made any transformations you’d like to make, press Enter to accept the transformation. In your layers palette you will see a smart object layer.

If you decide later that you’d like to change something about the object, simply double-click the layer thumbnail. This will open an Illustrator editing window. Once you have made any changes you’d like to make, choose File > Save and exit the window.

The Photoshop document will automatically reflect the changes.

Tip: It helps to duplicate smart objects up front so that if you decide to use any kind of filters or warping on the layer that requires you to rasterize it, you will have a copy of the original vector object. An easy way to duplicate layers is to first select the layer you’d like to duplicate, then press Cmd or Ctrl + j. After doing this, you can place it in a folder, such as the “Originals” folder below, along with any other layers you’d like to preserve the original version of. This is mostly effective when using effects or filters that “destroy”, or change the value or location of, the actual pixels in the layer.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)