5

I'm helping a friend revamp a voting application.

During vote creation we would like to let the user remove a proposition by sliding it to the left (rows 3 to 5 in the preview below).

Update

I might have be more precise about the fact it's a mobile app without authentication, which mean we keep no track of user. So, if a user revisit we don't want to block him with a tutorial he already saw (which is something that become annoying after a few times)

Question

How would you hint that interaction?

vote de valeur UI

3

Show a one-time tutorial that explains such features, and provide an option to have it re-displayed if the user wishes. You may want to make it interactive, e.g. have this for one of its screens:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

After swiping away, the tutorial ends (or goes to another screen, if you have more things to explain).

With the growing list of apps that use this feature, this might soon not be needed to explain, since users will get used to swiping items.

|improve this answer|||||
  • I might have be more precise about the fact it's a mobile app without authentification, which mean we keep no track of user. So, if a user revisit it'll have to see the tutorial each time and that going to be really annoying after a few times – Édouard Lopez Dec 18 '14 at 10:48
  • Do you mean it's a website or a standalone app? If it's the latter, I don't see why you couldn't toggle a simple variable like tutorialCompleted and store it in app's cache. – fri Dec 18 '14 at 10:59
  • it's a web apps, user can use on desptop, mobile, at work/home, etc. – Édouard Lopez Dec 18 '14 at 12:26
  • Then use cookies, that's a perfect use for them. – fri Dec 18 '14 at 17:28
2

So here is what we designed

  1. simply suggest there is something more by adding partially visible trash bin.
    • want to see more? Well, move the row.
  2. it will reveal the trash, and maybe some slighty visible text (e.g. "slide to remove")
  3. once you went all the way to the left, it will show on undo button/link for a few seconds

Pros

It has a simple regression on desktop if you prevent the row to overlap the trash button/link.

Cons

Open to comments.

enter image description here

|improve this answer|||||
  • This is a great idea. People are quick to recognize incomplete objects (Gestalt Law of Closure), and users will likely want to explore whatever is obstructing the full view of the trash can icon. – Phillip Quintero Aug 17 '15 at 17:33
1

I've seen apps include an affordance for sliding UI by using animations. When the page loads, some or all of the slideable elements move off-screen, maybe by 10% of the screen width, revealing underneath an indication of the action that sliding will achieve, before snapping back into place. If it is subtle and quick, it should not be too annoying that it happens every time, but you may want to validate that with testing.

Also, make sure to style slideable elements consistently with one another, and keep to other affordances of interactivity, such as text styles, shadows, etc. If it looks like they should touch it, they will!!

|improve this answer|||||
0

I'm not sure that "sliding" give a good user experience.

This "system" exist on my Galaxy S3 (for a contact, sliding left for a message, sliding right for a call) and if a hint wasn't displayed on my first usage, I never guess this feature!

IMHO, you should prefer a light grey cross (or garbage, or whatever you want) on the right of the rows.

If you still want to propose the sliding experience, I haven't any idea except a tip box.

|improve this answer|||||
  • minikeb mailbox, inbox, tinder, ... all use slide interaction – Guillaume Vincent Dec 18 '14 at 10:36
  • @MiniKeb using a button will probably require a dialog to ensure the user didn't click by mistake, whereas sliding intrinsically possess this validation (tap+hold+move) – Édouard Lopez Dec 18 '14 at 10:41

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.