Suppose you have a list of data that also doubles as an editable form like this:

Image example

The problem with this is that I cannot show any obtrusive indicator (like text field border) to give the user a visual cue that this is editable if you tap on the text field.

But without that visual clue, the form really doesn't look editable.

By this current approach, this satisfies as a display form, but does not satisfy as editable form.

How can I approach this better?

3 Answers 3

  • Small titles size, users usually don't think the small text is editable
  • Bigger size in editable text
  • Grayed text field in editable text with huge top/bottom padding, as big as the text area, the bigger the possibilities the user click on it

enter image description here

  • Thanks. I think in the end, I should choose between a plain data display and a form with editable visual cues, one at a time, instead of trying to merge both into one. Apr 28, 2022 at 5:04
  • Oh and I agree, the caption should be smaller, while the text entry should be bigger, to let user know that they can edit that. Thanks for reminding me that. Apr 28, 2022 at 5:06

I think you have the problem that the page is in view mode.

Let the user switch to edit mode with a button (edit) on top. Pressing this button will make the fields editable as @Danielillo suggested.

  • Yea, I think that will be more helpful to the user. I was trying to combine both, but after I give it a thought, giving them separate design and visual cues with a toggle to toggle between them is more intuitive and simpler to understand. Thanks. Apr 28, 2022 at 5:07

You can follow the google material guides to design your fields see attached image below.

enter image description here

  • 1
    Hi and welcome to UX.SE . Could you explain how your solution answers the question from the OP?
    – Devin
    Apr 27, 2022 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.