I just wanted to remind everyone that tomorrow is Shutdown Day. Get outside, enjoy the beauty of the outdoors, spend some time with the family and get away from those time vacuums! Enjoy the life "outside of the monitor"! For those of you not familar with "outside" here's a quick list of things you can do.

• Go for a nature hike
• Go to a local park
• Visit Family (Seriously guys, your grandparents miss you!)
• Garden (You could even make it a green garden
• Check out the Library stick with the books!

Happy Life

For a long time I've been a fan of Jakob Nielsen's work. His articles on paper prototyping are brilliant. At my work we've used these methods before when doing major website designs with overwhelming success.

However what about web forms. For the most part as web developers we just slap it together and worry more about the back-end functionality more then how it looks to the users, let alone how easy it is for them to use. How many of us have written some ultra cool little application that only we know how to use? I know that I have. We are so eager to get to the part we love (code)that we skip over the most important part, how users are going to interface with our code. This is what Manuel Clement calls "pouring concrete too early".

UI Design is more important to the user than our code. Why? Because the UI is what they see. It's what the feel, its how they interpret our application. It doesn't matter how great the application is, if the UI is bad the user will assume the rest of the application is bad too. How many users are going to care that we used serializable classes, or that we've written our error log to be an RSS feed? None! We need to take care of the users.

Why use PowerPoint for doing Prototyping. There are three simple reasons:

1. Almost everyone has it and can modify your prototype. Yes, let them change labels, something as simple as this makes the stakeholder feel more involved, there for you'll have more buy in on the project.
2. No coding is involved. This is very important, if you start trying to auto-fill dropdowns using dynamic form objects you're missing the point. This is not the time to be coding, we are defining the user interface. While this may seem like a very simple point you'll be amazed how often you keep reaching for you IDE to start coding.
3. You can give the user a feeling of how the application will behave. With PowerPoint you can link to other sides. In fact you can create clickable areas and disable Advance Slide "On Mouse Click". This allows you to create buttons, links, radio buttons, etc.

Why Webforms
The reasons for prototyping webforms in PowerPoint is it allows up the ability to make changes quickly to define what the user/customer wants. Again our goal here is not to do any coding yet. By prototyping we are actually extracting the customers requirements in a feedback loop much like agile programming methodology does.

There's nothing worst then a marathon programming session where you've killed yourself to get the webform done, to turn around and have all your labels changed and to find out you didn't have a clear understand of what the customer really wanted.

Here is the current PowerPoint Toolkit I'm using for Webforms. This is done in PowerPoint 2007, which is amazing. The drawing tools are more useful and complete then in previous versions of PowerPoint. As I do more and more prototyping I'm sure this will grow. This will give you a starting point for yours.

Web Form Toolkit.pptx (45.21 KB)

The best advice I can give you is to just try it. You'll be amazed how quickly you can create a simple prototype without writing one line of code.

Also here is a some helpful URLs I used started.

• Code Horror: UI First Software Development
• Wireframe Prototyping Using Powerpoint 2007 (Video)
• A List Apart Paper Prototyping
  

Happy UI Designing

The thing about gluten-free living is that it isn't something you can do alone. It's hard hard work, and you need someone to help you through the tough times. I'm very fortunate in that I have a very loving family that do their best to be supportive. My Beautiful Wife is amazing. She's basically had to relearn how to how to cook, because almost ever recipe calls for wheat. Things you don't think about like gravy or chicken. My Beautiful Wife has to read every label in the grocery store every time we shop because things that didn't have wheat in them last week, do this week. There is so much work that she has to put into each meal, and I greatly appreciate it.

My brother J actually ordered a burger wrapped in lettuce for me from In-N-Out and that's how we discovered protein style. My Mom when I lived at home had to learn what had wheat in it, and she also had to re-learn to cook family favorites.

It really isn't something you can do alone. I'm thankful to my family for wanting me to feel better and working so hard to do so.

I have a project at work coming up that will require some dynamic charts. As I don't feel the need to reinvent a wheel that others have perfected before me, I decided to take a look at Google Charts. The first thing I noticed was that this was extremely easy to use. It took me about 45 seconds to create the graphic used on this post. For a pie chart all you basically have to do is set the data and the labels and you're done.

Chart Type:cht=p3
Chart Size:chs=250x100
Data: chd=t:20,40,5,10,5
Labels: chl=muffin%7Ccoffee%7Cscone%7Cbagels%7Cdounut
So the URL to call the graph looks like this:
http://chart.apis.google.com/chart?cht=p3
&chd=t:20,40,5,10,5
&chs=250x100
&chl=muffin%7Ccoffee%7Cscone%7Cbagels%7Cdounut"

As you see this is a very simple example of what Google Charts can do.The documentation is fantastic. You can create just about any chart you'd like. The short list is: line charts, sparkline charts, bar charts, pie charts (2D and 3D), scatter plots, maps (yes maps), venn diagrams, radar charts and the google-o-meter.  Google Charts is a very nice full featured Chart API that I know I'll be using in the future.

Happy Coding

One of the things I've been working on for the past week was automating some SVN (Subversion) administrative tasks. As I originally come from a Unix background my first  thought was to use PERL. In the past I've used PERL for lots of these kind of tasks on Windows Servers. ActivePerl made it very easy to install on Windows boxes. Heck I even had a PERL script that FTPed into a remote server and downloaded files with a specific extension and deleted the files on the remote server after the download was over. That script ran for 3 years with minimum maintenance.

However I thought this time I'd see about using Microsoft PowerShell. I have to tell you I think PowerShell rocks. The best way I can describe PowerShell is it's the Windows equivalent of BASH or Korn shell in Unix or Linux. It allows you write a shell script for repetitive tasks, just like any other shell. In fact I found the syntax for PowerShell to almost be a blend of C# and PERL. So I felt comfortable writing PowerShell scripts very quickly.

In SVN I wanted to add new files to the repository.  If you're using TortoiseSVN, this task is easy to do with the GUI. However I want files to be added to the repository any time a automated file sync happens. So I wrote a quick script for this:

$results = @(svn st)
$pattern = "^\?"
$re = new-object System.Text.RegularExpressions.Regex($pattern)
$resultCount =  $results.length - 1

for($j=0; $j -le $resultCount; $j++)
   {
    $add = $results[$j]
    $match = $re.Match($add);
    if($match.Success)
    {
    $add = $add -replace("^\?.{6}","")
    svn add $add
    }
}

Let's go over what this script is doing. First we load the results of the "svn st" command in an array. $results = @(svn st)

Now we use a regular expression to find the items that need added. These are denoted by the "?" at the beginning of the line. So we define the pattern and set the System.Text.RegularExpression object. (This is the .NET System.Text.dll) Then we set the pattern "$re = new-object System.Text.RegularExpressions.Regex($pattern)".

Next we create a $resultCount variable that holds the number of items in our array. This will be used in our "for loop". Now we look through the items in the array, and if the item matches the regular expression it will be added to the SVN repository. However there's one hicup. The file path to be added from our array starts with "?      ". So we need to trip that off. Again we use a simple regular expression and the -replace parameter, and now we have a correct path.

It's added to the SVN Repository and we're done. Well almost. We have to save the script into a ".ps1" file. However it won't run just yet. It has to be signed. Signing a PowerShell script isn't hard, but it does require some work. Scott Hanselman has a great post on his blog about Signing PowerShell Scripts that is just excellent, I highly suggest you read his tutorial.

Happy Coding

How much time do you spend on the computer during the week? I know I spend at least 60 hours a week. True I need a computer for my work, but that's still a lot of time spent in front of a machine. That's a lot of time not being active. I've been thinking about this quite a bit lately. Well Saturday May 3rd 2008 is Shut Down Day. The premise is simple, don't turn your computer on that day. See if you can go 24 hours without a computer. More important it's about realizing there is life "outside the monitor". I know I can do it, and I'm sure you can too!

I'm going to start by warning you that this post is a rant. A rant that I'm sure most Technology Workers have from time to time. A minimum of once a month I meet someone new outside of work and my family. After some chitchat about the weather or whatever we have in common that brought us to whatever event we are at to keep the conversation going they always ask "That" question, you know which one. "So what do you do for a living?". I hate this question.

There are two very good reasons why I hate this question. First, what I do for a living doesn't really tell you what type of person I am. If you'd truly like to learn who I am and what I'm about, ask me about my family or my hobbies. Ask me what I'm passionate about. These subjects are something I can speak volumes on with such enthusiasm we'd talk for hours. I'd be delighted to tell you what the Little Boy did yesterday. I'd love to tell about my Beautiful Wife, and how we meet, and how wonderful she is to me. Heck, I'll even be happy to talk with you about film verses digital photography and the merits of both.

My second reason, most people have no idea what I do. I'm not trying to be mean or condescending. It just from personal experience I know people who don't work in IT (Information Technology) have no idea what I do. They'll ask me what I do for a living and I say "I'm a Sr. Web Developer." And their eyes glaze over while their brain tries to connect any synapse to any other connection to the words "Web" and "Job". The most common reply is; 'my nephew just built a website, I should send you the link, you'll love it! It's got blinking banners and a cute little bunny picture, it's great!". Honestly this has happened at least a dozens of times. So in a futile attempt I try to clarify by telling them that what I write is Online Banking software. Again, the glazed over look, and then they tell me, "You know I have trouble logging in to my Online Banking, why do you think that is?" By this point I just simply shrug my shoulders and say, I have no idea and change the subject.

I'm sure by now everyone has seen an Apple iPhone. The iPhone's true genius lies in its user interface. The ability to scroll through lists with a swipe of your finger or to resize an image by putting two fingers on the screen and moving them apart is both brilliant and intuitive. This kind of innovation is what is needed for consumer electronics. I’ve had several PDAs including an iPaq with a full size keyboard attachment, yet I was never completely comfortable with it as a single source for all my needs. Most of the time I  carried a laptop around with me too. There always seemed to be this lack of understanding between me and the device on how we should communicate. Being left handed the handwriting recognition and I never saw eye to eye. The stylus was another point of contention. Poking at the device with an object smaller than a crochet hook just didn’t seem like a good way to interact with it, let alone try to put in anything more than a couple of words.

The Wii, and more specifically the Wiimote has shown that consumer electronics that are easy to use will rule the market. Let’s face it for the last two holiday seasons in a row people have lined up to purchase a Wii. There are a plethora of articles about the elderly using and loving the Wii. This is because Nintendo understood that changing how we interacted with the games was more important than having the most realistic graphic engine. I’ve played both the Xbox 360 and the Playstation 3, and they are amazing. The graphics are crystal clear and photorealistic. However they just aren’t nearly as much fun as the Wii. The Wii is just plain fun and anyone of any age group can play it. Again the Wiimote is the reason for this.

The Wiimote is a simple controller built on great technology. It connects to the Wii via Bluetooth technology. The way the Wiimote tracks your movements is done by a infrared camera in the remote, and the Wii sensor bar has infrared LEDs in it which the camera can see. Using these common technologies allow the Wiimote to be used for other uses. That is something that Johnny Lee has done and has done well. He recently gave a TED Talk in Monterey California. If you watch this video until the end you'll notice he gets a well deserved standing ovation.

If you haven’t heard of Johnny Lee he is a research scientist at Carnregie Melon University. Instead of using hyper-expensive hardware that most people won’t have a shot at even seeing he uses the Wiimote to do some amazing things with user interfaces. Being a person that wants to share these technologies he’s put the software that he’s written up on his website. What I really appreciate about his work is that he’s made it freely available, but also decided to use tools that are freely available to almost anyone with a computer and an internet connection.

I feel these kind of innovations are vital and I applaud Johnny Lee and his work. The great thing about these technologies is that you can get your hands on it right now. If you have a Wii, you can start playing with the software with just five dollars worth of parts from Radioshack. You can even buy the IR LEDs and the Safety Glasses with LEDs for under 20 bucks.

After my last post, my Beautiful Wife and I were talking and she suggested that I write a follow up post about all the food that have wheat and wheat gluten in them that you wouldn't suspect. We've found these foods after trial and error. Now that I've been living without wheat or gluten in my regular diet, I find that I can taste wheat immediately in almost anything that actually has it. This has been as valuable as being able to read the labels. There is still somefoods out there that don't correctly list all the ingredients. However most are doing a really good job of it. Hopefully this quickly list will help you as in learning to live gluten free.

Candy
Unfortunately I have a sweet tooth a mile wide. So finding which sweets you can't eat is as important as the ones you can. As with all food, you'll learn that you have to read the package, even if you think it's safe.

• Red Vines: Wheat is it's main ingredient. I loved Red Vines, so this one was hard for me to give up.
• Twix: Twix has a cookie center, wheat...sorry
• KitKat: KitKat is just like Twix

Snacks

• CornNuts: CornNuts, as will most snack foods of this type use wheat as an agent for making the artificial flavoring stick to the snack. The last time I looked original CornNuts were okay, but any of the flavored ones, watch out for.
• Doritos Nacho Cheese Chips: Like the CornNuts, Doritos use wheat as an agent for making the artificial flavoring adhere to the chip.

Condiments

• Soy Sauce: Wheat is the second ingredient in Soy Sauce, water is the first. So as much as we may love it, we have to avoid soy sauce or using very sparingly.
• Hollandaise Sauce: While the original recipe for hollandaise is butter, lemon juice and egg yolks most chain restaurants use a prepackaged hollandaise sauce that they just heat up. Of course this prepackaged sauce uses wheat.

Like a growing number of people, I have an intolerance to wheat gluten. I've had this for the last 10 years, and it definitely makes meal times a little harder. My intolerance to Gluten is due to celiac disease. While I don't have the most severe case of celiac disease, it definitely has several negative affects on me. So I work very hard to avoid wheat gluten whenever possible, and believe me it's a lot of work. You'd be amazed how many foods use wheat gluten as a thickening agent (almost every brand and favor of soup) or just to add texture and crispyness (is that a word?).

So What is Gluten? ¹Gluten is a composite of the proteins gliadin and glutenin. These exist, conjoined with starch, in the endosperms of some grass-related grains, notably wheat, rye, and barley. Gliadin and glutenin comprise about 80% of the protein contained in wheat seed. Basically Gluten is a protein that cause a person with celiac disease not to be able to properly digest and absorb nutrients from their food. The side effect of that for me is severe fatigue.

My challenge is to find things I can eat that don't have wheat, or wheat gluten in them. So the obvious quick meal choices are out, sandwiches, pizza and any kind of bread product. But there are food that have wheat gluten in them that you wouldn't think of. For example French fries are out of the question at the majority of restuarants, however  I can eat the ones at In-N-Out.

Below is a short list in no particular order of fast food restaurants in my area. Some of them have many gluten free choices, and some have none at all.

In-N-Out: In-N-Out is simply the best because basically you can get any burger "Protein Style" Which means they wrap it in lettuce instead of serving it on a bun. Protein Style is listed in their "Secret Menu" Also their french fries are made fresh from potatoes that were wash peeled and cooked minutes before they are served to you. They simply have the freshest food of all the fast food chains in my area.

Wendy's: First off, bravo to Wendy's for having menu items without gluten listed on their website. Not all of the bigger chains do that. Basically all of their hamburgers can be order without a bun. All of their salads that have curtons on the side so you don't have to try and pick them out. Their baked potatoes and chili is gluten free.

Taco Bell: According to Taco Bell's Allergen chart there are only three things on menu that are gluten free.

Side of Rice

Side of Pinto Beans and Cheese

Tostada

Panda Express:  Panda Express' site is very to the point on their FAQ/Contact page , the question is "Which of your menu items are gluten free?" the answer "None of our food is gluten free".  I actually just found this out today doing research for this blog post, and man was I surprised!

McDonald's: I personally don't eat at McDonald's. However I did look at their site to see if they posted an allergen chart. Which they do but they don't. They've mixed the allergen information with the "ingredient" list of their food. Basically they've made it hard to find which items do and don't have gluten in them. With other fast food chains being so forth coming with this information McDonald's hiding it in such a way that they can technically say it's on their website, makes them seem a little shady to me.

Subway: Subway does actually have a few items on their menu that are gluten free. It took a little looking but they do have a allergen chart on their website. Of their 16 salads listed on their menu, 13 are gluten free, 3 are not. Here are the 13 that are gluten free.

• Chicken & Bacon Ranch (includes cheese)
• Cold Cut Combo
• Ham (Black Forest)
• Italian BMT®
• Roast Beef
• Roasted Chicken Breast
• Tuna
• Turkey Breast
• Turkey Breast & Ham
• Spicy Italian
• Subway Club®
• Subway Club®
• Veggie Delite®

Jack in the Box: Like McDonald's Jack and the Box does List the Allergens with the Ingredients of each item, however they did do a little better job of highlighting which items have which allergens. That being said I didn't find any entree that was gluten free.

Carls Jr: It took a little digging around on their site to find the Allergen chart, but they do have a pretty good one. That's the good news. The bad news is that there are really only two items on the menu to eat.

• Lo-Cal Six Dollar Burger
• French Fries (maybe)

I hope you've found this helpful in your search for gluten free fast food.

Bon Appétit

^{1. Quoted from Wikipeda http://en.wikipedia.org/wiki/Gluten}

For the last three days my Beautiful Wife and I have been vacationing in Yosemite National Park. If you haven't been to Yosemite it is truly amazing. It is one of the most beautiful and breathe taking places in the country. This is a trip that we had planned for a few months and it was as fantastic as we hoped it would be. This was my second trip to Yosemite and my Beautiful Wife's first.

Saturday was the first day of our visit to the park. We came through the south entrance. It is about a 25 mile drive from the south entrance to Yosemite Valley. Your first view of the valley is just before the tunnel, after going through the tunnel you are greeted with Tunnel View. This is an amazing view of the valley floor. You'll see El Capitan to your left, Bridalveil Falls to your right, and Half Dome smack dab in the center. I'm sure just about everyone has seen Ansel Adam’s "Clearing Winter Storm" photo of this view. This is the first place you’ll learn just how many tourists are there to see Yosemite. We parked the car and I hopped out like a giddy school boy. I quickly gathered my tripod and camera pack and walked over to the wall where the tourist congregate to photograph Tunnel View and start setting up my camera. If I haven’t mentioned it before I’m a hybrid photographer, which means that I use both film and digital cameras. So I’m standing at this beautiful vista, looking out as I set up, which takes about 5 minutes or so. I take out my light meter, get the reading, and set my shutter and aperture accordingly. In the time that it takes me to go through these steps several people have come up, taken their snapshot and ran back to their car and drove away. While I’m composing my shot and checking my settings, I had several people come up and ask me if I’d take their picture. I am always happy to oblige, but what cracked me up is that four out of five times they feel the need to point out to me which button trips the shutter.

Well most of Saturday was spent taking photos of all the popular spots. Then something happened while I was taking some shots from Sentinel Bridge, I thought I had taken 9 or 10 shots but when I checked the film counter was blank. Apparently when I had reloaded the film I forgot to completely wind the camera. So all the shots I took, didn’t actually get recorded. Which I feel, ended up being a good thing because right then I decided that I needed to take photos that weren’t like everyone else’s. I started looking for My Yosemite and not the one I had seen and read about in books. Don’t get me wrong Ansel Adam’s photos of Yosemite are amazing, but I didn’t need to make a perfect copy of his photos. I needed to make photos that were mine, and in my style. I stopped being as concerned about the photos I was taking and started concentrating more on experiencing this beautiful place. One of the most unexpected experiences, which we don’t have any photos of, yet I doubt we’ll ever forget is of watching a coyote running across the meadow walkways.

We were on the north side of the meadow on the Yosemite Falls side, and our car was parked over by Sentinel Bridge. I had just finished taking some photos of Yosemite Falls when we decided to head back to the car. As we started across the meadow footbridge, it started to rain large cold rain drops. We started to pickup our pace when I noticed a healthy sized coyote coming from the west up to the footbridge. My Beautiful Wife looked up and saw him just as a couple that was walking towards us about 75 yards away saw him. We both slowed down, and watched as the coyote looked at both of us to judge our speed and intent. He decided that we were no threat to him and he crossed the footbridge and ran in to a heavily wooded area to get out of the rain. It was such a beautiful and natural moment that we where stunned and in awe.

Sunday was the day we almost made it to the valley floor. However the closer we got the more it snowed, so not having chains, we decided to turn around and decided to go back toward home. However we didn’t rush back, we took our time and pulled off and investigated some of the beautiful creeks on highway 41 that most people drive past at 40 mph. These little creeks and vistas are filled with natural beauty. Alder Creek has to be one of my favorites. I’ll post photos from Alder Creek on my photoblog as soon I get some film developed.

Monday we went to both Bridalveil and Verner Falls. While they were both very different, their beauty is undeniable. I do have some recommendations, if it’s less than 40 degrees, you don’t have to hike all the way to the base of Bridalveil, because it will be very wet and cold. You're hands will freeze quickly and your teeth will chatter so hard, you may have to go to the dentist afterwards. However on a hot day, I’m sure it’ll be nice and cool and just what the doctor ordered. Verner Falls is something else. I do have to warn you that it’s a good hike. I don’t mean miles and miles kind of hike, I mean it’s a good hike uphill the entire way and at a fairly steep grade. Being that I had my 50 pound camera bag on my back, it was a lot more work than I expected. One of the beautiful moments of that hike was about half way up the trail to the footbridge, on the west side we saw a beautiful, powerful spring fall that simply won’t be there a month from now. To see such a rare sight on such a hard hike was very rewarding. It was a great trip and I can’t wait to go back to My Yosemite.

Happy Trails

7 years of bliss

Tomorrow my Beautiful Wife and I are leaving for an extended weekend getaway. We plan on spending some time with nature and each other. I've been looking forward to this trip for months as I know she has too. It's not that often we get out just the two of us, so this is something special.

Saturday will be our 7 year wedding anniversary, again it's something special. My Beautiful Wife is the Love of my Life, and my Best Friend. She has a beautiful heart and a rare and deep understand of people and emotions. Not only that, but she's got a great sense of humor. For those of you out there on the interweb not married yet, go with the girl with the great sense of humor she will make you happy for the rest of your life, and she'll make sure you don't take yourself too seriously.

As you may or may not have noticed, I've been working to post something of interest at least twice a week. Mondays and Fridays to be exact. I've decided that each post should do one of two things. Make you laugh, or be informative. Since I'm not going to be here Friday or Monday, here are five links that will make you laugh and five links that are informative.

Something Funny:

1. Pearls of Wisdom from Merlin Mann: I read this pearl of wisdom and couldn't stop laughing to 5 minutes.

2. Why I Cropdusted a Three Year Old: Danny Evans, is funny, wrong, but funny. Warning: yes this is a fart joke.

3. More Merlin Mann Funnies: This one is entitle "Elanor's Agenda", just watch and enjoy.

4. Bottoms Up: My good friend Rick is a nature photographer who specializes in birds. He's found that some times birds just don't want to be photographed. Here's one of his photos that proves that point.

5. Chuck Norris Facts: You've all heard the legends and the urban myths, here's the low down on Chuck.

Something Informative:

1. The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!): Joel On Software explains Unicode, and this is something every Web Developer and Software Engineer should read!

2. The First Rule of Programming: It's Always Your Fault : Yes, it is your fault, and Jeff Atwood explains why.

3. The Developer Life, Yo: Dead Programmers Cafe explains just what a Sr. Developer does. I loved this article, it explains it so well, I was speechless.

4. Is Eeyore Designing Your Software?: Yes it's a strange question, but it's a great blog post on software design.

5. Twitter: The Uselessfulness of Micro-blogging: Scott Always has something funny and interesting to say.

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

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

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!

An article in the LA Times mentioned the unhealthy air quality today. This is something I've been watching closely. I've not been outside since yesterday morning for a very short time. Where we leave is about 15 miles from the Ontario fires, and south west of the Arrowhead fires, so that smoke is going right through on it's way to the ocean. The article titled "Windblown soot, gas, and dust pose threat", says "Health officials urged the young, the elderly and those with breathing problems to stay indoors until further notice as Southern California's wildfires continued to pollute the air with smoke, gas and dust."

So even if you don't live in the immediate area of any of the fires, take precautions and stay safe. For those of you who do, please at least wear a mask, smoke inhalation even after the fire is out is extremely dangerous.

Stay Safe.

Update: Check out this map from flashearth. It shows the smoke really well.

The reports this morning is that more than 250,000 people have been evacuated from the San Diego area, and more than 1000 homes and business have been lost since Sunday. Here is a map of the fires and the evacuation centers.

Update:
Here is an updated sat image of the fires and the smoke billowing from southern california and the San Diego area.




Stay Safe.

Update: 10/24/2007 10:15am PDT: updated the link to the map, the previous version of the map had stopped being updated due to usage, the new map is from PBS.

Being asthmatic, I play a lot of attention to the weather and natural disasters. Well the fires that started yesterday completely fall into those categories. ABC7 has done a great job of keeping us update on where the fires are and where things are at with them. I was very impressed to see that they've added a mash-up map to let you know where the fires are at, check it out here.



The smoke is very very heavy today, I've stayed inside and close to my air filter. To see the path of the smoke driven by the wind, check out this sat image from NASA.

Stay safe.