2

what can give to the user the best and easiest experience, when editing their profile in a web site, practically we have three widely implemented options:

1 - Fields form and submit button: this is the more simple approach for submitting data is just key/value form using labels and textboxes and single submit button, the user just modify the values and press the send button, all the information is saved at once.

2 - modal pop-up: the form is sectioned in several parts, each part contains an edit/add button, in the case you press the button a modal pop-up will show up with the fields you want to update for that specific section, a submit and a cancel button will be part of the modal, each section will be stored separately from each other. (ex: linked-in profile)

3 - Inline Editing: is practically the same situation described above but instead to show the modal pop-up, when you press edit the labels containing the information converts into a input type and a cancel / save button appears, each section will be stored separately from each other. (ex: maybe something simpler but similar to Facebook profile)

you have to keep in mind that the form will contain like 4 or 5 sections and we plan to focus to make the editing as easier as possible to the user.

thanks in advance.

Edit: I found this article, related to the UX and the usage of modal vs Inline Editing, and it recommends to avoid the modal when possible for the following reasons:

  • Users might have developed the habit of dismissing them when unexpected modal dialog boxes pop-up
  • Modal boxes interfere with ordinary workflow -modal windows are designed to steal a users focus… but overusing them can become frustrating because it throws too many roadblocks in from of a user.

in a nutshell read the following statement:

"The bottom line: Always start a design by trying to use modeless boxes whenever you can…"

you can check the details here...

Improve this question

1 Answer 1

Reset to default
0

I was thinking about this problem too.

And came to a third variant.

Inline lightboxes.

The element which becomes selected/turns editable + its label is visible, the rest of the page (or only the form) is grey.

Personally, I hate popup and lightboxes, and think they should only be used if you need and want to disrupt the user, but not for editing things.

BTW

Google images cast its vote against lightboxes and for inline slide outs.

I think modal boxes should be used when something happens, like alerts, notifying of something, something unusual, not use them for everything because its so convinient as a design pattern.

tldr go with nr 3

Improve this answer
3
  • do you have an example of the inline lightbox, sounds like a really nice idea! :)
    – pedrommuller
    Feb 7, 2013 at 23:59
  • i cant really show it to you now, but imagine the profile info, with edit buttons next to each editable bit, once edit is clicked, the rest of the stuff turns grey (semi transparent like a lightbox) and the relevant bit turns into an input and really sticks out, next to it a save and cancel button. Once you click save, everything turns to normal. This is a good pattern if the communication to the user needs to be really in your face and idiot proof. Some users dont expect inline editing, and if its not mega obv they wont notice it. If I get a chance later ill draw it to you.
    – user1721135
    Feb 8, 2013 at 14:16
  • if you have firefox, try the element inspect tool (right click - inspect element) you will see what i mean with inline lightox
    – user1721135
    Feb 13, 2013 at 11:05

Your Answer

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

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