Derrick Loo

September 28, 2024

Carousell chat selection interaction


Here's a quick study of carousell's chat selection interaction.

I see that the current trend is that we would hide the checkbox for the row items until you hover your cursor over it.

Below is Carousell's Inbox where the user chat with the seller. As you can see, there's a huge left padding on each row item by default.

How to select the row items to act upon them? Either by clicking on the selection icon on the right of the search icon, or by simply hovering on the checkbox icon that appears.

SCR-20240917-ewkp.png


Here's how it looks like when I click on the Selection icon: the checkboxes appear, with some elements changes on the page. There's a counter of selected chats, and 2 disabled buttons since none has been selected yet.
SCR-20240917-ewmd.png

The buttons and counter update when I start selecting the chats:
SCR-20240917-ewqo.png

#uxdesign #uidesign #uxuidesign #uxui #interactiondesign #uxuijournal #carousell #interaction

~ Sent with HEY ~

About Derrick Loo

Hey! I'm Derrick, a product designer at OmniHR who codes. I typically blog about design, business, cycling, and life in general. You can find me on X, Instagram, LinkedIn and at derrickloo.design. Thanks for coming by!!