The idea
Internet is overflowing with information on anything you need. But when you go online you stand on a thin ridge with task at hand on one side and time chewing activities on the other. And somehow the gravity is more powerful over on the other side. It’s easy to get pulled into aimless scrolling on facebook or twitter or watching cat videos, they never get old, do they? And quite often I found myself doing the same, I somehow needed to put a check on how I spent my time online.
Recently I signed up for the DevIdeas newsletter, with all the time wastage control thing in my head I receive their second newsletter on a Saturday evening. One of the ideas in that newsletter is shown below.
Something like this would have totally worked for me. If I could find out the exact amount of time that I waste online, then maybe I will be able to control my habits. But in my knowledge nothing like this existed yet, and so, I decided to work on the idea.
Beginning
The original idea suggests to show amount of time spent on certain sites on that day, month and the year. Though it sounds nice, in my opinion it holds more of a cosmetic value than working towards helping us in achieving the goal. I decided to deviate away a little from the path the idea follows, and show the time collectively spent on twitter, facebook and google plus on just that day.
A while ago I read this book called The Shape of design, one of the brilliant advice from the book that stuck with me and have always found its usefulness is when you venture on a project, initially, think of the worst possible way to tackle it. The idea being that each iteration after the initial step will definitely be an improvement over the previous, because there is no conceivable way you can come up with anything worst. In my case it was to display time spent on certain websites.
Exploring
From the very beginning I knew I wanted the background to be white. No decorations, mountains and bold colors. I have used several of other new-tab extensions, and they end up adding huge amount of visual weight to a simple new-tab page. This kills the very simplistic approach chrome follows.
After going through a couple of design iterations (some of them shown above) I settled with the one below, it seemed simple and direct.
Though I had to struggle a bit with Chrome API, development part of this version was relatively simple. I got it working in about an hour. As soon as it was done I sent it out to Arjun, the awesome guy behind the Dev Ideas newsletter for his thoughts on it. And he has been kind enough to provide his invaluable feedbacks and suggestions throughout the project. One of which was to allow people to add the sites that they'd like to be tracked. It seemed like a logical thing to do, if I was to ever ship it I can't expect people to be wasting their time online just on social networking sites. Moreover there are other websites that I think can save quiet a lot of time by not visiting them as often.
Adding and editing choices
On installation would be the perfect time to ask for the sites people wished to be tracked. Following are the design iteration that this part of the project went through. Leftmost being the final one. The settings panel pops in from the left in a “sidebaresque” fashion to allow editing of choices.
For the extension to work the provided input are only supposed to be the domain names of the websites. To get this message through to the user, I left the first few fields pre filled and amazingly enough, that did the job. The extension at that moment also allowed editing of choices, which I found myself misusing. Call me weak, but each time the timer crossed my self decided limit for that day, I would simply get rid of the website from the list. I had to come up with a way of locking the choices to avoid such business.
Limiting and Locking
I was using the extension daily as I was building it. Along the process it went through a couple of additions and changes, like adding of quotes for “motivation”, new icons and one more key feature which we will be discussing later. Since we are on with choices let us be done with that first. As apparent from the images above I decided to limit the number of choices that the user will be allowed to enter to five. As limiting the number of choices leads to careful picking rather than impetuous filling.
How and when to allow users to lock their choices was one of the difficult part of the whole design process. You can read my question here on ux.stackexchange.com which explains the situation better. It received some interesting answers but none I found satisfactory . Finally I decided to leave it up to the user as to when they felt it was necessary to lock the choices they have selected.
Adding the graph
The most important and final feature added to the extension was the activity graph. The activity graph provided a visual history of time wasted online, each day added a new bar to the graph. The more time you waste, the taller the bar for that day would be. Its easier to improve when you can see right in front of your eyes how you’ve been doing. The idea was simple, on the very first day you browse the web as you normally would. This added the very first bar in the graph. Which acts as a benchmark, a limit you’re not supposed to cross. With each passing day you try to keep the bar for that day shorter than one from the day before.
I have been using the final version for almost 7 days now and managed to cut about 10 minutes off of my daily time wastage.
So there it is, an exploration of a little thing that I built for myself. The extension is not available in the Chrome WebStore and probably will never be. Be sure to recommend and share the article if you enjoyed reading. You can hit me up on twitter @NashVail.
Thanks for reading.
P.S : You can now download the extension via github.
