During a panel discussion at the UPA Boston miniconference on Wednesday — humorously dubbed by Chauncey Wilson as “Cranky Geeks Complain About the Field” — the audience was encouraged to voice their own concerns about user-centered design for consideration by the three panelists. One comment that stirred up some discussion was a desire for art to be a more central part of our work. (It is “design,” after all, the thinking goes.) Thoughts of iPhones and Michael Graves-inspired housewares, no doubt, were swimming through everyone’s mind, but I got a little uncomfortable. After a lot of reading, and an increasing amount of contact with other practitioners, I’ve come up with a decent mental model of what an interaction designer/user experience engineer ought to do, and art, while important for the end product, isn’t central. Neither for that matter is technology… or business.

In fact, that’s the whole point.

At another session, I was impressed with the term “mastery of materials,” borrowed almost certainly from the industrial design world. The designer doesn’t manufacture widgets, doesn’t dictate the business requirements, doesn’t use the paintbrush. He does, however, have intimate knowledge of what to expect from each building block available to him — whether it’s CSS, textiles, AJAX, extruded plastic, or a glowing screen. Mastery of materials.

The interaction designer need not learn the gritty details of PHP, Ruby, or JSF to know what heights a web application can reach, and he need not have an MFA to know how beautiful a pixel-perfect mockup can be when crafted by a graphic designer. (He certainly needs to know when to involve those specialists in his process.)

In the middle of management, programmers, artists, and marketers lives the interaction designer, pulling in requirements, limitations, possibilities, ideas, and criticism to generate an actionable vision for the implementation of a product.

At the end of the day, 99% of user experience work does not result in jaw-dropping, award-winning artistic masterpieces. It’s ecommerce checkout systems that don’t suck, or group collaboration tools that smoothly integrate with the rest of your life, or cell phone text message input that’s easy to use on the run. There’s a huge need for this bread and butter user-centered design. I’m decidedly not an artist, and I’m certainly not discouraged by that.

Below, find a link to download my revision of Niklas Wolkert’s “sketchy” Visio prototyping shapes that are included in Henrik Olsen’s GUUUI Web Prototyping Tool. These shapes have made mocking up a web UI much easier, and the hand-drawn style makes it very clear to stakeholders that “this is not yet working software.” My typographical and usability improvements include:

• Got rid of heinous Comic Sans typeface. I use Calibri except in the form elements, which use Consolas.
• Changed text spacing on all text block items. Almost every text element has zero spacing, so it can be placed more precisely.
• Made left margin consistent between check boxes and radio buttons.
• Made “edit text” the default double-click behavior. Original shapes did not have consistent behavior, requiring first a single-click, and then a click of the “Text Tool” button.
• Improved “empty box” shape. Sometimes I like to use the empty box shape as a textarea, so I gave it some default text font/spacing settings to accomodate.
• Added the Grid Column shape. I may be running afoul of some sort of license, but I copied the “Grid Column” shape from the “Common Controls” stencil; it helps for mocking up tables. Unfortunately, it’s not “sketchy,” but I made the fonts consistent.

Download Updated Sketch GUI Shapes (zip of Visio 2007 .vss)

I was fortunate to find Jesse James Garrett’s article, “A visual vocabulary for describing information architecture and interaction design,” on his website yesterday. Flowcharting is not a skill I’ve been privileged to learn formally, and I’ve been hesitant to get into it for fear of doing it wrong, since I assume there actually is a right way to draw a flow chart. Garrett, thankfully, has published his approach to a simple, IA/IxD-specific design diagram which can serve as a basis for all other design tasks:

The trouble is that the detail each audience requires differs vastly from the detail required by others, and the bulk of this detail is irrelevant to the needs of other audiences. The sensible approach is to limit the detail in the diagram to that which can be usefully applied by all audiences. The diagram thereby serves as a touchstone document for the development of more detailed documents specific to the needs of each audience.

The article gets high marks for including inline examples, full-featured downloadable examples, and shape libraries in a dozen formats. I’ve already successfully migrated my latest flow map to his format, and along the way, tweaked the Visio stencil to be more in line with my style:

• Calibri typeface, rather than Verdana (it’s narrower and a bit more refined)
• Connector labels that cover the line (the Visio default), with a white text-box background
• Improved text spacing in the File Stack shape
• Improved text spacing in the area shapes

Updated IA/IxD Diagramming Stencil

I can’t wait for an opportunity to use this commercial theme from Quommunication: News. It’s probably one of the cleanest, most air-tight WordPress themes I’ve come across. True to its name, News is for magazine-style sites, so it might be a long wait.

I had never been completely comfortable with the previous theme I set up for abbett.org, even though I had modified it extensively, so upon discovering a list of “minimalist” WordPress themes last week, I started trying new looks. I’m still not settled on a new theme, and I’m discovering that many of the simple-looking themes out there are just disasters of code: capellini nests of PHP and CSS, hidden by delicate facades of sans-serif typography. Used out of the box, they look pretty good, but a lesser man could easily be broken by even basic attempts at customization.

I don’t doubt that there are a few standards-compliant, easy-to-modify themes somewhere that match careful visual design with elegant code, but I haven’t stumbled across them yet. (I also haven’t done a scientifically exhaustive search.)

But I’m really trying to get at a larger point: RSS represents the failure of HTML. HTML should be more than sufficient to convey the written word, but it has become loaded with cross-browser hacks, meaningless DIVs, navigational elements built of lists and headers with no semantic value, etc. One can rarely view the source of a web page and get an understanding of how the page’s content is organized. Skinnable blogs, while a boon to the Internet at large, are a major contributor to this problem.

Meanwhile, RSS succeeds, proliferates even, because it is simple, it is structured, and it is consistent; it is the essence of content, perfect for man or machine. Forget the blogs themselves; just take the content and run… to Google Reader, to Live Bookmarks, to Thunderbird.

But I have one lingering problem– I hate using RSS readers. They take the life out of syndicated content. Just as there’s something special about the tactile experience of reading a newspaper, about the smell of newsprint, about relaxing on the couch with that week’s New Yorker — a well-designed blog offers more than just text. Logging on to ruhlman.com and stevesilver.net everyday (rather than seeing a list of headlines on Facebook) has a similar distinction to picking up that fresh magazine.

What’s needed, in my mind, is a return to the web’s roots: strict separation of content from presentation — along with excellent content (spell-check, proofread) and excellent presentation (typography, typography, typography). RSS won’t be as necessary once the source data itself is interpretable, and simpler HTML, I presume, will make for simpler WordPress themes, and simpler customization.

(But don’t look at my source code just yet!)