1

I'm working on a user profile design for a website. The information (name, email, username, etc) is on a pure white background.

The type of edit feature I want to use involves clicking an edit button and the information is instantly changed to editable fields such as text areas. My problem is that I'm not sure how to style the editable fields. One method I have seen used is a white field on a darker background to give the appearance of the edit field being sunken into the page, but since my background is already white, that doesn't work. Dark styling makes it look like the fields are jumping off the page.

Are there any design styles I can use to make it plainly obvious that these fields are editable now?

0

welcome to UX stack exchange. I hope I understood the question.

You could use an off white background to the edit field and have a darker bottom border indicating the extent of the editable field. Or put a complete border round the field indicating the complete extent of the editable field.

Either way it would indicate that the field has changed from it's previous state.

Obviously you can vary the design, but the point is that by modifying all or part of the border you can still have a white or near-white background to the field and a white page background. Then you can further style the field with current focus by brightening the border colour, or adding a glow for example.

Examples:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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