From the book — Microinteractions are contained product moments that revolve around a single use case. For example — setting an alarm, logging into your favourite website, etc.
Everyday, we interact with a lot of apps and websites — some of those interactions are good and some bad. I hope to write a post with 4 microinteractions every week.
This is the first in the series and today’s microinteractions are —
Microinteraction #1 — Close Multiple Tabs in Safari (iOS)
I discovered this gem only recently — long pressing the tabs icon on Safari in iOS reveals a menu with an option (among others) to close all the open tabs.
The trigger is the tabs icon which is located on the bottom right corner on the iPhone & on the top-right corner on the iPad. A single tap reveals a scrollable list of open tabs in the main part of the screen. However, when you press and hold the tabs icon, it reveals a menu with an option (among others) that reads “Close All x Tabs” where x is the number of tabs open. Since it is a close action, the text is in red.
Usually, actions need affordance but we do not have a visible one here. Closing All Tabs is not a common action on the page and is likely a power-user feature. Hiding the option underneath the related tab icon isn’t a problem. Showing the text in red is also a nice touch to highlight the dangers of losing the open tabs.
“Close All x Tabs” option shows up only when there are more than one tabs open. Otherwise, there are just three options in the menu.
The menu option is shown conditionally, thus avoiding confusion with the “Close this tab” when there is only on open tab.
When the “Close All x Tabs” is chosen, all the open tabs are closed. On the iPad, the tab bar — which contains the list of open tabs disappears revealing just an empty tab. However, on the iPhone, the only thing you see is the current tab being closed and it opens an empty tab.
A message indicating that all tabs have been closed would be a nice addition.
Loops & Modes
In the “Close All x Tabs” option, “x” is the number of the tabs open.
Showing the number of open tabs is very intuitive. This could be a quick way of knowing how many tabs you have open. The concept of “Bring the data forward” is put to good use here.