Developers love to build things from scratch, by building a system from the ground up, they have an intimate knowledge of every part of it. Unfortunately, in a commercial agency environment, limited timescales and budgets force corners to be cut and these systems – unless tightly planned and controlled – can become a nightmare of kludgy code added to satisfy bespoke requirements for a number of very different projects.

The CMS landscape

Web-based content management systems are a fairly mature technology these days, ranging from high-end enterprise systems to well-supported open-source solutions and some recent projects designed to support the latest thinking in usability and web-standards.

Most of these system are under continual development, either by dedicated programming teams in the case of commercial software or by communities of coders, each lending their specialist skills to parts of open-source projects.

Agency built solutions on the other hand are generally only updated when a specific project requires it. The gap between the functionality offered by the agency’s CMS and that offered by the third-party alternatives grows over time.

Sensible use of resources

When an agency starts work on a project using their in-house CMS, it’s often the case that the developers need to do a significant amount of work just to provide basic functionality.

By using a suitably extensible CMS the basic functionality is done and dusted from the get-go, developer time can be more productively used in building any bespoke functionality within the CMS framework. An added benefit is that if the bespoke functionality is built in a modular way, it becomes a re-usable asset.

Who’s to blame?

Nobody really, or possibly everybody. The problem usually occurs when non-technical client-managers ask the developers for estimates on building a site to a certain specification. Developers naturally think in terms of coding the whole thing themselves, after all, it’s their job to build software.

One approach

A good approach is to try and match the requirements of each project to the capabilities of an existing system. The systems evaluated will depend on factors such as:

• Budget

  Depending on the scope of the project, a licensed commercial CMS may be required to fulfil the requirements. These can vary greatly in price so identifying such a requirement early in the project lifecycle can be paramount.

• Hosting Platform

  The agency will not always be able to specify the hosting environment for the site, the platform in use will limit the choice of CMS.

• Familiarity

  If the project requires some bespoke coding or complex configuration, it may be safer to stick with a CMS with which you have some experience. Reducing the learning curve is another good way to cut development time.

Third-party CMSs will not fit the bill for all projects, but it’s worth taking a little time to find out if you can skip weeks of re-inventing the wheel and set developers straight to work on custom functionality. You will also have the advantage that, with a CMS in place, your content editors can begin work populating the content and the front-end designers can be working on templates without the developer being a bottleneck in the production process.

I’m not suggesting that this is the case in all agencies, I know of quite a few who have embraced third-party solutions such as WordPress or Umbraco for even the smallest of sites. I also know a similar number of agencies who’s in-house CMSs I’ve either worked with or who’s employees have muttered “We have our own CMS, but we don’t really like to talk about it…”. I wish I could say I’ve seen a good agency-built CMS, but they seem to be in short supply.

As a private joke, I wrote a simple php script which would take any Twitter bio and replace certain words, in a rude and derogatory way. I called it “Unmasker” and it provided a few minutes of fun.

My colleague Greg Smith suggested that the idea had the potential to go viral if it was presented in a fun way. He (eventually) produced a great design for the app.

Given the quality of the artwork, I thought it only fair to put some effort in the UX design and create the scrolling background effect. The whole front-end is essentially jQuery powered, including the use of Ariel Flesler‘s excellent ScrollTo plugin. A simple php script provides the database, Twitter API wrapper and text-replacement functionality.

I set up a new Twitter account to use for the app, I knew that it would need to generate a lot of tweets to spread the links but I didn’t want to spam anybody. I wrote into the application logic that nobody would receive more than one automated @mention. Anybody following the Unmasker twitter account would probably not do so for too long, unless they were spam-bots themselves in which case who cares?

The Unmasker account also allowed Greg and myself to role-play the Unmasker avatar – sarcastic, abrasive, belligerent … come to think of it, we haven’t really needed to role-play too much.

So on Thursday 23rd July at about 10:30 GMT we started the ball rolling by seeding a few choice names into the unmasker application, many of them were friends who already knew about it, others were randomly selected from searches for terms such as “social media” and “expert”.

Reactions have been mixed

Most people seem to see the joke, some are baffled and a few have been wonderfully rude.
countzeero‘s compliment was particularly nice

countzeero: @StandUP4Design I am getting my ass toasted right next to you “down” there @unmasker is one of the best twitups I have seen…
http://twitter.com/countzeero/status/2873340566

…as was PesciTriD’s Unmasker Haiku

PesciTriD: thanks to @unmasker / ribald twitter speak revealed / keep your tweets comely
http://twitter.com/PesciTriD/statuses/2818433827

jasoncrouch and MrBoom both suffered from complete sense of humor failures …

jasoncrouch: @unmasker Get a life. You are a sad little clown
http://twitter.com/jasoncrouch/statuses/2798942492

MrBoom: go away fuck face
http://twitter.com/MrBoom/status/2819017913

amadee branded Unmasker a Twitspammer and we never even offered him any cut-price pharmaceuticals

amedee: blocking @unmasker – yet another Twitspammer
http://twitter.com/amedee/status/2827979231

BillBoorman and rnadworny were under the impression that I was trying to remain anonymous, despite putting my name and twitter username in the page footer and using the same domain as this blog.

BillBoorman: I unmasked @unmasker http://is.gd/1KatS #unmasked Easier to critiscise when you hide. Who are you really?
http://twitter.com/BillBoorman/status/2817328451

rnadworny: @Techn0tic hiding behind @unmasker . Come out of the closet, Dave!
http://twitter.com/rnadworny/status/2796790735

Rufus_Jay finally worked it out in a magnificent display of calm restraint

Rufus_Jay: I get what @unmasker is up to. Bit miffed at first, but I understand the point. #unmasked
http://twitter.com/Rufus_Jay/status/2815259193

oxfordgirl seemed to find the whole whole thing extremely upsetting, still unsure what she thought we were “trying to track” or where the connection to Iran came from in her panic-stricken tweet …

oxfordgirl: Be ware @unmasker may be trying to track, Don’t click on links #iranelection #iran
http://twitter.com/oxfordgirl/status/2828138746

… but that didn’t stop lorettas3, AHMARINEJAD, lady_stardust9, artfanatic411, Shadiii and a whole host of others from blindly retweeting the alarm with no idea whatsoever of what it was, thankfully Kate_Butler chipped in as the voice of reason with her perceptive defusal

Kate_Butler: @oxfordgirl i’m pretty sure @unmasker is simply a bit of harmless fun. nothing to worry about.
http://twitter.com/Kate_Butler/status/2828171625

That wasn’t enough to stop the_FNGa from demonstrating his suitability for the intelligence services by doing a whois lookup on my domain. Clever(ish), but obviously not clever enough to actually look at the site to see what the fuss was about.

The_FNGa: @unmasker is running a BS script via Twitter API. If you don’t like it, contact David Kinsella @ dave@web-developer.ws #iranelection #iran
http://twitter.com/The_FNGa/status/2831514109

He also tweeted my phone number, which unlike the email address actually is current and in use. So far, the number of calls I’ve received to complain remains at zero. I was hoping Mr FNGa would call me up to discuss the problem but it seems his grievances are only serious enough for people other than himself to take care of. If anybody knows his number…

What’s the point?

Why is everybody so hung up on this idea of there being a point? I’ve always thought that some of the best stuff on the Internet is completely pointless. For example one of my favourite websites of all time is Eric Conveys an Emotion check it out, it’s pointless fun – just like unmasker.

Did it work?

Considering that the site was launched with no real fanfare and a minimal amount of seeding, the results have been very promising so far. In the first 5 days since launch we’ve had 5,883 visits and 7,707 pageviews. The traffic spiked on Friday at 2715 visits and with between 500 and 1000 visits on each of the other days. It will be interesting to see how the traffic continues.

We decided to include the hashtag #unmasked in all of the tweets sent by the app so that we could try to track things better, according to Twist, Friday saw #unmasked grabbing a 0.02% share of Twitter traffic, it’s hard to tell how accurate that is though.

What else did we learn?

• Being a bit rude provokes a reaction, we may not have got as much traffic without ruffling a few feathers.
• Some people fear what they don’t understand and react accordingly (that’s not really news is it?)
• If you use a popular hashtag, people will retweet anything – try tweeting “Chocolate ice-cream cures hemorroides #iranelection” and see what happens
• Some people are so insecure about their online profile, they will change it in reaction to a text-replacement script making fun of them
• Some people do this because the script mocked them for having no bio – this is perfectly acceptable
• Some people stick with their bio despite what unmasker says, these people are right to do so
• When building something that you hope will go viral; a simple idea – well executed is probably a better option than a complex idea hurriedly thrown together.

What’s next?

I don’t know, any suggestions?

Often, the UX design is considered to be mainly a creative process, undertaken as part of the graphic or web design phase of the project. It is then down to the developer to implement the UX as specified.

In this case, I’m building the back-end functionality first but that doesn’t mean I don’t need to think about making using the application a smooth painless experience, regardless of what improvements will be made as part of the front-end design.

Key Idea – Remove Barriers

To make interactions as painless as possible, I’ve sought inspiration from not only web applications but also desktop and mobile apps.

• Adobe Air has given flash developers the capacity to create and publish desktop applications. These guys are often at the forefront of designing great user experiences and it shows in the slickness of many apps.
• Apple’s iPhone has thousands of applications available and the limited screen size combined with the touch screen interface has resulted in some interesting new application design conventions. The native applications such as e-mail and the iPod interface present examples of functionality honed down to just the most essential interactions.

Example #1: Registration

In the conventional scheme, a user would enter their registration details, receive a confirmation e-mail, activate their account and then login to the site. This is often required even for a free trial of the application.

Automatic Login

I’ve built the registration system so it will automatically log the user into the app once their registration has been successfully processed. Rather than wait for an account activation, I’m doing a simple check to ensure the mailbox for the e-mail address that they entered exists. If I wanted to use an activation code, I could add a grace period during which the user could use the application before requiring an activation code to confirm the account.

Trial without registration

I’ve coded my app so the user can dive straight in and try out the application (in a limited form). All the data that they enter is held in a session cookie so if no further action is taken, it will expire soon after the user leaves the site. If the user decides to go ahead and register, all the data entered in the session is recorded into the database against their new account. This, combined with the automatic login provides a seamless transition from free trial to registered user without having to re-enter any information.

Example #2: Item Selection

One part of my app involves selecting an item from a list. It’s unknown how many items might be in the list so the conventional developer solution would be to create a drop-down list with either an automatic update when an item is selected or a button to confirm the selected item.
I see problems with each of these approaches, a drop-down list could potentially be quite long, requiring scrolling to navigate. If the user accidentally selects an item while scrolling, an automatic update is unforgiving. The use of a confirm button negates that problem but needs an additional interaction after the user has found the item that they were looking for. The confirm button becomes an unnecessary obstacle in the flow of the application.

One click selection

My solution is to generate a list of links, each of which can be clicked to make the selection. Initially this looks like a good solution for small numbers of items, but bad for longer lists.
The reason that I’ve chosen to go this way is that the mechanism is good, a single click once you’ve found the item. How the list is presented can be tackled as part of the front-end design. In this case I might use something like the jQuery ListNav plugin from iHwy Inc.

Some Tips

While in development mode you can improve user experience by making choices based on mechanisms and functionality, not on presentation. If, like my current project, you don’t have a specific design to work to, these tips can still make a difference.

• Look for inspiration – A good designer will keep scrapbooks of design elements, textures, colours, shapes etc. similarly, you can make a note of good experiences from any source, not just software applications – video games, information kiosks, gadgets, DVD players, whatever makes you think “that was simple/easy/nice”.
• Create a smooth application flow – remove unnecessary steps wherever possible. A single click to advance creates momentum rather than an obstacle to overcome.
• Don’t think about presentation – provide all the required output for building the front-end design. Strong front-end UX design should build on good application flow rather than try to impose it on to cumbersome application functionality.
• Follow people logic, not application logic – Think of the simplest path from one application state to another, regardless of whether it matches your database schema or object methods.
• Conventions are compromises – tried and tested conventions only became so because most people have come to accept them. At some point in the past, somebody went out on a limb and built them first. Don’t be afraid to break convention if it makes sense to do so.

1. In general, you need to have an working internet connection in order to show the presentations unless you export to a different format.
2. For most of the time you spend working with them, you wish that you were using Powerpoint (or another off-line application) instead.

Sliderocket has obviously been working hard to create a web-app which is not only as simple to use as the offline apps, but also allows you to take a local cached copy of the presentation for when you have no internet connection.

In addition to being able to access your presentation from any internet connected computer; there are additional features which whilst not impossible to replicate in offline apps, are typical of the latest best-of-breed web applications. These include direct searching and import of images and videos from the likes of Flickr and YouTube, a quotes search for finding inspirational quotes based on a keyword search and even synchronised import of data from Google docs spreadsheets.

The presentation below gives a good idea of how slick the final results can look but I also recommend watching the demo videos to see the application in action.

I went to see what was so exciting and was pleasantly surprised to see a blog editor which didn’t seem to be overloaded with complex features. The Web Layout and Web Preview views were the first major benefit that I could see. It’s nice to be able to see the final formatting as you write and preview the post in the live layout HTML. Paul had already hooked up his WordPress blog and we soon managed to set up the company TypePad Blog too.

So I decided to take the plunge and install it myself. The first thing which impressed me was the ease with which I was able to set up Live Writer to edit this blog. I’m using Blogger but publishing static HTML via FTP to the server, a situation which seems to cause problems for many blog editors but Live Writer breezed through the process without a problem.

Next I was intrigued by the “Add a Plug-in…” button so I went to see what was available. The plug-ins which are already available to Live Writer are pretty impressive such as the Insert Flickr image plugin which allows you to search Flickr for images and insert them without ever leaving the application interface – yes I know Flickr search isn’t exactly revolutionary but it’s a perfect example of something which many of us do when writing a blog post. I’m looking forward to seeing what people come up with. Thankfully Microsoft have thought to allow plug-ins to be rated – a handy thing to use if we get Facebook app levels of me-tooism.

So I’m writing this post in my new favourite software (at least for today) who knows, I might even upgrade to Vista one day.

I’ve begun to play around with developing Facebook applications, there’s a few tricky things to work out, such as the anatomy of the application – profile boxes, canvas pages etc. but there are ways to make shortcuts such as using an iFrame to host an external application page. So far it’s going alright, my main worry is how to make the back-end scalable enough that it doesn’t fall over too quickly.

Now that we’re underway, I’m already noticing things that don’t work quite right but that’s inevitable really. Thankfully I’ve already had some feedback from testers whic is just what I was hoping. bcToolkit was built for the way we use Basecamp at KMP. We need to learn about the other ways that people are using Basecamp in order to build value for them into our application.

I’m using the things that I’ve built for bcToolkit to create a Framework for future applications. It will be nice to be able to get on with developing an idea knowing that I’ll have a ready-made framework for account registration, beta phase management and further down the line – integrated blog and discussion forums.

I had thought about spinning this into an online application, and then I found out about Mint and BudgetPulse. These both appear to be entering this online personal finance management arena so I’ve signed up to try out each of them and see if they will stand up to my slap-dash accounting practices.

As I can only judge by the design and functionality of the holding sites so-far, I have to give the lead to Mint, however BudgetPulse may have a less polished presence at the moment because they’re piling all of their efforts into building the best application. Only time will tell.

Dave – There’s a very simple answer. Go on…….. ask me what it is.

What is the ‘fundamental rule of web design?’

Again…What is the ‘fundamental rule of web design?

I’m assuming that the poster is referring to the KISS principle that used to be the major buzzword used by web design evangelists back in the mid to late nineties – I make this assumption because the poster seems to regard phpBB as the holy grail of web forum design; a reliable workhorse to be true, but not what I’d regard as the cutting edge of application design.

Whilst this axiom still holds true, I don’t believe it should be used as a reason to cripple a web app by limiting it’s functionality, it’s another case of hiding the complexity. The control options available to the user should be only the ones that are relevant for the current task or else allow them to move onto a different task. Highrise is a great example of this and I’ll be writing up a review of it very soon.

Just out of interest I did a quick web search to see what people are refering to when they write about the “fundamental rule of web design” these days, here’s a nice selection:

“The fundamental rule of web design is that your page is accessible to everyone, no matter what platform they are using.”

“WYSINWTG: What you see is not what they get – This is the fundamental rule of Web design! “

“a fundamental rule of web design: the appearance of the site ought compliment the tone of the content”

“The Fundamental Rule … Psychologically the surfer has allocated a segment of time to look at and comprehend your web site.”

“Don’t you know the fundamental rule of web design that it should be accessible on as many browser applications as possible rather than just on the one computer you happen to use.”

“‘Sense and simplicity’. [This] slogan applies perfectly as a fundamental rule when it comes to web design.”

“Perhaps the most fundamental rule of web standards is that content should be separated from presentation – by applying all decorative presentational richness using an external style sheet, the core content (the (X)HTML) remains pure and focused.”

“..one fundamental rule: every site is different.”

“The last fundamental rule is that your site must contain links within your site to other web sites. Web site owners should take advantage of the ‘interconnectedness’ of the web and don’t be too scared of directing users to other sites. If you don’t, you are virtually isolating yourself from everybody like a medieval fortress.”

As you can see, what you see as the fundamental rule depends very much on your own point of view, the KISS principle is till there but accessibility is making good headway in the “web fundamentalism” movement.

A good example would be the del.icio.us extension for firefox. Whenever I come across a page that looks interesting, I right click and tag it into my del.icio.us bookmarks.

I like SysSense as an example of a system tray app that allows me to get an overview of Adsense revenue generated by sites that I administrate.

Stumbleupon have shown that a great webapp can be used without requiring the user to visit a specific site. The reasoning is sound, the point of the application is to direct users to new websites so why make them visit another website first? One click on the ‘Stumble’ button is all that’s required to possibly discover a new favourite website. It brings back the christmas morning feeling that used to be associated with Google’s “I’m feeling lucky” button.

It’s long been said that the most usable interface is one that is invisible to the user. By using pageless interfaces, the need to try and build a page that everybody likes and can use becomes a secondary concern to the main business of making the application work as well as possible.

When logged in, you have a taskbar at the top of the window in which there is a button labelled ‘Stuff’. This button is like the ‘Start’ button in Windows and gives you access to a list of applications and functions. The applications, when active run in a draggable, resizable window. Each application also shows as a tab in the taskbar so that you can see what apps are running even if they are minimised.

At this early stage, the applications available are pretty simple but the potential here is quite amazing when you see that one of the default applications utilises the Flickr API and then think about how many great APIs ar available for developers use at the moment. I’m currently using the Rich TextEditor app to compose this Blog Entry, it’s not groundbreaking stuff but it’s perfectly functional and the fact that I could save where I’m up to, logout and then go round to a friend’s house, login from his PC and carry on from where I left off is brilliant.

This seems like a sound idea to me, I regularly move from one PC to another and a persistent workspace would be ideal for those things with which I fill spare moments (or use as displacement activity when I should be working on something else). I currently rely on the likes of del.icio.us or Backpack to keep track of those thing which I jump in and out of such as articles that I might be reading or software ideas that I’m sketching out to see if they’re worth following up.