Improving User Experience - Part 2

Improving User Experience in 2 hours - Part II

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.