I’ve been thinking redesign for quite some time. It’s not that I’m unhappy with my current design. It is because I’m unhappy with my current design. Well, at least with the limitations it presents and how it influences how and what I write. So, I’m thinking it’s high time to take action.

Approach

Approaching a blog redesign can be a complicated process, so I started with two lists: one, a list of the problems the current design presents and two, a list of the design and branding considerations I wanted to preserve. The result, is a somewhat general requirements document and a somewhat more focused strategic plan. Yes, even for my own blog, I commit to some strategic planning.

I won’t publish these lists in their entirety, but the basic problems I would like to address in the new design, are centered around drawing more focus to the content of the articles, in other words, implementing a better use of white space, reducing superfluous clutter and providing greater expanse for the types of content on the site. The complicated part of redesigning a blog, is what to do with the archives. Do you port them over to the new design? Or, do you let them stay in their original environment and risk incongruity with the new design?

This question relates to the concerns in both of my lists, but at the same time, could be restricting in my design process, if taken as a primary concern. So, for the time being, I think I’ll put it aside. Instead, I want to focus on architecture, UI and branding.

To assist in this process, I thought it would be helpful to look at a few of the blogs that I read regularly, that have undergone recent redesigns.

Recent Redesigns

jasonsantamaria.com

I recently had the opportunity to sit down and talk to Jason Santa Maria about his new blog redesign, at An Event Apart San Francisco. The particular problem he was aiming to address in his redesign, had to do with the challenge of story telling by design.

Jason said he was interested in solving the problem of disassociation between design and content, that is often found on the web. Primarily, the design you find on the web can be starkly contrasted to that found in print, wherein print design tends to be much more contextual, in that it supports content it relates to. The biggest factor responsible for the divide between print and Web, is arguably that of technology and convenience. That is, until recently.

It may not be appropriate in all situations, but Jason has embarked on an experiment of sorts, with his blog. His goal was to bring a contextual relevance to his design, specific to the article or post. By taking advantage of the flexibility of Expression Engines’ tag structure and some smart coding, Jason is able to easily customize his design to suit each particular post. He writes more about this, on his blog.

While I’m fascinated by the idea, I think this could also be restrictive or even commanding over what and how I write, since I am both author and designer, and primarily because I have a hard enough time making time to write, as it is. However, I do think there is a lot to be gained by Jason’s experiment and always look forward to his next post.

Departing from Jason’s emphasis on telling stories through design, I have found that there is a strong trend in minimalism among recent blog redesigns. I mention redesigned blogs, as apposed to new blogs specifically, as an issue of authority. Decisions made in a redesign are usually made to address certain problems that the previous design presented. For this reason, I find recent trends in redesigns to be informative on a level new designs are not.

www.emilychang.com

Among the blogs setting this trend in declutterfied redesigns, is Emily Chang’s well known blog. Factors that led her to return to a cleaner presentation, were centered around content and her relationship to the site.

…changes in the works have to do with the content, focus, and my relationship with the site. It’s been feeling a bit stale for me so I’d like to shake it up and start lifeblogging.

~ Emily Chang

For me, this was an interesting insight, as it sums up quite nicely how I’ve been feeling about my own site and what I suspect to be the underlying motivation for other designers and organizations who embark on redesigns. A redesign is a unique opportunity to reassess the direction you have taken and evaluate which aspects are working and which are not. A redesign, like a soft revolution, is a valuable step in the evolution of a site and integral to maintaining a healthy web presence.

In addition to our objectives to refocus information architecture, broaden the scope of content and strengthen the personal relationship between the author/publisher and the blog, we find that the purveyance of brand recognition becomes a strong component in a redesign.

clagnut.com

Richard Rutter’s recent redesign of Clagnut is a shining example of persistent brand evolution, through redesign. What makes Richard’s redesign of Clagnut interesting, is that he was able to both give his site a complete redesign, from layout to color palette, and yet still retain, if not strengthen the overall branding. In a sense, this is the true test of good branding. When it’s done correctly, it gives you a feeling that this is how it’s always been, how it needs to be.

This kind of brand retention is weighing in pretty heavily on me as I consider redesigning Repeat Penguin. While I certainly want to allow myself the freedom to rethink the site as a whole, the intuitive carryover in brand is a big factor. I think all three of these sites have handled this very well and they have all given me a lot to think about when working my own redesign.

I’m looking forward to making the time.

Far be it for me to criticize anyone for not understanding what I’m saying, at any given time. It’s to be expected. However, if that anyone happens to be software, I set the bar much higher.

If I have to do more than strike a key or click a mouse to accomplish a given task, I feel put out. I realize this is not a realistic expectation in many cases, but it’s inherent to the hard-nosed character required to be a user interface designer. If I am asked to do more than this, when interfacing with a program, my mind immediately starts thinking of ways in which the process could be simplified.

It is from these high standards, that my frustrations with both desktop and web applications emerge.

preemptive understanding

On a number of occasions, I’ve expressed my number one wish in innovative software development. More than anything else, I really want to see a version of Quicksilver for life. I need help in this department. I depend heavily on cyborgian extensions, primarily computers of one sort or another. But this doesn’t quite cover things like glasses, keys and notes I’ve jotted down on scraps of paper, soon to be deposited into one black hole pocket or another.

Now granted, this is a pipe dream. If the folks at Black Tree could pull something like this off, they would successfully take over the universe (not that that’s their goal or anything).

Years ago, before I ever got into Web design, I was a sign maker. For about 3 years, I studied this craft. At it’s best, the art of sign making is a demonstration of both the purity of information design and subtlety typography. At it’s worst, it’s the loud example of why these two disciplines are so important.

the art of sign making

The art of sign making has changed a lot with the digital era. The romance seems to have been washed away. Digital plotters and laser routers have made things too easy for the sign maker and the craft has suffered. Recently, Jason Santa Maria recapped on a typography walking tour he went on, through the Lower East Side of Manhattan. Sifting through his flickr stream, stirred up in me, the enthusiasm that first lead me to pick up the sign makers tools.

Granted, the reality of the work was not that satisfying at all. I was hard pressed to find, in colleague and client alike, anyone who seemed to recognize the term typographer. Of course, that’s a bit of an exaggeration. It was not that the term escaped this particular industry. It was more like the meaning slipped out the door when no one was looking.

In the midst of all of this that lacked what I can only call character, I did find in my experience, a wonderful thread to the heart of sign making and typography. It came from a 90 year old man who still practiced the art of hand painting letters.

I’m not talking about the pasty, cracked letters you see on bakery windows. I’m talking about the massive lettering you find on the sides of buildings. You can still see traces of this fine craft, on some of our older buildings. Jason provided some stellar examples from his tour.

In case you don’t appreciate the complexity of this kind of typography, let walk through the process. There was no projections or digital tracings or charts to follow. In some case, letters could be as high as a four story building. But often in my own experience, they scaled around twenty feet in height.

The really good sign painters would meticulously measure out the area and calculate a grid for the letters and spaces between. The experts would eyeball it. Don’t believe me? I’ve seen it. And the letters were perfect. It’s a dying art, if not a dead art. No one teaches sign painting anymore and thusly, an important school in typography is lost to us.

Understanding type comes in many different forms. Sign painting is one form, that requires a very unique understanding of type. So thank you Jason, for bringing back some good memories.

I’m not one to think of products like soap or tube socks, as having a user interface, but in the practical sense, they do. We tend to lump product user interface design, into the parent category of product design. None-the-less, there is a distinction here. In some products, we can refer to the user interface as Ergonomics, such as the chair I’m seated in. In others, this doesn’t seem to be appropriate, such as a bag of cookies (or, in my case, a can of cookies).

Thursday night, after a nice meal at Yo Yo Sushi, we decided to stop in and pick up a few things at the drug store. While we were standing in line to check out, Lauren buckled at an impulse rack and purchased some cookies that were on sale 2 cans for $5.

I have to say, they didn’t look bad. They were described as Delicious Caramel Toffee Cookies, and two for five bucks. Okay, maybe the sake from the restaurant was helping this impulse, but the deal was sealed and we never looked back.

Fig. 1

That is, until the following morning when we were having a hankering for some delicious caramel toffee cookies. That’s where the bad cookie UI design comes in.

First, Lauren tried opening the can. She removed the strip of tape from around the lip of the lid and proceeded to try to pull the lid to the can off, with her fingers. Grunt, Moan, Whimper! Next, being a man (and feeling I should do something about that), I decided to step in and offer my manly strength. Grunt, Moan, Whimper! ( ego crushed ).

So indeed, serious problems call for serious solutions. Out comes my all-in-one, portable cookie tool ( pictured at the top ), which by the way was purchased from an impulse rack as well.

Bang, Crunch, Slice! ( see Fig 1.)

Ah, cookies at last (wipes sweat from brow). They were lousy by the way. But as I reached in for another, I noticed the cause of all my frustration, Poor UI Design!. Seriously. This wasn’t like a bag of potato chips you can’t open. That’s just poor manufacturing or wrong materials. This was a case of poor design. The lid, you see, did not fit over the top of the can, as you might expect, seeing as the lip was on the outside. It actually went inside the can and then curled over the top of the can to form a pinched lip. This is similar to how the top of a can of soup is sealed to the can. The difference being, they expect you to use a can opener to get to your soup, not to your cookies.

There is one common and fundamental key to good user experience, the user should never have to guess. This becomes even more important when you are asking the user to divulge personal information by creating a user account. A few months ago, I wrote an article on the importance of branding and design for registration forms. For an industry growing around web applications, user interaction has taken on a new role. Those points of interaction within a website, the programming and scientific elements have also taken a new role. In essence, this challenges the user. As a user interface designer, I want to reduce that challenge and make the experience as seamless and direct as possible.

Creating Web Application Forms

About a month after I wrote this article, Ryan Singer from 37 Signals gave a compelling presentation at the The Future of Web Design London, on Web Application Form Design. Ryan classified the information requested in form, into two distinct categories:

1. Wrote Information
2. Made Up Information

Wrote information is easy, as Ryan points out: Name, Birthday, Email Address. He recommends starting with these kinds of questions and work your way up to the “thinking questions”, like Username and password. In many cases, this approach can be very effective. However, there are also a considerable number cases where this approach would not create an inviting doorway for new users. Case in point: any new start up that needs to earn the trust of its’ users.

The problem I see with most “wrote” information requested in forms, is that it tends to also be personal information. Yes, they are easy to answer, but they fail to give anything in return. I keep referring to PB Wiki as an example. In my opinion, they all but have a perfect sign up form. The steps are incredibly minimal and the user is told up front what will be required of them.

They start with a question that falls under the “made up” category, but gives enormous payoff to the user, “Choose a Site Name“. The user already feels accomplished.

Next, they ask for “wrote” information, ” Your Email Address“.

And finally, they ask for a little information about what you are doing here, in this case, with your wiki. This kind of falls between the two categories defined by Ryan. It requires a little thinking, but it has been simplified by limiting the possible responses with a selection menu. Again, leaving the user at the end of the process with a sense that this is going to be easy.

Granted, not all applications can offer something as simple as PB Wiki, but the model they represent in their sign up form can translate to any web application environment. This model works following 3 basic principles.

1. Let users know what is required, before they start.
2. Give something, when you ask for something.
3. Never let them guess.

Let users know what is required, before they start

When it comes to web forms, the number one thing you can do to encourage a visitor to become a user, is to let them know what is involved in the sign up process, before they start. Common thinking back in the day, was that you could avoid scaring off visitors by hiding the depth of commitment needed to get through the sign up process, by burying it in a multi-step procedure. This led to the dreaded multiple-screen registration forms. Suddenly, these were everywhere. They were deep, convoluted and seemingly endless mazes. User bail out on these forms was high.

That said, sometimes it’s just unavoidable. So letting the user know what is ahead of them and rewarding them along the way, can make the process much friendlier.

Giving something, when asking for something

The question of single screen sign up form versus multi-screen, was one that I came upon when designing the user interface for SparkSprite. Originally, we had gone with a single screen form, that was visually divided into 3 steps. We kept the process simple and limited the fields to only those that were essential to getting the account started.

This worked well, for all practical purposes. The form was clean and simple and inviting. However, after putting it into a testing environment, we quickly realized that some of the user interface objectives we set out to accomplish, were being sacrificed for the desired user experience. We went back to the drawing board.

User interface and user experience are very similar things, but not to be confused. The first is directly tied to product efficiency, while the latter to expectation. If you meet the users’ expectations, the experience is a good one. If this is at the sacrifice of accomplishing any of your interface objectives, that is quite bad. Our initial process was less demanding on the user to get signed up, but for most users, would require additional steps, once they had their account.

There were both pros and cons to this approach, but when the nuts met the bolts, we wanted nothing less than a completely intuitive experience for the user. We were falling short. To streamline our process, we decided a multi-screen approach would work much better for our needs. SparkSprite, unlike other web applications, presented some unique challenges. In the first place, we needed to collect a lot of sensitive information from the user, the names and addresses of children they want to send mail to. And in the second place, while most of this information was wrote, it required that the user plan in advance and have everything prepared beforehand.

To accommodate for these requirements, we used two tactics. One, provide a progress table so users would know how many steps there would be and what each would entail. And two, start with the user information first, since that is readily available to the user and a tad bit friendlier than asking for a credit card right off the bat.

Since we had to jump right into asking for personal information from the user, we made sure that we closed the first step of our sign up process by asking for something specific to the account they were setting up. In this case, the type of mail plan they wanted to sign up for. The reason for this was to provide the user with a sense of accomplishment.

It may sound like a really minor thing, but aside from that one question, there was nothing else we were asking for in the first step that distinguished our form from any other. We had asked for something from the user and now we were giving something. Now they have an account type.

Never let them guess

The key to good user interface design, in general, is to never let the user feel like they have to guess about something. I can’t tell you how many sites I’ve been on, where I felt at some point, how should I know that? When it comes to forms, this is especially important. Remember, any time you ask for something from the user, like fill out this form, you are asking more than you really have a right to. Why should they? What are they going to get out of it? And how long will it take and what will be required?.

These are the questions you need to answer beforehand. If you compare the web application environment to that of walking into a convenience store, you start get a clear sense of the size of the barrier this extra step of registration creates. If you were asked to fill out a quick form before entering the grocery store, you’d probably go across the street and shop.

Fortunately, most web applications have this sign up process to contend with, so users don’t necessarily have that option to “shop across the street.” This is why it is so important that your users don’t need to do any guess work when they come to your site.

This was, perhaps, the most important factor when designing SparkSprite. When it came to the sign up form, this idea is most critical. If a user has questions during the sign up process, you have a good chance of losing them as a client. To help avoid this, we applied a simple strategy when building our forms:

If there is an action being requested of the user, give them only one choice. Simple. Fill in your name. Fill in your email address. Continue. This model is ideal, as a starting point. Needless to say, or maybe I should say needful to say, this isn’t always possible. People make mistakes. That once choice, could have been made wrong. Then they have to go back and fix it.

Our focus, then, was to limit choices. If one choice would do, that’s all we offered. If two, then. If three, then three. This approach helped us keep our process direct, while at the same time keeping it from being too restrictive.

The important thing to remember, in all user interface design, is that no matter how clear you are, and how much you think you covered all your bases, someone is not going to get it. That was the person we didn’t want to lose. Striking a clean balance with a web application form, that will satisfy both user interface and user experience goals, really comes down to lots and lots of user testing. But having a solid strategy and clear set of objectives when you start, can greatly improve the tiime it takes to reach those goals.

I’m so accustomed to lying about personal information when I create online accounts…

How many online accounts does a person need?

After designing what feels like my bagillionth registration form, I have to ask the question, how many online accounts does a person need? More accurately, how many accounts can a person have before maxing out on e-turgor? I’ve got a bad habit of signing up for accounts, poking around and then never letting them see the light of day again. I have more online accounts than a person should be legally allowed, no question. None the less, it all seems worth while when you find that amazing new tool that you, henceforth, couldn’t live without.

Given the phenomenal and ever-growing profusion of application offering online accounts, I had to stop and take a look at the doorway, the registration form.

I came across Christian Watson’s fantastic showcase of this, the banalest of banal web design elements as I was working on this article. There is a much more impressive collection of registration form screen shots over there, than I’ve put together at the end of this article.

In amassing the few screen shots of registration form I put together for this article, one thing stood out as clearly and cleverly bizarre. Most of the forms I was looking at, asked for birth dates! Why? To keep minors out? As a security measure? I’m so accustomed to lying about personal information when I create online accounts (which will undoubtedly be cause for great confusion on my death bed), that this question is just waisted pixels, wasted energy. Someone, please calculate the waste. Does anyone ever tell the truth when asked questions like this? Anyway, just curious.

A Usable Way to Design

The next stop in my quest to understand the registration form, was to head over to the Official U.S. Government Website on Web Usability.

Yes, we actually have one of those. It’s the official fuel station for information about website usability, by the U.S. Government. As one might expect, it’s one of the poorest designed sites out there, for usability. Not to mention, if you take a gander over to the section on online forms as I did, you’ll notice at the bottom of the page, under test results, they kind of muck up the data. Specifically, they muck numbers 5 and 6, ironically labeled Reduce Cognitive Load

On that note, let’s let the forms speak for themselves (and remember, humans don’t think like a database

The Forms

Continue: User Experience and the Registration Form Pt. 2