Forem: Amit Novick

The Ripple Effect

Amit Novick — Sat, 04 Jan 2020 20:52:49 +0000

Since I started learning about implementing animations for the Web, I've been keeping an eye out for interesting interactions that I come across.

A few weeks ago, I serendipitously found that my mouse clicks on some web app produced a sort of "gently reverberating" visual ripple.

It was a pleasant feeling. it gave me the impression that my click action had registered, and that I should expect something to occur next.

But from a practical perspective, it made me question just how much of a difference does it make for the user whether they get this effect after a click or just don't 🤔.

And then, the figurative rock sank into my lake of understanding, that there is a gap between how an "ideal" user interacts with our app in a product demo video, and how actual users interact with it. The reality is that users missclick. A lot. Do you ever try to click something but end up just missing the mark by a tiny bit? no? well maybe you're a special snowflake, but in any case, I've had that happen to me as a user plenty of times when I was tired, or had my mind somewhere else or just wasn't being precise enough.

Rationale

When a missclick happens, at best the user will promptly retry with another click, and not feel too bothered by it, but at worst, they'll feel frustrated and helpless 🙁. I've seen an awful lot of elderly people getting frustrated thinking that a program is stuck, when in fact, their click just barely grazed the perimeters of a button on their screen, without them realizing it. If you feel that this doesn't concern you and the app you're developing, then just know that this will hurt conversion rate, and will decrease user satisfaction.

Other nice properties of the effect worth mentioning:

✨ Subtle enough to not draw attention to itself
📱 Provides a sense of responsiveness on touchscreen devices on the Web where native haptics API is not available (because the effect traverses in circular shape, seemingly triggered by the circular surface of our finger touching it)
🌊 communicates which surface was interacted with, by spreading throughout it, and not overflowing onto a surrounding surface
🙋‍♀️🙋‍♂️ is already familiar to most users, thanks to Google's Material Design including it into the design system which guides the UI Toolkit powering billions of Android devices around the world. (in fact, it's built into Android's SDK)

Alright, that's fine and all, but if you're like me, and want to use it on the Web, then knowing that it comes out of the box in Android's SDK is no help. You want a re-creation of it to include in your Web app. So I dived in to figure out the necessary implementation details that make this possible on the Web.

Implementation

Turns out, it's fairly straightforward to implement with some fundamental CSS unders (with the usual caveats of anything that involves CSS)

Make sure that the button sets a relative position for its child (relative, absolute, fixed and sticky are all fine, but it can't be static)
Give the button a overflow: hidden;
Add a child, can be a psuedo-element or a DOM element, with position:absolute
Set the top and left of the child to the position obtained from the onclick event
Make the child circular with border-radius: 50%
Give the child some non-zero opacity and choose a background-color
Animate the child's transform with scale() after calculating the encompassing circle's diameter, simultaneously animating the child's opacity down to zero

The Ripple is suitable for anything that can be clicked, for example gallery cards:

Of course, Radio buttons and Checkboxes go well with it as well:

The steps are basically frameworkless, so if you're using something like Vue or Angular it should work the same.

Finally, it's worth mentioning that Material-UI, a popular React Web library implementing Material Design, offers the Ripple effect in its button components out of the box. So you can use Button, FAB, Radio or CheckBox components to get it as well.

This has been my first post on Web Animations. If you're like me, and always looking to level up your frontend skills, then stay tuned for my upcoming content where I will introduce some more concepts and techniques that will help you develop some great UI's!
Hope you liked it!
Thank you for reading 🙂

A Catalog of Your Files

Amit Novick — Sat, 31 Aug 2019 21:40:49 +0000

My life revolves around digital files. Every piece of data important to me is represented as a file on my computer:

📝 Notes that I take throughout the day
🧾 Invoices and periodic financial reports
🌐 A collection of website addresses
📚 A collection of (e)Books
🎵 A collection of audio files (Music, podcasts)

Files have become integral to my creative work and organizational capabilities, and I have amassed quite a lot of them by now.

But this post isn't about me specifically, since I'm certainly not the only person managing a lot of files. So if you have a substantial collection of files that are important to you on the computer, then this post is definitely for you!

The Problem I Had

As the volume of my files grew over time, I experimented with my computer's File-and-Folder management tools as possible solutions towards better organization of my always-growing collection.

My results have been the following: if you are interested in replicating an existing File-and-Folder system from your physical world, then the digital File-and-Folder tools (Windows File Explorer, Mac Finder) are probably the best you can get, since they represent physical objects (🖹 📁), only in digital format.

But for anyone like myself who wants to be completely digital, I argue that the File-and-Folder system is inferior in usability to a slightly different system which I will introduce in this post.

In the File-and-Folder system, the file is a unit of content, and the folder is the building block for making hierarchies of categories.

Putting a file in a folder is meant to signify: "this content belongs to this category". And since folders can be put inside other folders, this allows a more elaborate hierarchy of implications. Indeed, putting a folder inside another folder is meant to signify: "this narrow category is a part of that broader category".

This means that creating an association between a file and the folder hierarchy involves identifying a single suitable folder and inserting the file into it.

But what happens when there isn't a single suitable folder? what if we want the same file to be accessible via two different folders? 🤔 the File-and-Folder system forces us to choose between multiple equally horrible solutions:

Decide which folder makes the most sense and try to forget about the association with the other folder (👎 and be disappointed when you can't find this file under the neglected folder when you look for it later on)
Copy the file and put it under both folders (👎 the two files will go out of sync as soon as you make a modification to one of them)
Combine all the files of the first folder with all the files of the second folder (👎 and lose the fine-grained categorization the two folders provided)
Ponder your hierarchy structure for awhile and make a grand re-structuring so that Everything Makes Sense Again™️ with the new file in it.

To be fair, the last solution isn't totally horrible, as hierarchies often need to be re-structured in order to remain usable with the addition of new content. However, I found it to be too strict since it forced me to do the re-structuring upfront, which is inconvenient. My hypothesis on that is that our mental models of the hierarchy take time to adapt with each re-structuring that occurs, and so ideally we should delay it until our minds have fully wrapped around it.

My Solution

I propose to use a slightly different system than the File-and-Folder one.

Instead of the folder to file relationship being a one-to-many, this system offers a many-to-many relationship.

Left: traditional filesystem. Right: proposed system

From the image above, the diagram on the left is the traditional filesystem: files depend on the folder hierarchy, and can only connect to a single folder.

In contrast, the diagram on the right is my proposed hierarchy, where files are completely independent from the category hierarchy, and can connect to multiple categories (or none!).

In the physical world, this is impossible to achieve, since a file can only be contained inside a single parent folder at any given time, but computers 🤖 don't have to be restricted to what folders are like in the physical world, and can be programmed to deal with files that have multiple parent folders, or rather categories.

But I'm not here just to tell you that computers can work with this suggested system, but also that I have successfully implemented this system and use it every day for organizing my files.

I named this program Catalog because the idea is very much that each user is a cataloger and is given the power to classify his content by way of assigning categories to it.

Catalog is really easy to get started with, and users of File-and-Folder tools should find it intuitive to use. 👍 For example, Catalog has an interface for navigating the categories hierarchy which is strikingly similar to the interface you would already be using for navigating your folder hierarchy:

Catalog: navigating the categories hierarchy

In short, Catalog is an open-source software which I maintain in my spare time, and is available for users on all platforms: Windows, Mac and Linux. It is 100% free of charge and doesn't require registration. Catalog also doesn't require an internet connection which means that it will run on your computer no matter where you go.

I welcome you to give Catalog a try:

amitnovick / catalog

Catalog - a file manager application for Desktop

In library and information science, cataloging is the process of creating metadata representing information resources, such as books, sound recordings, moving images, etc.

-- WIkipedia, the Free Encyclopedia

Catalog is a free, open-source file manager application. It helps organize files on local drives by adding categories to files. Users get the same user interface to manage their files on different platforms. Catalog is compatible with Windows, Linux and Mac. The application requires neither internet connection, nor user's registration to run on desktop devices.

Downloads

Desktop application

Operating System	Download
Windows
macOS
Linux

Web Clipper browser extension

The Web Clipper browser extension is an optional companion to the Desktop application, It offers the ability to capture screenshots from websites for later reference.

Browser	Download
Firefox
Chrome

Motivation

Digital file organization using folders is inefficient due to limitations of the folder concept itself. Catalog offers an alternative way to organize files using…

View on GitHub

Please let me know if you have any issues by commenting below or even better: by opening an issue on GitHub.
I would also appreciate it if you ⭐️ or ❤️.
Thank you for reading!