2

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
  • 1
    I don't understand the question somehow and if you can provide another illustration showing kind of same but a different manner (like you want 3 buttons in a row but example shows 1 button in a row) would make more sense I suppose. – Erhan Yaşar Dec 2 '19 at 11:41
  • 1
    @ErhanYaşar Does my explation help? – maaartinus Dec 2 '19 at 11:59
  • With both the help of answer below I could just understand it but not have a solution about it. I totally understand different thing to offer a solution before visualizing though. – Erhan Yaşar Dec 2 '19 at 12:11
2

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.

Mockup of card showing a colored overlay where three interactions could occur.

| improve this answer | |
  • This makes sense. Concerning "discoverability: users won't know that three different actions": On the first click, there will be a dialog explaining that. I hope, I'll be able to use this schema in many places, so that the user will profit from it a lot get used to it fast. Concerning "manually mark every single item": It was just an example. – maaartinus Dec 6 '19 at 3:18
4

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

enter image description here

| improve this answer | |
  • For iOS this is implemented with UISwipeActionsComfigurator. More information – Barnyard Dec 2 '19 at 14:31
  • 1
    I've just tried my idea and found it much faster than swiping (and also somehow simpler... you have to remember two actions, but these are the two you need most; and you get them with a single touch). For those who don't care to remember, the menu contains everything including these two actions. Maybe that's just me. – maaartinus Dec 2 '19 at 17:36
  • 2
    You might need to test it out. My example is on the safer side of usability but yours could be working aswell. – Cristian Negraia Dec 2 '19 at 17:56
2
+50

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:

visualization of my suggestion

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.