market icon indicating copy to clipboard operation
market copied to clipboard

Edit UI

Open kremalicious opened this issue 2 years ago • 7 comments

It works, but it could be better. Biggest issues to solve:

  • mix of form elements where some are prefilled and some are not making it hard to know which fields will be edited or cleared
  • How to clear fields
  • ...

kremalicious avatar Mar 23 '22 15:03 kremalicious

  • mix of form elements where some are prefilled and some are not making it hard to know which fields will be edited or cleared

Here the difficulty is getting the File and Sample file url. What we could do is placing a "placeholder" like this:

Screenshot 2022-08-09 at 10 08 02

Otherwise the user can remove the placeholder with the "x" to add another link.

Screenshot 2022-08-09 at 10 18 38

For the sample file, on the other hand, we can retrieve the file's url and show it:

  • validation 'sample links' in edit form
Screenshot 2022-08-15 at 09 29 33
  • How to clear fields

Not sure if a clean button like an styled "x" on the single field would do or do you a mean a generic button that clears the whole form? 🤔

are this options valid? what you think @kremalicious ?

EnzoVezzaro avatar Aug 09 '22 14:08 EnzoVezzaro

On the other hand, we can implement an "edit" CTA on each field to let the user know exactly which field he's editing. Any change will trigger a tx to change this specific field. What I proposed is something like this:

Edit Metadata: Screenshot 2022-08-17 at 09 48 54

Compute Settings: Screenshot 2022-08-17 at 09 49 00

WIP: still trying to understand what's the best way to clear this fields as there's already a lot of ui elements in the page, I don't want to just add another element to this.

EnzoVezzaro avatar Aug 17 '22 13:08 EnzoVezzaro

On the other hand, we can implement an "edit" CTA on each field to let the user know exactly which field he's editing. Any change will trigger a tx to change this specific field. What I proposed is something like this:

should we start working on this? is this a good UX strategy for our use case or it's too much? Thanks, @AnaLoznianu @kremalicious

EnzoVezzaro avatar Aug 22 '22 13:08 EnzoVezzaro

@EnzoVezzaro I think this is a great start, but I suggest the following. Please treat this only as a user suggestion, I don't have any design experience.

Edit Metadata: I like the proposal for the 'New File' and 'Sample file URL'. I think it's clear and neat.

If I understand the design you propose here, the user needs to click on the 'Edit' button for a certain field, and then on 'Done' to submit the change. If we add 'Edit' and 'Done' on each field, the user will need to add 10 extra clicks to edit 5 fields. And also instead of one transaction, we will do 5. I think having only a 'Submit' button for the entire form is easier.

What I suggest is, if the user did a change on a field, maybe color that field text with a different color(like our pinky theme). For Clearing the fields, I think we should stay consistent with the URL fields. Having an 'X' on each one.

Edit compute settings: Personally, I don't see why we need changes here. Is pretty intuitive

LoznianuAnamaria avatar Aug 24 '22 09:08 LoznianuAnamaria

Yeah, I agree with Ana that it's best to avoid over complicating it. I think a good place to start on this would just be to ensure that all the fields are pre-populated. Provider use to have an endpoint (/assetUrls) to retrieve the asset URL, I think it has been deprecated though. @calina-c might be able help to point you in the right direction if there is still a way to get the asset URL

jamiehewitt15 avatar Aug 24 '22 12:08 jamiehewitt15

What I suggest is, if the user did a change on a field, maybe color that field text with a different color(like our pinky theme). For Clearing the fields, I think we should stay consistent with the URL fields. Having an 'X' on each one.

this is a great idea. I'll mockup with a design.

UPDATE: this is what I'd come up with:

For the edit form, we simply highlight any field that has been changed while keeping the rest as neutral:

For the Compute Settings, I wouldn't change anything as I don't think it makes sense to add this highlights to the checkboxes there. I think it's pretty clear what's selected and what isn't.

Could this work as a solution @AnaLoznianu ?

@calina-c might be able help to point you in the right direction if there is still a way to get the asset URL

It would be great, but I'm not sure it's possible as this might introduce security risks for the asset. If we could find a way to retrieve the asset's URL without compromising security that would be great, but we can take this discussion to #1655

EnzoVezzaro avatar Aug 24 '22 13:08 EnzoVezzaro

Linked issue: https://github.com/oceanprotocol/aquarius/issues/871 We will add validation on fields based on the exposed aqua shacl schema

LoznianuAnamaria avatar Aug 30 '22 09:08 LoznianuAnamaria