I have restructured one big form into 5 steps (progressive enclosure) like checkout process on eCommerce sites. At the last step we show preview of all the fields along with a submit button.

This process is basically for adding a product into the system.

Question is regarding the edit feature, for which I want to know if I should go with 5 step process or lay all the fields in a single page?

Also each edit needs approval from higher authority hence, I need to some inspiration how to show just added and previous values on the screen. Any reference will be appreciated.

  • 1
    Can you add any more detail to this and show a wireframe of what you mean? – 80gm2 Jan 5 '15 at 12:51

I think single page is better for the edit mode (just look the edit feature for user profil on StackExchange). May be you can give control for each field (like Linkedin).

But I think your choice depends on the user habit with the edit mode and frequency of change for each field.

  • Can you provide images of the examples you state either as wireframes or as examples of good design. Why is this a better way to present the information? What are the alternatives? – 80gm2 Jan 5 '15 at 15:11
  • 1
    Progressive disclosure si to break a complex task for the user (to give him the felling of accomplishment at each step). Do you agree with me? So I thing it is not interesting for edit feature. When you want to edit a field, you just want to have control for changing the value of the field. I think it can become a pain if you add many steps before the user reaches his goal. That is why I love the edit mode in Linkedin :) For example, you can look at your profil. Maybe, @dennislees's answer is a good alternative :) – JuClt Jan 5 '15 at 15:53
  • @JuClt, yes i agree with you on single page edit, it gives more control, thanks for pointing Linkedin. some other site (FB, twitter) also follow the same process. – Hemchandra Jan 6 '15 at 2:50

You can represent the steps used in creating the product on a single page. Just break the information out into visually distinct sections, where each section relates to a step. (see wireframes)

In the first wireframe below, clicking the "Edit Section 1" button could either make the fields on the page directly editable, or it could open a overlay that that looks like the screen where the user first configured the information.

In the second wireframe, a user with sufficient privileges has accessed a product screen, and is shown a notice that some changes need their attention. The edited fields are highlighted (similar to form validation), some information is included about the change, and options to approve/reject are provided.


download bmml source – Wireframes created with Balsamiq Mockups

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.