Yesterday, our house guest, Jörn, showed me how to change the URLs on WordPress. The old links still work, but now the new links will show up better in other places, like Google Analytics. You can see how the links are useless to tell me what page that was. I basically have to click through. With the new links I will get a much better idea of what page they were on.

In doing this I was analyzing the traffic patterns of my blog. Every once in a while, I get picked up on Ajaxian.com. This usually sends somewhere around 1000 people to that page. But those people rarely look at any other page on the blog. Take a look at these two screen shots. The first is looking at ALL pages tracked by Google Analytics.

This one looks like my blog is getting more exposure. However, if we look ONLY at the home page, then it is a very different story.

In this view, the index shows the actual traffic and people who look at my blog from the index. Way less. In fact, I checked out some Google Webmaster tools, which show how many people have your blog in their Google Reader. Mine has 3. I am way less impressive that I had thought. This is probably a good thing.

For anyone interested in search engine rankings, I strongly suggest checking out those Webmaster tools. They are very eye opening.

My experience with project estimates and scope can be summed up by the following chart.

Of course the actual chart has way more uphill bumps and a much longer tail. But basically, the project starts, then you realize you didn’t scope it out entirely. Then some progress happens and you realize you totally forgot an important use case. So it’s back the infrastructure to make it right. Then alot of progress. Finally, the last 5% of the project takes 25-30% of the total time to complete the project. That last 5% is where the perceived value of the project literally doubles. See the following chart.

This phenomenon is sort of like building a car. Imagine you have an assembly line with all of the parts of the car coming together. At any point in the assembly, the car is worthless to the user. It is not until the last moment when you hook everything up together so that the car can MOVE that you realize the full value of the car.

In technology projects, you often can perform certain tasks midway through which give some perceived value. In my experience, I have found that the last 5%, which is also the long tail which takes 25% of the entire project schedule, is the part of the project where the user realizes the potential and puts a high value on the product.

What does this all mean? It means:

1. Be comfortable with the fact that all projects go up in estimated time to complete at some points.
2. Schedule ample time for that long tail. It is always there. If you skip it, you end up with a crappy looking, half-baked app.
3. Expect perceived value to be 1/2 normal at 95% complete.

Side note: Making charts is fun. Ethan says that Charts are the most important thing in the world.

Last night I was struggling with a problem that refused to budge. I was very confident in the beginning. Of course, Internet Explorer just refused to cooperate and Firefox was just fine. The problem kept going to a for while as a lost confidence. Right before I was about to quit, I sat very still and looked in the one place, I had not looked. I zen’d out for a few minutes, to find my Golden Glow. After a few minutes, I found the answer. I drew a chart of my progress.

Does this resonate with others? Is this a common pattern?

I found this easy way to view generated source in IE. Type this in the browser:

javascript:’<xmp>’ + window.document.body.outerHTML+ ‘</xmp>’

Why is Microsoft NOT building developer tools for IE? It’s making me sick. Firebug was made by one guy. Why can’t Microsoft make this seemingly simple thing? How about profiling? Memory leak detection? Come on.

I often see technology out there that is solid, but lacking a tiny bit of the details from a UX perspective.  Or I would like to extend it a little bit more for a UX reason.  When that happens, every once in a while, someone tells me I am “complaining” and says, “Why don’t you just learn to program and do it yourself?”

I always feel uncomfortable with this.  Programming has been this glass ceiling for me for 12 years now.  I have dabbled here and there, but always get stuck and move back to shallower waters.  With the previous Tree UX example, this happened again.  It certainly was not meant in a mean way at all. I think the guy is encouraging and well-intentioned, and I appreciate that.  So I took another look at EXT’s samples page.  I want to compare apples to apples.

So my next mini-project will be to create the exact same thing twice.   I am going to choose Tabs.  I know how to do Tabs with jQuery.  I am going to try the same thing in EXT, which I “claim” is harder.  But until I do it myself, I can not compare them properly.  I will post the results as soon as I have it.

I actually am having trouble finding a decent Design Pattern for a Tree.  A tree is a critical user interface element and is being used more and more on applications.  Since, I can’t find one, I am going to quickly summarize the pattern I proscribe.

Let’s start with the EXT JS Tree. This tree is pretty full featured, but it’s not perfect.  Let’s review what it does well.

1. All leaf nodes have icons.  It is important for a tree node to have an anchor.  The icon helps set alignment visually and also to give a quick hint to the user as to the type of leaf node.  Icons are important, don’t skimp on them.
2. The tree levels are visually clear.  Specifically, there are little lines that show which level a node is on.  This is good, to help users understand the context of item.
3. Opening and closing works smoothly.  They animate nicely.  The folders change from open to closed.  Little details like these matter alot.
4. The scrollbar is in the right place.  Trees get big.  A scrollbar has to appear when needed, quickly and quietly.
5. Some nodes are loaded via Ajax, with a logical “please wait” spinner.  MSDN was one of the early users of Ajax for their tree.  They didn’t get the contents of every node because it was just too much stuff.  So they used Ajax (before it was called that) to get the nodes on demand.  The EXT example also includes a spinner icon to help indicate to the user that the information is coming and to please wait.  That makes the difference between an elegant experience and a mistaken notion that the tree is broken.
6. Keyboard shortcuts work.  This is a nice addition.  Although it is missing a few details in the implementation.  However, keyboard functionality helps UX significantly.  The keyboard is often forgotten in most applications.
7. Mouse wheel works on scroll.  The mouse-wheel is the best invention since the mouse.  It’s critical to support its use.  Alot of flash trees don’t do this and it stinks.  In fact, my Aptana editor, which I am testing, doesn’t scroll in the main window.  Bothers me to death!
8. Reorder works nicely.  Nice transitions and animations.  Everything about it is elegant. Not all trees are re-orderable.  However, if you have one that is, then this is a good example of it working well.
9. Right-clicking works.  Not on that example, but it works in other examples.  Can’t seem to find one on EXT’s site though.
10. Line-height is good. Although I might increase it by 1px, it’s not bad.  I hate it when a tree is too compact and hard to read.

Ok, that’s the good stuff.  However, I have additional suggestions for a “perfect” tree.  I haven’t seen one better than this example, but I still want to have the Holy Grail of trees.  Here is what is missing:

1. Hover.  This is a problem with Vista as well.  If it’s clickable, then it should afford clicking.  The best way to do this is with a color change in the background.  EXT and Vista do this very well in Menus, but they forget about it in the Tree.  Trees need clear hover states.  This is my number one pattern in general for trees and it is missing in tons of JS trees out there.
2. Bigger target.  The hover in the above step needs to be wide.  As wide as the whole tree.  Plus it needs to have a little padding.  Give the user a decent target to hit.  Don’t make them hit a tiny spot.  Give them breathing room. David Foltz says, “Don’t make the user play target practice”.  He is right.
3. Keyboard shortcuts are good when the tree is focused, but what about when it’s blurred.  Keyboard shortcuts don’t work when tree is blurred.  In Vista the “on state” changes to be lower contrast on blur, so that it’s easier to tell that moving the mouse will have no effect.  In the EXT example, it doesn’t change.  This causes issues.  I actually asked the engineers to turn keyboard shortcuts off, and it seems that the keyboard option is not easily turn-off-able.

   The pattern I actually like with keyboard shortcuts better than this example is to move the “selector” or “hover” with the keyboard, and NOT the onstate. Moving the onstate changes the right side.  This is OK in an operating system, but not OK in a web application, where latency is much greater.  Interestingly, Vista is different than XP on this score.  Vista moves the hover state, although it looks like the onstate.  And XP actually moves the onstate.  Ugh, this is all a mess.

   Ok, the bottom line is:  Keyboard shortcuts for web trees should move the hover state and require an enter or spacebar.  This is the same pattern as keyboard shortcuts in raw HTML.

4. Bigger On state.  It should be clearer that you are ON a selection.  It should be a background color going as wide as the whole tree.
5. Should not collapse the entire tree.  The root node on a tree with only one root node should not collapse.  Even though I see this in lots of trees including Microsoft, I think its terrible.  Why would the user want to collapse the tree down to one node?  It makes no sense to me.

I think I should probably flesh this out with some pictures, but at least it’s a start.  Overall, the EXT tree is the best I have seen, but I can’t help myself.  I want even more.  I want the perfect tree.

I am working on a page with a small bit of JavaScript written by someone else. They are in the Pre-jQUery era. It’s all old and crusty code that is hard to read. I think I could have made the same stuff in jQuery using about 5 lines. jQuery just makes web page development so easy. It makes me annoyed just looking at this old stuff.
Example:

in jQuery:

Which do you think looks easier?

I have been getting a little bit on a roll with the book. I got one chapter approved and another chapter written in first draft form. I like the style of it. I hope the publisher can get me an illustrator. There are tons of pictures and my reliance on Microsoft Clip Art is pretty strong right now.

One case study I did was with a program I used to use called InfoSelect. InfoSelect has always had a wonderful selection model. You get this search boxs with lots of little squares. As you type, the squares go from red to black to indicate a match. It searches random information stored on basic index card-looking things. On the left is a free form tree for storing info. I was basically writing about Featuritis. This is the phenomenon where features are added to a product without adding any real value. In many cases, it reduces value because the program becomes confusing, bloated and slow. I think InfoSelect has suffered from this affliction.

However, I thought about what InfoSelect could have done to improve their product instead. My conclusion was that InfoSelect would make an AWESOME Web 2.0 application. It is simple and elegant. The search would work perfectly with Ajax. It would be valuable, especially in context of a Google Documents. Imagine Google Docs had a section called “Notes”. The UI allowed you to type in whatever you wanted and gave you the InfoSelect super search interface. I would be excited for a feature like that. Rather than designing more features into the windows program, they should be creating InfoSelect as “Software as Service”.

I am not sure if that search feature is patented or what, but even if InfoSelect doesn’t build it I think someone should. It’s a UI begging to be on the web. In fact, I can see that search model used for other things. Books on Amazon. Flights on Expedia. Messages in Gmail. Any search really. The only stumbling block is speed. InfoSelect is blazing fast. I wonder if the web will ever get that fast.

I don’t know exactly why, but I made an Amazon.com Wishlist.

I was writing my book and got to a stopping point and wanted to see what Amazon.com did for some UI thing. And I just said, “Well, I am here. Why not?

Note: The content of this site is always objective and free. I don’t have Google Ads or “advertorials”. I write this stuff because I have a compulsion to spout opinions. (It’s genetic, just ask anyone I am related to.) Besides, it’s fun. One day my kids might read this and say, “Man, what a geek”. Geeks are good, by the way. Nerds are bad.

My bosses recently purchased an Ikea couch.  I won’t go into all the details, but here is the salient point:  The directions did not have a single word.  All pictures.  I liked it very much.  It was international.  I found the directions clear and concise.  Good job.  Interesting, there is an ikeaFans.com website.  It says that it’s not affiliated with Ikea.  Who has time for that??