track-and-graph icon indicating copy to clipboard operation
track-and-graph copied to clipboard

Improved tracker creation form

Open PropellantDyke opened this issue 2 years ago • 5 comments

Tracker creation form can be improved:

  • Label should be outside the input to improve readability
  • Label and input should be vertically one after the other, instead of side-by-side
  • Error message should be displayed next to the related input
  • Advanced options" can be transformed into switches
  • The entire page can be displayed as a fullscreen pop-up with close button, instead of toolbar title + back arrow
  • Modern input design can be used (round corner, colors)
  • A color palette can be made for this occasion. The one in the mockup is made to match the blue/orange logo

I can make some PRs about it :)

(Duration option is not in the mockup but can be added, depending of #251 )

New tracker mockup Color palette

PropellantDyke avatar Nov 19 '23 20:11 PropellantDyke

Hi, this is really nice work. I'm appreciating your design input and you're definitely making lots of good points. The major issue though is consistency. It might be better to move a bit more incrementally. For example I really like the improved UX, but the use of new colours and components will probably clash with existing components unless they are updated everywhere. I'm quite happy for you to make PRs but I think you might want to proceed by first updating the layout of the create tracker window (and putting it in a popup if you like) and second updating each of the components everywhere at once. What are your thoughts there?

SamAmco avatar Dec 19 '23 21:12 SamAmco

Actually something else just occurred to me here. There's no option to select whether or not the tracker is a duration in your layout there so you would need to add that. It's also possible for this screen to show a "duration conversion mode" input. This happens when you create a duration tracker and then later try to edit it to change it to a numerical input or vice versa.

SamAmco avatar Dec 19 '23 21:12 SamAmco

Yes, I discover the duration-related inputs after making the screenshot haha. I though about a button group for the selection, instead of the actual checkbox.

I agree that I should focus on the layout first. But I would be more comfortable if I can make PR on a dedicated branch so I don't have to worry too much about consistency, screenshots and release for every commit.

Also, I may not be able to separate everything in a different PR if I want to keep each commit small and easy to review, because there will be dependency at some point. So maybe if I push 3 commits, and you found some mistake in the first, I can just make an another one in top of that and we go on by batch like this

PropellantDyke avatar Dec 19 '23 22:12 PropellantDyke

That all sounds reasonable. I created a feature branch for you: feature/256_improved_tracker_creation_form .. if you target your PRs at that branch then certainly they don't all need to be perfect as long as everything is done before the feature branch gets merged back to master.

One other question on your design here. Is this a material 3 design? I ask because the app right now uses material 2 everywhere and I'm not keen to change this just yet. Largely because the app uses both xml and compose UI for now (I would like to move to full compose eventually) and the theme would need to be updated/fixed everywhere in both systems. This would probably require a lot of alignment work between the two. I think this would be quite a large job and frankly I'm not even sure I like material 3. You seem to be a better designer than me though maybe you have strong opinions? :P

SamAmco avatar Dec 20 '23 17:12 SamAmco

Great! Thanks for the branch.

I don't have strong knowledge regarding Android UI libraries, but it's easy to reproduce the inkscape mockup using the existing code and style/drawable. I've tried with both XML and compose to see what can be done and it seems ok.

PropellantDyke avatar Dec 20 '23 22:12 PropellantDyke