The Impact of Interface Design Markup

by Luke Wroblewski April 1, 2005

There’s currently a proliferation of XML Markup Languages for User Interface Definition. Macromedia’s Flex (a presentation server technology) uses MXML to “declaratively layout the user interface of Web applications” that utilize the popular Flash Player as their run-time. Microsoft’s upcoming XAML “enables you to create a UI without using code.” Mozilla’s XUL promises “cross platform applications with the same rich user interface and end user experience as native desktop application.” At least 20 other XML vocabularies exist or are being developed for specifying user interface designs.

So as interface design specifications become XML code, what is the impact on interface designers? Will our processes, deliverables, roles, or quality of output change substantially?

Perhaps most obviously, we may be coding more of our designs in mark-up. For Web application designers skilled in HTML programming this might not be much of a change. However, the utility of markup may extend to earlier in the design process. As an example, I still find it faster to work on low-fi wireframes in Illustrator (others rely on Visio) and visual (look and feel) designs in Photoshop (others use Fireworks) than to work through the entire design process in HTML & CSS. As more robust UI components are available in XML vocabularies (MXML provides DataGrid, Tree, TabNavigator, Accordion, Menu, and more), working in a single medium throughout the design process may be possible.

This could especially hold true for companies with a single extensive application or unified application suites. A single XML specification and formatting definition (style sheet) could be used to enforce interface and visual consistency and be shared between design and development teams to ensure the end product appears as designed.

“While the thought of designers coding their own work might initially sound daunting or perhaps unappealing, it will ultimately be a boon to the profession as designers will finally control the means of production related to their inventions.” –Bob Baxley

However high-level (for a screen or page) hierarchy, and as a result effective visual communication, is difficult to maintain in application designs when each component is styled individually and independently of its “final” context. A designer’s ability to employ visual contrast to build interaction narratives occasionally requires the ability to manipulate and not just place UI components. As a result, prioritization needs to be enabled in markup through component attributes.

Another potential shift may occur in design roles. Some groups in a design organization may be responsible for UI elements (XML tags and their corresponding output), patterns (semantic combinations of elements), or styles (that determine how UI elements are presented) that other groups utilize to design interactions and applications.