13

I'm building a site that users can login and register on and on the Account Page I am implementing the Edit Details form. My question is, what would be best: the form be right in the page or in a pop up box? (like a fancyBox lightbox) Here is the User Details page:

enter image description here

When the user clicks on "Change details" what would be the best option - for it to pop up in a modal box or for the details to hide and the form to show (right where the details were)?

Improve this question

3 Answers 3

Reset to default
10

A few points here:

  1. I wouldn't overcomplicated this with a view/edit state. View/edit toggles are good if the user is more likely to be just viewing data and not editing it. If a user visits their Account page, they are likely a very motivated user and want to make a change to either their password or email. Here's how Twitter handles this page: enter image description here

  2. Think about combining "Your account details" and "Change your password" like Twitter does. Not everything they do is perfect, but they've got the account page pretty well figured out ;-)

  3. This is an aside, but if "Your likes" is important, rescue it from the Account section. Not sure what the context is, but it might make sense to put that next to "Welcome, Nathan" with a count of the number of likes next to it. ie "Your Likes (3)". That could significantly increase the number of engagements with that feature.

Improve this answer
4
  • This is a good idea. "Your likes" is a table of artists that the user has liked. But that screenshot made me want to do stuff like this as well. I will do it like that instead. And yes, Twitter has definitely done it awesomely on the Account page. Thanks!
    – Nathan
    Jan 8, 2012 at 3:15
  • cool! glad that brought a little clarity. I always just try to think: 1. what do we want the user to do here? and 2. what does the user want to do here? In this case, the user probably wants to get in and out ASAP so don't make them click all over :-)
    – Matthew Moore
    Jan 8, 2012 at 3:44
  • Yeah, here is a screenshot of the user account page, it looks much better now :)
    – Nathan
    Jan 14, 2012 at 3:03
  • I'm still thinking about putting the "Likes (3)" link next to the welcome message, but I will keep it in the account section as well and the little link will link to the tab in the account section. (if you didn't know, those tabs are jQuery-powered tabs meaning they don't go another URL when you click it - they just put a hash in the URL and switch instantly when you click one)
    – Nathan
    Jan 14, 2012 at 3:16
3

Why do you want to use a modal window?

  • A modal window allows a temporary break the users' current interaction process / workflow.
  • Requires their complete attention before continuing.
  • Will require some form of direct response before accepting other forms of input (e.g. input via other navigation devices)

Personally, I don't think a modal window is required.

Improve this answer
1
  • Thanks for this answer. Made me see the downsides of a modal
    – Dan Drews
    Nov 1, 2015 at 3:38
1

Modal boxes look cooler and load a bit faster than pulling a complete page with editing form since they have fewer server calls. However, being reliant on JavaScript they are less compatible across browsers and platforms (IE7 and mobile being the primary suspects). Inline editing (as Facebook does) has the same compatibility issues.

In the end, it's all about a consistent look and feel of your entire application: all editing forms should be done the same way.

A few other things worth reviewing:

  • Combining password changing with the rest of account details.
  • Renaming the button Change details into Edit details.
  • Combining last login details into 1 line or even removing IP address (it has little value for most people).
  • Indicating in the overview which details are editable as might seem as everything can be edited.
Improve this answer
2
  • Thanks for all the suggestions :) I don't have to worry about the JS issue, people that don't have JS enabled won't be logging in anyway, but most people that'll be coming to the site will have it enabled. I have the IP address there so people can see where their account was last logged into, but maybe I should just change it to a city/state/country like Facebook does? Also I wasn't going to pull a complete page, it was just going to hide the details and show the form. (most of the system has AJAX)
    – Nathan
    Jan 7, 2012 at 7:07
  • You still need to consider at least graceful degradation for mobile users despite all advancements of smartphone browsers because not everything that looks good on desktop will look good on mobile.
    – dnbrv
    Jan 7, 2012 at 14:29

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.