case study

Playing catch-up on the web

It continues to perplex me how so many basic interaction conventions did not make it onto the web. With each browser revision, we’re slowly improving experiences online, but so much of it is simply catch-up and not new innovation. Sure, it was born as a method for structuring and sharing documents, but once we started building things with it that involved interaction, why didn’t we at least start with what we knew thus far? Simple patterns designed decades earlier are slowly starting to show up on the internet but so many are still not even technologically possible.

It’s unfortunate because it limits the internet’s potential. By requiring experienced users to learn new behaviors, requiring users to deal with a sub-set of features, or lowering standards and expectations by providing new users with a sub-par experience, we are doing them a great disservice.

Avoid pagination

Nowhere else but on the web do we paginate through data. I can imagine why this convention was utilized: bandwidth will always be an issue for applications that do not store data locally. Perhaps that can be improved with caching and pre-fetching anticipated content. Whether the data is there or not however, why can’t we pretend that it is? Consider the continuous-scroll (such as Bing’s image search) or load-more (such as Twitter) conventions. Data, especially tabular data, is a list. You’re reading down columns. Paginating left-to-right makes little sense, especially when you start sorting the columns. Even if you have to break the data into chunks and paginate, a vertical metaphor makes much more sense than horizontal. Avoid pagination, but if you must employ it, make it top, bottom, up, and down, like a window showing you a portion of a long list.

Filter instead of search

While it doesn’t work for massive data sets such as the entire web, stop making users search for content. Imagine a photo gallery application that launches with a blank screen and nothing but a search bar. It seems ridiculous, but why then do we approach most data sets in the same fashion? An application has been launched for a specific purpose. Assume the most common task and present it to the user. If the entire dataset is not local, load the first sub-set. Instead of requiring the user to search blindly to find what they want, let them filter down the data set. In many instances this can be done with javascript in the browser (client side or even through a remote call) and can be substantially faster than searching and then wading through results.

Master/detail and edit mode

Another convention that has plagued web applications since their inception is edit mode. It’s amazing how much time this small workflow has wasted. Browse, select, load, edit, save… browse, select, load, edit, save… again and again. Why refresh the page? What if you’re not sure which record you want? It can be much more simple to allow the user to arrow up and down through a list with details or with content appearing to the side! Second, if the application is for working with data, the fields should be editable, or provide an option to toggle in and out of edit and view mode on an application-level. Most desktop software doesn’t have view mode. Why does the web? Apple’s new iPad, which implemented the master/detail convention as a standard through it’s interface, is gratefully inspiring the use of this convention now in many applications.

Keyboard navigation

Make sure that users can navigate your application quickly and efficiently. Start by ensuring that your tab order is set and that you can effectively move between all form elements. Arrowing up and down through lists and data tables is crucial. Help your user out by allowing them to jump to the top and bottom of lists with page up and down. Allow them to expand and collapse details with the left and right arrows. Select items with the space bar. Other advanced keyboard shortcuts can include jumping between columns, toggling panels, and moving in and out of modes. There are a few javascript libraries and scripts that make implementing these a snap. Ensure that you are careful to manage focus, however, so you don’t conflict with typing. Some shortcuts can be as simple as single letter keys (as with Gmail) but most should require a modifier. I recommend both control and option/alt together for cross-browser compliance.

Control input and avoid validation

Lastly, I would like to discuss input. This area is improving greatly, especially with some of the new input types coming with HTML 5, but it still amazes me how many forms contain bare input fields. Users hate filling out forms, but they hate error notices worse. Why not anticipate their mistakes? Why not correct them inline as they work? If the field is for a credit card, why accept any character besides integers? If a code has to be in a specific format, then provide a hint and mask the input as it is keyed in. Auto-fill delimiters and spaces so the user doesn’t have to type them. Use Ajaxax to immediately validate fields that must be unique instead of after the user has filled out and submitted the entire form. Provide feedback inline, next to the problem. Size fields so that they indicate the amount of text that should be entered and limit them with the maxlength attribute.

Conclusion

Looking back, we have come a long way. Today’s web is a much better experience than it was a decade ago when we first started laying out pages and submitting forms. Giving credit where it is due, the masters of the web have done amazing, creative things with the tools available to them. But we must continue to challenge the archaic metaphors that were born out of technological limitations or the lack of interaction as a text-formatting medium grew into a software platform. We’ve solved most of these interaction issues long ago. We’ve been using them for decades on the desktop. It’s time to stop playing catch-up and to start building software right. We should be building on what we know and then making it better. Your application will be more intuitive and familiar. Your users will thank you.

posted by Wade Preston Shearer on Wednesday, Jun 16, 2010
tagged with design, web, applications, interaction design