3

I'm trying to give people a visual clue that they're able to scroll left and right inside of an app for the iPhone. I tried to show that you're able to scroll left and right by having a tiny part of the next screen displayed.

First UX screen

I then tried to go with a left and write button approach but that also seemed not to work. What's a good way to show people that they're able to scroll left and right.

UX screen 2

BDD
  • 3,052
  • 4
  • 23
  • 39
neils
  • 173
  • 1
  • 5
  • I assume that you tried to use design patterns that you have come across in other mobile apps? Do you have some idea why it doesn't work? The trick is that design patterns need to be applied in the context of the goals and tasks of the user, and in this case you need something that can create a connection between the current screen and the screens on either side that you can swipe to. Otherwise, if this is just a list that people can scroll through but you are asking them to swipe left or right then for some people the scroll up and down behaviour is more instinctive/intuitive on mobile. – Michael Lai Mar 24 '15 at 03:45
  • I have - the first one was Facebook esque. @MichaelLai is there a good way to show people that they could go down or is it instinctive by now? – neils Mar 24 '15 at 03:46
  • It also depends on the interactions that take place in previous screens (i.e. how you get to the invite screen) as well as what the behaviour is on similar types of data or screens in your app. Sometimes all it takes is a quick prompt/walkthrough when they first use the app and they will learn to adopt the behaviour. I am still interested in how you came to the conclusion that the previous two design strategies failed. – Michael Lai Mar 24 '15 at 03:58
  • @MichaelLai you get to the screen through a calendar screen. The first one didn't make sense to some people and the second one doesn't look very aesthetically appealing. Is there a way to show users without animations because I'd rather not and I prefer to have a solution that works every time someone uses the app – neils Mar 24 '15 at 05:07

2 Answers2

0

This accepted answer from a different question already gives different ways to handle this. Yet I am somehow inclined not to give a persistent visual indication of swipe actions.

Mobile devices are hard pressed for real estate. So people tend use as much space as possible to show what is relevant. Having a persistent indicator of swipe actions will take a significant portion away from you. This will also create an less efficient and probably unbalanced UI.

The design of any app is not subject to change very frequently. So when users learn about the ways of swiping, they will not be needing those indicators. So effectively you are using a persistent indicator for something which will not be needed after a few runs of the app. This can be avoided.

On the mobile devices, as you mentioned in a comment, it is instinctive to try swipe actions for most part. However, we can not take this for granted. Which means having a initial tutorial on first run which explains the swipe gesture can be an option. Also, keeping that tutorial in settings/help so that user can quickly see it again is also a good option.

Already the leading platforms like Android provide certain ways to indicate there is a menu on the left side. This might be hamburger menu of the three lines to the left of the title. These are animated when the menu is opened. This way is less visually obstructive while still providing affordance to a regular mobile app user. While left swipe opens the settings or menu for an app is fairly common, same can not be said for right swipe actions. This can best depicted using tutorial. Bottomline is, I would be wary of using a persistent indicator for showing it is swipe enabled.

enter image description here

This is mostly applicable when there is something always available on the left or right side of the application. If you have a use case where the a conditionally you either have something on panes towards left and right then it would be a bad design choice. Then our former approach would reduce reliability of the system. In such cases you can have a overlay indicators which help in tapping and / or swiping for next pane. Optionally you can have a thumbnail preview of entire stack. Something very commonly seen on image galleries.

enter image description here

Community
  • 1
Harshal
  • 3,105
  • 16
  • 23
  • The main problem with an animation is that there isn't always a card available, the cards represent invitations in my design and I don't want to confuse people. Would using a corresponding number of dots to cards viable work or would it be not noticeable or confusing? – neils Mar 24 '15 at 18:00
0

In this scenario to give a visual cue about the unseen screens

  1. Number of Dots as per the screen count
  2. A Horizontal scroll bar

can be displayed at the bottom of the screen. This gives the user a hint and also will be self explanatory about the swipe. Anyway to emphasize the content on the screen visibility/opacity of the Dots/Scroll can be increased only when the user is swiping.

Siva Kiran
  • 13
  • 5