Most projects are developed directly from the requirement specification. The drawback of this is that requirement specs are mostly words and sometimes they have diagrams and screenshots and sometimes they miss some elements or something is not explained clearly enough. But the most important issue is that these documents lack details, especially minute details which will affect development and will change the hours required to finish it.  

Like they say the devil is in the details, it comes as a shock sometime to clients and to developers, when client thinks this particular feature was explained in the requirement and when developer thinks this particular feature was not mentioned clearly enough to be considered. The more clear things are more better will be the result; clarity is the key to outstanding products, clarity in what each others want. And this where a wireframe comes in, like a blue print for a house, a wireframe is equally important to a website.

So what makes the wireframe different from the requirement specification?

A wireframe is almost similar to the website itself, where requirement document is a description with words and pictures. Wireframe is in HTML and is viewed in a browser. For example a wireframe for a registration form will contain an html page which has all the elements for the form. And the submit button will be clickable and on click it will specify the required actions and also take the user to the next page, just like the real site. Only difference will be that there is no database and no design, and no script of course.

So if it is a huge website and has a lot of forms, then it will be a good investment to spend time in creating a wireframe out of the requirement document. And when you create these wireframe you will notice most of the missing elements in the requirement since you start to think in the practical point of view in creating a site and with its details. Once these wireframes are created it can be handled to any designer or developer, even if a new developer has to start working on the project, he can see all the details in the wireframe and he does not have to go and see the communication made between the client and the previous developer. And it is easier for the designer because he can see all the elements while creating the inner pages. And it is easier for the developer because all the action is mentioned in the wireframe.

So how do you make this wireframe?

There are different tools to create these wireframes, some are free and some are paid. After trying couple of these tools I found Axure Pro to be the best among the lot. It has all the above mentioned abilities, it can create a mini website and you can call it a wireframe.

Read this article and others also on Jeffy’s blog.

The basic idea of Search Engine Optimization or in short SEO is to improve the volume and quality of the traffic to a website. And to achieve this there are few basic methods followed by SEO specialists and also by web developers. They are,

1. Keyword research
2. Content developing
3. Link building / Social Media
4. Analysis reports

Keyword research

This is basically the process of finding out the search terms people enter into search engine to find out particular information in the internet. For example if you are doing keyword research for a company which sells web development outsourcing services in India for German clients. Then you need to find out what your prospective clients type into Google or in any other search engine when they want to search for an outsourcing partner in India. And once you find these keywords then you can use them in your website content in the ideal way so that when people search for those words your website comes in the top ranking and which increases your chance of getting the attention of that prospect

Sounds interesting, but how do you find these words??? It’s not as tough as it sounds like; first you list out a few key words which you think is matching your service and then search for these keywords effectiveness in keywords tools. There are some paid keywords tools and also you can use Google ad words keywords tool. And also by using Google Insights for search will give you an idea of the effectiveness of the entered keyword which is the number of people searching for that word and their location and the results and also suggestions for other keywords. With this you can get an idea of the keywords you require and once you have the keywords then you can go to next step which is content developing. There are also so many sites and tool available in the web to do this, some are Quintura (http://www.quintura.com/) and wordtracker (http://freekeywords.wordtracker.com/).

Content developing

Content developing is basically developing the content for the website in such a way that the users who land in your site with the researched keywords get the information they were looking for. The idea is not to include the keywords repeatedly in your content. The idea is to provide information which the users expect to have and that will drive in good traffic and increase the site ranking.  And also the content should have a minimum number of 250 words and the keyword density should be average that is the total number of words and the occurrence of the keyword in the content.

Developer’s tips

URL, Title, Meta Tags and Meta Description

Second method is the technical side of content developing which is more relevant to developers. This can apply to different parts of the website starting from the website name. For example if you want to create a website to sell used mustang cars in Detroit then the ideal website name can be like www.used-mustang-detroit.com which has the most relevant keywords and also separated by a “-“. This will make sure that used mustang Detroit is read as three separate keywords and when someone searches for these keywords together this site has the highest chance of summing on top based on URL. And once the URL is set then the most important are the page title, Meta keywords and Meta description. All these three should be in relevance to the site content.

Heading and content

And the second thing after meta tags are the headings in the page content once you use the keywords in the headings tag like “<h1></h1>” it increases the site relevance. So it is ideal to have the keywords in the content and in the heading.

Images

When you are using images in the website, for example if there is a company logo then it is ideal to have the image name changed to the relevancy of the picture. For example if you have an image of a mustang car and then if you upload the image with name like “image123.jpg” and if you upload it with “ford-mustang.jpg” then the latter has higher chance of showing up in image search. And also it increases the site relevance if the image name and the content keywords match.

ALT tags

It is also ideal to add an ALT tag to an image so the crawler can read the alt tag and identify what the image is about. And if the image name and alt tag and the site content altogether speaks about the same topic then its boosts the page’s relevance to the top and increase the chance of showing up on top of the search engines.

Anchor tags

When you are using an anchor tag or a link in a web page it is ideal to have the keywords in there too. For example for an anchor tag which links to accessories for the car it would be best to do it like this <a href=”car-accessories.htm” title=”Car accessories”> rather than <a href=”page3.htm”>

Robots.txt

The robots.txt file is like the instruction guideline fort the robots or the crawlers or spiders or whatever you may call it. The basic idea is that each search engine has an algorithm which crawls each websites and web pages and creates an index for each website and when users search in the search engines this index is referred before the web pages are listed. The robot.txt file will communicate with the crawler and it can say to the crawler to omit some files or folders so that those pages will not be indexed and hence not be listed in the searches. But even if you don’t want to block users to any folder or file it is still better to create a blank robot.txt file and save it in the root folder of your web server and also in the folder which contains the index file, in case if both are not same.

So after you have done your keyword research and created a good website with relevant contents it’s your turn to give this site some publicity and one of the methods is link building.

Link Building

Link building is the process of having a link to your website in another website.  There are two kinds of link buildings, artificial and organic link building.

Artificial link building

This is the method of creating links to your website from other directories or sites by submitting your links to those directories. And if it is a website you can have a link exchange by asking the owner of that site to put your link in his site in return of the same from you. And to submit to directories there are online directories where you can submit your links for free and it is not so useful because most people will not search for online directories when they want to search for a website and instead they search a search engine like Google or yahoo. So in effect it is better to spend less time in artificial link building and spend more time in Organic link building

Organic link building

This is the method of creating good content and other people add a link to your site because they think the information in your web site or page is useful for the readers of their site. This is the ideal way of link building and this is done by creating good content. And also you can promote the information you have in your site by answering forums that relates to your specialization. So for example if you have a web development outsourcing company in India and want to get more clients from Europe then you can start a blog about it which will help to create awareness of your service and also helps to increase your credibility. Another step is to visit forums and answer to questions which relate to your services and leaving a link back to your site in the signature. Also having your website URL in your email signature will also help you to be promoted within your network.

Social media

Having your presence in social media sites will also boost your presence in the web tremendously. Different steps you can take are

Facebook / Twitter

With the large number of users in facebook you can boost your web presence by creating a facebook profile for your company and also create a fan page for your company. And most important thing is to keep the fan page and profile updated with content and activities. An interesting way is to organize events and polls in facebook about your industry of work which will keep users active in your group. And having a twitter account and posting about your blogs and activities can help you to be active among the web users.

Analysis

And after creating good content website and have spread the word around then the task is to analyze the performance. Google analytics is a free service offered by Google which will help users to study the performance of your website and content. Basically you can see how each content, page, image etc are performing with page view and by returning customers to your site. With Google analytics tools you can decide where the users come to your site from and which links users click to get to your website or page. And with the information provided you can change the content of your website or the links.

You can read this article also on Jeffy’s blog: http://francisjeffy.wordpress.com/2010/05/12/seo-for-beginners/

• Your product to sell
• Targeted audience
• Number of sales intended per day
• Amount of transaction included
• Your budget
• And most important of all the time you intent to spend on this

If you are a low budget beginner, but still need a very professional e-commerce site you can consider online tools like Shopify (http://www.shopify.com/). Sites like Shopify works like your Gmail account where you get a domain name for your e-shop and get a tool to manage design. And once site is up all the content and admin features can be managed from the site admin panel. And these features roughly cost around 100 USD per month..!!

The disadvantages of these online tools come when you need a feature and you find out it’s not offered. Then you prefer to go to a web company where they can either create a custom e-shop or customize Opensource packages. And the three things which you should consider when choosing an Opensource e-commerce package are

1. Foundation or the software
2. Design or visual simplicity
3. Flexibility and robustness in managing

Foundation or the software

This is the core of your e-commerce application. This can be developed from scratch using different frameworks, which will take more time and effort and also require re-creating already existing simple features like registration, CMS etc. This can be overcome with Opensource e-commerce packages.

Beauty of Open source and PHP

This is where PHP and Opensource come in. With the Opensource and free software gnu license a lot of companies create Opensource packages and distribute for free and with the ease of PHP language it is easy and less expensive to customize a Opensource package.

The basic factors to consider when choosing Opensource e-commerce software

• Availability of features: This defines the basic and advances features available in the package so that they don’t have to be custom programmed. Magento (http://www.magentocommerce.com/) which has around 50000 shops running on it has a good CMS with strong features.
• Flexibility: So what if you need an additional feature than the basic available feature, then you have the plugins or extensions which are developed by other programmers and available for free download. And if you still can’t find the feature you need then you can custom program it with the help of a programmer and that’s where a web development company comes in to your rescue.

Design or visual simplicity

Creating a user friendly design is a big factor in creating your e-commerce site especially if you are competing with other e-commerce site and if you are new. Then people tend to go existing competitors which they are familiar with. Using a User experience designer can help you to develop a good user friendly design. This basically means it takes the customer from product listing to payment smoothly!!!

Freedom to custom create templates

With Open source e-commerce packages you can custom create a template / design and integrate it to the e-commerce system. That is one of the flexibility of the Opensource packages, and one important thing to keep in mind is to design the elements in the structure of the e-commerce pattern. Even an entirely different structure is possible to integrate, but then you need an experience developer and designer for that particular package to do the integration.

Use of free templates

Another beauty of this Opensource package is the availability of free or paid templates. You can download free or purchase templates for most of the popular Opensource packages. Sites like Template monster can be of help (http://www.templatemonster.com/)

Flexibility and robustness in managing

And once your e-commerce application is launched, your work starts depending on how simple it is to manage your new e-shop. So choosing a flexible, simple and yet robust software makes a big difference in how much time you need to spend to manage your site.

Two important factors are products and payment. Ease of use in managing products, like adding new products and changing the availability of products should be easy to do. And also adding the images and video of the product are also easy in carts like Prestashop (http://www.prestashop.com/) and Magento (http://www.magentocommerce.com/). And the payment, managing of the payments and option to use different payment methods are a good advantage for your shop since it will help more payments done without hassles.

Some of the most used open source e-commerce applications are :

• Prestashop http://www.prestashop.com/
• Opencart http://www.opencart.com/
• Magento http://www.magentocommerce.com/
• Cube cart http://www.cubecart.com/

On April 12th Adobe launched a new version of Adobe Software -  Adobe Creative Suite 5 (CS5).

To celebrate the launch of the new range of Adobe products and technologies, Bridge has sponsored an Adobe Launch Event that took place on April 10th in Kochi, India. It gave programmers and designers the chance to learn from the creators what’s new and to socialize and interact with other experts in the industry.

According to the variant the new software package CS5 contains all or some of the programs: Photoshop, Illustrator, InDesign, Acrobate, Flash, Dreamweaver, Fireworks, Premiere, After Effects, Soundbooth, OnLoccation and Encore. Most improvements will be for Photoshop that celebrates it’s 20th birthday this year and also for Illustrator and InDesign.

Photoshop gets more intelligent

CS5 has more improvements for Photoshop than ever a version before. Image contents will be recognized better what enables difficult manipulations and retouching. In particular Adobe is proud of the function “Content Aware Fill” that makes it possible to remove any content from an image. This function even works when there is a high variation of colors and lights in the background. The extended version will even have some new tools to create and work on 3D graphics and 3D animations.

Moreover the new version of Photoshop offers a bunch of small improvements that were made according to user suggestions. For instance provides the tool to drop images now a raster in the golden ratio (for the image-composition the image will be separated horizontally and vertically in three parts by auxiliary lines) and images will be straighten automatically.

There was a time when we were writing user stories to describe requirements. I’d say they worked fairly well for us. But we don’t do this anymore.

We were using user stories as a technique which allowed us to describe bigger chunks of functionality. There was one bigger sub-project or module and it had more than 10 user stories attached (usually closer to 20) and a handful of non-functional requirements. During development we were often going through several stories at once as technical design didn’t map directly to the stories.  The stories were more of input to design session and a base for test cases than stand-alone bites of functionality.

Then we switched to Kanban. One of consequences was we reduced the size of average feature which was going to development. It no longer had 15 stories attached, but it wasn’t a single-story task either. If we were still writing user stories to each Minimal Marketable Feature we would probably have few of them. My guess is 2 or 3 most of the time.

At this level stories become pretty artificial. I mean if you think about 2 stories connected with one feature, i.e. administrator can configure this magic widget and user can use this magic widget to do, well, the magic, you can pretty much tell these stories intuitively in your head. Writing them down becomes overkill.

Besides that I think the often cited role of user stories which make usage scenarios completely clear is overrated. If you can talk with developers in language closer to the code, and functionality description is much closer to the code than telling user story, you’ll be better understood. The standard problem here was that functionality description wasn’t precise and it often became disconnected with usage scenarios.

The answer for this problem is: make features as small as possible (but only as small as they still does any difference). Small features are easy to define, easy to understand (even for a developer) and easy to chew. It is pretty hard to screw them.

There’s one more reason why I don’t consider user stories as a must-have. If you happened to create software which will be used by other developers or administrators at best, like some magic box with a lot of APIs and command line interface as the only UI, you should know what I’m talking about. If you write stories for this kind of software you end up with a bunch of “as a developer I want to call the magic function which does the magic” stories. Doesn’t API specification make more sense?

I don’t say user stories are bad. They aren’t. But they don’t add value all the time and in every situation. This is just another practice which should be used only as long as it does make sense in your specific situation.

(http://blog.brodzinski.com/)

Last year September Google released their newest innovation on the web: Google Wave. After a lot of media exposure they sent out the First 100.000 invites for their newest product. The two brothers Rasmussen, who also invented Google Maps, describes Google Wave as:  “How would e-mail look like if it was invented nowadays?”.

The answer of this question is an online real time communication platform which combines the power of e-mail, instant messaging, chat, wiki, social networks and project management. The browser based tool is still an early beta, but more and more people are starting to use it.

Google Wave operates completely in the browser and is using a lot of JavaScript and HTML5. It’s not strange that the older versions of Internet Explorer are not officially supported by Google. To experience Google Wave in full glory it’s best to use Google’s own browser: Chrome.

KEY FEATURES
Google Wave has a lot of innovative features that makes it a unique concept:

• Real-time
  All the communication in Google Wave is real-time. If a group members of a Wave is typing a message, the text will instantly show to all the other members character by character. You can see multiple people typing messages in the same wave. There is even  a robot available that will translate your message to any desired language as you type it (you have to add aunt-rosie@appspot.com to your wave).

• Open Source
  The code and platform specifications of Google Wave will be released under the  Open Source license. As you see Open Source Software is getting more and more mature this will definitely help the adoption of Google Wave. Businesses can host Google Wave on their own servers without  the fear that Google is scanning their messages. The API is also open to developers  so they may create their own Robots  and Gadgets.

• Wiki function
  All the content of a wave can be edited by everybody that has been given access to the wave. You can not only edit your own messages but you can even correct, append or delete messages of anybody within your wave. This is a powerful feature but the risk is that a wave with a lot of people can get a bit messy.

• Embed a Wave
  Just as you can embed a Google Map in your website, a Wave can also be embedded. By doing this you can add tons of functionality to your website. Imagine the following:
  • A customer service that uses a Wave to communicate real time to the customer
  • An E-Commerce Shop with a Wave embedded as a way for visitors to review and share  products
  • A forum where all the thread are replaced by Waves so forum members can communicate and share information with each other.
• Gadgets & Robots
  Gadgets adds functionality as a small piece of software inside a wave. Just as all the gadgets that are available at iGoogle or Netvibes, developers can build their own social gadgets for Google Wave. This can be anything from a simple Yes-No-Maybe gadget to a full blown video conferencing gadget.                                                                                                                                                                                             Robots are programmed conversation participants. They can access all the content of a Wave and can respond to updates by using certain content and bring it available outside a Wave. Just add tweety-wave@appspot.com to your Wave and all your messages will be posted on your Twitter account. It is even possible to write your own Robot that exports all the content of a Wave to your custom build CMS or website. An interesting list of 11 Wave Robots for the Enterprise can be found here. A very complete list of Robots and Gadgets can be found here
• Playback
  One of Wave’s most powerful features is its ability to replay the entire history of a wave. From the first moment of creation until its current state. Every time you click update a Wave, Google Wave saves a snapshot of the document state. That version of the wave appears as one frame in its playback. If a user is added to a Wave a bit later it is simple to get him up to speed. Instead of checking all your related email, it’s enough to just playback the wave  to have all the information that you need.

• Drag-and-drop Files
  In Google Wave users can drag files from the desktop right into the Wave. If the selected files are images, they will be shown as a photo slide show. Movies can be played back within the browser and documents can be shared easily. By adding this functionality Google Wave can be a great tool for a project management system. Companies can use Google Wave as their online platform for communication and file sharing.

Of course the above list of features is just a small part of everything that is possible. If you have some spare time I would advise you to watch the full introduction movie

CONCLUSION

After using Google Wave for a couple of months I believe that it can provide a more efficient and productive way to communicate. The fact that your communication stream is bundled together in a wave makes it  to a great tool for brainstorming, group writing, project management, chatting and a lot more.

Since the initial release back in May 2009 Google did a good job in building a steady growing community around Google Wave. The stream of visitors was building up towards the end of last year. But now it looks like people are losing some interest in the product as shown in the graph below:

Search volume for the term Google Wave in the past 12 month.

Google Wave is exciting and powerful indeed, but I have some doubts whether this tool will completely replace email or IM. Let’s be honest, both email and IM have been around for nearly as long as the internet exists. While it’s impossible to answer this question, I think that within one or two years more and more people will use Wave. Ultimately what I would love to see is that Google Wave and Gmail will merge into a new universal communication tool that will combine the best of both worlds. Until that moment I will continue to use both Google Wave and Email.

I just read an interesting article from Bob Larivee of AIIM (‘Requirements, we don’t need any requirements’ ) about the importance of requirements. He writes ‘Know where you want to go and how you want to work then address the technology and you will achieve higher levels of success.’

I find this a very good summary of the importance of requirements. We often get project requests in which a few written lines explain the needs of the customer. And each time I am wondering ‘what do I miss here and what should I ask the customer’. The biggest problem is that often the customer himself doesn’t know exactly what he needs. And if he does know, it is clear in his mind, but this clearness has to be communicated to us, the knowledge has to be transferred.

‘Know where you want to go’

This is where requirements should start: describe the context; describe the business context, the current situation and the scope of the project. And in most requirements I get to see, people forget to write about this. They simply start right away with their specific project needs and the underlying database. But the reader of such document won’t understand anything unless he is able to put it into the right context.

‘Know how you want to work’

Next to requirements, this is the single most important aspect of project success: clear knowledge + agreement on how to work. Often people prefer ‘tell me what it costs and just start working’. In a situation where a customer and a supplier have to start cooperating, the rules of the game have to be clear. There needs to be a clear mutual understanding of how the project will be developed, what is expected of each party, which phases will be pursued.

A project should be split up into clear phases. The first phase is always the functional requirements gathering phase. And for this phase, time should be assigned to the supplier in order to clear up everything. The second phase should define the technical structure, the systems that will be used, database structure. And only after this thorough preparation, the actual building phase is started.

The main problem is that in order for the supplier to come up with an estimate of the workload, phase 1 has to be completed (and in bigger projects also phase 2). But the customer usually just wants to know ‘what does it cost’ and isn’t ready to pay for the hours spent in phase 1. So phase 1 has to be limited in time, otherwise the supplier will invest too much time and money in making offers, which affects the project and the eventual quality.

In summary, ‘good requirements’, contain context (where we want to go), process (how we want to work) and a clear functional description of all the needs, supported by wireframes or screenshots. These ingredients give a project a fair start and greatly increase the chances of success.

In our series ‘inside perspective’, we describe the development process of Bridge in launching medium sized web projects. In this article our developer Aneesh describes his experience with Rentautobus.

The project Rentautobus is one of the best projects I have done. It’s a complex web application, built to automate the process of renting buses for trips. A team of two developers (including me), 1 analyst and 1 project manager were doing this project.

As in all complicated projects, we took sufficient time to analyze the requirements. The specifications document we received from the customer was large, but had a lot of questions and risks in it, which we tried to eliminate. We found that some links were missing in the documents provided by the client. At this point we decided to make a final specification document that connects all the broken links. Also we made a flow chart showing the basic flow of the site. This specification and flow chart were sent to the client and got it approved. These documents were the base of development. The analysis and documentation phase took some time but we knew that it would pay off later.

Waterfall or Agile?

We decided to follow the classical waterfall approach in this project. As we invested a lot of time in the analysis phase, we figured that we’d be able to grasp the complete project from the start.

Database design

Then comes the most important part, I should say, the database design.We succeeded in creating a normalized database. We used the Third normal form and Boyce Codd Normal Form (http://en.wikipedia.org/wiki/Database_normalization). The database diagram was made using “MySQL Workbench” (http://dev.mysql.com/workbench/). I was using this software for the first time and it was interesting to see how it generated the diagram with the foreign key relations drawn clearly.

The Development phase

The project was done using Zend framework. This helped us to  implement Object Oriented Programming concepts to the maximum and to maintain the MVC architecture. We worked hard to make a good foundation for the project, with the most suitable folder structure. The site has multi-language functionality with the option to add more languages. This functionality was the main thing we had to consider while designing the DB tables as well as the core classes.

As Bridge uses a strict coding standard to ensure high quality, we invested time to ensure that we both followed the standard and our project coordinator also thoroughly tested our code. This eventually helped us to reuse many functions without discussion.

The main tools/functions/classes used

JQuery is used in the entire site to make the interface look better. The simple animations give a very nice UI to the web site.

Zend PDF – Zend provides a powerful PDF generation class which helps to implement create custom PDFs dynamically. (http://framework.zend.com/manual/en/zend.pdf.html). It helped to save the development time.

Zend Router – Another major functionality of the site is to manage the URLs for SEO. This is implemented using Zend Router classes. The site administrator can decide what URL should be shown for each pages. (http://framework.zend.com/manual/en/zend.controller.router.html)

Web application Testing

We developed a substantial amount of test scenarios to ensure that the application is running smooth. Because it is a booking site, where the time span between the first step and the last step can be up to several weeks, the testing took a long time. Our project coordinator used the test scenarios thoroughly.

Changes from the requirement

As in all big projects, there are setbacks, which have to be solved. When the client started testing, he found that his current design for the home page which is the core part of the site is not very user friendly and he wanted to change it. It was the main request for change from the requirement. Here we had the advantage of having a strong database that is designed to suit this application. We had a new design for the home page but it didn’t affect too much on the coding part.

The development phase went really fast, though it was complicated. The results were achieved in our team of 2 developers, 1 analyst and 1 project manager. Our project manager in India is Dutch and this has greatly helped us to communicate effectively with our Dutch client. I believe that a model that includes a project manager speaking the same language as the customer works most effective in any offshore project.

The project Rentautobus is currently in the beta release phase. In a few weeks, we will post the project in our portfolio including a link to the live site.

Bridge helps companies from around the world with offshoring web development projects. We have a clear process for medium sized web projects with a focus on developing clear requirements before development. Big size projects are developed using an agile methodology or with a dedicated team managed directly by the customer.

I believe that web projects may in some respect be more complex to capture in clear requirements then a traditional software project. The challenge in software projects is to clearly specify the logical complexity. The challenge in web projects is to clearly specify rich interfaces + in more complex web applications, also the logic. I do agree with the author that there is a need for advanced wireframe tools that can help us develop complex web projects that start with clear specifications.
If anybody knows of a tool described in the article, I hope you will share it on our blog.

The text of the article:

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.

Source: http://www.infosysblogs.com