Creating a Tactile Interface

As new technologies have emerged over the past few years, the typical web interface has changed. This is likely no surprise to any web developers, but many have realized that the increased flexibility of the technology available on the web has often been as much of a headache as a help. My team has recently been tasked with rebuilding our company’s main product to make it function less like a web site and more like a web application.

This of course seemed like a good idea. There are thousands of blog posts out there talking about it and thousands of bloggers can’t be wrong. Unfortunately, there really isn’t a clear definition of a web application. There is so much variation around that it’s difficult to pin down what makes a web site feel more like and application.

It seems that most developers have focused on using AJAX to improve data-handling and reduce page refreshes. While this is definitely a nice improvement for most sites, it doesn’t really help make a site feel more like an application. Applications still have load times; folders still partially refresh when you change views and desktop users are likely used to it. Desktop applications aren’t just faster with data, they’re generally more tactile than web applications, but the tactile nature of the desktop hasn’t transitioned well to the web.

We started to build a list of the tactile interface mechanisms that users were familiar with on the desktop and looked for ways to bring them into out application. After some long discussions and lots of research, we came up with a list of interface features common in desktop applications that we wanted to translate to our web app.

1. Dragging and Dropping

One of the most common mouse techniques is dragging and dropping. There have been lots of workarounds done on the web, but this is really a core interface mechanism for the desktop that is underutilized on the web. Rather than selecting categories from dropdown lists, we started to make elements dragable. This makes the interface feel more comfortable and makes the process of organizing data much easier. This is a feature that could be easily added for any data adhering to categories, folders or other organization/taxonomy system. The idea could also translate well to selecting multiple tags from a tag cloud or adding multiple criteria to a search.
Some web applications are already implement this well. Check out Yahoo Pipes and Flickr for some really great uses of drag and drop. Implementation is generally not too bad either. Many of the javascript libraries available have cross-browser drag and drop support.

2. Group Selection
After we had a few dragable elements, we realized that the next logical step was creating selection options. Being able to drag items into folders or categories isn’t that useful unless you can drag multiple items at once. On the desktop, there several options for selecting multiple items. You can shift click, control click or select items by dragging a box around them.
Shift clicking and control clicking can be handled by javascript, but it can take a bit of effort to get it to work well across different browsers. Like much of the information about mouse events, the state of the shift and control keys is available, but in different locations in each browser. We found this article very useful http://www.javascripter.net/faq/ctrl_alt.htm.

3. Customizable Interfaces

One of the final things that we decided to add to the application was a more flexible interface. Most desktop applications have some level of interface customization. Photoshop CS3 is a perfect example of this flexibility. Most of the menus have a collapsed mode that only displays icons, rather than the full menu or panel. This can be a great way to maximize screen real estate without limiting functionality. The menus and panels can also be moved and rearranged. These two customization options provide a good technique for providing a better user experience for a wider audience. Beginner users can leave menus open and use a minimal number of panels or features. Advanced users can collapse items and have more options available on the screen at once.

These are three techniques that you might be able to use to give your web applications a bit more tactile feel. For the most part, these are all fairly easy to implement with many of the JavaScript libraries. We use Scriptaculous and it supports Drag and Drop, Sortable elements and basic AJAX tools with a minimal amount of extra code.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.tmwebdesign.co.uk Php_penguin

    This is pretty “duh” blog… but it would be nice if it was expanded with some code examples.

  • Israel

    while all this sounds nice, and sounds like a good app, it does sound a bit too much for a web app, whatever happened to KEEP IT SIMPLE?

  • http://ian.sundermedia.com IanMuir

    Sorry if this was less technical than you were expecting. Based on some discussions I’ve had over the past few months, it seemed that many teams had been tasked with this kind of thing and were focusing more on data.

    I can put together a few code samples. In the meantime, there are a few good tutorials to get started on at Scriptaculous.

  • LiQ

    Come on man, links, code-examples, pictures, sections with different font… give us anything.

    I agree with above, what about keeping it simple? Spending hours and hours developing flashy interfaces and suddenly it’s all spoiled by a browser with turned off javascript.

    Or something bigger like cross browser incompability, javascript-function turned off in big browsers because of security issues (or whatever) or, as allways, different behaviour from javascript between different browsers.

    Gmail, Netvibes and lots of other big Web 2.0-pages behaves different between IE and Firefox.

  • http://ian.sundermedia.com Ian Muir

    Here some examples I’ve put together quickly to demonstrate some of the ideas. Tactile Examples

    @Isreal
    I would agree that simplicity is important. However, the idea of dragging items into folders or minimizing panels/windows is a simple and familiar task for most users.

    @LiQ
    Sorry, my bad. I should have been a bit more thorough with the initial post with samples and screen caps. As far as cross-browser support goes, most of the more popular javascript libraries, JQuery, Dojo, Scriptaculous, are pretty solid.

  • http://www.brothercake.com/ brothercake

    Drag n Drop is a great interface paradigm, but the vast majority of implementations are mouse-specific. It would be great to see more keyboard accessible drag-n-drop being used: http://www.brothercake.com/site/resources/scripts/dbx/

  • http://www.maxhyatt.com MystaMax

    Well as for myself, I’d have to say I appreciate these types of articles. Although I can see where others are coming from.

    I’m enrolling in classes this fall that pertain to this very subject and its good to see these intro / idea building articles. Variety is good. So, job well done.

  • Ikonified

    You’d be surprised at how many users DON”T know that Drag and Drop exists (even in the desktop world).

    I sat down and watched a user use a desktop email application and when I asked why they didn’t drag their messages into other folders, the response was, “What do you mean drag?”

    It was an eye opener to say the least.

    My suggestion is to sit down with non-techie users and see how they interact with their machines. You’d be very surprised.

  • http://www.docforge.com veridicus

    I disagree with the idea of making web applications more like desktop applications. It may be convenient in some cases, but web pages were only designed to be simple documents. Also, these days you can make full desktop applications within the firefox browser and serve them from the web, so why try to cram the functionality into a web page?

  • andrelle

    I think this is an excellent article, especially with the inclusion of the Tactile examples. However, he did mention Scriptaculous in the original article. A simple check of that site reveals a wealth of info.

    While I agree that keeping web pages simple is ideal, without all the Flash-enabled garbage slowing things down, adding basic desktop functionality to a site makes perfect sense, especially when you review the drag-and-drop shopping cart app on Scriptaculous. That’s a very simple implementation, and very intuitive to the user. This has great potential, not only with shopping apps but in the social networking space as well. And to be honest, if you are going to use Javascript to provide progressive enhancements to your site, you would also provide a separate version for users who do not have Javascript available. For example, the user with Javascript turned off has a normal shopping cart experience. Those with it turned on have the drag-and-drop features. This functionality doesn’t take very long to implement, since the libraries are already provided for you. I’m adding some of these features to my own site, and its not a time-consuming endeavor. Simplicity is good in many cases, but I think we need to start thinking about better improvements to the user experience to draw more traffic to our sites, and these are excellent ideas for doing so.

  • Steve

    People are funny with Flash slowing down pages… maybe you should ge to gmail and see how long it is to load the page!

  • Anonymous