I plan on writing a high level article reviewing the design process I went through.  In the meantime, I only have time to post that the theme is now up and doing it’s thing.  Feel free to poke around and list off the millions of holes that are most definitely present.

I was going to title this post “The Emperor’s New Clothes” but resisted.

On the account settings page, I was shown this:

Web applications are hosted on servers that are rarely in the same time zone as you.  This means that any events scheduled using the system will be displayed with the wrong time unless you’ve set your local time zone in your account preferences.  My expectation would be what I find in Microsoft Windows, which is a list one city per relevant time zone and a GMT offset.  Instead I found choices like:

• America/Indiana/Indianapolis
• America/Indianapolis
• America/North_Dakota/New_Salem
• Antarctica/South_Pole
• Asia/Jerusalem
• Atlantic/Reykjavik

We have some U.S. States included, but not all.  Some U.S. cities are listed twice.  Some U.S. cities are so small I’ve never heard of them.  Geography is sorted by Continent or Ocean.  Just an odd taxonomy choice.

Setting my personal timezone is important to me for this site.  The organization hosts events in San Francisco, so I want to make sure I have the right times for them.  Taking a quick look at the screenshot above should quickly tell you that this simple task became complicated, since the default is Chicago (central time).  I eventually spotted Los Angeles after going through the list 3 times, but I doubt others are as patient as me.

Ideally when you use a drop-down menu either all the items should be visible once opened, or the content of it should be so familiar that the user already knows what to expect in it.  An example of familiar content would be a drop-down that contained a list of U.S. States.  Neither of these cases are true for this example.

Another option worth noting is that the “Automatically enable notifications for any groups that I join” was the source of my 224 IxDA spam emails in my inbox.  I quickly unchecked it.

Most people may wonder why this option would be enabled by default if it results in this much spam.  Most usability / user experience members would push for this to be an opt-in setting, rather than an opt-out (for this spam centered reason).  However having worked with a lot of project managers, my educated guess is that there was a fear that if it was opt-in, no one would bother.  (AKA: The community would fail.)  In my experience thoughts like these terrify product managers, like haunting nightmares and cold sweats bad.  So I can understand the thinking, if not agree with it.

With all design choices, I tend to agree with the general practice that you should use established conventions unless your method is significantly better.  I think this design falls under “needs more work”.

Disclaimer: These are my opinions and insights, and are intended to improve the example being studied.  Like all things in life, there’s a good chance I’m just wrong.  So take it all with a grain of salt.

The visual affordance of the door says to me “pull”.  Handles are meant to be grabbed.  Yet one of the doors can only be pushed.  What’s worse is that it’s the right door, which is usually the one people go to first to enter a building (due to the US driving preference).  So I have to imagine it catches a number of people off-guard everyday.

Please don’t follow this example.  Make your customers and users feel smart by not upsetting their world view, even at this level.

I find competitive analysis to be an essential tool for design.  In my quest to design a more appropriate layout and theme for my blog, I did my due diligence and searched the web high and low for portfolio sites from which to get ideas from.  This analysis not only grounds you with a firm baseline of what is expected of your design, but often yields a nice list of action items that can be used to outdo your competitors.

I’m a big fan of simple and direct.  I believe that if you can take something away from a design and it still works, do it.  Which is why I immediately envied Nick Finck’s website.  The scribbles on my quad-ruled pad and my chosen color palette to that point were very similar to what he already had decided to place in front of me.  What’s more is that he’s also in the same field as I am, so it would be bad taste to copy him.  Instead I’ll use his website as a case study.

Home Page

His home page is nearly flawless when it comes to the above the fold area:

• Professional quality photo immediately letting me know who Nick is.
• Large and simple navigation scheme: About, Blog, Speaking
• Clear calls to action: “Read My Blog”, “Get in Touch”, “Follow me on twitter”
• Immediate association with companies that look to be respected.
• Area has lots of whitespace so the page doesn’t feel cluttered.

Having said this, I find a few things that seem disruptive:

• Unestablished link color.  If you were to ask me based on my gut reaction what color indicates what is interactive on the page, my immediate response is “light blue”.  However, upon inspection the correct answer is: orange, blue, green, dark tan, black, and white.  The lack of link consistency is probably the page’s biggest failing.

• In addition the underlining of links is inconsistent:

• The tagline “UX/IA Pro, Speaker & Community Cultivator” seems a bit too large.  My eyes were actually drawn to the photo and the size of the tagline text resulted in a bit of banner blindness at first.
• When you hover over the two companies under his photo, a huge information bubble appears.  This was unexpected and actually subconsciously prevented me from wanting to click on the company links.  While it’s a cool use of jQuery, I think it detracts from the overall experience.

About Page

The About page is also very well done:

• Clear page title, which is set on a tan banner that ties into the Home page’s design.
• Very personable and professional photo.  I want to meet and/or talk to this guy.
• Journalists are given due consideration with a ready press kit.  Anyone who reads Jacob Nielsen’s insights should know the importance of Press Area Usability.

There are very few negatives:

• The “Read More…” link hides 2 extra paragraphs, that slid into view when clicked on.  Presumably this is to help ensure the “Testimonials” header creeps in above the fold.  I would have shaved another paragraph off since browser chrome may still hide it.
• The Facebook and Linked In buttons fall far below the fold.  I missed seeing these items quite often.
• Same link issue as on the Home page.  ”Testimonials” is not a link, but “Download press kit” is.  This is confusing.

Blog Page

The Blog page is probably the worst designed member of the website.  This is a shame as it is definitely the one I’m most interested in, since I am an avid consumer of usability and user experience information.

• 50% of the page is wasted on non-blog content.  This is a perfect example of not putting your best foot forward.  Instead of making the hard decision as to what was more important, everything is included instead.
• Instead of having 2 columns of supplementary content, probably only one should have been chosen.  If I were to make the decision, I would omit the Flickr and Delicious sections.  Flickr albums can be linked to via a blog post when photos are uploaded, and my expectation is that less than 5% of the web community understands what is Delicious.
• I’d definitely keep the Twitter feed and the Ad.  Twitter feeds are updated regularly, so there’s always fresh content waiting for a visitor.  And let’s face it I’d want to tout and flaunt my own services on this key page as well (so the ad stays).
• I’d also omit or condense the speaking events section.  My assumption is that it is present on the page because the Blog is a frequent destination, so extra exposure is good.  But having said that, if it were up to me I’d omit it and pimp my speaking events in the Twitter feed.  Less is more.

Summary

Overall I think this is a fantastic website, and excellent at presenting a professional face to the UX/IA community.  The majority of the website practices what he likely preaches in his speaking engagements.  There is very little clutter and each page seems to hit the goal that was laid out for it.

Having said that, there are only a few key areas that should still be addressed:

• The Blog page should eliminate one of the supplementary side columns and omit or condense much of affected content.
• A better separation should be made between links that are interactive and headers that are not.  In addition, link behaviors in general should be made more consistent.

But yes, I will likely be using Nick Finck’s website as a model example of a professional portfolio site.  As should you.

Disclaimer: These are my opinions and insights, and are intended to improve the example being studied.  Like all things in life, there’s a good chance I’m just wrong.  So take it all with a grain of salt.

• Is it easier to find fault in your best 5 examples, or your most recent 100?
• Is it easier to find fault in your best 1-2 examples of each category type, or letting me choose a category and then seeing 10 examples of it?
• Are your best examples presented to me, or are they waiting for me to find them (if I can find them)?

Doesn’t really sound too complicated, does it?  The conscious act of deciding that one thing is more important than another, and going with it.  And yet nearly everywhere I go on the web, many websites prefer to inundate a visitor with every possible choice, every possible option, and every possible example.  Instead of making a design decision to give the user “something”, and then letting them poke around or customize it further, we give them “everything”.

You’re probably confused, so I’ll give you some concrete examples.  Since I’ve decided to update my website and turn it into something other than a glorified placeholder, I’ve been looking at portfolio sites in an attempt to get ideas and inspiration.  My thought process was, “web design firms do this for a living, so I bet they have some examples I could mimic/copy/borrow/pilfer.”

Web design firms do indeed have examples that I can get ideas from, however very few of them ever do personal portfolios.  This fact, upon reflection, actually makes sense as I don’t know too many people who’d shell out good money for a respectable website.  Most of their examples are corporate or professional organization websites.  This didn’t bother me, as I can still look for good ideas on these sites too.

What did bother me, was the total lack of thought that went into the presentation of these portfolio pieces to the visitor.  Some websites decided the best approach was to overwhelm me with numbers (Example 1, Example 2).  Some websites required that I know exactly what I was looking for first (Example 4, Example 5, Example 6).  One website even went so far as to tell me to GO AWAY!  Very few of the websites made conscious decisions as to which examples to showcase (Example 7, Example 8).

The point being that in overwhelming me with examples of their work, or interrogating me before providing me anything of value, they are passing the burden of legwork onto me.  By giving the power of decision to me, there is a good chance I will discover a lesser value example.

As a web content provider, you will both do me (the visitor) and yourself (the website owner) a huge favor by ferrying me to your best content in a quick and painless manner.  If I am a discerning visitor, I may ask to see more examples, or inquire which project leaders ran the websites that I find exceptional, but I doubt I will leave based on your best work.

Some may argue that by only presenting a small subset of examples to choose from, you are presenting an incomplete picture.  That you are being deceptive in your capabilities.  I disagree.  Being selective does not mean that the portfolios are misleading, since they did in fact actually do the work.  It simply means that what is being presented represents the high watermark of your capabilities.  To that effect I think it saves the visitor a great deal of time.  And in this world of 4 second attention spans, saving a visitor time is a very good thing.

I also intend on updating the theme of the site to better suit my personality.  I find stealing a WordPress theme to be a form of cheating, but I need to start somewhere.  This will give me something to do when I have inevitable writer’s block.  So I have quite a bit of work cut out for me!

We shall soon see how well I fare…