4

I have a web app. On one of the screens I have a grouped list similar to the iPhone address book for example :

enter image description here

Imagine I can tap on Steve Becker and his name changes to Steve Acker. His item will move from the B list to the A list.

Are there any best practices around this type of item movement?

The problem I can foresee is this; if I moving "Jeff Zed" to "Jeff Add" the item will disappear from the viewport. The A item is then inserted way above the viewport off screen. Functionally it's done its job, Jeff's item moved from the Z group to the A group. But the insertion of the A item would cause the viewport to jolt down as much as the height of the new item that was inserted. A nasty UI experience.

I could just adjust the scroll position to cancel out the new item.

Are there any apps you know of that have achieved this behaviour in a pleasing way?

Improve this question
1

1 Answer 1

Reset to default
3

I don't actually think you've a big problem here.

You have a list of items that goes beyond the viewport. An action towards the end of the list pushes it above. But so what? You don't need to move down any items in the current view; you just increase the number of items above the viewport and move items up from below with gradual animation. You might perhaps provide a subtle indication that the item has been added above rather than deleted - perhaps an arrow or a small signifier at the top of the list, styled to indicate its kinship with the item you just selected - but that doesn't mean shifting any elements downwards. You can have your arrow or sign appear on top of another item, or in the margins of the list.

Now, if your item is at the bottom of the list, that's slightly different. You will have a gap at the bottom of the list, and you may need an animated transition to pull items downwards. But users have taken an action; they expect the list to move and alter in response. Actions are only jarring if they're unexpected - otherwise, they're responses, and responsiveness is good.

Improve this answer
1
  • Great answer thanks, think I needed some informed reassurance and advice. I'm going to have the item detach and zip upwards (or downwards) to its new position. Great point about the difference between unexepected actions and responses - I have more to learn about UX than I thought :)
    – Gareth Elms
    Commented Mar 10, 2012 at 10:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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