Sun.com Customer Experience and Stuff: Notes from the Sun.com customer experience team.

Here's something innovative that our team came up with recently: A way to combine the convenience of and simplicity of wireframes with the code-rich advantages of HTML mockups.

In case you don't know, wireframes are schematic versions of web pages that we in the web world use to develop designs quickly. (For an in-depth explanation, see my previous posting Tigger, Pooh and Judy Jetson meet Wireframes & IA.) 

Among the advantage of wireframes over regular HTML mockups are that (1) they are quick to produce, with the right tools, (2) they focus on content, labels  and structure rather than the visuals, thereby avoiding the visual distraction during executive reviews, (3) the document format allows for lots of annotations and background information if needed, and (4) they are easy to share since all the pages are bundled up in a document. (See the end of this post for a few disadvantages.)

Here is a wireframe version (left) of the Corporate Responsibility section we recently launched, along with the final live design (right):



You can see that even though there was some cleanup in the final live design, the wireframe captured the basic structure of the page early on. That's what wireframes are good at.

But the drawback to wireframes is that usually, once they're approved, you have to manually transfer the ideas into HTML code.  That's painful and error prone, and we decided to automate things. 

See that little pink mark next to each of the components on the page close-up below? That's a link to the the appropriate component code from our Web Design Center:



Yep, when when you click on the pink mark in Acrobat, it opens up the appropriate component code, which is great for publishers or application developers, who can work directly from a finished and approved wireframe. Use Adobe Acrobat to open up our full wireframe of the Corporate Responsibility area and you will see how it works. (Note that the links don't work in programs like "Preview," so Acrobat is your best bet.)


Here's the interesting thing from a creation standpoint: These wireframes, with their interactive linkages, are very quick to put together, since we have created components in Adobe InDesign that mirror all of our HTML components in our design system. When our information architects or agencies need to put a new page together, they drag in the appropriate components and voilà they have a page. And when the page gets generated as a PDF, InDeisgn creates the linkages to the HTML components automatically.

Our chief information architect Jennifer Bohmbach and designer Andrew Payne came up with idea and developed it with our vendor 8Shapes. Jennifer and others uses these tools every day, and I hope will post more detail about it.

P.S. There are some times when wireframes don't make as much sense or are a waste of time. If you are developing a fair number of brand new components for a project, especially if they are interactive, it makes sense to do the mockups in full HTML so that people can understand how the new components will work together on the pages. On a recent commerce project that included popups and AJAX components, we did everything direct to HTML and it was very effective since everyone involved could play with the mockups and see how they worked. And, for highly interactive experiences, many design groups are using Flash to do initial prototyping. But, for many pages on your site, wireframes are a tried and true tool and will be around for some years to come.

- Martin Hardee

Technorati Tags: Design Web-Design

Tunes: Sara McLachlan: I Will Remember You