« Tufte forums | Main | Three omygods »

December 22, 2003

Structured UI Design

There's something going on in the web-GUI world. It's not exactly new, but XML-based UI description schemes have suddenly become a lot more visible. Check out the following links:

The idea here is this: many application user interfaces are (or should be) essentially modular groups of widgets or components and containers for grouping components. Given that strict structure, a UI designer can write an XML document that refers to a library of predefined interaction components, style it with a CSS-like stylesheet, and describe its behavior with some code written in a scripting language (like Javascript or Actionscript). Although there are syntax differences between the four models above, the basic idea is the same.

Web application developers don't often think like this, because the set of existing web browser components is so limited; basically it's form fields. But developers of standalone apps, particularly Windows apps, have a huge variety of controls, widgets, views, and other components at their disposal. But if you're designing UIs from the point of view of tasks and objects, a component-oriented approach makes a lot of sense. If you want to enforce consistency, even in situations where the final UI might be out of your hands, components might be a necessity.

Components don't really encourage designers to dream up innovative interfaces, but for most user interfaces, they're effective. In pragmatic UI design, consistency, reliability, and predictability are more often valuable than innovation anyway. In that light, XML-based formats for UI definition are very appealing, not just because they're easy to write by hand or because they enforce structure, but because they're easy for computers to output. With standardized UI description frameworks, designers can spend effort on interaction rules, exceptions, and processes that govern interface behavior. Patterns as a UI design technique fit neatly with a highly structured UI definition format.

Lazlo's Learn Lazlo in 10 Minutes overview explains the concept well. Trust me, if you've written HTML, you'll get this right away. That's definately part of the appeal. (Quick quiz: how would you put the returned dataset in their "Working with a Database" example into a draggable window?)

With the MX version last year, Flash is based on a component architecture. (If you've got Flash MX, check out Branden Hall's small notepad application built from three Flash components.)It's also worth looking through this article at Macromedia on the Flash MX Component heirarchy (this diagram is the key thing.)

Posted by Andrew at December 22, 2003 08:15 PM

Trackback Pings

Listed below are links to weblogs that reference Structured UI Design:

» overview of scriptable/textually defined UI from the anti-mega outboard brain
heyblog: Structured UI Design... [Read More]

Tracked on December 30, 2003 10:23 AM

» http://poorbuthappy.com/ease/archives/002460.html from Guide to Ease
Andrew writes a good overview of XML-based UI description schemes.... [Read More]

Tracked on December 31, 2003 12:35 PM

Comments

Macromedia has a short whitepaper on the MXML language that's really useful: http://www.macromedia.com/devnet/flex/articles/paradigm.html

Posted by: andrew at January 4, 2004 09:21 PM

This is interesting. Reminds me of something we tried to do when I first got to Razorfish in Tokyo: develop an XML page schematic language. The idea was that you'd build up these schematics out of a library of basic chunks, show 'em to clients, swap the modules around until the client was happy, and then "compile" them, as it were, into XHTML.

We'll see you in Austin in March, I'm hoping? I have something for you.

Posted by: AG at January 13, 2004 06:29 PM

Another interesting article looking at XAML: http://www.ondotnet.com/pub/a/dotnet/2004/01/19/longhorn.html

Posted by: Andrew at January 22, 2004 01:09 PM

And more: a summary of some XUL-like formats, including "Glade":
http://sourceforge.net/mailarchive/message.php?msg_id=6987286

And here: http://article.gmane.org/gmane.lisp.scheme.plt/4608

Posted by: Andrew at March 12, 2004 11:49 AM

I was trying to read Lazlo's overview, but I got the "authorization required" message. Is there a way I can visit that page still?

Posted by: amitie at March 14, 2004 05:55 AM