Button reaction depending on the x-coordinate

Question

I need to show some boring tables (some dates, some number and some text; no images) with a lot of boring details. Imagine your bank statement.

On mobile, I'll have to use multiple lines for each entry. Fortunately, this means that the entry is big enough to work as a button.

Unfortunately, I'd need two or three buttons per entry, for actions like

• show even more details (leading to a new page)
• mark as read
• a menu for everything else

Obviously, adding them would take up a lot of space (currently, the users can see about eight entries at once, which may be fine; adding buttons would reduce it to maybe a half).

So I'm thinking about making the entries react differently according to where they get touched, e.g.,

• left third ⇒ mark as read
• middle third ⇒ show menu
• right third ⇒ show more details

Obviously, the user will must some help the first time they use it.

• Is this a good idea?
• Are there already some well-known apps doing something similar?
• Is there a simple and compact way how to visually indicate this functionality?

Explanation

Imagine my entry looking like

          SOMETHING HERE                            22.30         
Lorem ipsum dolor sit amet, consectetur adipiscing  02.12.2019    
elit, sed do eiusmod tempor incididunt ut labore et               
dolore magna aliqua. Mollis aliquam ut porttitor    WOW!          

and three transparent buttons laid over it like

LLLLLLLLLLLLLLLLLLLLLMMMMMMMMMMMMMMMMMMMMMRRRRRRRRRRRRRRRRRRRRR    
LLLLLLLLLLLLLLLLLLLLLMMMMMMMMMMMMMMMMMMMMMRRRRRRRRRRRRRRRRRRRRR    
LLLLLLLLLLLLLLLLLLLLLMMMMMMMMMMMMMMMMMMMMMRRRRRRRRRRRRRRRRRRRRR    
LLLLLLLLLLLLLLLLLLLLLMMMMMMMMMMMMMMMMMMMMMRRRRRRRRRRRRRRRRRRRRR

Answer 1

This could work, but it will likely need additional affordances.

Be default, this does not have any discoverability: users won't know that three different actions are possible and may become confused they can't consistently trigger the desired result.

That said, if you used icons or labels to indicate available actions, there is no harm (and usually a tangible benefit) in making the clickable area larger than it appears to ease interactions.

Luckily, two of the three actions you've identified already map to common uses that are typically on the left or right side of the screen. More details is usually represented by an arrow on the right, and menus are commonly shown as a "hamburger" icon on the left. That leaves marking as read for the middle portion. (I would question if the user really wants to have to manually mark every single item, but that's a topic for a separate question.)

For example, in the mockup below, there are affordances to indicate that there are three possible actions the user can take, and the colored areas represent how large the interactive hot spots could be. These colors would not be shown to users and they may assume they have to tap the labels for the actions, but the increased space means any sloppy taps would still be successful. This should allow for good discoverability at the same time as fast efficient interactions.

Answer 2

Doing it like Gmail would work. Swipe left and right to uncover actions.

Answer 3

Nathan Rabe's answer is an improvement on your idea because it wouldn't work without an explanation.

But I'd suggest you another way (seen before on digg reader - unforunately discontinued)

Instead of uncovering the actions via swipe (Cristian Negraia's answer), you can trigger the actions directly.

Let's say:

• Swipe left -> Mark as read
• Swipe right -> Show menu

And for the missing action to display more details you can use the tap on the whole entry.

Of course in this case you also need a reference to the swipe functionality. This can be done with an icon left and right.

Rough sketch: