Alternatives to a grid of draggable thumbnails for responsive use case

Question

I'm improving the UX of my exercise prescription Web App which is used on Mobile, Tablet and Desktop. Therefore the implementation I seek is to be touch and viewport friendly.

Background

My web app allows physiotherapists and sports therapists create exercise programs, choosing exercises from a database. The workflow is as follows:

Search > Add Exercise to program > edit program

The edit program has the following requirements:

1. Ability to add specifics to each exercise (Reps, Sets and other Parameters)
2. Ability to Delete an exercise from the program
3. Re-order exercises in the program
4. Duplicate the whole batch of exercises to assign them over a number of weeks.

Existing Implementations of this process

Below is a series of images that another company uses,

1. Thes thumbnails are draggable in order to re-order.
2. Delete is performed by the X circle
3. Upon clicking on a thumbnail a modal opens and the specifics for that exercise can be added (see second image).

When changed to a weekly programme the grid is duplicated into a number of columns (days) and the weeks can be toggled at the top.

Question

Are there any modern alternatives too this thumbanil draggable grid. It is something that is used all over the web (probably because its simple) including on sites like Trello etc. However, surely there is something more attractive and user friendly?

Thanks

Answer 1

Personally, I'd be wary of changing the existing paradigm just for the sake of being different. UI conventions like drag and drop have a very powerful, cumulative effect - if it's widely used, then it becomes more intuitive for users if they come across the same pattern. By leveraging their existing knowledge of how other similar sites work, the learning curve for new users is sharply reduced.

It's a bit like the way cars are laid out. There are thousands of different car models out there, with countless differences between them. However, all of them share many common elements in terms of the interface - the steering wheel will work in roughly the same way, the indicators and wipers will be located around the steering wheel, climate controls will be positioned in the central console, and so on. This means that once you learn how to drive one car, you can reasonably expect the next one you drive to work in a broadly similar way.

If a manufacturer suddenly and radically changed the way the steering wheels worked, there'd likely be pandemonium. All of a sudden, drivers who are used to the steering wheel paradigm would have to learn a completely new interface just to drive the thing. Besides the obvious safety concerns, it would be very frustrating to boot.

This isn't to say that the drag and drop system couldn't be improved, or that there isn't something better out there. But before you change it, make sure you have a good reason beyond simply 'being different' Just for the sake of it. And if you do, make sure you test and validate your new design with real users!