I was using Entourage’s My Day widget the other day and almost ended up sleeping on the couch because of it. If you study this screen capture below with a keen eye you’ll notice it said that I had a acceptance design meeting tomorrow (wednesday.) But notice how simple it would have been just to assume that event was scheduled for the current today.

I totally mis-read that my day was actually free (notice in the top left corner) because my eye was instantly drawn to the meeting occurring tomorrow due to it’s visual weight and color contrast. So I frantically called my wife and said I couldn’t make the parent/teacher conference because I had a meeting at 1:00! She was not too happy. I realized my mistake about 5 minutes later and called her back and did a lot of apologizing.

So I thought with a few simple adjustments I wouldn’t have made this mistake. See my quick fixes to design below to make it a bit more useable.

Now it clearly stands out with a color keyed area that my day is free. You can’t miss that. It’s no longer buried up in the left corner. I also separated upcoming things for subsequent days a bit more and more importantly muted their color tones. Now when I would mouse over that upcoming event then it could brighten up significantly, but in the meantime a meeting that is a day away doesn’t have to beg for my attention. There’s enough distractions in life already.

We’ve just recently launched a very large website redesign for CATA. I was thinking how this site truly showcases the differences between visual eye candy design and useful informative web site design. While CATA’s makeover is still visually appealing the quality of the design comes from a underlying thought process of what information should be displayed and where as well as what users will need to do with it. The information architecture forms this foundation and the design is merely there to support that. In fact the best designs for the web are the ones where the user doesn’t even notice the design, it just falls to the background and the purpose and content rise to the surface. They simply and intuitively know where to go and how to get there because the design guides them and doesn’t distract them from doing what they need to do. While I’ve done many heavily branded and thematic designs as a web designer where the visual treatments are weighed heavier it’s important to not allow the artistic elements to outweigh it’s usability. Your website still has a purpose and relevant information to provide to it’s users. Your web audience is an inpatient group so the quicker you guide them to the info the better. If you put that as your main focus you’ll find a clean effective appealing design will naturally follow. Everything else is just window dressing.

It occured to me the other day that sometimes clients really don’t know what the heck we’re talking about as designers and programmers. You might as well be speaking Klingon. That’s not a slam on the client’s intelligence (or on Klingons.) It’s more of a failure on our part in effective communication. If a doctor starts talking medical terms, I have no clue what he’s talking about either. But a reputable doctor will have a good bedside manner to compliment their medical knowledge. Their ability to relate the information to the patient in a clear and friendly way really helps distinguish them from other professionals in their field. I think designers and programmers can take a lesson from this. Sometimes we get so wrapped up in our little world of technology buzzwords and designer lingo we forget that our clients aren’t apart of that same crazy world. You can’t swing a dead cat without hitting a acronym in our business.  Here’s an example of a typical conversation.

“We’ll be taking your XHTML and .ASP files along with your css and image directories and uploading those up to your host domain through a FTP program. It’s behind our a secure firewall so it may take a while. Shouldn’t be a problem though.”

All the client heard was “blah blah blah.  Shouldn’t be a problem though.” 

So let’s say that in some terms they can better relate to.

“We’re about ready to launch yourname.com once we upload the files to your website. We’ll have it live on Wednesday by 5pm so your customers can get  started visiting it then.”

There, done and to the point. The client doesn’t need to hear how you did everything or your fancy technical terms. What they do need to know is how it’s affecting their business in clear concise words and what the next step is in the process. You are also not talking down to them and if they want to know the nitty gritty details, you can help guide them through those as needed. Remember they can teach you just as much about their business as you can teach them about yours. Great business relationships are a team effort so make that client apart of your team. Save the Klingon talk for the next Trek convention. 

When I saw the Microsoft Surface Demo I was saying things like “wow…very impressive!” and “oh…that’s cool” It wasn’t necessarily groundbreaking as many of the ideas of the touch interface are also employed in technology like the iPhone, the pinch and zoom in particular. But it was very impressive when you could drag photos from one camera to another simply by placing the camera on the table. I’m not sure how often that feature might get used on a day to day basis but it sure makes photo transfers a snap when you need it.

The most useful demo was setting down a credit card and then dragging your meals to it on the touch screen surface. This solves a real efficiency problem in restaurants making it very streamlined in how you select and pay for your meal especially amongst a group of people. This was an example of a technology solving a problem or doing a process better. 2 points Microsoft.

However it is not without potential downfalls. It would fit very nicely into markets like sport restaurants or casinos, but I can’t imagine having this screen throwings ads at my face while I eat at the Olive Garden or my local quiet restaurant. And you know they’re going to run a ton of ads on it and while I’m eating and I certainly don’t want a light up display under me advertising the latest special on mozerella sticks at Chili’s. I already go to the movies and have to sit through TV commercials and a slide show of loud ads before the movie even starts. This Surface technology could be more of the same, and please oh please don’t have it make sounds at me too. We learned that lesson with noisy flashy websites. Aren’t we already overly video/audio bombarded in society? Remember Minority Report?

Tom Cruise annoys me enough let alone this potential marketing dystopia. The idea of successful technology is something that goes beyond being cool or flashy. Apple has recognized the idea of finding niches and doing things better in those niches to serve it’s users. Apple saw the mp3 player and knew it could do it better, they saw the cell phone and knew there was a better solution. I’m not sure if Surface is identifying anything that’s being done poorly besides the bill paying solution to warrant a business investment for it’s price but it raises some interesting new ideas. As the cost of the technology comes down it just may find some useful niches. If not then it just may become more flashy noise in already over stimulated world.

“Usability Testing Castaway”

We’ve been working closely with MSU Usability Center to conduct testing on a high profile website client. This testing came after the fact we built the site but now I can see the benefit of testing through iterative phases. While not cheap to conduct an organization that truly wishes to make their site focused and effective should definitely consider running their site through this valuable process.

The testing entails a series of questions they ask typical users to run through in finding some information in the web site or to perform a specific task such as purchasing something. The subjects are monitored on video and they’re encouraged to verbally talk about their process as they decide where to go as well as offer up suggestions that would improve their experience. Meanwhile we as developers watch the testing in another room and can’t seem to yell loud enough through the wall “click on the link that says e-commerce!!” all the while they were just looking for a link that says “Buy this item here.” I think we as web developers and designers often forget that we’re not the typical average user. We often fall into traps of using jargon and terminologies in our sites that an avergage user wouldn’t understand. Many times this is the verbage coming from the organization but they too aren’t the typical user. They come from the perspective of how their business runs and already have their own biases in using internal terminologies that can further confuse a user. If you want to make a happy customer they need to achieve the goals of your site, enjoy the experience and come back. A effective useable website will provide them answers quickly and be presented in a logical layout that strengthens your branding but more importantly accomplishes helping your user find what they need. A happy customer means a happy website owner.

Often during the study we noticed a simple thing of how something is labeled would confound and confused users even if it made complete sense to us. Simply adjusting the verbage to something more simple and clear to the customer and not to expectations of the organization or developer increases click through rate immediately and drives them to the answer they were looking for to begin with. We should always be conscious of how the site is reading right down to how we verbalize the links or the sub headlines. User center design starts and ends with the users and the sooner we can have them involved the better the site will be.

It seems a lot of web designers these day are trend following. The great glossy logo with the the reflective drop shadow, the saturated colors, the large beveled button, the ever omnipresent drop shadows and the same overused content layout patterns that mimic most blogs out there. It’s all fine and well but I think a lot of new media designers never even laid out a brochure or flowed text into a magazine article. How often did they experiment with type as they’ve been confined in a browser that wants system fonts for the default of the body copy.

With traditional print your open to a totally new set of creative possibilities and new types of boundaries so It’s unfortunate they miss some of these great learning experiences about content layout and page flow that could help them increase their web design skills. Really isn’t that the purpose of web? Content presentation and providing information? So when designers get so focused in on making big flashy graphics and ignoring text and how it reads within the page, they’re doing their readers and themselves a disservice. Magazine layouts and brochures are a great resources to get inspiration for line height and weight and unique layouts within an organizational grid. They show us from decades of the industries’ evolution how to effectively make copy readable and impactful. Ever create a 3 column text layout with a quote callout within the body copy? It’s done in magazines all the time but you don’t see it too often in a webpage. Most of the time a webpage’s subpage copy is just a pasting of a word document with some paragraph breaks thrown in. With the power of CSS we are given much more control of the type than we used to and we need to take advantage of it.

We as web designers need to take special attention and care to the text and how we present content and help engage the reader. Save that beveled gradient button for another day. Check out some of these great examples of content presentation in some brochure samples over at Smashing Magazine. 

click on any of these images to see some more.