1

Scenario: I have a tile based UI on screen. Each tile is of same height and width. The screen acts similarly to feed. New content is added into feed. User can scroll vertically to view next set of tiles (Next set of tile load in lazy loading manner). User's own tiles are also displayed in the feed. User can edit, delete his/her tiles from feed.

Problem: Currently, If user deletes his/her tile, the tile gets removed from his/her feed. All the next tiles move one position up. However this causes lot of movement on the feed. check below image.

enter image description here

arrows displayed in above image are the current movement of tiles after deletion

What should be the expected behavior when a tile is removed? Here user can be on any page of feed. Is there any specific convention, protocol or pattern that should be followed in tile based UI? What is the right way to achieve this with optimal user experience

P.s. Currently I am looking at following options:

  1. Grey out the tile until next refresh
  2. Refresh the feed forcefully (this will bring the user to top of the feed)
  3. Keep the same behavior I am open any other option.
  • Do you want users to have an option of undo the delete? if they delete the feed or accidentally deleted it? – NB4 Jun 1 '17 at 12:16
  • There is a confirmation prompt before removing a tile from feed. – Aditya Durgude Jun 1 '17 at 12:49
3

I'd go for option one based on the Nielsen Norman Group guidelines for homepage usability.

When users reload or refresh your homepage, changes can be jarring. Try to keep the transition as smooth as possible and maintain continuity with their previous experience of your page. Don't automatically refresh the homepage to push updates to users. Automatic reloading feels intrusive — it's like pulling the rug out from under your users, particularly if they are using a part of the page that disappears or changes position during the refresh.

Source: 113 Design Guidelines for Homepage Usability

This basically eliminates option two. Keep the tile greyed out until the user refreshes the page himself. Maybe add an 'undo' option to the greyed out tile.

Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Source: 10 Usability Heuristics for User Interface Design

-2

Remove the tile and animate the rest into place (As in a masonry style layout)

-And maybe add an undo somewhere, perhaps popping in from the bottom of the screen.

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.