Why start with Information Architecture

Designers majorly face this problem or commit mistake of starting on web design based on some rough feedback on board or paper on even on skype given to them by their clients or managers.
Usually these are requirements which are in a designer's lap, for e.g. a small e-commerce portal for a clothing line with some products to show online for both men and women where users can browse, search and finally buy some product online. So next the client says we need a jazzy home page and one category page template and a template for about us and contact us and here we are done. E-commerce website design in 4 templates! Great the design gets ready in 2 weeks time after some minor iterations and the site goes live in the 3rd week.

After 6 months or an year, the same customer might even come back for a redesign saying things didn't work out. May be the design is not catchy enough to hold on to their customers. But actually there is no one to tell the client that it is the "GOALS" which their customers never achieved which they would have wanted to. Goals which could have only come out in foray if there was enough consideration on the "Information Architecture" of the entire website to enable users to reach to specific pages to achieve their GOAL on this clothing website i.e. buy same clothes online for which they had to travel 4 blocks.

The first step to fix this kind of situation would be to:

Educate your client
Explain it to your clients why it is so important to have an IA before you proceed towards the design itself. I try to convince people whom I work with by telling them how IA is the foundation of any website or an application. How it not only helps to create a solid site structure but also brings out user goals in highlight and also what navigational patterns should we try and use for these goals.

IA helps in keeping track of the project
IA usually starts along with requirement gathering so it keeps getting updated if the scope of the project gets updated and helps to keep a track of deadlines too. Great, it's a tracking tool too!

Meaningful use cases and site's goal
Once we have a IA in place various use cases based on the personas can be build around it. Definite navigation patterns can be identified thereby helping to bring out the actual purpose of the website. A sitemap can be prepared hereon and actual time/cost estimations can be derived which would be transparent to our clients and they know what they are paying for!

Effective use cases lead to accurate wireframes
Use cases based on a good IA helps in quick and error free wireframes and finally helps to jump in to the design more confidently and with meaningful information.

In the end clients are more positive since the cost and time efforts come out on a more transparent way to them and they too feel part of what s being created in a more convincing manner.

Importance of changing "Messaging" in social network websites to match the recent user trends

Social networking started on the concept of simply sharing what is up with in your life and be updated what is latest with your friends and family. Twitter and Facebook gave a full new meaning in short status messages to let know the world what is happening in your life in short one line messages. But then it was more about personal updates rather than real time collaboration among users. Even the Labels on twitter and facebook said: "What are you doing?" and "What's on your mind?". This might be interpreted by the user as: how you feels today or may be how was your day or may be it can sound a bit evasive and they might be prompt to think "none of your business" as it is a little personal. I believe in such scenarios messaging should be more participating where questions if they are more generic, users would hook on to fill or give out some information.
Recently twitter changed it's tag to "What's happening" which I think is even more inviting. Merely because it is very casual like "What's up!" I can think tons of things now to tweet simply as earlier tag was more like what's specifically happening with me and suddenly now it's like I am having a conversation on a tea with my friend saying hey did u read that! Did you know who played @ fBar last weekend! It's that SIMPLE and more encouraging now.
Even facebook gives you options of what are you going to share, is it a link or a photo or a video clearly elaborating their tag of what's on your mind!
That's the power of words although such a minimal change!

Another aspect to this is the change in user behavior. We as users want to know it all as to what is happening around and not through just TV or radio (simply because we have turned into internet slaves). Specially the new generation is hooked onto internet via all sorts of medium when they are not on their PC's or laptops. I came to know of Pranav Mistry's invention through one of my friend's status update. That in fact, was the real intent of twitter too when they launched where they had this broader vision of users sharing useful and tons of information between them rather than the family and friends exchanges.

We are taking this messaging aspect very seriously at hCentive while building our product.
We can definitely see the changing times in social networking going beyond just friendly exchanges towards efficient and vast information exchanges. Google wave is taking this collaboration to another level and I am getting all excited watching this!! Are you!

Is 3 Click rule becoming a hurdle?

UI designers are always under pressure to complete any work flow or reach any module of the application with in the three clicks. Yes, the famous three clicks which has been there to haunt us since the dark ages of internet when the WWW was not that wide enough.

From the day I took on UI design as a profession, this rule have been there to force me to put all my effort on focusing on getting all the information with in 3 steps or clicks. Even the business executives who never laid their hands on design don't fail to mention it and appear smarter. Well it does simplify users efforts and if normally users don't find what they are looking for in 3 steps they are most likely to leave your site in frustration. Well a variety of studies have been done on 3 click rule and of course it helps the designers to always be focused on user needs. However, there are certain tasks and scenarios where we are forced to ask users specific questions and they might be longer to reach to the final destination.

Now, the big question which arises is should we break the 3 Click rule? Should we not go by the book!

Effective Navigation while breaking 3 Click rule

In various usability studies it has been noticed that users don't mind reaching to a task in more than 3 clicks as long as they are not getting lost mid way and are intuitively aware were they are heading or guided to. It is when crowded navigation and when user begins to develop sense of no direction that they usually leave a website. One such study by Josh Porter flagged off an online debate when he published the results of his usability testing results Testing The Three-Click Rule.

Various navigation methods like breadcrumbs, tree navigation, global navigation through out and sitemap always tell users where they are, never ever letting them feel they are on their own. Prompting users with effective messaging on completion of sub tasks in between their quest for desired result keeps them motivated enough to carry on. I call it the water boy methodology which keeps the user fresh at every juncture and makes clicks easier for them to click on with sense of trust.

In the end I am not the 3 click rule hater but I do believe that it is also not the thumb rule for any work flow to be achieved, instead it is a good method to keep us alarmed all the time to show our useful information first hand. Some information do need simplified more break ups than to assemble them in 3 clicks.

Clean and Semantic Code comes to rescue of daily chaos

Most of us designers are today following nice code writing techniques since they have been more and more closely working with the engineering teams around the world. And these Dev junkies are so very much particular about the way they write their logic and always keep a track as how their fellow colleagues too are following code writing standards. Well it sounds very Monica(of friend's fame) type but then when you have some thousands lines of code being written and have 5 other team members working on it at the same time you gotta be a little more organized.

Similarly for designers, now it's not just about sitting back with pleasure at watching their design running on 5 different browsers immaculately. After all their final work needs to be integrated with the engineering team's effort too. And trust me my experience tells me that most of the developers are very fussy about integrating UI. Well it even becomes more irritating for them if a designer doesn't put relevant closing comments after tags and they just from their sheer guess and after matching the tags(a very tedious task in absence of a visual editor like dreamweaver) simply use Ctrl+c and Ctrl+v and keep checking in the browser if all is running well. If this doesn't solve the problem then the next step would be to call on the designer to confirm the closure of tags and finally an integration happens. Well this might not be the end as bugs still might happen but iterations have definitely increased.

Secondly if some standards are taken into consideration by the designers themselves they can not only reduce their page sizes and have their pages render fast but also reduce confusion for themselves and others while revisiting their own pages. Simple considerations like indentation for more visibility of nested tags, getting rid of extra tags and usage of templates across the website definitely helps a lot in daily chores of design and web production.

A nice post here shared by Ashish my hCentive colleague which speaks of these techniques in detail : http://www.webdesignerwall.com/tutorials/coding-clean-and-semantic-templates/ inspired me to share this. We are already taking care of these things and it is bringing good results from the very start. Go ahead my fellow creatives and feel like DEV FREAKS themselves :).

Creating 1 pixel transparent png image with outer glow shadow in CS4

I came across this weird problem in Adobe Photoshop CS4 today(I upgraded to CS4 just 1 month back) where I needed to convert a 450px width rounded box with outer glow shadow for a Sign Up box I am creating for our product. I didn't want to use any Java Script rounded corners for this quick beta release so it was as simple as have 3 images, one a top, a bottom with backgrounds and the middle one have a running repeat-y and thus serve my purpose. I needed a PNG because I had this beautiful graphic below these rounded box divs.
This is how it looked like:

So here I was quickly created top and bottom images, insert them quickly in my css and again back to CS4 to create this last image with 1 px height. Here is when I got this shocker to my disbelief that I am not able to create a image for my background to repeat @ 1px and if I do it any bigger than that there are breaks in HTML when I use repeat-y. I kept on scratching my head hurling abuses @ CS4 until it struck me that may be because of the filters I have applied to this layer the layer loses it's style when reduced to one pixel. So I remembered of this new feature called SMART OBJECTS in CS4 while going through it's demo and put on my detective hat to look into CS4's help content and was amazed. ADOBE has done it again for us designers in some way or the other.

Select the layer in the layer pane and right click on it to Convert To Smart Object or on the top menu use Layer > Smart Objects > Convert to Smart Object.
Now you can transform it (moving, scaling, warping, skewing, and so on) and it will maintain all of its original quality and resolution, even if you scale it down to 10 pixels tall and back up to 1000 pixels tall. The key is that a Smart Object contains the complete object information, and doesn’t actually rasterize it to a specific resolution until you output or flatten the Photoshop document.

As a wise man has said:
"Somewhere, some thing incredible is waiting to be known".
Dr. Carl Sagan (American Astronomer, Writer and Scientist, 1934-1996)