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)

Tag Lines to enhance User Experience

Launching a new product with a power punch Tag Line or Slogan to draw users in one go and leave an impression on them to remember it at the back of their mind for return visits is what every stake holder is looking at. It is of utmost importance for consumer driven websites where brand identity needs to be established amongst its users.

For UX designers such tag lines and slogans not just helps them to use nice typography but for user experience itself. They can creatively use such slogans and create a complete theme around it for a website or a poster and in fact a complete campaign can run around it.
All the elements used in a design can start to reciprocate to such slogans, starting from fonts, typography, graphics and language used in the content and so on. This results in a wholesome experience for the users where they start to associate every single aspect of brand in holistic way.

Enough said, how to create such a tag line then is what comes to a mind as sometimes in absence of content writers it is often looked upon the UX designers themselves to come up with some kind of creative punch :). I know this is a sensitive one whether designers be writing or no, I personally believe that only if you think you have decent writing skills(be honest with yourself), should you be taking a plunge in this unknown territory. Continuing, how to have a power punched, mesmerizing, forceful, self identified slogan a few points if taken into consideration can help you get there.

You can start by:

• Who are your customers?
• What are the benefits your customers getting from you?
• What kind of feeling and emotion you want to invoke in your users?
• What kind of reaction you are expecting from your users?
• What edge do you have above your customers?

Next step...
You can start to brainstorm your ideas after you have answers to questions above. Look out for tag lines from various companies, look for stuff in newspapers, advertisements, even copy on buses and auto rickshaws are inspiring some times. It might also be lying as a crushed feedback post from your old printer company in your dustbin. In short content is everywhere you look.

A little more brain rumbling...
Make a checklist of all the stuff you have gathered and sort out a few among them to proceed ahead. You can even have a whiteboard with all the slogans written and visit them one by one while comparing them with one another and erasing the ones you think are coming out weaker. this can be a solo or a group effort.

Almost there
Finally select the best tag line by taking opinions from people around you, your potential customers if you are in touch with them and even take survey on free survey sites. And there you are with your tag line to take your business/product forward.

Some examples of combining powerful slogans and cool UX are:
Nokia: Connecting people
Apple: Think Different
Nike: Just Do It
HP: Invent
Unilever: Adding Vitality to Life

These are some which just have stuck to my mind forever since the day I saw them and thought of jotting them down here for reference and again I am smiling thinking of those creative minds who did the above work for me to remember forever...