1

I am building an app to be used on Android phones. The main purpose of the app is to display information, in the format of a form, to the user. Several fields of the form are to be manually filled in by the user, but after the first time it should be rare to change them.

For example the user must specify their mailing address. It is unlikely the user will change their mailing address but I still want to give them the option.

Right now I have a button the user can press to allow edits, and then the same button can be pressed to save changes. The text is normally black but when it’s editable it turns blue.

Is there anyway it can be more clear that the text is editable? I tried gray but then with such a light color it was hard to read the text. The blue is ok but it looks like a hyperlink and people don’t usually associate blue with being editable. Also I want the editable text to be easily readable, so people can see what they're typing in, and because only a slight adjustment may need to be made.

Also I was thinking of having a separate screen where the user can input their information but this seems like a waste as the separate screen would look exactly the same as the main screen (except without the information which is auto-generated).

Here is a fictitious example to help illustrate what I'm talking about. When the "edit text"button is pressed, some of the items in the right column become editable, such as the phone number (but not the date as that's auto populated). How can it be shown in the UI that the fields are now can be edited?

example

Improve this question
3
  • 2
    Do you have a picture? Its a bit hard to imagine what you're describing. The typical pattern on clicking "edit" is to make everything editable look like an input field (whatever style you're app uses for those).
    – Bryce Howitson
    Commented Nov 18, 2018 at 18:36
  • 1
    @BryceHowitson does this picture help?
    – northerner
    Commented Nov 19, 2018 at 19:51
  • I updated my question to answer your specific question about tabular content.
    – ecc
    Commented Nov 20, 2018 at 9:16

2 Answers 2

Reset to default
4

Text inputs on the web usually have distinct looks. Inputs and text areas typically look like they some some "depth" to it. You can try do add some borders or outlines to make it obvious that the element is now focused. This is commonly found in some CMS frontends, is not very intrusive and lets you preview the result by default.

Example: enter image description here

This also works well for tabular data. I would possibly remove any colors from the background and text to make it look more "raw", but the border when editing is a common pattern. For an example, see Excel or Google Spread sheets:

enter image description here

Improve this answer
0
4

The most common way of doing this is to show uneditable text as text directly on the page and editable text in an editable text field. Are you doing something that prevents this?

enter image description here

Improve this answer
2
  • "show...editable text in an editable text field" that is my question, how does a field look so people know it is editable?
    – northerner
    Commented Nov 22, 2018 at 4:03
  • A regular text field should provide the necessary affordances for editability.
    – Ken Mohnkern
    Commented Nov 27, 2018 at 18:25

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.