I have been using computers for over 35 years. This is quite a statement and one that makes me appreciate all the bad ergonomic decisions I’ve made along the way. In fact, it was a diagnosis of tendinitis in my elbow and subsequent introductory questions from a doctor that made me even realize that my relationship with computers had been going on so long.

“Do you use a computer for work?” Yes.

“How long have you been using a computer?” Uhhh, years? Decades? A long, long time.

And I didn’t really have an exact answer. Which got me thinking, because it seems like something one should know about oneself. I’m in the first generation when it comes to personal computers (which may lead to another longer post topic).

The ITT Xtra is the first one I ever really explored. My parents bought it one Christmas and I can still remember first seeing it set up on the kitchen table. No box, no wrapping paper, just sitting there like an alien. Now, to be fair, I had been using computers for some years before this — they were starting to show up at friend’s houses and my middle school had purchased a bunch of TRS-80s to stick in a science class.

But there’s a difference between “using” and “exploring”. It wasn’t until this showed up in my house that I was able to spend unlimited hours learning what it could (and couldn’t) do and by extension, what I could (and couldn’t) do with it. My siblings were too young to care much about it and my parents were too busy to learn it, so I became the default user for the house.

“Give ITT a round of applause for including clear, profusely illustrated documentation with the Xtra. This little extra touch is worth it’s weight in gold.”

— Creative Computing, 1985

Not an actual photo of my Xtra, but those manuals were fantastic!

It was that “profusely illustrated documentation,” as seen in the photo above, that gave me any chance of understanding how the computer worked. Beyond using the word processing program to write all my school papers, it was here that I began to make the early connection between code and art. The idea that you could program the computer to make art. This was an astonishingly profound revelation — that graphics on screen were directly tied to code — basically text. It wasn’t long, and it was probably the first thing I wanted to do with the computer, before I was writing screen graphics in BASIC.

Seeing the light

One of the coolest features was, of course, the amber monochrome monitor. While I may have had some initial trepidation because I had never heard of the ITT brand before, I was immediately won over when I learned that amber monochrome monitors were easier on the eyes than the traditional green monochrome monitors that everyone else had. Remember, I was a teenager with all the misguided fears, self-doubt and imagined peer pressure that accompanies those years, so having something — anything — uniquely cool was a big deal. Even if the claims about amber monitors weren’t necessarily true.

“An amber screen was claimed to give improved ergonomics, specifically by reducing eye strain; this claim appears to have little scientific basis.^[3] However, the color amber is a softer light, and would be less disruptive to a user’s circadian rhythm.”

— Wikipedia

So where does all this nostalgia lead us?

It’s led me to create a new page on the site using the style of my old original amber monochrome monitor. It’s a flashback to what it was like for me to work on that first ITT Xtra computer — amber, bitmap fonts on a black background. To that end, I’ve been toying with the idea of including a client archive page on the site. These two ideas were perfect for each other — a long list of text in a table with a retro design style.

The design itself is by it’s very nature, basic. I started by finding the perfect shade of amber, not necessarily in terms of accuracy, but more on an emotional basis dredged up from some sort of color memory library. Next up, was choosing the perfect bitmap font and I do love a good bitmap font. In this case, historical accuracy won over nostalgia as I was able to find the exact font files used on the ITT Xtra. From there, it was more of a matter of web development to bridge the gap between the old and new.

Now of course, it’s not an exact replica to the original, mostly due to the underlying technologies involved. The two big differences being the monitor construction and the text rendering engines in modern computers. Those old monochrome monitors made for much crisper text. So the way your laptop screen is built makes the text a little blurry (on the plus side, it has more than one color). The second difference is how your computer renders the text itself — usually via anti-aliasing or subpixel rendering. While I can’t overcome modern displays, I have included some CSS to help recreate that old text rendering.

Along the same lines, I’ve also chosen to use another old technique for the page — loading the client list data via XML and a deprecated Javascript library from Adobe called Spry. Now, admittedly, this has nothing to do with my old ITT Xtra, but it was a fun bit of nostalgia to use again. Old school web designers will fondly remember (or not) that thirteen years ago, loading data into a web page (without a database!) was super cool. At some point, I may swap this out for actual on page data which would be better for performance, accessibility and longevity.

In the meantime though, and without further ado, venture back in time to experience the dawn of personal computing.

In these heady days of web design and development, with multiple screen sizes, tablets and smarphones, it can be difficult to get proportions and spacing correct. Of course, one would expect a major retailer to have the resources (and care) to get it right. This screenshot was taken on my laptop with a resolution of 1440 x 900 running Firefox 5 on OSX. Nothing too crazy in terms of a web user profile.

Beyond any aesthetic issues with the check box label being too far to the right, the functional issues (or non-functional as the case may be) are what should be of primary concern here. I suspect many users would stumble over connecting these two parts of the form. If it takes folks an extra few seconds to fill out your form, it takes away from the shopping experience and therefore it impacts your brand.

Will it take away from sales? Maybe not initially. I certainly continued with my purchase, but if users are left remembering that the checkout process was annoying, weird, or heaven forbid, difficult, they may be more likely to head to your competitor’s better designed site.

Small improvements can build up to increase satisfaction and in this case, it seems like an important (and easy) fix – especially as this is one of the very last steps in the check out process – right before you click the “purchase” button.

Seems simple enough – in both common sense and in design – but the evidence is clear.

It’s an old motto that, the more information you can give a designer, the better the final design will be. This is especially true in the case of the audience. One of our key audiences, which is near and dear to my heart, is the video game community. I’m of the generation that came of age with the Atari 2600 and hung out in dark arcades dropping quarters, so it’s an audience of which I’m a member. Designing for yourself is always fun and whenever I get a project targeting at gamers I dive right in.

There are a few things that will always peak the interest of a gamer and at the top of my list is robots (others include ninjas and monkeys — both completely viable options). Access Communications hosts an annual party at the gaming industry’s biggest trade show E3 and I was tasked with developing some email invitations for the event. Naturally, I developed, designed and wrote the copy for the invites using a robot theme. The key concept of the 2009 invite was that the event would feature alcohol dispensing robot. After a hard day trudging around the trade show, everyone’s ready for a drink and it seemed natural to combine the two ideas. Of course, the whole idea is meant to be taken as tongue in cheek humor — there would be no actual alcohol dispensing robots at the event (but we can dream). The invite was met with success and even got picked up and posted by the online gamer press which is always a good sign.

When this year’s event rolled around, the team and I brainstormed and narrowed it down to two themes: pirates (another gamer fave) and a continuation of the previous year’s robot concept. The pirate theme centered around a skull and crossbones logo I developed (more on that at another time), but it didn’t have a story behind it. Crafting a compelling story is another key to getting the audience to engage and without a story (or time to develop one), the pirate concept got shelved.

I was also completely intrigued with the idea of continuing the robot story from the previous year. It’s rare that we get the opportunity to tell long arc stories and to continue the conversation with the audience. So many projects are just one time affairs soon to be forgotten. For the follow up invite, I wrote copy that directly referenced the previous year’s invite and moved the story forward. The invite was met with a ton of positive feedback and although it did not get picked up by the gamer press, it had a more substantial impact — Access had to increase the budget for food and booze to accommodate the increase in RSVPs.

Here’s sample screens from the two invites and each links to the full invitation:

E3 2009 Invitation

E3 2010 Invitation

Here’s a few of the comments the team received on this year’s invitation:

• “I will try to make it unless the robots get me first”
• “FINALLY, ROBOTIC BEINGS RULE THE WORLD”
• “Please RSVP me for this event, even though I will have to order drinks from a filthy human and not from a precision calibrated robot”
• “It just won’t be the same without the drunk robots, but I’ll still be there!”

Coming in Part Two: What I designed for the events themselves.