The idea
Just like almost all of us, most my time through the day is spent online. Hopping between websites in search of inspirations, ideas, learning, API docs and what not. Even while working on my projects I am constantly connected to the internet. Mostly for seeking help on Stack Overflow and through API references if I ever get stuck (a lot).
I am a college student too. So, most of what I learn, for exams mostly is through youtube, wikipedia and other informative websites on the topic.
While concentrating on one of the above I tend to get kind of disconnected from the other. And since most of the time I am not doing the latter, except a day before the exams. It costs the grades. So, I thought to myself, if there could be a way to keep revising the important facts unobtrusively and effectively while I am online, then maybe my life would be a lot easier.
I began looking for existing solutions and discovered some, not many apps in the process. They didn’t quite work for me as I tested their unobtrusivity and effectiveness.
The only way left, was to scratch my own itch.
Exploring solutions
If it was to be something that lives in a browser, it had to be a chrome extension. A chrome new tab extension to be specific. A new tab always stands between your current page and the site you will visit next. And the job of throwing a fact at you to revise was to be done in that very brief moment. Sounds challenging? It actually was.
Starting out weird
I wanted not only to be able to add notes manually but to clip notes from websites too. That is to highlight some text that you find remembering worthy, right click and save. Chrome API makes this feature very easy to implement. I had it working in under 10 lines of code.
This was the time when Evernote rolled its new Web UI and I was kind of impressed by that. So I tried to follow the same design. Categorising notes into topics. Here are some screenshots of the mockups created with HTML, CSS and Sketch.
Fortunately it didn't take too long to realize what lousy of a solution this was. Not only did it look too heavy to be on a new tab page, categorising notes based on topic introduced its own problems.
If notes were not to be categorised all it took to clip text is highlight, right click and save. On adding categorisation it went to highlight, right click, hover and hold, choose topic (if no proper topic present, create one) and save. This difference is too large if you're in a state of flow.
This made me a little skeptical about categorising notes. But let us not make any decisions yet.
Trim, trim, trim …
It was very evident now that only thing that is supposed to be on the new tab page is a single note at a time. The challenge now was to place it in such a way that it quietly asks for attention and doesn't shout for it. Going the minimalistic way here is the first iteration…
When opening a new tab it is highly likely that your cursor is present at the top 1/4 th of the browser window. That’s the reason for placing the next button (which kind of looks like a play button) towards the top.
Though it seemed clean, more visual weight was on the name of the category than on the note itself. This Smashing magazine article talks in great detail about visual weight in UI design. Visual weight on elements acts like a guide that guides the user’s attention through your design.
A simple technique that I follow, inspired by the article is to separate the UI elements into pieces and give them a relative score out of 10 based on which of the elements you'd want the user to notice first, second and so on. Elements with greater score are made to pop out more or have more visual weight.
Redoing the visual weights, this came out as the end product. Now the actual note is much easier to notice.
A hybrid next button
Picking up random notes from the storage and pasting it in a new tab wasn't going to do it. What if you're shown the note you already remember again and again. And the note you haven't quite caught up with yet isn't shown much. That’d be a waste of the sole purpose of this extension.
I decided to implement an upvoting mechanism for the notes. Just like reddit or Hacker News has for the links that are posted to them. If you see a note you'd like to be shown again you simply upvote the note. More upvotes a note has more frequently it is shown.
Of course it isn't that simple, the age of note and some other factors come in play too. A bunch of mathy stuff you shouldn't care about.
I liked the look of the current extension with a single button at the top. Instead of adding a new button to upvote I tried to merge in the action with the next button. Clicking and holding on the next button rotates it by ninety degrees transforming it into an upvote button. Let go the click, and done. Upvoted!
As it turns out you can also morph the next button into a star. But marking something with a start feels more permanent than voting up so I let go on that idea.
Taking it on a test drive
It was finally time to test it out. I collected a couple of notes/facts that I’d like to get memorised and hacked together an alpha version of the extension. Used it for about three days and wasn't able to memorise a single note. It didn't work at all.
My brain wasn't getting stimulated enough to look at the note and read it through. Some notes ended up being quite long and attention span when you quickly want to open a new website is quite low.
It is quite depressing when you expect something to work like magic and it just doesn’t.
A new direction
Whenever I suffer from a permanent creative block, there are two last resorts I fall back to. The first one is a boiled down version of Google Design sprint. Second is Random Stimulation method as described in the book Lateral Thinking by Edward de Bono.
With Random Stimulation you can use any information whatsoever, no matter how unrelated it may be to generate new ideas and solutions. Beware though, its not a magic wand that'll shower you with ideas, it takes practice and works like a charm if you think hard enough.
The technique works by you first selecting random inputs. Random inputs can be words or images. For example selecting a random word out of a dictionary can act as a random input. And in the words of the man himself
Once you have chosen the word, list its attributions or associations with the word. Then apply each of the items on your list and see how it applies to the problem at hand. How does it work? Because the brain is a self-organising system, and very good at making connections. Almost any random word will stimulate ideas on the subject. (source : http://goo.gl/G5kiY2)
After a few of useless iterations of bouncy flashy animations, on a Monday morning I stumbled on the word ‘candle’.
What if the note is displayed with a couple of words hidden. The brain will try to fill in the spaces and that may lead to memorisation. Moreover this also meant the user has to read less number of words. It seemed like a good idea and I decided to go forward with it.
Only thing left was to present the note with a subtle animation. Not too loud nor too quiet. Enough to make the user notice it. A couple of iterations later..
It was necessary to replace the hidden words with underlines. As omission of two or more consecutive words can result in the user perceiving a long single word being omitted instead.
The extension doesn't work by hiding random words out of a note. It makes sure that common words like that, it, as, of, about e.t.c are not hidden. Also after trying out a couple different options, hiding 30% of the words seemed like the best choice moreover the same words of a note remain hidden every time it is viewed.
A bulb icon replaced the next button. Clicking on the bulb revealed the hidden words. This also helped get rid of the upvoting idea. More number of times you have revealed a particular note, more are the chances you don’t remember it yet. And hence more frequently that note is shown. Same algorithm, a more natural approach.
I have been using this extension for a while now and it works really well. It made coping up with mid semester examination easier. But nowadays I find it being a great companion with my everyday learning. For example currently I am learning JavaScript and this extension helps me remember the quirky imperfections of JavaScript.
After a couple of aesthetic changes, here is what the current version of extension is like. And yes, I gave up on categorising notes because of the reason metioned earlier.
One last question to tackle was what expression to show on our mascot ‘Little blub’s’ face once he runs all out of notes to show. He could be shown happy as you memorized and deleted all the notes. Or he could be shown sad as there is nothing more to show and wants you to add something.
Showing a cute happy face is not the best motivator to add new notes. Showing a sad one can be a little confusing in the sense that why you memorising all the notes makes the mascot sad. So I decided to add a blank stare at this face, it makes it look like his only sole purpose of existence is to pull out and show notes. And not finding any more notes makes him worried or afraid. He still looks cute though!
If you'd like to download the extension for yourself or participate in the final stages of development you can find it on github.
Thanks for reading
If you enjoyed reading this article It'll mean the world to me if you shared and recommended it.
You can reach out to me on Twitter @NashVail with questions, comments, suggestions, feedbacks whatsoever
