What is User-centered web design and why is it important? The answer to the first question has a simple answer, but the process of making it happen is fairly complex. User-centered web design involves taking the user into account during all phases of a web project. Why is this so important? The process of building a user-centered website ensures that everything that happens on the site is a direct result of decisions you have made. Not only will you reduce the likelihood of technical errors like 404 pages and broken links, you can create a quality experience that will satisfy both the business and user's goals.

Now that we know what user-centered design is, how do we go about it? The best way to explain the process is to use the model developed by user experience expert, Jesse James Garrett. Garrett breaks up the model into 5 planes in his book, The Elements of User Experience: User-Centered Design for the Web. The 5 planes are strategy, scope, structure, skeleton and surface. This model also addresses the duality of website functionality. Some websites are used as software interfaces, while others are hypertext information spaces. And then there are some websites that perform both of these functions. This is why there is a line drawn down the middle of the model to deal with those differences. Let's go into a little more detail about the 5 planes.

Strategy seeks to address the answers to 2 basic questions. What do we want to get out of the site and what do our users want to get out of it? By answering the first question we are describing the site objectives from within our organization. The answers to the second question address user needs which are objectives that come from outside our organization. The strategy is the foundation for next 4 planes and will drive our decisions throughout the rest of the process.

The scope involves creating the functional specifications (i.e. contact forms, search capability, shopping cart), and content requirements (i.e. text, images, and PDF’s) for the site. By defining these requirements up front, you take the guesswork out of the development process. Garrett states that the two main reasons for writing all this down and agreeing to the scope before you begin allows you to know what you are building and what you are not building. This sounds so simple, right? It's not always easy to get everyone to agree to a scope, and when you don't you will most certainly have to deal with the dreaded “scope creep”. By establishing the scope, you can be realistic about what you can accomplish within a given time frame and all parties involved will be informed about what to expect.

The next phase of site development involves creating the structure of the site. On the “web as a hypertext system” side of development this is also referred to as information architecture. Information architects are looking for the best way to organize, group and present the content of a site to the end user. On the “web as a software interface” side it is called interaction design. Interaction design is concerned with describing possible user behavior and defining how the system will accommodate and respond to the user. For example, what happens when a user incorrectly fills out a form field? Will the field prompt them with an example of what it's looking for? Will it force them to enter only certain characters? These are the types of questions that interaction design will establish the answers to before coding begins.

The skeleton plane is where we take all of the information we gathered from the previous planes and begin to lay out our site. The development of the skeleton involves three elements that are closely bound together: interface design (on the “software interface” side), navigation design (on the “hypertext system” side) and information design that spans across both sides. Interface design refers to the user's ability to do things on the site. Navigation design refers to the user's ability to go places on the site and information design refers to how you communicate ideas to the user. If you have seen a website wire frame then you have a good idea of what the skeleton looks like when all three elements of the plane are brought together. It's the organization of our interface, navigation and information into logical blocks.

At the top of the model is the surface plane. This is where content, functionality and aesthetics come together to produce the visual design that combines all the elements we researched and documented from the other 4 planes. Visual design is not just a matter of aesthetics. Instead of determining the merit of your visual design solely by what is pleasing to the eye, you should ask yourself the question, how well does this work? Does the visual design make clear distinctions between the sections of information, or is it confusing? Does the visual design properly communicate what we want about the navigation? The visual design should reinforce the objectives that were established in the lower planes (strategy, scope, structure & skeleton). Garrett says it best, “It's not just a matter of aesthetics, it's a matter of strategy.”

I hope you enjoyed this breakdown of Garrett's Elements of User Experience model and if you are into building websites, I would highly recommend reading his book. Even though it was first printed in 2002, the information is still relevant and valuable today.

I have been pondering over this question for a couple of weeks now. In fact, I made a new friend last week who is a web designer/developer and during our conversation he asked me the question, “What do you think the definition of a web designer is?” While I do not claim to have all the right answers, I think I have come up with a couple of definitions and these are what I shared with my new friend last week. I think there are two types of web designers. There are those who have a background in traditional (i.e. print) design who have learned the basics of how the web works. They have taken the time to learn about the implications of user interface design, screen resolutions and browser inconsistencies to name a few. I do believe to be a truly effective web designer, having a grasp of the basics will go a long way in creating not only a beautiful website, but a functional one as well.

The other type of web designer is someone who can both design and write HTML and CSS. I have seen them referred to as a front-end developer or hybrid on various places around the interwebs. These people create a website design in PhotoShop (or design program of choice) and can then “translate” that document from an image file to code. In fact there is a very lively debate in the Communication Arts group over on LinkedIn about whether or not these type of people exist. I think there is plenty of proof that hybrids do, in fact, exist. I offer up these examples of people who do both (design and code) very well: Veerle Pieters, Chris Coyer, Jason Santa Maria and Elliot Jay Stocks to name a few.

All of this is to say that just thinking about this discussion inspired me to create 4 wallpapers that relate to the question at hand. I hope you enjoy the wallpapers, and If you have a different definition I would love to know what you think. Like I said, I don’t have all the answers, and much like the web itself the definition of a web designer is always evolving.

You can download the wallpapers here:
Click on the size you want below, and then right click on the image to save to your computer.

1920×1200 | 1680×1050 | 1280×800

1920×1200 | 1680×1050 | 1280×800

1920×1200 | 1680×1050 | 1280×800

1920×1200 | 1680×1050 | 1280×800

As you may or may not know, Smashing Magazine is a wonderful resource for design, web design, inspiration, freebies, tutorials and more. I decided to give the Monthly Desktop Wallpaper Contest another try this month. They feature around 40 or so each month from around the world, and I am most happy to say that my submission was one of the ones chosen for February 2010.

The post featuring my wallpaper and many other feb-tastic wallpapers can be found here.

You can also download the wallpaper here:
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

I also wanted to add that I just finished reading The Smashing Book a couple of weeks ago. It is a very inspiring and well thought out book. There are tons of insights provided by people who are the best of the best in the web design/development field. You hear from people like Veerle Pieters, Chris Coyier, Elliot Jay Stocks, Jon Hicks, Jason Santa Maria, and… you get the idea! I love the fact that Sven Lennartz and Vitaly Friedman took the time to make this book a complete work unto itself. One of the things I dislike about web design books is the endless list of links to "read more", or "get more detail" about what you are reading. I like the fact that I don't have to put The Smashing Book down, and open up a web page to finish the author's thought process. If Smashing Magazine decides to publish another book, I will be sure to make another "smashing" purchase.

So Thursday was Thanksgiving Day and I had a great time celebrating it with my family. Thanksgiving Day causes many people to stop and think about what they are thankful for, and I was one of them. The usual suspects for me are my family, friends, health, and our pets. I then began to think about what else am I thankful for, and then it hit me… the internet. Seems kinda silly doesn’t it? It did to me too at first, but the more I thought about the ways it has changed my life the less featherbrained the idea sounded.

Why am I thankful for the internet?
1. You can share photos and other information with family and friends that are far away.
2. It provides a way to reconnect with old friends.
3. It provides a way to make new friends.
4. You get instant information about breaking news.
5. Christmas shopping from the comfort of your home instead of getting out in the Black Friday craziness.
6. Product reviews on just about everything you might want to buy.
7. Up to the minute sports scores.
8. Movie reviews that save you from wasting 2+ hours of your life.
9. And last, but not least I am thankful for the internet because of all the great information on it about web design and development. I have learned so much from and been inspired by the following people and websites:

n.design studio
Bit Rebels
smashing magazine
A List Apart
Veerle’s Blog
Noupe
CSS Tricks
WebDesigner Depot
Naldz Graphics
Dzine Blog
Best Web Gallery
Cats Who Code
Media Militia
Vandelay Design Blog
Design Reviver
GOMEDAIZINE

Before I go any further with this post, I must confess something… I used to work on a PC all day, everyday. About three years ago, I saw the light and switched over to using a Mac, and I have never looked back. If it were up to me, I would never have to hear the Windows start up sound again, but due to my chosen profession that would be a bad move. Why, you ask? The answer lies below, and is my best attempt to explain why you need to check your websites, email blasts and other interactive work on both Mac’s and PC’s.

The original purpose of this missive was to explain why cross-browser and cross-platform testing is necessary to people who are not familiar with Internet Explorer’s lack of standards compliance. If you are a web designer/developer maybe you can use it to help explain the situation to someone who is not familiar with the issues we face. If you are not a web designer/developer and read this article, I hope it gives you a better understanding of what web standards are, and why you have to thoroughly test interactive work.

Why do we need to test websites and email blasts in different web browsers and operating systems?

The short answer to this question is it’s all Microsoft’s fault. The long answer may get a little boring and technical, but I will try to be as brief as possible and still fully explain the issue.

You may have heard web developers and designers use the terms “standards-compliant browser” or “CSS standards” and talk about the World Wide Web Consortium (W3C in short) standards that define the way web browsers are supposed to render a website. What does all of this techno-babble mean?

Think of standards this way: we all have Microsoft Excel on our computers so we can open spreadsheets. We create an Excel document, and then send it on to other people in the office and they can open it on their computer and edit and save that document. What if half the people in the office did not have Excel, but some other spreadsheet program (like Lotus 123) that does not work exactly like Excel? Would our document look the same in the other program? Would it retain all our formatting and look like it did when we created the document on our computer in Excel? Would some of the text be in different places or even jumbled up? Would the person on the other end even be able to open the document?

This is how it is with web standards. Some web browsers do not fully comply with the standards for how to interpret code as suggested by the W3C. What that means is you can create a web document and when it is viewed in a different web browser, like Internet Explorer or Firefox, or a different operating system, like Windows XP, Windows Vista, and Mac OSX, the document’s appearance can change. What looks fine in one browser may be more or less “broken” in another. These effects can range anywhere from elements and images not lining up, to making the website difficult to navigate. It can become a mess, and possibly unusable, for a whole section of your audience.

This uncertainty from one browser to another is the reason it is necessary to be able to view your interactive work in multiple web browsers and operating system platforms. Testing will enable you to give your work a uniform appearance to the majority of people who view it online.

Now we know why, the question becomes what web browsers and operating systems should we test?

How do we know what web browsers and operating systems people who come to our websites are using? We can answer these questions through the magic of Google Analytics. We can also use the W3C’s stats that they freely provide as a gauge of what is happening out there on the internet.

Remember when I said it was all Microsoft’s fault? The reason why is that they are just now in 2009 getting around to providing a web standards-compliant version of Internet Explorer. That’s great news, right? Yes, but the problem still remains that there are two other versions of IE (6 & 7) in use in significant numbers. Worse still, all three versions interpret web documents in a different fashion. In other words, one web page can have a different appearance in each of the three versions of IE. To further complicate the issue, IE 7 and 8 can have shifts in appearance from Windows XP to Windows Vista.

For this document, I have gathered Google Analytics data from four websites that I have built to show specific stats on the use of Microsoft’s three versions of Internet Explorer and the two dominant versions of Microsoft’s operating systems that are in use today, Windows XP and Windows Vista. These are four very different types of websites that appeal to different audiences. Please note that these numbers are not absolutes for everyone, but are meant to be a guide give you an idea of just how many people are still using Internet Explorer and the Windows operating system.

As you can see from the previous chart, Internet Explorer and Windows represents a substantial part of the website-viewing world. The other two browsers that show up with any frequency in these numbers are Firefox and Safari and the other operating system is OSX. I hope this helps to explain why interactive testing in multiple browsers and platforms is necessary. I also hope that one day this type of explanation will not be necessary and all browsers will conform to the same set of rules as suggested by the World Wide Web Consortium. To quote the W3C’s website, “In order for the web to reach its full potential, the most fundamental web technologies must be compatible with one another and allow any hardware and software used to access the Web to work together.”