Before... Just Before, No After
Need a screen capture for student exercises in UI design? Here you go. June 31, 2006 |
 |
Synopsis: I noticed that the artwork of a spam filtering application has an interface that epitomizes what you get when you start with a blank page in an HTML tool, and add precisely and only first-level visual design. I present it as a model, and perhaps a springboard for examination of the state and challenges of the development world.
This is not really meant to bash the maker of the system that's shown in the following screen capture. In fact, I've removed as much identity as I could. Rather, this page is special because it epitomizes what you get before you add any real visual design talent to a web application. By the way, I don't consider myself a particularly talented visual designer... it's just that the visuals are inseparable when critiquing the usability of a site. I'll refer you to a real "visual guy" later.
I present this page as a model. I'd say that it might soon be almost an historical relic, but the way the software world works, pages like this will continue to be made for approximately another 15 years. We'll see if I end up having 2020 (sic) foresight.
Before
Here it is, viewed just a few days ago, in the year 12, A.W.:
What do you see? Maybe a clear, uncluttered, and functional design. And you are probably right. But there's another side to the story... where it is in comparison to more current visual design. That's what I see.
This page could have been just bare naked HTML styles... you know, unformatted <p>,<h1>, etc. But that wouldn't demonstrate my actual point. You could argue that completely unadorned HTML would have been more "professional" in at least one regard: a pro designer could implement a design on top of it with less work, not having to strip out all those <font face="Arial">'s and so on. No, this page is "better." It shows every technique that I myself did (in 1997?) when confronted with that miserable white expanse of web page. In fact, I looked on the Wayback machine and found the following page to prove exactly that:
http://web.archive.org/web/19961220151804/www.netaxs.com/~jbellis/mrgarita.htm
Since we're approaching the summer holiday season, that margarita recipe might come in handy as well, despite the formatting. Notice the identical table borders as Mr. Before!
Here's a list of its beautiful, raw form:
- Three frames with no artistic continuity (one of the hardest things to combat)
- Unstyled form buttons
- Over use of centering (I'll bet designers spend half a lifetime trying to battle this tendency that we have since grade school)
- Default HTML table borders
- Times Roman typeface sprinkled in indiscriminately like a little pepper with that salad.
- Multiple, arbitrary type weightings and colors, but an intentional effort nonetheless
- And, to prove that the crude execution is not solely in the court of the visual designer, the programmers show that they can step back in time too. Notice it has the classic computerism, which I'll call the "singular plural." Do you see it? It's the phrase "You have 1 messages."
Oh, that brings out another crudism. (Since I used a salad analogy, should I call this whole thing crudité?) Notice the capitalization of "messages." We've got mixed capitalization in the sentence. So we could say the writing expertise is back in graid sKooL, too. That's the nature of this computer work, many different disciplines are called for. But in all probability, the writing, graphics, UI design, interaction design, and coding were all wrapped up in one person, and a eminently talented person, at that... probably a software developer. [[[Just one more distracting story, then I'll leave you alone: I had a tennis raquet once that had a sticker on it that said "imminently playable." I'm still waiting.]]]
Yet despite his or her talents, the result is a poster child of 1997 web design. What's my point? Until we get to the point where...
- Design templates are the rule rather than the exception, and/or
- Development organizations manage to micro-purchase or micro-staff the smaller roles such as techwriting, visual design, and usability...
... the many infelicities of such pages will be widespread and every high school programmer will be recreating this page ad infinitum, or until 2020, whichever comes first. I've loved that word "infelicities" ever since a customer applied it to a training piece I produced a few years ago, where I was in exactly the same position as that sole creator of the spam page showcased here. After
<<<Your work goes here. I said there was no "after." >>>
Want some help? I suggest looking at sites like www.LukeW.com. I'll be happy to post any results, even from student exercises. Check out especially his web applications portfolio.
I do zero marketing. Drop me a line if this is worth reading. -jb |
