Zoho CRM User Experience & Interaction Design Blog

Mozhi - Prakash Raj’s recovery attempt for the box-office failure by his Guru - KB. Today’s blind date featured Mozhi, directed by Radhamohan. It is a love story between a normal guy and a girl who cannot speak or hear. Music becomes the bridge to convey the love in this movie. I am not a movie reviewer and I know very well, that If I write reviews for movies.. it would become a disaster. So lions like Prasad and others will write a decent review.
The first half goes in a peppy swing.. mostly fun and enthu like the 6 lane bangalore highway. Second half resembles the adambakkam roads.. bumpy and emotional. Jo as usual the best.. no dialogues. Purely facial emotions. And yeah, she looks like Jo 2.0 of Kushi movie. The new hero (who is that guy?) has promising talent and could make a round as a non-action hero. Prakash raj has done a good job without his over-act. Sornakka too has done her part very well.

Vidhyasagar is the music director. Vidhyasagar where are you in the movie?

At one point of time… I feared I might start crying .. not because of the movie, but because of the highly-intellectual, over-enthu person who was sitting behind me. When 179 members were seriously trying to laugh… this person was screaming “hahahahahah” spilling the popcorn. And when the whole crowd was serious.. that person became soo emotional and cried “oh my god”. Thaanga mudiyala !

Mozhi - Oru vaati paakalaam!

- Dharma

Flash Memory storage is now gaining more attention than ever. With today’s announcement that one R&D firm had devised a technology to manufacture memory ICs that could hold upto 100GB, has strengthened the fact that Hard Disks gonna face stiff competition.

Naturally flash memories has more advantages than hard disk drives. They are light weight, consume less power and are more faster!. The disadvantages being the cost of production and vulnerability to magnetism and data-loss due to physical drops. Probably hi-capacity flash based memory drives could become cheaper in coming days. And there could be some protective mecchanisms to prevent data loss.
Hard disks on the other hand, have some major disadvantages like excessive heat, heavy and consume more power than flash drives. The advantages being low chances of data-loss, and refined manufacturing process and less cost.

As said, the days are not far. Soon desktops would have Flash Drives installed in place of Hard disks.

- Rajesh Sundaram

Let’s face it. This is the question you need to answer when you start searching for a girl. No matter which race you belong to.. which geography you are in, this is the key. Besides the outer looks, whether she is working or not, whether she is post-graduate or not, whether she belongs to good family or not.. there are certain fundamental elements you need to look for. That list of elements is almost endless.. and to start with, here some of them : caring, understanding, adjustable, loving, fun-loving etc etc.

I still couldnt compose a right answer, for I know no person is perfect! no-one has perfectly matching qualities. I know not all my expectations would be met. Not all she expect would be met by me. Such a funny world.

Am confused!

- Rajesh Sundaram

As everyone knows, a web server or application server works on the fundamental principle of Request-Response technology. You send a ‘Request’ and the Server sends a ‘Response’ back. In today’s world, a web server or any web-based server receives uncountable requests. The server, by technical limitations can effectively handle the requests upto certain level. Beyond that, it cannot maintain the efficiency and that is where latency occurs.

When latency/delay occurs, the time taken to respond will slow down, causing a bad experience. So how do you overcome this issue? There are some effective ways where you can host your application across a group of servers commonly known as Server Farms. Install a Load-Balancer device and it will take care of sending the requests to servers which are serving minium requests at that particular time. This is done purely at hardware level. And yes, as the demand grows, the Farm has to be increased in capacity and additional hardware should be installed.  On the other side this will increase the cost of the infrastructure.

There are certain techniques using which you can manage the number of requests effectively. In a web application scenario, you can carefully code the client such that it sends out minimum number of requests to the server and gets the complete data.  Consider a scenario where you host a web page that links to 4 external javascript libraries and some 20+ images. Your Apache or IIS server may take upto some 0.2 msec or less to serve the data to the browser. Now think of a web page that links to nearly 12 libraries and some 50+ images. It may take upto 0.3 or 0.4 (just a reference time and not actuals anyway) msecs. Now if the web page is accessed by hundreds of users, then the timescale would multiply several folds.. leading to a performance drop.

Solution:

The solution is, reduce the server requests from the client side. Merge all your javascript files into one single file. Merge all your style sheets into one single file. Merge all your images into one single image. Did I say merge image? Yep! Merge all images. Means, pack all your images in a single JPG or GIF file. The technique is now very popular with online applications and many CSS and web architects suggests this technique to be followed. With the support for CSS standards in major browsers and broadband penetrating visible geography, it is quite easy to incorporate the above technique.

Open Photoshop, and open all your images. Now create a new large, vertically long empty image. Move all your images into this empty image and position them one-below-another. Note down the width and height of each image and their starting XY coordinates. Then change the code in your client pages (HTML / PHP or JSP or whatever). In the placce of IMG tag, replace IMG with DIV. Assign an ID for each such DIVs. In the stylesheet, specify the ID and declare the properties like height, width and use the background-image property to show the relevant image.  This technique is used widely now and this dramatically reduces the server requests.

This technique, when applied over an existing template might require substantial amount of re-code. But anyway, at the end of the day, your web / app performance improves to a great extent!

- Rajesh Sundaram

After the hair cut at Green Trends, I entered my home and sat on the chair. Switched on my computer.. checked my mails and started downloading Pachaikili Muthusaram movie songs. The only thing good about the movie is the songs and music. When the download was in progress, my eyes rested upon “The Deceiver” the novel by Frederic Frosyth.. which I have lend from the library a few days before.

I felt hungry then.. and decided to finish my breakfast. Took some uppma in the plate and sat down. Opened the novel and started eating. The story is about Sam McCready a 51 year old British field agent who is about to given a early retirement by his seniors. He plans to arrange for a hearing with the help of his junior associate. The hearing covers 4 of McCready notable achievements, which are narrated by the master story teller in his own way. I was indulged so much that I didnt notice that the time was 12.10 then! Washed my hand and found the downloads have completed. Launched winamp, created a playlist with the new songs.. and my recent downloads of Game Soundtracks. Started playing it.. and I rested on the bed reading the novel.

The soundtracks were playing in the background.. and they added some dramatic feeling to the novel’s peppy plot. Damn Forsyth! You are sooo good! It was around 3.15 when I felt hungry again. Didn;t prefer to go out. So searched the refridgerator and found two Nestle Milk Chocolates. Took them out.. and started reading the novel.. slowly muching the chocolates. Then around 5.30, I felt my eyes became soar. So I decided to take a break. Prepared a hot and sweet black coffee with my favorite Dark Forest coffee powder. Enjoyed the coffee in the balcony for the next 10 minutes.. sipping the coffee and the pleasing evening wind.

Took the novel in hand again.. and this time some Trance music sort of tracks were being played.. and by 8.40 I finished the 3rd sub-story. Took a deep breath.. and my god! I realized that I didnt bath till then. Hahah.. By 9.30 I had bath.. and locked my home and went out to have dinner. But still.. the Deceiver was occcupying my mind. So, bought the food and returned home and started reading the fourth plot of the “Deceiver”.  It was around 11.05 the power went off. Being known to the fact that power restoration is not guarenteed.. I locked home, and drove to office dorm. Found the bunkers empty. Switched on the fans and started sleeping.

Morning, I returned home.. took bath and started reading the novel from where I left. There was power.. but then again it went out around 10am. Still a few more pages. I read them quickly.. and wow! It was 11.30 when I finsihed the book.  Phew!

Frederic Forsyth is called “The Master Storyteller”. No wonder!

- Rajesh Sundaram

In Part 1, the User Interface of Code Cleaner was analysed . It is found that the UI has poor layout design and the information were not delivered in a way such that it makes some clear sense.

Now, let us list out the information we have in hand.

1. Size of the page in bytes
2. Optimized size of the page (code cleaned) in bytes
3. % of file size saved/reduced
4. # of bytes saved / reduced
5. Link to download the optimized/cleaned code.
6. Preview of the cleaned webpage
7. Summar of the clean up

So we have 7 information in hand. Let us try to design a better UI with this information.

Approach.
To start, think of what a user might expect from such a code-cleaning software. As a user, possibly If I use such a software, I will expect to see the analysis of the current page in terms of file size, how much does it takes to download. Next, I would look for the optimized file size and the split up of how much bytes removed, (in % too) and how much download secs can be saved.

Right now, the Code cleaner does not have the time calculator. So we will ignore the time calculator. Other than the time calculator, Code cleaner has all other information ready.

So to design the UI, let us start with a dashboard approach, which will show the size of the URL(page), Optimized file size (after code clean), and bytes saved (with %) in the dashboard.

Below the dashboard, the summary can be shown. And below the Summary, the preview of optimized page ccan be shown. As the preview mostly shows the webpage again, there is nothing much usefulness in showing the preview on the top. Preview gets the least priority and so, it is shown below summary.

We will introduce a link in the dashboard to download the optimized file. Also the preview will feature a download link to its top-right portion. Thus the user can download the optimized file either from the Dashboard or the Preview.

Here is the improved UI. (click to enlarge)

Conclusion:
The new User Interface allows the user grasp the vital information (whats the optimized file size and % of savings) within one shot. Also the summary gives the list of all changes made to the optimized file.

Extending the UI further:
There is always room for further improvement in any UI. Code Cleaner’s new UI is no exception. Consider the proposed new User Interface as the first iteration. The second iteration could yield a much better interface, where you can provide more information like ‘Number of unnecessary tags found, Number of commented lines, number of additional white spaces” etc inside the dashboard itself. This way the dashboard offers more clarity.

This is my attempt to improve a web application’s user experience in just under 2 hours. So you are given a task to improve the user experience of a web application. So how will you do it? Let us start with picking up a web application. For this task, let us pick up the website, RankQuest.com. They offer a dozen online SEO tools and some nice SEO articles. They do blog and manage to gain some good amount of traffic too. One of their tool, the Code cleaner is our target now. We will take the question-answer model to discuss our task.

What does Code Cleaner do?
Code Cleaner takes up a webpage, examines the HTML code (note: only the HTML code) and removes the unwanted tags, comments etc. The result of such an action is reduced file size.

How does Code Cleaner interacts with user?
The Code Cleaner requires the URL or the path to a local file. Once the URL/path is given it retrieves the contents, analyzes them and strip out unwanted tags and gives you the result.

What are the information shown as result?
The result is usually a preview of ‘trimmed’ html code.

Additional information shown are

1. Page size reduced by : xx bytes
2. Page size reduced by : xx %
3. Original page size : xx bytes
4. Optimized page size : xx bytes

A link to download the optimized code is available. Also a short summary of what has been done is also given below. Refer the image attached below to understand the results. I used my own website URL to check the tool.

Drawbacks in the current User Interface
The UI follows a cluttered layout. There is no clear text or information which can be interpretted as ‘Result’. The font sizes do not vary. The Summary which is an essential information is shown in the bottom of the page. The %of bytes saved are not shown prominently. It takes more time to understand the pattern of information displayed.

Concluding, we can say.. there are information shown as results.. but they are poorly organized. The information architecture needs to be tweaked and the categorization of information needs a huge improvement.

..contd in Part 2

Here is the screenshot of Secondlife’s splash screen.

Am really impressed by Maruti Suzuki’s follow up calls. Every week I receive a phone call from Maruti Udyog, checking the status of my new car enquiry. Till now there was 3 follow-ups, and during the 2nd one, I asked for a price quote and immediately the next day, chennai ABT Maruti contacted me.

Really impressed by the speed of service and quality. It’s good that Maruti is monitoring the whole process under its hood. No wonder Maruti scored customer satisfaction awards consequtively for 7 years!

I am happy with Maruti Suzuki! (atleast till now).

-Rajesh Sundaram

There was an internal contest running around for some weeks. The goal is to design a Widget (Based on Yahoo! Widget Engine and Apple Widget Engine). Around some 10 participants (mostly UI designers in adventnet) have participated. And we are waiting for the results.

Oh yeah, the prize is nothing but the iPod (possibly Nano i guess). Ian is evaluating the designs and will announce the winner this week. Here is what I designed for the widget.

My Idea is the widget should be like a file-explorer that helps the user to explore the files created and maintained in Zoho Writer, Sheet and Show. And the objective is to see who owns the file, who has access to edit the files (sharing), the status of files, one-click download links for PDF, DOC, ZIP etc. Thats the scope of my widget idea. I didn’t go too deep, designing a crowded UI filled with too many controls, options and functionalities. It just covers the essential operations, a user might wish to use. For the full blown access, eventually the user has to open a browser and access the service.

Here is the screenshot.

This is how the Widget would look like, after logging in :

- Rajesh Sundaram