1

I am developing/designing an webapp. It has an employee profile page that displays employee picture, some key information like name, designation and contact details in bigger fonts and below that there are lot of details about the employee seggregated in multiple tabs. In each tab there is an edit icon. If the user clicks on them a modal/popup opens up with a pre-filled form allowing the user to edit the values. I have taken the following steps to make it user friendly:

  1. There is a visible close icon on the title bar of the popup

  2. The user can press the Esc key to get rid of the popup

  3. The user can click outside the dialog to get rid of the popup

  4. When the popup opens, the scrolling of the base window is disabled

  5. If the user makes some changes and inadvertently clicks outside the modal or move away without saving, the app will show dialog warning about unsaved messages

  6. The form fields are divided into sections and are in single column

While reading about UX design in the internet I saw that many people frown about dialogs/modals especially when they have scrollBle forms. They also recommend forms with all fields in single column. Hence I think, if popup is the good solution to meet this one column requirement as it looks good and a lot portion of the page don't remain unused.

Please advise, if the use of popup is the right in this design. Here are some images that will give a rough idea. Here is the base screen. At the right margin, there is an edit button.

enter image description here

Here is the modal form with all fields in single column. The background is darker but the user can still see the base page. The modal form is scrollable and it has all the controls in one single column:

enter image description here

  • do you have some image? What about inline editing? – Fernando Jul 31 '17 at 21:25
  • Can you provide with wireframe? – NB4 Aug 1 '17 at 10:57
  • @NB4 - added some images to give a rough idea. Apologies - cant's share the detailed screenshots due to certain restrictions – Saptarshi Aug 1 '17 at 12:14
  • @Fernando - added some images to give a rough idea. Apologies - cant's share the detailed screenshots due to certain restrictions. Also, I guess inline editing is more suited when we have one or two fields to edit. But here we have around 20 fields to be edited – Saptarshi Aug 1 '17 at 12:15
  • You can style fields to switch between edit/read-only mode. I don't think popup or modal is a good idea here. – Fernando Aug 1 '17 at 13:43
2

You can try out this option. On clicking edit, the fields will turn into editable fields. Once you are done with editing you can click save. This will solve the problem without using modals. Hope this helps. enter image description here

0

First of all please understand the difference between a popup and a modal window. Popus is usually a small informative notification, on click of which an action may or may not be performed. Also, it doesn't make the screen inactive.Where as a modal is a small form like window that appears over the screen blacking out the remaining areas of the screen. And here the remaining screen is disabled.

As per the scenario that you have mentioned, modal window is best-suited option, as it concentrates users attention on editing the values and if the edit button is clicked by mistake then the user gets well aware of it.

Another option which can be used is of accordion, provided the content in a single group(tabs for now) is not too long.The main reason is that modal windows are not suited for mobile view where as an accordion does, which keeps the design consistent on all screen sizes.Here a single edit button can be given near to name of the each accordion panel, on click of which the fields will become text box, which would stay as labels otherwise. For more reference on accordion check the link: https://webdesignledger.com/best-practices-accordions-in-web-design/

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.