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.
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:
- Ability to add specifics to each exercise (Reps, Sets and other Parameters)
- Ability to Delete an exercise from the program
- Re-order exercises in the program
- 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,
- Thes thumbnails are draggable in order to re-order.
- Delete is performed by the X circle
- 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.
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?