📄 RFC: Rethinking UI for editing programs
P.S.: Video is just a rough prototype to illustrate the idea, not a real UI :)
Current UI for editing programs doesn't work very reliably, and frankly quite confusing. Especially if it edits the programs with reusing logic, and repeating over several weeks. Then, just adding or deleting a day or an exercise may make the program invalid - for example if that exercise was reused by other exercises. And then it gets into plain text mode with a scary syntax error.
That can scare away users, especially the new ones, who's just trying the app. And generally, the current UI doesn't give a great visibility into a program.
I realized that the current UI just doesn't mirror the data model well. In Liftoscript - weeks and days are just containers for exercises. And exercises span the days when repeating - so reordering a day often doesn't make sense - a day is ephemeral, a repeated exercise shows up in a day if the day is there. But if not - it's not added.
What would be the right UI though? I thought - maybe it should be actually a calendar-like. Something similar to Google Calendar or Cal.app. You have weeks as columns. Days as cells within those columns. And exercises are like "events" you add to days. Which can span multiple days.
You cannot move weeks or days around, they're just there as containers. Instead - you move exercises. If an exercise is repeated across weeks - it spans multiple weeks. If it's a reusing one - it highlights the template it reuses if you tap it. You can drag the right edge to change repeating, and you can just drag the exercise around to move it between days and weeks.
You can multiselect few exercises by tapping on them and move them together to some week/day. Tapping on an exercise shows info at the bottom, and ability to edit it there.
Tapping on a template highlights all the exercises that use that template.
You can zoom in/out by pinching, and also use landscape mode for better visibility for many-week programs.
That should solve the whole class of issues of the current program editing UI, and it's easier to ensure the program is always structurally correct. It also maps waaay better to the Liftoscript structure, with all its Bicep Curl[1-12].
BTW, the program on the video is this 5/3/1 BBB - this is the Liftoscript - https://www.liftosaur.com/programs/the531bbb
Basically, I'm trying to find a replacement for these 2 tabs on the Program screen
What do you think? Yay or nay? Is it even more confusing? :) Would love to hear your thoughts!