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
- Core components of a UI design, e.g. simple content areas to rich widgets like an accordion, carousel, fly-out, and animation.
- 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.
- Events on each component e.g. onClick, onMouseOver, onMouseOut etc.
- 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 :
- A new standard will help capture and communicate UI designs for Rich website more effectively, without any miscommunication.
- 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.
- Ability to generate code directly from the UI design in the language of choice e.g. Flex or Javascript.
- 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.
