Whatever your reason may be, here are some important things to remember when building a completely unusable web application.

#8: Use cryptic and inappropriate icons in place of text… Everywhere.

One sure-fire way to confuse people is to remove text and replace it with flashy graphics. Here’s an example toolbar:

Example:

Care to guess what those icons mean? From left to right: Save & Quit, Upload, New Data, and Search.

How to do it:

Go to iconfinder and search for some icons. Find the least self-descriptive icons possible. Use them in new and creative ways!

#7: Disallow the use of the right-click button.

Let’s face it: end users can’t be trusted to do anything right. They especially can’t be trusted to use the right-click button. So let’s start off by disabling that right away. None of that right-clicking funny business anymore. Oh, and nevermind that there are hundreds of ways around this, including NoScript for FireFox. The whole point here is to make an unusable application.

Example:

How to do it:

<script>

<!-- //

    var msg = "NO RIGHT CLICK ALLOWED BECAUSE WE SAY SO";

    function BeEvil(a) {

        if(
((navigator.appName=="Microsoft Internet Explorer")
&&(event.button > 1))
||((navigator.appName=="Netscape")&&(a.which > 1))){

            alert(msg);

            return false;

        }

    }

document.onmousedown = BeEvil;

// -->

</script>

#6: Make the navigation change constantly and randomly.

Users will become very comfortable with the navigation in your application if it is located in a predictable spot on the screen and stays uniform.  Mix things up a little!  Change label names, or move the location of navigation depending on where the user is within the application.

The last thing you want is for them to get comfortable!

Example:

Application Screen #1:

Application Screen #2:

How to do it:

This one will be up to you to figure out.  It depends on what you’re building your application in.

Bonus points: change the title of some areas randomly as well.

#5: Make the text really, really, ridiculously small.

Making text readable means that there’s a chance your users might be able to figure out what you’re trying to tell them.

Example:

How to do it:

Use an 8 pixel or lower font, preferably something that will scale reasonably well to the point where the text is nearly readable but not quite.

<div style="font:7px Verdana">Do you not want to discard all your
work? Click <b>here</b> to save.</div>

Bonus points: keep the DIV exactly as specified, such that clicking doesn’t actually do anything.

#4: Use FRAMESETs and IFRAMEs: Add more scrollbars. A lot more scrollbars.

Why bother having the user view different pages, or even just use the built-in scrollbar functionality of the browser?  What any good non-usable application needs is more scrollbars to really put it over the top.

Example:

How to do it:

Using an IFRAME with a size smaller than the actual content plus requiring scrollbars will insure that you get the recommended dosage of scrollbars for your unusable application.  Assuming your IFRAME source content is called “iframe.html”, the correct usage would be:

<iframe src="iframe.html" width=180 height=150 scrollbars=yes>
</iframe>

#3: Disregard all common sense about colors.

Feel free to use really random and odd color schemes, like orange text on a red background, or yellow text on a green background.  This will help to obscure important messages, and generally make sure that the user will not read what the application is trying to tell them.

Example:

How to do it:

<div style=”color:#bbbb00;background:#ff0000;font:bold 12px Verdana;width:100px;height:30px“>Warning: records not saved</div>
<br/>
<div style=”color:#efef00;background:#00ff00;font:bold 12px Verdana;width:100px;height:30px“>Cannot input a value larger than 3</div>

#2: Sadistic use of AJAX: update parts of the page that are out of view.

Make sure to have some actions in the application update areas of the screen that are out of view of the user.  This is particularly interesting when combined with the #3 tip about adding more scrollbars.  This gives the “feel” that the application is broken, since the user is clicking on it but nothing is happening.  This also gives you the chance to tell the users how ignorant they are not to notice that the information they are looking for is available right on the screen if they come to complain to you later.

Example:

How to do it:

You can use whatever AJAX framework you like.  See the post earlier about useful JavaScript libraries for more details.  Prototype is my personal favorite.

#1: Reverse the order of OK and Cancel.

Users are so accustomed to seeing the order of confirm and cancel buttons, they don’t even read them anymore.  Building an unusable web application is a good way to teach your users a lesson about reading the buttons before pressing anything.  Reversing dialog buttons, especially Confirm and Cancel (or OK and Cancel) is an especially easy way to make your application unusable AND teach your users a lesson in reading comprehension.

Tip: make sure to make the buttons equal size as well.  This will help prevent people from reading.

Example:

How to do it:

Here’s a sample form that was used to create the dialog above.  Note the use of the same-sized buttons and similar sized text.

<form method=”post” action=”/save”>
<b>Save this important data?</b>
<br/><br/>
<input type=”submit” name=”confirm” value=”Cancel” style=”width:100px”>
<input type=”submit” name=”confirm” value=”Save” style=”width:100px”>
</form>

Conclusion

Obviously this is just a guide to get you started in the right direction towards building an unusable application.  But remembering these tips next time you embark on your journey of building  unusable software will help make sure that you don’t accidentally build something that’s actually usable.

Know of something that should be on this list?  Let me know in the comments!

Hammer picture courtesy of Malene Thyssen.

#1: script.aculo.us

Need to add some nice looking animations to your user interface, but don’t want to resort to using Flash for animations? Script.aculo.us offers a wide range of very clean looking animations that you can apply to any image, form element, or HTML entity.

Site: script.aculo.us

#2: Prototype

Prototype’s best feature is its AJAX capabilities. Prototype makes building AJAX-style applications much, much easier. It also features: enhancements to JavaScript arrays, a JavaScript class builder, simple methods for manipulating HTML elements, and more.

Site: prototype

#3: Dojo Toolkit

Dojo has nearly everything you could want: draggable windows, form controls, a rich text editor, progress bars and more. Extremely simple, fairly lightweight, and reliable across all major browser versions. Dojo is simply a must for anyone looking for an end-all be-all JavaScript UI framework.

Site: Dojo

#4: jQuery

As with all the frameworks mentioned on this list, jQuery provides many JavaScript classes for building and handling AJAX events and parsing JSON, as well as many UI effects that can really improve the overall look and usability of your web application. jQuery is a tad bit smaller than some (like Dojo and yui), and also has a fairly straightforward interop story with prototype.

Site: jquery

#5: Yahoo’s yui

Yahoo has made their entire user interface library completely open to web developers for both commercial and non-commercial use. yui is by far the most complete JavaScript library available, with functions for everything from creating draggable pop-up windows to handling AJAX events and manipulating DOM elements. yui does tend to end up giving your applications a distinct “built by Yahoo” feel, though, so there is a bit of a trade-off.

Site: yui

Know of a JavaScript UI/AJAX library I should’ve included on this list? Let me know in the comments!