code

Building Klart's new chrome extension

Fredrik

Oct 13, 2016 • 4 min read

As I mentioned in earlier posts, traveling around Asia has made me aware of that everyone doesn't have super fast connections as we have in Sweden ¯\_(ツ)_/¯. Since I wanted Klart to work well everywhere I started by making image previews lightning fast. The next step was to create a better user experience with the chrome extension. That's the topic of this post.

Blocking UI 💩

What I didn't notice with the Klart extension while I was in Sweden was that the UI was blocking while uploading the screenshot. Blocking in this case meant that while uploading, the extension would show a loader. This loader would take up the whole space, not allowing the user to start entering tags instantly. Bad. But the thing is, I didn't even notice it before, because uploading the screenshot was so fast. Anyway, now I did, and I hated it.

![Old extension loading state]

The task

To create a better user experience two problems had to be solved:

How should submitted tags be handled?
What should the new extension look like?

As for (1), the old extension waits for the server to respond with the id for the snap saved. This id is then used to patch that snap with the tags. But how can this be handled if we don't have an id yet?

The main issues for (2) was how much information that should be showed to the user. Should we even care about showing a loader? Maybe we could just close it and send a push notification when all went well? Or when there was an error?

Let's start with (1).

Handling tags

My first idea was to create some kind of unique identifier for the snap based on content and timestamp. It would in practice be very unlikely to have conflicts, but in theory, there could be. With this protocol I would generate the identifier and pass it with both the upload of snapshot and the patch request with tags. On the server I would check whether there is a snap with that identifier in the database, in which case I would patch it. This would require me to change the API, not good.

The other idea I had was to provide a buffer for the extension to save tags in. When the request for snap upload was done, it would check this buffer and patch the snap if tags were submitted. The downside of this was that we would have to wait for the entire upload request before patching. But since it reduced complexity significantly, and doesn't rely on obscurity, I decided it was the best bet.

I'm not going to share code details here, but I'd be more than happy to if you have any questions 😊.

Design

As for the design. Giving users too much information is bad. Giving users too little information is also bad, because they don't know what's going on. For instance, if you don't say that something was saved, they might start to wonder, was it saved or not? On the other hand, providing too much information to the user could make them frustrated since they don't care about it.

For Klart, my first idea was to just close the box after a timeout interval, or after tag submission. I would then either show a notification when done, on error or both. Only showing a notification on error would give the user very little information about what's going on. Showing on both would work, but did I really want to bother users with push notifications?

I decided to give users the choice instead. If they don't want info, just close the window and the snap will be uploaded in the background. But it's not saved until it says so. When open, the window shows the progress of the request and notifies when it's done. Closing window -> no information. I picked this option because it's the one I liked the most. I think that's one of the biggest advantages of building something where you are the user. These decisions gets a lot easier.

Anyway, let's continue with the process of making it 😬.

Process

I started with browsing around looking for chrome extensions that I liked. I saved them all to Klart with a common hashtag. After enough research I started iterating, and eventually, I came up with some rough paper sketches

Sketches