Spark Side Menu Micro-Interactions Deconstruction

Designing an interface that people will use on a daily basis, or even multiple times a day throughout the week can be overwhelming for any UI designer. Depending on the business you're in or the number of newsletters you're subscribed to, you are probably dealing with your mail client app from 5 to ∞ times a day. Imagine the level of responsibility for a UI/UX designer when determining the various ways for users to interact with it. 

In this article, I will deconstruct the "open side menu" interaction and all those micro-interactions happening while the user is trying to navigate to the desired destination.

1. The scroll bar is immediately visible

When I tapped the Menu icon, the side menu opened. While opening, even before I scrolled or did any interaction, the scroll bar was visible, giving me the hint that there is some content under the visible area.

2. Settings link is locked to the bottom of the menu

When opening the side menu, except from expecting to find the navigation links there, in many cases you are also looking for some extra options to adjust your interface. Since there could be many e-mail accounts added, hence multiple links for any of them, Spark designers recognized the user need to have the Settings link always available and visible. They locked it on the bottom of the drawer.

3. Drop-down menus for accounts and folders have different behavior

I have identified two types of different behaviors of the drop-down menu:

• the first one is when the folder of a specific e-mail account is clicked. In that case movement of the drop-down is toward the bottom.
• the second one is when the account is clicked. In that case, the name of the e-mail account is going toward the top, so that all the folders inside of it can be visible, and not hidden. That way no additional scrolling is needed.

🙌 Fun little things if you deconstruct and analyze them. Great initiative from the Spark designers and front-end developers to recognize and implement useful micro-interactions important for frequent user actions.