I’ve always been a big fan of UI responsiveness, and I believe it’s one of the indispensable features of a successful UI. I’m not talking about the lightning speed that Instagram has achieved, but that the UI should provide instantaneous feedback to every meaningful action the user performs – respond to him.

Hover effect is a good example of responsiveness. On this website, links turn orange when you move your mouse over them, assuring you that “you are pointing to the link, click ahead”.

Responsiveness is more crucial for user actions to which the handler would take some time to “return”. A UI does not have to be lightning fast (though it’s definitely good to be). In fact, the processing speed is sometimes out of the developers’ control, e.g. if remote API calls are involved. A user can wait, but the UI has to explicitly tell the user that “your request is being processed, please wait”. Otherwise, the user would wonder: did I really click the button? Should I keep waiting, or should I repeat the click? What is going on behind the screen? Put another way, the UI should be upfront about what it is doing, so that the user doesn’t have to guess.

Pocket over Readability

I prefer Pocket over Readability, because Pocket’s Chrome extension is more responsive than its competitor. When I press Ctrl+Shift+P (Pocket’s shortcut), it instantly pops up a banner that reads “Saving to Pocket”, and after a brief wait, the text changes to “Page saved”. When I hit Shift+` (Readability’s shortcut), however, I’ll have to wait several seconds before anything happens, which I find extremely annoying.

My Practices

I’ve been striving to offer best responsiveness in the UIs I build.

In Save2Drive, after user clicks “Save to Drive”, I first pop up a desktop notification that says “Saving link to Google Drive”:

Then I send the HTTP request. After the callback fires, it either changes to “Link saved to Google Drive”:

Or “Failed to save link to Google Drive”:

Renren Album Downloader is a bit more complicated. After the user asks to download an album, the extension will follow these steps, all with explicit real-time status update (UI update happens before the corresponding code runs):

1. Look for photo URLs in the HTML:

   

2. Fetch the photos:

   

3. Put everything into a zip:

   

4. Finally, tell user it’s done:

   

Rule of thumb: if you have the user waiting, tell him he’s waiting, and preferably tell him what he’s waiting for.