I spend a lot of time working on designs for large, complex applications. These are typically B2B applications, SaaS applications, intranet applications – not necessarily public, consumer-type applications but rather enterprise applications.

Five years ago we regularly delivered our designs as HTML and CSS files to our clients. The engineering team would, in turn, incorporate our HTML into their designs, adding their code and bringing our design to life. That has been changing. Over the last couple of years our clients have been saying that they are no longer interested in the HTML and CSS. Instead, they want us to deliver designs as a series of interaction design mockups, which the engineering team then implements using the toolkit that they’ve chosen.

That’s right, folks – the toolkits have arrived. A few years ago only a handful of applications relied on these toolkits. The toolkits were young and still rough around the edge and they were missing lots of widgets. Things have changed, though – the toolkits are maturing and application developers are embracing them. In a big way.

If you have not looked at these toolkits and what they can do, then it’s time to visit their “showcases” and see what they have to offer:

There are many others, too – this is just a sample.

What’s in these toolkits? The toolkits are, in essence, codifying much of the UI widget work that’s been done over the last decade in web applications, and bringing in UI work from the desktop over the last 30 years and combining them to create a toolkit that turn the web browser into a true platform for applications.

What does it mean for UI designers and for application design? Here’s my look into the crystal ball:

Over the next few years, the number of toolkits will shrink as a few rise to the top and become standard. These choices will be largely engineering driven, as software engineers identify the toolkits that best meet their needs. They’ll look for ease of coding, quality of debugging tools, and performance factors and will gravitate to the toolkits that solve their problems. If your organization is thinking about using a toolkit, or thinking about changing toolkits, then perhaps you should join in that conversation and get everyone thinking about the toolkit that will also produce the best designs: which toolkits offer the widgets you need most? Which toolkits support the UI performance that you’re after? Which ones allow you to create the visual design that you want with the greatest ease?  Which toolkits have GUI builders that allow you to create the UIs?

Speaking of GUI builders – there aren’t many of them out there. But soon all of top toolkits will offer their own GUI builders that will enable designers to mock up UIs using those builders.  Microsoft Silverlight has the Visual Studio, for example, which is a wonderful tool for mocking up and building UIs and the engineering team can take your designs and bring them straight into the code  (just as desktop applications have done for 30+ years). By the way, if you are looking to add a new skill and develop your career, learning how to use the GUI builders for the toolkits is a great one.

The toolkits will provide support for accessibility and for internationalization and localization and all those nitty gritty details, so that we don’t have to constantly reinvent these controls: they will just work.

As far as interaction design goes, toolkits are good news. We will no longer spend lots of time telling engineering how to put sort controls in a table or how to handle table selection or how the tree control should function because the toolkit will just handle all of that for us. It does mean, though, that designers may find themselves limited by the toolkit. If you imagine some new, cutting edge widget for your application and the toolkit doesn’t support it, you may be out of luck. Or you may have someone on your engineering team who is ready to add new widgets to the toolkit to make your design happen.

Design on the desktop stagnated in the years before the World Wide Web because the toolkits had become so robust that it was virtually impossible to create new widgets: designers could only realistically use what was already in the toolkit. With the arrival of the WWW, we saw an explosion in experimentation with UI elements, resulting in new interaction design metaphors and widgets that have really raised the quality of interaction design. Think, for example, of how we handle form errors in web-based applications vs. the desktop or the way that we have “live search” in text boxes to auto-complete information. We see these UI elements being incorporated into the “new” toolkits, but we have to be careful to try to avoid stagnation in the future. If you are interested in shaping this process, consider joining these teams and become a designer for the toolkits themselves – you will have enormous influence over what happens in all of our designs for years to come.

For visual designers, toolkits are going to be more troublesome. To produce a visual design for these applications you will modify the style sheets that the toolkits provide.  Already you can see the toolkit style sheet in use on the “Select Theme” control for the Ext-GWT Showcase. For many of these applications most of the visual design will amount to a tweaking a style sheet, adding a splash screen, creating a o, and making icons – the rest will be dictated by the toolkit. This is how it was on desktop applications for years. Does that mean visual design is dead? No, of course not – there are still plenty of places where great, innovative visual design is needed. Take note! It’s time to develop your skills in manipulating the style sheets for these toolkits.  There are very few people who are good at this right now. There will soon be LOTS of work for you!

I believe we are entering an era where the web applications will leave HTML and CSS behind. The HTML/CSS jockeys will increasingly find themselves marginalized when it comes to web application design (especially large, complex applications). Because these designs will be built with toolkits, no HTML/CSS knowledge is needed. Will the HTML Gods disappear? Of course not. These designers will continue to push boundaries and help in the development of new widgets and new ideas that we can incorporate into our toolkits. In addition, there will always be web sites and web applications that are more design oriented and will need the skills of an HTML God. Finally, some of them will broaden and deepen their programming skills, go on to master the toolkits, and become part of the software team responsible for creating the front end.

Finally, the toolkits themselves will shape the design of large, complex applications. I have a few predictions on how that will play out in interaction design. In 5 years large, complex, enterprise web-based applications will:

  • Use menubars for their global / main navigation system. These applications will move away from tabs, sub tabs, and trees as navigation systems and embrace more desktop style navigation. This will happen in part because the menubars offered by the toolkit will be robust (for example supporting accessibility requirements and keyboard operation). These menubars are already here, and they are wonderful.
  • Use more desktop style interaction in tables, eliminating links in tables and using toolbars. Desktop interactions like double click, row style selection, context menus will all come into use in these applications. This work is already done and it looks great.
  • Drag and Drop will become a standard interaction in our applications, just as it is on the desktop.
  • Use more desktop style windowing, creating multiple windows (not just layered windows) in the same application. A window manager will help developers and designers control these windows and improve the user interface. The toolkits are just starting this work, but it’s coming very soon. I’ve got more thoughts on this coming very soon.

Making predictions is dangerous stuff, but I am really just laying out what our clients have been telling us for the last few years: the UI toolkits are coming! Well, actually, the toolkits are here. It’s time to embrace them and get to work building incredible applications on this new platform.