Mobile swipe view with multiple gestures, what would be the best approach

Question

I have a bit of user experience issue for my mobile application.

One of the view is similar to the mobile app Tinder. The user can swipe items to the left and to the right to go to the next item. But in addition of that, the user can see more details about the item currently visible.

To see more details, the user would swipe the bottom of the item (where the description appears) to the top.

The problems I have:

• Now that the view is extended, the description can be scrolled. So the user cannot swipe down to collapse (except the very top part of the item, not enough space!), so for this reason I've added an X at the top of the view

• Now I feel like it's weird to open the view with a swipe, and close it with a button.

• I was also thinking to remove the swipe and only have a tap on the full item to extend it, keeping the X to close, but I like the swipe gesture though...

What do you think?

Thanks!

Answer 1

Swipe left or right options are for 'navigations' and 'more' actions. It sounds good for your requirement.

Swipe down option is not good to go option for the details.

Here is my solution

• better to go with Tap to open details
• keep the top image section with reduced size, make it fixed
• In this solution everything in one screen with less action
• User can relate the content with the image

refer the attached screenshot for more info.

Answer 2

Apps like Tinder use there gestures as part of their identity. Don't assume that users will necessarily understand "swipe right/left" unless it is made clear. Same goes for "swipe up/down".

If your swipe left/right gestures are made clear, through iconography or marketing, be sure that your swipe up/down gesture is also clearly identified. Likely your slogan is not "Swipe Right to Like, and Up for Details." (if so, I get 10%)

Use iconography for your swipe up/down. Multiple apps have a small handle that encourage users to explore actions, if not outright know their meaning through learning. For example, the iOS top & bottom drawers that can slide into view.

The down arrow is both a button, a press closes the drawer, and the a swipe down indicator. The drawer acknowledges both actions.

But don't hide the swipe up action. Show a similar icon indicating the up gesture. Allowing it to be a button too means users can do a press or a gesture.

To encourage user recognition that a gesture is possible when closing, don't extend the overlay all the way to the top of the screen. As with the iOS image above, have it appear as if floating on top of the content.

While many apps do require gestures, not forcing them is always best. A gesture can be a shortcut, but something to click always makes things more clear. Depending on your target users, a gesture might not be possible for some - making the press their primary touch point.

Answer 3

You can have "read more" at the end of your first screen for every items..

So users can swipe left, swipe right and click on "read more" to see full description for interested items..

Once user clicked, you can open new screen with fixed tob bar containing back button/ close button and title of items. The image and full description can be provided..

User can swipe down in that screen and also they can go back anytime since back button is fixed/available all time.

Answer 4

This implementation looks like what Google material design calls a Bottom Sheet.

I think the behaviour of it should be scrolled all the way, not swiped to bring it to top, as if the sheet had a padding top (or margin top depending on the scroll area) of more than half of the screen. Instead of making it go to the top (on swipe) and then let the scroll action happen, let the scroll all the way from the beginning.

To close it: scroll it down, include a close icon or (this will depend on your app) click the background image.