I am building layouts for a public-facing site that requires the user to fill in multiple pages of information to apply for a license. Think in terms of someone applying to hold an event on public ground.
Most users will be casual and it is unlikely that the same user or combination of users will be part of an application more than once. Each application is unique and not part of an ongoing series.
One of those pages in the application involves having the user complete role assignments for the license. Depending on the sub-type of license they are applying for there may be several roles that need to be filled before the application can be completed, and those roles can be filled by individuals or organizations (a construction company for example). Each user or org, who is not the user filling out the license application, will have contact info and details added in a separate form.
This section will be 3 or 4 pages into the application.
By default the user filling out the application, who has already entered their information at this stage, is assigned to all available roles. This is likely to be the case for about 50% of applications.
So there are three elements to the page.
- The roles assignment
- Manage users (add, edit, remove)
- Manage organizations (add, edit, remove)
Users of this application will be 'amateur', perhaps not using the system more than once a year, so the different elements need to be recognized and understood as easily as possible. At the same time there is a learning curve to making an application, there is a lot of information required and the user will need to read the instructions on each page to complete it successfully.
However the user will understand this when starting an application. There will usually have been direct contact with the license issuing organization in advance to discover if a license is actually required or not. If it is then the user is directed to this online system to make the application.
My initial layout is below.
Role assignment, stacked layout version http://www.shorecg.com/roles-stacked.png
My rationale here was to make sure that all the elements are visible to the user and don't have to be 'discovered', beyond scrolling down the page. Help text at the top would explain what's required on this page and that if the user will play all the roles they can 'skip' ahead.
This layout takes up 2/3rds of the page width, there is a progress indicator in the left column to help orient the user during the license application.
In initial reviews it's been pointed out that the user and organization management sections are beneath the fold and may not be 'discovered'. My response to this is that the user will be notified that the sections exists in the instructions at the top, plus there is a 'help' notation at the top of the table to reinforce this. The user also needs to scroll down the page to submit this section.
Asked to come up with an alternative I produced the following.
Role assignment, tabbed layout version http://www.shorecg.com/roles-tabbed.png
The rationale here is that the user is shown the three different elements at the top of the page and they are always accessible, albeit not all visible on the page at once.
My preference is for the first layout. Wherever possible I think it's best to keep related functionality on the same page. Users will be aware that understanding the page is important to complete the license application, and even if they are the sort that likes to 'jump in' it is not a big leap to suggest that they will discover the below-the-fold content. With the tabs the user is clicking through 3 different screens and since the license application process consists of multiple pages I think presenting the user with another 'tier' of pages is best avoided.
Another suggest was to combine user management with the role assignments, so in the drop down have an option to "add new user" and "add new org", but I think the two main functions - assigning roles and managing users/orgs - should be kept distinct, especially as this is aimed at 'amateur' users. Plus this method does not allow for removing users or editing their information.
Which solution seems best, or is there an alternative layout that I am missing? Thanks for any insight.