The Challenge

One of my current projects is to making our error and alert messages on the website more flexible and usable. I've actually been thinking about this subject for a little while. I've been noticing some very nice messaging on some of the bigger Web 2.0 sites, such as Flickr and YouTube. They've been doing a great job of letting the user know when they'll be performing maintenance, without negatively affecting the user experience. I know some people aren't terribly keen on "Web 2.0" and other buzz words like it, but you have to admit that some of these sites have really gotten it right when it comes to a rich, usable and cohesive web experience. We're seeing a higher demand for this kind of web experience in surveys and feedback from users. They simply expect and demand these kind of experiences from their online services such as Online Banking.

Of course when I think of website usability, I think of useit.com. This is a wonderful site by Jakob Nielsen. This man knows usability. To say he is an expert in usability and the web experience is an understatement. So I felt sure I'd find exactly what I was looking for on his site. While I did find articles that I felt were relevant to the topic. I didn't find quite what I had in mine. However I definitely think every web developer should read his article on Error Message Guidelines, it's a wealth of information. One of the best take aways I got from the article, is that a common mistake that we all make is to simply display some red text as an error, a thinking that's good enough. Well that's all well and good, but what if the user is color blind, or is viewing your site with a screen reader like Jaws. These are factors we should keep in mind but often don't.

However like I said I was looking for something a little different. You see in our implementation of error and alerts we'll put up a variety of messages. Error messages letting them know that a transaction was not completed and the reason why. Warning messages about upcoming scheduled maintenance. Information messages that let the users know about new features that are available to them. We want this messages to be highly visible to the user, without being completely annoying and making them feel as if they are being bombarded. As you know this is not an easy task.

The Idea

I wanted to create an easy to use and intuitive method for conveying to the user the importance of any given message. There may be multiple messages for the user to read. So this system must allow users to quickly identify which messages are important versus which messages are just information to them is mandatory. So I decided I needed to use a design metaphor that allows me to relay the severity of a message to the user in a way that's easy to understand.

As mentioned in a Jakob Nielsen article using a metaphor can be tough, especially when you are designing for international usability. So I decided to use a metaphor that most people use everyday, Traffic signs. Most people see traffic signs and understand what will be required of them at a glance. That is by a very specific and exacting design. Have you ever seen the design specifications related to Standard Highway Signs? These documents are huge. I mean there is not one thing left to chance. Font size, font weight, font color, sign size, sign ratios for curves, all of it has been meticulously documented. The Regulatory sign section alone is almost 200 pages.

So with my design metaphor I won't be as strict as the Federal Highway Administration, I'm just going to use red, yellow and blue in my palette. This quick visual aid should help to get the point across nicely. Red means, stop, and pay attention, yellow means that this is a warning message and some action maybe needed soon. And blue of course means that this message is informational, and no action will be required of you.

Along with the color coding, Icons will be used to help show the severity of the message. Since these Icons will be graphics, we can assign them a severity in the image alt attribute as well. This should take care of both those who are color blind as well as those that use screen readers.

Implementing the Idea

Up to this point I have an idea, I have a color scheme picked out that works with the design metaphor I've chosen, but now I need to figure out how to best implement this idea. Specifically I need to figure out what size my message should be and more importantly where the location of the message will be. The location is key to our message being read. I need to choose a location that assures that the message will be read, while also making sure that I'm not changing the design that would cause a negative user experience After that will need to make it fit into our existing design. Fortunately this is a wheel we don't have to reinvent.

Most people read websites in a very specific and repeated pattern. This pattern is actually shaped like the letter F, therefore it's called The F-Shaped Reading Pattern. Again useit.com has an article on "F-Shaped Pattern for Reading Web Content" that I believe all web developers should read. It's well worth the time. One of the things this article mentions is that users simply will not read all of your content. They will choose to scan the page looking for what they feel is the most relevant information. So that very top line of the F Shaped Pattern is critical. The most important information needs to be on this line.

So do we put these messages at the top of the page? No, no we don't. Why?, because that isn't where the F Shape Pattern for web content starts! Again we go back to our usability Guru Jakob Nielsen to find out why. This time we're going to look at an article called "Banner Blindness: Old and New Findings", what they discovered is that anything above the primary navigation is simply ignored. Users have learned that content above the primary navigation is advertising, so they simply don't look at this area any more. Where does the top of the F Shaped Pattern start then? At the top of the content area, of course.

Now that we know where we should place our message, lets see how to make it fit into our design. I've mocked up a couple of wireframes for a pretty basic 2 column website design. In the first wireframe design we have just the basic site layout. Logo in the top left hand corner, primary navigation next to that. Below the logo we have the secondary navigation and next to that is the content area. Now in our second wireframe design with the message is only change very subtly. We basically just move the content area down a little bit so that it's now at the top of the F Shape Pattern. However we only do this when we have a message to display. This way we do no disturb the F Shape Pattern. The last thing we want to do is change the way our users read the content.

This brings up another very important point. If a message is warning or informational the users should be able to choose not to see the message again. This allows the user to acknowledge the message, but also to clear it out of their view. Remember we're not pretending that the message is the content they wanted. We are just telling them about an error, a warning or something informational. I feel that error messages are to be shown until the error is resolved. Warning messages are shown once per session. And Informational messages can have a "please don't show me again" option. Along with our design metaphor this helps cement in the users mind the importance of each of the messages.

Conclusion

A little research into usability goes a long way in designing anything on your site. Fortunately there are great resources out there that we can use and incorporate into our designs. We don't have to reinvent the wheel. In fact it's best if we don't, because using a "standard" way of doing things allows our users to better and more quickly navigate and use our site. In the end, isn't that really what we as designers want?

Happy Designing

As you can tell I've been reviewing my blog the last couple weeks. Sprucing it up, making it a little more user friendly. In doing this I've gone back through and read a lot of my older post. While not all of them are masterpieces, there are some gems. My last post was my Top Five Tech Post, so I figured this one should be my Top Five Family Post.

If you've read this blog for any length of time you know that I am one of those guys that just adores his family. They mean the world to me, and are pretty darn funny besides. So please take a walk down memory lane with me as we revisit some of my favorite family posts.

5. Fred Potatoes, A Shave and Three Words: I know this is a recent post, so of course it's still on my mind, but it means a lot to me.

4. Boys Vs Boredom and Boys Vs Boredom Part II: This is of course a two part post, that started mainly because my brother and I were talking about when we were kids. Childhood memories are the best, check it out, and see if we have similar experiences.

3. Capt'n Cranky : This was an interesting time in my life. I was having some "male" problems. My Wife was actually surprised I wrote this blog post. But I figured if I was going through it, there had to be someone else who was going though the same thing. So if I could make them laugh and not feel alone, then it was worth the little bit of embarassment. By the way, my favorite word in this blog post is "man-o-gram".

2. Is That a Peacock in my Livingroom or are you just Happy to See Me : It's not everyday you come home and there's a peacock in your livingroom. A bright blue peacock, yeah, enough said, huh?

1. The Little Boy Goes for a Joyride : I think this one is pretty self explainatory. When the Little Boy was three he felt like going for a drive. This post is mostly in my Wife's words, and it's really sweet and funny.

Well I hope you get a chuckle from these posts. I know they make me smile.

Happy Life

Today I was taking a little time to look through the web logs for the blog and found it very interesting to see which posts were the most popular. It's always interesting to see how people get to your blog and what search terms they used. After reviewing this data I decided to make a quick list of the top 5 technical posts. So what I did was compile them by both visits and search results. I think my favorite part about this list is it's all over the map as far as technology goes. The fact the number 1 post is about trying to write software using a Microsoft language on an Apple computer is my favorite part.

5. Playing with Google Maps: It seems that I'm not the only one that gets a kick out of playing with google APIs.

4. Teaching XSL and AJAX to work together Part I and Teaching XSL and AJAX to work together Part II: Yes, I know these are actually two posts, but it's a series, and I thought I'd listed them together. XSL and AJAX work well together with just a few tricks.

3. Browser Troubleshooting 101 Part I and Browser Troubleshooting 101 Part II: Another series of post that came about from training some of our help desk people on how to trouble shoot browser issues.

2. Searching Indexing Services with ASP.NET and C# and Searching Indexing Services with ASP.NET and C# Part II: Yet another series of post. This one came out of a project that I had write for our Board of Director. They needed an extremely fast search function for the Extranet application they used. This series of post also comes up almost daily in search results.

1. Writing in C# on Mac OS X: After listening Scott Hanselman's Hanselminutes Podcast I had to try playing with Mono on my Beautiful Wife's Mac. This post was the result of that playing around and the post shows up every day in the referral by search category.

I hope you found this quick list helpful.
Happy Coding

It's amazing to me how much time I get to code these days. Actually I should say how little time I get to code any more.

Yesterday for example, I spent a couple hours in Excel (ick, sorry, not a huge fan of the whole Office Suite), at least 25 minute in TrackIt (Task Tracking Software) a few hours in SQL Query Analyzer and about 15 minutes coding in C#.  The only reason I got the 15 minutes was I wrote a little console app to write some very long SQL Queries. Mostly because I didn't want to have to write them by hand. The rest of the day was spent working on an issue a user had, duplicated it and we reported it to the vendor.

I find that more often then not most of my work days are these kind of tasks. If I'm not fixing a users issue, and creating a fix (most of the time it's a browser setting), I'm coordinating with vendors on updates of their software they need to make or service issues that come up. This leaves few and fewer hours in the day for doing the part of my job I love, writing code. Heck for writing HTML pages, AJAX, Javascript and XML I still rather hand code. I use HTMLKit for this kind of work, and it's brilliant!

I've recently started reading and putting into practice the task management principles of GTD (Getting Things Done) and I find I'm becoming more productive and getting through my task much quicker with greater follow through. Initally I felt that by being more productive and getting these task done quicker I'd have more time to code. Of course that hasn't quite been the case. A former boss use to say "no good deed goes unrevised", and believe me, truer words have not been said.

Where I work being Sr. Web Developer means wearing lots of hats. I do web development of course, but I also do server management, log management, vendor management and about ten other things that just aren't coming to the top of my head. Don't get me wrong, I'm happy to get to work on all these things. They help my to be more well rounded and I'm grateful for the opportunity to learn all these things. But the thing that got me in to Web Development in the first place was the code. Or more importantly learning to code.

You see simply writing code that I've written before isn't what I'm after. I mean anything I have to write more than twice, I've already created a template in CodeSmith to do. You see what I'm after is the learning that goes with a big new project. Pushing yourself to learn more, be more creative and to write applications that people really use.

So I've decided, like all things of this nature, I just have to take it back. I'm going to start slow, and see if I can set aside 1 hour during the work day to write new exciting code that makes me think and learn. I'm going to try the first hour of the day. 8am the coding hour. What do you think?

Happy Coding

I got a call from my friend RP today. He had a story to tell me that he was sure I could appreciate. You see he rides his bike to work almost everyday. However his ride home isn't along traffic filled streets, with hundreds of cars puffing out smog. He rides right along the marina. He gets some great photographs on his rides to and from work. If you look at his work you can tell that birds are the majority of what he shoots and posts. Well a few days ago he posted a pick of a seagull. He half joking said, please feel free to print it out and use it on your dart board. RP grew up in Florida along the beach. He grew up fishing and surfing, so he knows that seagulls are rats with wings.

Well today, that changed, he saw a seagull that was in a bad way. Apparently this seagull had a lure that was hooked in it's beak and his feet. In the water this little fellow wasn't going to make it. So RP did what most people wouldn't, he hopped off his bike, ran down and fished the seagull out, took him to the boathouse near by and free the bird from the lure. He did a good thing, even though he doesn't like seagulls.

This made me think of a time that I hopped into a fountain to rescue a pigeon that I didn't want to see drown. Like RPs dislike of seagulls, I detest pigeons. I mean "pig" is right there at the start of their name. So why don't I like pigeons? Well I didn't always have the desk job I have now. I worked with my Dad for many wonderful years. However the jobs weren't always wonderful.

On one rainy cold night we got a call from a client, a bank that isn't around anymore, anyhow in one of their loan offices there was a mess to clean up and patch. You see the building had a flat roof. The pigeons had found a way between the roof and the ceiling. Well with the rain, there were lots of pigeons in that nest. Lots of pigeons equals lots of pigeons poop! Well with all the water from the rain and the mess that the unfortunately this pigeon bomb, made the the ceiling collapse right on to a loan officers desk. Our job was to clean it up and to patch the ceiling and to patch the roof in the rain. The pouring freezing rain. So of course I think, strike that I know that pigeons are rats with wings.

So you could see why I don't like pigeons, and I'd imagine that RP has a story like it.  So why did RP save that seagull and why did I save that pigeon. Well respect for life. That's something worth respecting.

Happy Life

Childhood dreams are important, do you remember yours? I can tell you some of mine. I wanted to fly. Fly like superman, I can't tell you how many good bath towels got used as capes and snagged on the old swing set as I'd try to jump of the swings and grab the "cape" to fly. I wanted to be a computer programmer (yes, honestly I was a geek from way back. I'd check out byte magazine from the local library and then type in the programs into the Apple IIe they had in grammar school) I wanted to be a photographer. I was always fascinated with cameras and how the worked. I took pictures in my head all the time as a little kid.

Well now that I'm a "grown-up" I've looked back and can see that I've actually achieved some of my childhood dreams. By day I'm a Sr. Web Developer,  so definitely get to program computers. In fact I get to program for all computers that have an internet connection. How cool is that?

Of course my hobby is photography. (Hobby is used in the most generic way, but obsession is much closer to the truth.) I've taken more pictures of the Boy then I can count (10 or 20 gigs worth). If you want to see some of my work, I have a photoblog, feel free to take a look.

I feel pretty fortunate about both of those things. However I don't think I would of ever realized that both of these things were childhood dreams if I hadn't sat down and watched Randy Pausch's lecture.

Randy is a pretty interesting guy. A Professor at Carnegie Melon, and a leader in the Virtual Reality field. His lecture is called "Really Achieving Your Childhood Dreams". It's part of a lecture series called "Last Lecture". The concept behind this series is simply this, hypothetically if you knew you were dying what would your last lecture be?

However Randy has a little twist on this, you see he is actually dying of Pancreatic Cancer. His lived longer than the 6 months that this doctors gave him, but mostly from his courage.

This is one of those inspirational things that I think everyone should watch. The repised version of the lecture that he gave on Oprah is embedded below, his full length lecture is here: Really Achieving Your Childhood Dreams

Good In = Good Out

Fred Potatoes
This morning for breakfast I had a yogurt. (I'm sure you're thrilled to know that, but wait there is a point to it.) So this morning The Boy (he's not a little boy any more) saw me eating this for breakfast, and he proceded to lecture me on that not being enough of a breakfast. Then he started to list off alternatives that would be acceptable. Oatmeal, Eggs, a bowl of cereal with Soy Milk (yes he was that specific) or even "Fred Potatos"! Of course he meant Fried Potatoes, I knew that. But this one really made me laugh. Not because he misspoke but because it was the first time in a long time I've heard him say something like this. The little kid goof up of words. I adored them when he was 3 and now that he's 7, I don't get to hear them that often. Soon they'll be gone. But today I'm relishing in Fred Potatoes.

A Shave
Last night The Boy asked me if it hurt to shave. I was a little startled by this question, but I answered no, it pulls a little but it doesn't hurt. He simply said "ohh". So I explained how to hold the razor and which way to move with it as to not cut yourself. While I was answering his question in my mind's eye I journeyed back into the house I grew up in, that little house on the main street and the alley. I saw the 14 year old version of me and my Dad teaching me to shave. I remembered the way the afternoon sunlight fell into the room, the way breeze through the house felt, the smell of the shave cream, it all flooded back and drenched me like a huge wave.

Talking with my Beautiful Wife about the Boys question last night she suggested that I show him how to shave. He hasn't really seen me shave. I'm the kind of guy that does all that stuff in the shower. So this morning I changed my routine. I took my shower first, then got dressed and asked him to come in as I was going to shave and I wanted him to see how to do it. So he ran in there, and I shaved in front of the sink, and showed him how to put on shave cream, which direction to use the blade, the whole bit. You know the stuff us adults take for granted. I even showed him on his arm that the blade doesn't hurt going in the right direction. He looked a little nervous at first, but after he saw that nothing happened, it stood there amazed. It was the best shave I've had in a long time.



The Other Three Words
There are three words your Dad always told you that you never listened to. I don't mean "I Love You", those words we can't ignore, and I'm happy to tell you I heard those words often. No I mean the other three word. You know them, "No", "Listen" and "Be Careful". 

"No", which of course taught us that we don't need everything we think we want. No also taught us that there was always a good reason behind his answer. Not just that he wanted to see us miserable, which of course we all thought as teenagers. No meant learning self-control.

"Listen" which means, don't just hear the words, listen to the meaning and the way they are said. Listen means don't think about what you are going to say as we are talking to you, just recieve what I am saying to you. The older I get the more I understand that to listen, is very valuable advice.

"Be Careful" Okay, you caught me, be careful is actually a two word phrase, but I never heard one without the other. Be Careful seems simple, but it's really a phrase that is inviting you to think. Think about what you are doing. Does it makes sense? Will you hurt yourself? Will you hurt others?

All three are really great advise. Well Dad, it's taken almost 35 years, but I think I'm starting to get it now.

Have a great weekend everyone!