It’s amazing how many times we overlook the importance of usability with objects we encounter on a daily basis. Take for instance, coins. This seemingly simple object has basic usability elements which should be considered during the design process:

1. Weight. It makes no sense to carry a coins which are heavy and are burdensome to transport in a pocket.
2. Size. They need to be small enough so that many of them can fit into a pocket, yet large enough to be easily read.
3. Material. Should be durable enough to resist wear and tear, yet not expensive to massively reproduce.
4. Art. A good coin should say something about the country and the culture it comes from.

I’d also argue there is a 5th trait which somehow seems to be lost in a survey of coins. Accessibility.

Let’s look at American coins.

There is zero logic to the corresponding value of the coin and the size. But most importantly it lacks any numeric representation. A foreigner using American coins needs to either recognize the coin or read the English text to interpret it’s value. Compare this with the Euro, which clearly denotes the value of each piece.

From an accessibility standpoint, American coins are unfriendly. They lack the universal visual data to quickly understand the value of each piece. Since we’re undergoing all this “change” lately, why don’t we just take a moment to revamp all our coins as well. Let’s make a Yankee version of the Euro.

I was about to leave a comment on a recent blog post by @Bruce but instead I feel it needed to become a blog post.

How is it in all our Twitter debate that not once have we touched on the issue of safety? Frankly I don’t really give a crap how insightful and useful it can be if people are dying from some crazy Twitter serial killers. As most of you know already is that on Twitter you can be followed by anyone. Yes, I know that you have the ability to make it private but how often do people do that?

I think what is especially scary is BrightKite. For those of you who don’t know what BrightKite is, it’s “(A) location-based social network. In real time you can see where your friends are and what they’re up to.” What this means is you “check in” on BrightKite and it tells your followers your exact location at the time of check in. Um, hello? Have we all forgotten Mom’s voice telling us never to tell people online were we are? Look at how many people have posted there exact location on BrightKite’s home page!

Yes, I understand there are privacy settings, but you have to remember that people are naive. Say for example someone contacts me through twitter claiming to be interested in a redesign for their web site with Imulus. Of course I wouldn’t want to pass up an opportunity for my company and, me being the trusting soul I am, I check in my location on BrightKite which posts on Twitter for all can see. Is no one else seeing a problem with this?

Yes, you can argue with me the reasons that Twitter and BrightKite are helpful. Yes, you can tell me how many times you and your buddies had a great night out because you happened to be down the street and they happen to see your Twitter post. However, what I am interested in is how far are we willing to sacrifice safety on the off chance that you might benefit from these social networks?

In February we had an awesome 3rd Thursday meetup to talk about the positives and negatives of Twitter. And, as always happens with discussions regarding twitter, the argument: “Why do I care that someone just bought salami at the store?”, was presented^*.

I’ll be honest, as a fairly hardcore twitter user it’s impossible to argue that this type of talk doesn’t take place on Twitter. It does.

That said, I think that you have to recognize that people inherently have a certain level of care (rather they admit it or not) about what people around them are doing. Realistically you can’t get closer to someone without eventually breaking down some personal barriers. At Imulus we have an extremely transparent work environment. Consequently we talk about a lot of personal things that outside people might find “mundane” or “not interesting”. However, it’s this exchange that brings us closer. Think of it this way, when I talk with my mom she always asks me what I’ve done recently. While I usually don’t have incredible stories to tell her, she is still genuinely interested because she cares about me.

For the first time I think the right mix of ingredients has been blended to make this type of interaction possible online. It’s called twitter, and here’s why it works:

1. At 140 characters it’s manageable. I don’t have to spend time reading a huge novel about how George (Imulus co-founder) got together with some friends and made a bacon explosion. Instead, I spend three seconds reading his tweet and think, “damn, I like George, I hope he doesn’t die of a heart attack.” It’s a smile on my face and something I can bring to a conversation sometime.
2. You pick who you’re invested in and if they’re worth it. I think sometimes people forget that they don’t have to follow a ton of people on twitter. The truth is you should only follow the people who you get something positive from. Perhaps it’s humor, perhaps you know them in real life, or perhaps they are your idol. The point is you have the choice to regulate your level of involvement (@penguin really said it best).
3. You don’t have to get permission. This may sound creepy but the great thing about following someone on twitter is that in most cases you don’t have to get their permission. Instead, you can start having them contribute to your feed without having to inconvenience them or worry about if they know you. This gives people the ability to take part in a relationship on one side until they feel like they have something to contribute.

These three things combined create a community dynamic that, to date, has yet to be seen online. Plus, I’m not even including twitter’s other benefits (asking questions, trend tracking, professional exposure, etc.) I’m simply talking about human relationships and their ability to exist in a manageable way online.

^{* Please note this may not have been the exact argument given. But it gets the point across and allows me to use the world salami without sounding dirty.}

Over the past few months we’ve moved back and forth between Intense Debate and the default Wordpress comment system for Imulus Insights. Over this time period I’ve had the chance to get a bit more fully involved with Intense Debate’s foundation, plugin, and structure. This process has for the most part been a massive headache. However, I have to admit that if the service weren’t something we felt had potential we wouldn’t have stuck with it. I’m a fan of admitting when something isn’t a good fit and moving to find a different solution. In this case the benefits seemed worth it so we stuck with it and now Intense Debate is fully integrated and styled into our Wordpress install.

That said. I have some criticisms.

Let’s take a brief look at some of Intense Debate’s HTML:

Okay, I’m not going to spend too long on this as I think the image above illustrates pretty well why working with Intense Debate’s DOM structure is a nightmare. Still, I’ll talk about a few of my major annoyances.

Wrapper, wrapper, wrapper, small-wrapper, smaller-wrapper…

First, Intense Debate is filled to the brim with what seem to be uncessary divs, wrappers, classes, and ID’s. For the life of me I just can’t see why they would need five or six wrappers for specific elements. I just don’t think their users really need that much customization potential. If it was my call I would make the trade off between four wrappers with ID’s and Classes for a simpler system that’s easier to work with. Granted, maybe I can’t ajax in every element on-demand but at least the product would be easier to work with.

Names should be used to make things easier, not harder.

Second, the naming convention they use could be a lot more straight forward. Instead of:

#IDSubscribeToThisWrapper

perhaps stick to something a bit simpler:

#idc-subscribe

Document your DOM.

Third, provide better documentation for your developers. I spent a good chunk of time on the Intense Debate CSS documentaiton page, and while the page is a good start to documentaiton, it by no means has the depth of information that is required to “style” each indvidual element of Intense Debate. If you’re going to add ~200 classes and IDs to customize the applicaiton, at least document it so I can see what I’m working with.

I spent some time on the comment customization layout on the Intense Debate site — and while some of the options are nice, it’s not quite enough. For instance, Intense Debate allows you to link to your own CSS file for style customizations. However, they don’t offer any sort of example CSS file if you want to see how they did things to begin with. This… would be a nice thing to have. Granted I can work with a web inspector to see their styles, but it’d be much nicer to have a tangible CSS file that I could go thourgh.

My wish.

I recognize that some of the above criticisms are being done in order to provide their users with the most amount of customization possible. However, I feel that if customization is the end goal Intense Debate should take a different approach all together. Here’s what I suggest:

Give customers two choices.

1. The ability to use your generated HTML in a widget format (like currently exists)
2. A set of Wordpress template tags that can be used to run functions dynamically without generating the HTML

I would have a substantially reduced amount of criticism is I was able to use the Intense Debate service without having to deal with there ridiculously dirty HTML. Template Tags would allow me to pick and choose what portions of the service I want to incorporate, as well as the ability to style things exactly to my liking with my own HTML stucture. No more !important; declarations, no more individualized Intense Debate only stylesheet, just simple, clean, easy to use Wordpress template tags. This is how the majority of plugins currently work for Wordpress and I see no reason that Intense Debate can’t follow that method. And considering they’ve been purchased by Automattic I’m hoping this is in the works.

End Verdict

I have to admit that the comment traction gained from using Intense Debate is worth the sacrifice of dealing with it. However, I hope they realize they have a long way to go to make their service developer friendly.

To start, paste your image into a new Photoshop file. Be sure to leave some room at the bottom for your reflection.

Next, duplicate the layer your image is on by right clicking the layer and select: Duplicate Layer.

Now select the bottom layer, and under edit > transform> Flip Vertical

Use the selection tool and move the image down so that the top edge is touching the bottom edge of the top layer.

Still using that same bottom layer, create a new layer mask.

Select the gradient tool, and make sure that your foreground color is black and your background color is white. In the gradient options, select linear foreground to background.

Make sure you still have the mask layer selected (you will see lines bordering the corners). Hold down shift and apply a gradient from the bottom of the canvas to the top of the bottom image.

Apply an opacity to your bottom layer, and you’re done!

NOTE: When working with reflections, it is important to note that reflections SHOULD NOT overlap. This is an example of what NOT to do:

This is correct:

More reflection tutorials to come. Stay tuned.