To Be a Designer

“As a designer, your job doesn’t stop when you leave the studio at 5 p.m.  That’s why our environment is key – it provides constant input, a constant stream of ideas,” – Jae Min, Audi Chief Designer, Audi Magazine 02/08

This statment rings true for me.  While I may not be designing something as complex or complicated as an automobile, I certainly look for a constent stream of input and ideas.  This consent search allows me to find solutions to problems I have yet to encounter.  It also helps continuously refine ideas and views I have had about previously completed designs.

Searching for the Impossible Experience

There are two concepts that everyone in the usability field should learn early. First, some things by their very nature are not simple and straight forward and no matter what you do they will be difficult to understand. Second, you can never make all of the users happy all of the time.

The first concept is one that I continually struggle with as it begs the question of, “when is enough, enough?” For every product and designer this point is different. Sometimes you may have the resources to continue to refine it over and over. Other times you may need to make the decision to stop grinding the wheels and move forward with the application.

For my self I find that doing a complete design of something more than three or four times becomes counter productive. Typically somewhere in those first designs is the core of what the interface should be. From there it can be shaped into the best solution possible. But this shaping can only happen with a clear and detailed direction. Once that disappears all design work should cease. If the stake holders still have concerns they should provide a detailed direction for the project and refinement can then resume. If they cannot provide a detailed direction then the product should be reviewed by users (assuming time allows) or released to the public with the understanding that some fast fixes will need to follow.

While the second concept seems obvious it requires you to ask a few questions. The fist one that is often asked is, “is it better to make all of the people happy some of the time or some of the people happy all of the time?”  I would argue you cannot do either of these. The best you can hope for is to make most of the people happy most of the time.

The tricky part then becomes defining what “most” and “happy” means. I believe “most” is as close to 95% as economically possible. “Happy” is really a measure of contentedness with the product in question. Again the issue becomes relaying this information to stake holders who would like to see all customers happy all of the time.

Similar to the first concept, refinement work should cease when detailed direction stops flowing from the stakeholders, even if there are still members who feel the product isn’t “ready”.  This is because it is not productive to simply say something is wrong and not provide any explanation of why it is wrong or more importantly how to fix it.

Finally the hardest part about both of these concepts is that they feel like an admission of failure.  You have to stop work when you may feel like it could be better.   If you are anything like me this is a hard pill to swallow.

Mystery of fonts

I read a simple and sweet post today by Seth Godin and realized why I will never be a graphic designer. The gist of what he was saying is that most of the time a decent font will suffice but it will never compare to a GREAT font. To me fonts are like music, their are those who can make great music and their are those who can enjoy great music. I fall into the latter group. I feel that I can tell when the perfect font is being used but unfortunately couldn’t tell why it is perfect. In the same way I can tell when a song has all the components of being successful but I can’t tell you what those components are.

I have found my twin

SimilarityI recently found a site that looks an awful lot like mine. It uses a similar background and layout. To check it out cruise it over to www.sullr.com/us/. At first I was concerned I might some how be infringing on their copy write but after doing some research I have determined that this is unlikely as their site wasn’t even registered until after I debuted my first iteration of this design. It is important to note that in the first iteration I used a vibrant green closer to the one being used by by Sullr. My original design can be viewed at old blog. Needless to say I have started working on a new design and hope to have it up soon. Until then enjoy a great looking reverse lookup engine ;)

Digg’s new look

Digg.com has recently unveiled its new look and it sure is a “humdinger.” There are some good points like inline images and a more prominent bury button but overall I believe it is a step backwards in both graphic and interaction design.

On the graphics side the biggest mistake in my opinion is the failure to define a base font size. This means that the size is dictated by the default browser configuration, something that most people never change. For Windows Firefox users the default size is 16pt which is typically a little large for Web text. This gives the entire site a cartoon look. I understand that this might have been done for accessibility reason but there are other alternatives that would have allowed for a better controlled experience.

From the interaction standpoint many of the common feature such as digging, commenting, and burying have remained mostly unchanged. Personally I think the big failure here is the integration of video into the front page. This forced a redesign of the navigation which until now was excellent. In fact I have pitched similar designs and people recognized the similarities and even referred to it as “Digg style navigation.” While the new design maintains many of the elements of the previous it has added a drop-down menu system accessed through multifunction buttons. This can be confusing to casual consumers. With each click you may end up with different results.

Overall I think the previous design is better than this current iteration. Sure there are some interesting additions but I think they are really just feature fluff. I look forward to seeing how the public sees the new changes.

[Update] I just found this post. It looks like there might be other problems with the new Digg.com redesign.

Tip for those pearly white pages.

I have been using a unique theme for a while now and have noticed something strange. It appears that many people don’t code in the background color because they assume that the default is white. Well this is a fallacy, as it turns out the default is set by the window manager and there fore your page may be broken. I know I am a minority but it is not that hard to add one line of code to ensure your site is always at its full glory.

Coding your Logo

Making logos accessible is actually much easier than many make it out to be. It is important to make your logos accessible as you want them to have a strong search engine presence.

For this tutorial you will need to have a basic understanding of XHTML and CSS.

First comes the HTML. Generally your logo is nested in the header like this.

<!--HTML Code-->
<div id="header">
<a href="home"><img src="yourlogo.jpg" alt="COMPANY NAME" /></a>
</div>

To make this more accessible and for it to degrade gracefully we really want to eliminate the “img” element and in turn use a text elements like this

<!--HTML Code-->
<div id="header">
<h1><a href="home.htm">YOU COMPANY NAME AND ANYTHING ELSE</a>
</div>

In the above case if a user views the page un-styled they will simply see an H1 header link with the name of your company and any other text you place inside. This allows search engines to read the actual logo in plain text and assign this text an important value (first H1 elements are seen as important). It also improves mobile device structure as many of them don’t like images.

Now we can use CSS to make the image based logo appear where we want it and more importantly how we want it (image). We only need to style two elements, the ‘H1′ and ‘a’ tags.

/*CSS Code*/
#header h1{
width:auto;
height:auto;
text-indent:-9000px; /*This removes the text from the screen*/
}
#header h1 a{
width:300px;
height:100px;
background:transparent url('path/to/your/image.jpg');
display:block; /*This is critical*/
}

In the ‘H1′ element you will notice that we gave it a text-indent of -9000px. This moves the the text far enough off the left side of the page that even with the largest monitor it is not visible. By doing this we ensure that pesky text doesn’t sit on top of our beautiful logo.

The next unusual piece you will find in the CSS is under the ‘a’ element. “Display:block;” renders the ‘a’ element as a block level element allowing it to have a fixed width and height.

Now you have a beautiful logo that degrades seamlessly and is extremely accessible both to humans and search engines.