Technology is a funny thing – we spend so much time and effort trying to make things as simple and efficient as possible for our users that we sometimes lose track of the big picture and wind up making things worse. This is particularly a problem when developing components for other’s to intgrate, rather than a product that ships directly to end users. When another developer is between you and the end user a few fairly unique dynamics come into play:

• They have the power and ability to implement their own code. To build on things and improve them.
• They are probably using your product to save time so the less they have to do the better (ie: we have to make things simple and efficient for our developer users and our end users)
• Since they are trying to save time, they will probably learn the minimum amount possible about your product and do the minimum amount of work.

Not everyone integrator has all three of those attributes – certainly we have a lot of clients that know our APIs backwards and build all kinds of cool stuff, bu the majority are pressed for time and wanting to drop your solution in and move on.

The trouble is, sometimes a simple drop in solution simply can’t provide the high standard of end user experience that you’d want. In other words, sometimes you get a trade off between making it really simple for the integrator or really good for the end user. As an example, EditLive! introduced “inline editing” recently which allows the page to load really quickly and display the content in a standard DIV. When the user clicks on the DIV the editor loads there and they can begin editing. Click a different DIV and the editor switches over to there. It turns out to be a really good user experience with just one flaw: how does the user know that they should click to edit and where to do so?

The best possible answer in this case is that the integrator takes a bit of time to fit the functionality into their UI and make it intuitive for users. Depending on the environment the editable section is in changes the way you should indicate the editable section. For example, if the entire page is a form specifically designed for editing, the simplest way to make the user see that the DIV is editable is to apply a border that makes it look like a text area. Users expect to be able to click in a text area and start editing so it becomes a natural reaction. Sometimes you want in context editing so the page should look as much like the final output as possible – perhaps just a tooltip on the DIV is the right answer or maybe a specific cursor (probably combined with some user training since this isn’t as natural). Whatever UI is in place it should also fit in with the rest of the site and only the integrator can do that.

Unfortunately, I went off and got married and when I came back they’d shoved a hideous pencil into the product to indicate where user’s can click. So when the user hovers over an editable section it gets a blue border and a hideous yellow pencil floats over the content. It has to be the single most jarring part of the user experience anywhere in our products – particularly when blue and yellow aren’t part of your site’s color scheme. Now I can understand the logic behind adding it, the alternative was to have no visual indication to the user at all which is clearly even worse. We wanted to make it easy for integrators to use the functionality and not force them to implement their own way of indicating editability. There’s a problem though – now we’ve taken ownership of that indicator, if it looks ugly it’s our fault or if it isn’t intuitive enough, it’s our fault. There’s very little we can do about it though, the only person who can create the right UI for this is the person who’s laid out the rest of the editing page and knows the color scheme and knows how to fit the right UI in (including just writing Click To Edit under the DIV). The integrator is busy though, so they see a UI in place, however terrible it must be, and just go with it. We’ve managed to make the UI “good enough” for the integrator to ignore, but still terrible for end users. If we’d done nothing the integrator would have felt compelled to do it themselves and would most likely have created a much better UI for their users.

On the plus side, we did add an option to turn off our default rendering so that you can do what’s best for your own users. Just call editlive.disableObviousEditableSections(); There’s a good example over on LiveWorks!

Bottom line: sometimes you need to be cruel to be kind – if you can’t do the job right, make sure you do it badly enough that others will feel compelled to act. Avoid the zone of mediocrity.

PS: I really miss Kathy Sierra’s blogging.