Designing for the New Age Web

I recently spoke in “National Conference on Web 2.0” held in Bangalore. The topic that I touched was about the challenges for designing for Web 2.0 products. Web 2.0 has essentially changed the way we now have to think about UI design. It has added a lot more to think about now in terms of designing. I’ll touch upon some of them in this article.

Web is changing

Web is changing; and why should we be surprised by the change? Even the environment of the users is changing. Their economic, social and cultural environment has changed; and we web has been one of the instruments of this change. Even the other technologies have brought in new needs for web products. The famous examples are – Flickr and You Tube; if there hadn’t been digital cameras = digital photography/video these won’t have been existed.

These new found needs are pushing the way we have to think about the next generation of products. What’s important to know for designers is to be able to see these upcoming ‘needs’ and track these changing environment of users.

Designing for Web 2.0

Looking at the changing trends and evolution of web technologies are pushing the limits to how we design on the web. The two important aspects that AJAX have changed are the –

• interaction design
• information design
• One critical aspect that has been added to the arsenal of the design is TIME.
  

A better control on time has brought in a whole new change in the way we have to think about Design. Now with power to control elements in time a whole new concept of animation comes to picture. And with animation comes Story. Story that can be used to effectively inform the user about the change in the state of the system.

Let’s look at this new design paradigm change:

• In-context Operations
• Animation / Story
• Continuity
• Multilayer of information
• Multitasking
  

In-Context Operations

Operations that needed another screen now can be done “in context”; user can be present in the state where s/he wants the operation is done.

Animation / Story

A good example of animation is from My Yahoo! When the user click on the ‘Close’ button the section blurs out and is removed. The lower block moves up.

These 2 set of animations – blurring + movement is what builds the story. The story saying “I have closed and now the place emptied by me is taken by another section”. In this case the user doesn’t actively participate but witnesses the change of state of the system. Now when you are implementing this the developer will ask how much time we should give for this to blur and the lower block to move. Then suddenly you realize that you are now dealing with “time”. This brings in a whole lot of thinking.

Continuity

What In Context features have brought are a lot of controls on the screen for a user. User can do multiple operations on the same screen. What it means is there are now multiple “trigger points”. Trigger points are objects/behaviors on screens that trigger operations like buttons, hover actions, roll over actions etc. Not the designs have to thoroughly understand the various states of the UI.

• What if the user starts an operation and clicks on some other trigger point mid way through the first operation?
• What are the dependencies of one operation to another?
• Will or how will the other trigger points change if one operation is done?
• How will they conflict with one and other? How to solve it?
• How will the one operation conclude and how the next one will appear? What should be the feedback?
  

Multilayer of information

Now with AJAX the same component/place holder/ information holder can be used to convey more information. The two basic ways of deign are –

• Either the additional information came in a different layer
• It can be animated - removing one and showing another after an interval of time.
  

Multitasking

New web technologies are allowing the designers to think about allowing user to do multiple tasks at the same time. The one famous example is the new Yahoo! Mail which allows the user to do multiple tasks at the same time through its Tab design.

What does it mean for designers/product managers?

This means that the “Degree of Freedom” to think about design has drastically increased. The new aspects have added a lot for designer to think before they find a solution. Also it means that now there is more probability to go wrong in design.

• So as the degree of freedom has increased there is more need to think about design in product development cycle.
• More is the need to conduct User Testing to make sure you are on the right track.
• Create new set of Web 2.0 patterns for designers.