It can sometimes be difficult to explain what makes a piece of art “good”, but as a famous judge once said, “I know it when I see it.” To that end, allow me to shed some light on what makes a good infographic. It seems that with each passing year, infographics are getting more traction on sites like Digg, and more and more people are looking to master the craft of marrying information with graphic design. Here are some things to keep in mind when designing your next piece.

Infographics, first and foremost, are about visualizations. If it’s not pretty to look at, then trust me…no one will give it a second glance. Consider the fonts and colors you plan to use carefully. The overall look of a piece is always going to vary based on subject matter, but any given IG should be easy to read (so make sure you select complementary colors, fonts that are easy to read, and a font point that is large enough to be read without squinting).

The best infographics are grounded in hard data. Not only should you have copious sources to review before creating your IG, but you also need to make sure that your statistics and facts come from a reliable source.

Go beyond the pie chart, beyond the bar graph. The best infographics are the ones that present data and information in a way that surprises you, and yet makes perfect sense.

One thing that often distinguishes a good infographic from a great infographic is a thesis, or at least a strong point of view. If an infographic can not only impress you with the quality of its design, but also educate and persuade you, it’s an exceptional piece of work.

Nothing bugs me more than seeing a great infographic hosted on a site that has nothing to do with the subject matter of the piece. For example, a little while back I stumbled upon a great flowchart about what sort of sci-fi apocalypse you would be best suited for (zombies, alien invasion, etc). I really enjoyed it, until I got to the end and saw the company that had branded their logo on to this piece. Suffice it to say, it was a company that didn’t really have anything to do with the subject matter. It really rubbed me the wrong way.

Viral content is too interesting NOT to share. The ideal response you are looking to elicit from your reader is, “Oh, awesome! I have got to show this to my friends!” To do that, you need a combination of great design

See more at www.blueglass.com

Feedback is an essential part of software user interface design. It’s especially true when designing applications for current mobile devices. Tapping a touch screen is less precise than clicking with a mouse. Touch screens also lack the tactile and auditory feedback of a physical key or button. Slow, unreliable cellular data access adds to the confusion. A user might wonder: Is the app broken or do I have a poor connection? Was my tap registered or did my fingers miss that tiny button? Making sure users get clear feedback in response to their actions and to changes in state or conditions is key to a great software experience.

When we designed Basecamp Mobile we decided to use a variety of methods to keep people informed about the current state of the app. Different conditions can require different feedback, so we had to carefully consider multiple types of feedback. Here are some examples:

It was important for us to make taps in the app feel responsive. Even if there could be a delay before the associated action executed it was essential that the user knew the tap was successful. Anything that can be tapped in Basecamp Mobile has a selected state that highlights the item immediately when the user touches the screen. Here you can see how a selected item on the project screen:

Basecamp Mobile is an HTML5 app that uses local storage to cache both content and the app itself. The app runs entirely in the browser, rendering HTML with Javascript and loading only your account content from the server when needed. Each screen has a number of states depending on the status of the screen’s content. A single loading indicator wouldn’t cut it—the feedback had to be appropriate to each situation. Here are some of the states we had to consider in the design:

Basecamp Mobile is loading assets the first time you run it or when the local cache is empty. The large animation is the only element on the screen making it the focus. The lack of any other UI elements makes it clear that the only option here is to wait. Because people see this before they see the app, it’s even more important that we let them know what is happening.

In the next state, the app has loaded and the UI is now available, the app is only loading content now. The user can always cancel the action and go back to the previous screen. You’ll see this the first time you load a screen that you haven’t loaded before like a newly posted message.

Basecamp Mobile caches screens as you visit them so going back and forth between them is nearly instant. Because the data could be old we need to check the server for changes, new items, new comments, etc. The screen might be perfectly fine, or it might need to load in changes. While this is happening we show a small, less prominent indicator. The page is fully functional but we want to let the user know that we’re talking to the server. This indicator isn’t in the user’s face or in the way of what they’re doing. It’s just a notice that the app is working and if you’re expecting something new, we’re checking. You can see the spinning icon in the upper-right of this screenshot:

We took a similar approach with the To-do Lists screen. For each list we wanted to show the first few items on it. This makes it clear these are to-do lists and helps people identify the one they need. The previews load after the page is available because the content is helpful but not essential. A very subtle effect doesn’t distract but makes it clear something is happening. A series of spinners would have overwhelmed this screen, but the subtle gradient shine moving over the word “loading” informs without distracting.

Presented like this it may appear that the app is just a series of waits, it’s not. Most of these indicators are actually on the screen for just seconds, but that is sufficient time to quiet a user’s doubts and ensure they know things are working. It feels great to click through the app and always feel like you know what’s happening, that things are working. Read more at 37signals.com

When we are considering usability for landing pages, we should always take into account the following picture of our visitor’s typical mind-set and behavior:

Information architecture defines the way that information is organized on your website. This is typically hierarchical in nature (and looks like an extended outline on your sitemap page). Remember, the Web is a hyperlink medium. People do not necessarily follow orderly or linear progressions (like they would when reading this column, for instance). They jump around and follow their nose. For this reason, some websites provide multiple navigation schemes to support their visitors’ mental maps.

The point of good usability is to make things easy for your visitors. Remember, if it’s not obvious, you are losing a lot of money. Subject your landing page to the “Obvious Standard” to improve conversion rates. Read more at www.clickz.com