Monthly Archive for October, 2008

Building Without Designing

I’m deep into a big, stinky bucket of a goobery gunk of a redesign project at work. It’s actually more than a “redesign,” it is a restructure as well, with new content, better organized content, purging of cruft from the directory structure, oh, and it is mostly uncharted territory for me as I’m having to not only learn the ins and outs of the company’s business model, online history, legacy system issues and multiple site goals, but I’m having to also get very intimate with a Content Management System I’m not terribly familiar with. I am, however, having a blast doing this. Continue reading…

RIP: You Old Beastly Electricity Vampire

Last night my son’s computer monitor died. It was an eight-year-old Sony Trinitron CRT beast that only left enough room on his desk for his keyboard. That monitor has moved across the country with us, twice, and can be seen in random pictures of our home life as far back as Y2K.

“Daddy, my computer won’t turn on… see? It just makes this noise and shuts off.”

Now, when it comes to bed time at our house, everything needs to stop and get postponed until the next day… except computer problems. Especially fizzing, crackling, burnt-smelling, fire-breathing computer problems. That monitor was actually flaring from underneath, leaving smoke burns on his desk. Yikes. It now lives in the garage upside-down next to a pile of random junk.

Now that I don’t work primarily at home anymore, I brought my LCD display up from my office for Malakai to use. I knew his monitor was going to die soon… it lasted longer than I ever could have guessed. So I set the display down on his desk in the huge void the old dead beast left behind and he says in that all too excited and so not ready for going to sleep tone, “Am I getting a new computer?! That’s cool! Wow!” Then in a sort of unsure-if-he-likes-what’s-about-to-happen voice, “Am I going to have to download everything again?”

“It’s just a new monitor, kiddo. Your computer is the little white box right there,” I explain pointing to his Mac Mini, “a monitor is not a computer. You won’t need to change anything.” I realize now he thinks this from growing up on one of those old Blueberry iMacs.

“Whew.” Relieved, he says, “Cause’ I didn’t want to have to go through all that downloading iTunes 8 again.”

User Interfaces, Having a Job, and SVN Delete *

Last Friday I officially became a real employee for SurveyGizmo. I spent two weeks testing the Gizmo waters while they spent two weeks testing the Jase waters. Verdict: we like each other… so much so that they want to pay me regularly for giving them some styles and some code and a bunch of pixels, regularly. Sweet.

Now, part of my job involves religious interaction with SVN via the terminal or shell. Translation: command line interface… just monospaced text with no (gasp!) buttons, images, or pretty pictures. I’m not new to terminal life, but I’m not a pro at it either. I’m not afraid of it. Um, at least I wasn’t until Monday which coincidently was my first real day on the job.

In my defense, I’d just like to point out that even a text-only interaction has an interface: the commands that need to be typed. For instance, in SVN, when you are ready to save your work, part of the process may include adding new files to the repository that did not exist in the previous version of the file set, like a new image or style sheet, or a new template file. So to add new files, you use the ‘add’ command which finds new files and preps the forthcoming commit command to include the newly added files. And if there are a handful of new files, you can use the * shortcut which essentially means ‘all’. So the command: svn add * would trigger SVN to add all the new files to the revision queue.

One would think the ‘delete’ aspect of the SVN user interface would work as the counter-part to the ‘add’ interface action. It does not.

So on my first real-non-contracting-trial-day, as one of the first things in the morning, I ran this command: svn delete * in an attempt to get some deprecated files to stop showing back up every time I did an update sync with the repository, thinking this would notice that the files I’ve deleted are missing and prep the revision state to not contain those. You see, I’d delete the un-needed files via FTP but they would pop back in from SVN because I did not remove them from the version controller.

I managed to wipe out my entire set of working files, as well as a slew of other files that were in the directory where the SVN command was issued, in about 1.5 seconds. Then I spent the next hour or so with my office-mate trying to get them back by restoring previous revisions from SVN, but for whatever reason, I got stuck in this weird loop that would bring some files back, but not all. So I had to beg our sys-admin to intervene, which he did rather speedily, in between LOLs and questions like, “How far into typing d-e-l-e-t-e did you get before thinking this might not be a good idea?”

To which I replied, “It never occurred to me that this would happen. SVN’s user interface is broken! Why is ‘delete’ not the reciprocal of ‘add’?!”

“Yeah, delete is not the mirror opposite of add.” Pure genius.

“See? Busted interface.” I snapped back. Then he just laughed at me some more.

Puppy vs. Advertising Agency

Checklist: milk, bananas, apples, band-aids, Jen’s various beauty supplies, candy bar… oh, and a creepy picture of a puppy on a bed of roses. Jen pointed this out as we walked past one of those annoying aisle cards that stick out a little too far. This is just bad advertising/marketing/whatever—err, maybe not cause I’m writing about it? Nah, it’s bad. It doesn’t make me want to buy their toilet paper. When I think of dogs and poop, I don’t imagine cute puppies rolling around in fake flower petals.

Nice placement of those rose petals. C’mon Mr. or Ms. Designer who works for Kleenex’s over-paid advertising agency. Did you really need to skimp on a few extra rose petals? That’s a puppy you’re humiliating!

Unfortunate pose of a puppy on a bed of roses

Poor thing never had a chance at protecting its dignity in the hands of some recent college advertising graduate.

Interface Deconstruction: Vimeo’s Interior Help & Search Utility

Dear Vimeo, fix your awesome search assistant. In a world where YouTube is the Kleenex/Xerox/Google brand of online video services, alternate sites like Vimeo have a ways to go to gain that “household name” status. In other words:

“I need a Kleenex” as she reaches for the generic store brand box of tissues. Or, “Remind me to Google that later” when we want to search for something.

Drop your clutter

Just because a company is the first to offer a certain product, or is the biggest, or the most funded doesn’t mean it is the best. In the realm of UI design, Vimeo can teach YouTube, along with the rest of us, a few things. For instance, Vimeo’s visual simplicity is stunning. Their help/search bar which loads on interior video post pages is pretty slick and instantly makes sense:

Vimeo's help assistant as triggered by a simple mouse over

Vimeo's help assistant as triggered by a simple mouse over

Vimeo's search assistant as triggered by a simple mouse over

Vimeo's search assistant as triggered by a simple mouse over

Out-think your users

If you can think about it before they need to, they’ll love you and come back. When I showed this to my boss, he responded with, “Oh yes that’s nice, I think it might even been cooler if you could check off the areas you wanted results for and then return them all, instead of having to do that same search in [each category].”

Agreed. Perhaps Vimeo’s forum data is isolated from it’s channel data, which is in a separate database from its people data which would make the multi-source search query far too taxing on the server. If so, then (like many of the internet’s fledgling services) integrating systems should be a priority for any online service-based app. Easier said than done, but makes getting things done easier.

Website Source Code As Branding

This was a fun find: ASCII art in the website source code. This works because source code is almost always viewed with a monospace font so each column of characters line up just right spanning all the rows; meaning all the characters of the font set each use the same width—for example: the character ‘i’ takes up the same display width as the character ‘m’.

Code branding: Vimeo website source ASCII art

Code branding: Vimeo website source ASCII art

I’ve done this before, but not with website code. At a former place of employment we had a few servers for playing, developing, testing and live-serving the company’s many sites. I used the MOTD file to present (in glorious ASCII art) the name of the server when logging into the shell as an attempt to reinforce to the user which server they actually logged in to, like this:

Server identification as ASCII art via MOTD

Server identification as ASCII art via MOTD

Oh the internets are so much fun!

Gizmo: the Redesign, Week 1

I’m in the middle of week #1 now at my almost new job and so far it’s going really well. I’m about 95% sure this will be my new place of employment, leaving 5% for the (unlikely) unknown that could take place over the next week and a half or so. The mood at the office is nice… work gets done, and things have deadlines and emergencies pop up frequently like those whack-a-mole things arguing for time and screaming “C’mon! Beat me!” yet things remain relatively calm and light.

My first task should be to help my new co-workers make a decent cup of coffee.

Dear co-workers, coffee grounds lose their purpose once they leave the filter; they become pollutants to the point. Coffee was not meant to be crunchy or opaque, it was meant to have flavor, body, and aroma while doubling as a delivery mechanism for the molecular compound of the gods.

My first real task is to design a set of prototypes for the new public face of the site. So far, so good. I started it on Monday, and yesterday (Tuesday) version one of the homepage made it to my boss’ screen where it was then simulcasted to my other boss’ screen somewhere in Massachusetts. There was plenty of feedback. I love feedback. A lot of nice things were said and some helpful insights were passed down. Today, I buzzed through about 3 progressive iterations based on their feedback.

At a certain point, though, it all starts looking like junk. At first, it started out with what seemed like innovation and elegance—like a colorful, spicy sushi roll—but has now become unsalted mashed potatoes (to me at least). This tends to happen when I’ve been staring at a layout for hours, pushing elements over here, then over there, using this color and that one trying to find the zen within it all. This also happens when the review of the first draft illuminates missing things. The beauty in the simplicity starts to wain when trying to find places to put things in a design that never intended to have these various things. It is not design if it ends up looking slapped together where everything starts looking like an after-thought.

Still, I left the office today feeling great, like progress was taking place. It also feels good to leave at the end of the day knowing I don’t have to stress about finding work tomorrow. I love knowing that I won’t be surrounded by it at home. Freelancing is just as much a prison as it is freedom. At this point, the only thing I miss about freelancing is being around Jen and going on bike rides and adventures with her, picking up the kids from school, and taking a shower at whenever o’clock.

So, I get home and flip through my feeds and view finished, functional designs and I start thinking, I’m just a hack. Look at that. I’d have never thought to do it that way and that’s awesome. This is all, of course, just self-imposed garbage. The feedback and reactions dictate quite the opposite. And in my own defense against myself, each site (and sometimes each page) has its own set of problems and issues and requirements. Self, get over yourself.

I have some ideas to try out tomorrow to bring the innovation back into the project that I felt like the first draft had. The simplicity needs to be reinstated one way or another—it has to on a conversion site.

Afloat

This is a pretty cool Mac UI plug-in for Cocoa-based applications. (Not Carbon-based apps like Finder or iTunes.) Afloat allows you to control application windows like you should be able to control them—making them translucent, or floating on top of other windows even when another application has focus, and a few other tricks that just make sense once you try them. And it’s free.