I am currently working on designing an interface for creating accounts in a web application. Note that this interface is to be used by the administator to create accounts and will not be used for users signing up.
I have designed the edit account screen and am quite happy with it:
download bmml source – Wireframes created with Balsamiq Mockups
Note that each tab is discrete and contain its own save button.
This works very well for editing a user account as administrators can easily zero in on the information they need or wishes to edit.
The problem is that when it comes to designing an interface for creating accounts. In this case, there is no sense in having individual buttons for each tab, so I have moved it outside like so:
The fields have the following characteristics:
Profile contains the user's name and any other fields the system administrator has defined. The fields here are visible to all logged in users.
Preferences contain settings like timezone and language. It also contains any other fields that the system administrator has defined and is not visible to anyone except for system administrators and the user himself.
Email addresses come in 2 forms (depending on how the administrator has configured the system):
- Where multiple addresses can be linked to an account, an interface to add, remove and make an email address primary.
- Where only one email address is allowed, a simple text field to change the user's email address.
Addresses can be disabled (will not show up in the tabs), contain a set of address fields defined by the administator (postal address, home address, etc) where some address fields can be marked as required or be in multiple address mode where multiple addresses can be added and removed.
Roles essentially allows the administrator to view the user's assigned roles and modify them.
Groups allow the admin to view the user's groups and modify them.
As per the above, when it comes to editing a user, there are many parts of the account that is editable and can become too complex if everything is shown as just 1 form.
As per the mockup (second image) of my "creating user" UI, there seems to be a few problems:
- I feel uneasy about using "tabs" in a "create account" UI because it doesn't not really seem to impose a direction of flow/progression.
- While accordions can impose a flow direction, some screens in the accordion can be large, resulting in a lot of scrolling.
- Should we only show fields that are required, for example, in this case, combine all require fields in profile, preferences, email addresses, addresses into 1 form, and then have seperate forms for roles and groups?
- However, if we only show required fields, it would be very annoying for the administrator to create a user account, and then go and edit it to fill in the rest of the fields (if he needs to fill them).
Are there any better ways to do this? Are there any screenshots/examples/information from applications that solve this problem?