Does the raging ‘information explosion’ baffle you? Unravel the Enterprise Information Management (EIM) treasury for an assured return on information with a competitive advantage.

« Discovery - How important is this phase | Main | Hey, my website is on TV!! (By Ritesh Radhakrishnan) »

The Ancient Art of Wireframing

Website Wireframes have been always been an essential tool for capturing user interface requirements. They have been very effective in ideating, discussing and capturing the UI requirements for a new website. They have been an essential mode of communication for web designers to express their designs to clients and developers alike.  But over the last few years, the rules of the game have changed threatening to make the art of wireframing obsolete.

What are website wireframes?

Wireframes are simple line drawings which aide visual design. They represent the layout of various pages and relationship between them. They are the fist step in visualizing a new website and are drawn before the artwork is done. Once Wireframes have been finalized post discussions with the client, the web designers fill in the colors and artwork to complete the UI specifications for the website.

So what has changed?

The last few years have seen a new wave of website, popularly referred to as Rich Internet Applications. These websites mimic desktop applications more and more closely and have capabilities to deliver a much richer user experience than the traditional websites through usage of various technologies like Flex, DHTM Toolkits and AJAX. The user experience of these websites can no longer be expressed using simple line diagrams or artwork. Some of these features are animations, transitions and partial page refreshes. Wireframes fall short when it comes to capturing these aspects of the new websites.

An example is a fly-out menu. A fly-out menu has many more information points to be captured than merely how it looks or where it appears. It is important to capture the speed at which it animates, the transition while it appears, how it animates upon various events like mouse over or mouse out, when it disappears and how it should transition while disappearing. These aspects today are usually captured as notes on the wireframes or more often decided only after a prototype is built. But these aspects of UI design are as core to the user experience as are the placement of content and appearance. The speed of transition could change a cool feature into a visually disturbing blotch on your website.

Did you say agile?

Am sure most of you have heard of “agile methodologies” and some of you lucky ones out there would have even worked on “agile” projects. To me, the basic tenets of agile methodology is to build iteratively, while maintaining the connect with your client all along. What better methodology would fit a User Experience design project, which relies heavily on client feedback? But User Experience design has been painstakingly slow and costly because of the long cycle time involved from Wireframing to Artwork design to prototyping before the users can actually experience the final product. It has brought about the question, is wireframing really worth the money?

Time for a new standard?

Firstly, It is quite obvious in my belief that the current UI methods and tools are unfit for capturing and building the rich user experience of the websites of tomorrow. Secondly, there is no standard path to convert a Rich UI design into a working prototype automatically. The need of the hour is to be able to cut down the time from wireframing to prototyping for a rich web site.

In my opinion, this calls for a new standard for RIA UI wireframes Standard. The new standard for UI wireframes needs to define the following aspects of UI design

  1. Core components of a UI design, e.g. simple content areas to rich widgets like an accordion, carousel, fly-out, and animation.
  2. Core parameters defining the behavioral aspects of every UI component e.g. animation speed, direction, rotation, transition, partial page refresh, drag-able or drop-able etc.
  3. Events on each component e.g. onClick, onMouseOver, onMouseOut etc.
  4. Relationships between different components e.g. when one rotates, the other component should slide.

This standard could also be extended to capture non-functional aspects like accessibility support, performance and response times and low vs hign bandwidth behaviour.

What are the advantages?

Here are a few advantages of defining a wireframes standard I could think of :

  1. A new standard will help capture and communicate UI designs for Rich website more effectively, without any miscommunication. 
  2. Tools could be developed based on the standard to quickly build wireframes by dragging, dropping and configuring UI components from a palette, like HTML design tools do today.
  3. Ability to generate code directly from the UI design in the language of choice e.g. Flex or Javascript.
  4. Advanced tools could help generate a UI prototype along with the wireframe enabling the clients to preview all aspects of the new UI design.

The Web 2.0 way

In the future, a standard understood by everyone could also allow collaborative development of UI designs by putting a UI design tool on the web for users to create their own version through simple drag and drop and configuration. The best UI version could emerge by considering the most popular settings for each information point, e.g. the animation time selected by most users could be the most visually pleasing. This could mean a whole new wave for Rich applications which would really live upto their claim of being user friendly.

About The Author - Ritesh Radhakrishnan

Technical Architect – Systems Integration, Infosys Technologies

Ritesh is a Technical Architect with the Systems Integration Practice of Infosys and his primary are of focus is the portal, content management and collaboration space. He has extensive experience in architecting complex B2E and B2C portals with a mix of technologies like Content Management, search, Identity & access management, EAI and BPM. His also anchors the SI RIA Center of Excellence.

Comments

Good thought! Something that I saw in one of the client engagements. There is this visualization product from a company calle iRise. This tool can be used to simulate UI designs. What we used to do with a style guide, mock HTML etc - this tool gives you the ability to mock up the application using the mock HTMLs. This is something that can help in the RIA world as well. Of course, this tool also helps us simulate the functional aspects as well.

This article was immensely informative as well as interesting. RIA is surely going to rule the cyberworld in the coming years as its demand has grown exponentially.

Ritesh you have really, very well articulated the problems in the existing process of Wireframe and UI designs. I do agree that it is the need of the hour to set and define standards for these wireframe designs as I have seen the trends that now a days during wireframe design new business/functional requirements are getting generated.
I feel it will be even better if the portal product vendors itself provide some utility to create mock up and use that as it will cut down the time and cost of transferring wireframes or mockups into portal pages and navigation designs and even we have seen that some of the leading product vendors in portal space like IBM started giving Theme Customizer and Web 2.0 features with which we can speed up the development but indeed there is need to have more work/ tools in this space.

I attended a Adobe event yesterday where they previewed something called Adobe Flash Catalyst. It seems to be pretty close to the concept presented in the blog. But it works only with Adobe Photoshop® and Adobe Illustrator® as design tools and Adobe Flash Builder™ 4 as a development tool.

There is still room for a more open standard which gives the freedom of choice to designers and developers to use the tools they are comfortable with and also enable cross-compatibility.

Nice article. Microsoft Expression Blend, release 3.0 incorporates a tool called Sketch Flow which is a step in the direction. Sketch Flow has rich prototyping as well as collaboration capabilities built into it.

As to the need-for-speed aspects of protoyping, I hope that this releases more time for conceptual design of the solution, rather than time-to-delivery shrinkage.

This is interesting. Another aspect I would like to add is the web 2.0 instruction to create big buttons like amazon. It seems the web is getting more than 100% perfection ratio.

Hi Ritesh,
I read your article with great interest! I think that you have set out in a clear way how the internet 'community' can move towards more structure and professionalism by developing tools to clearly define requirements.

I believe that even though websites look more 'easy' or 'simple' then a software application, in reality it may even be more complex, especially with the arrival of web 2.0. As there are many more rich elements in any interface, it becomes more complex to capture requirements then in a software project.

Wouldn't it be an idea that Infosys (or you in particular) starts an initiative to develop a tool that you describe as an open source project? We use Axure at the moment, but it does have some of the shortcomings you describe. maybe if Infosys takes the lead, we'll be able to develop a more advanced tool in a group and make it available to the internet community.

Do get in touch with me if you like to discuss the idea.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Please key in the two words you see in the box to validate your identity as an authentic user and reduce spam.