Registration Forms for Web Apps – Dedicated Page or Modal Treatment?
In meeting with a Web App UI client this afternoon, we were asked the following question:
Is it better to have your Registration/Join page:
- Exist on a dedicated page with the full site navigation in place;
- stay on a dedicated page without the site navigation;
- or, have the registration form exist in a modal?
Surprisingly, after searching a bit I was unable to find any data or metrics that offered hard proof suggesting any of the options above. So we’re proposing an open forum on the merits of each treatment while we find an opportunity to A/B test it for ourselves.
A Case for Each Option:
1. Dedicated Page with Full Navigation:
The most obvious or traditional choice for a registration form is to exist within a dedicated page – either in the sidebar or as its own page accessible from the site’s main navigation. Indicating that you’re actively on the registration page but keeping the other navigation options allows the user to further research your application’s offering. For ex: if they’re unconvinced about joining, they can check out the Tour, review the Features or find out who the Team is behind the application. Why not allow them that freedom?
2. Dedicated Page without Navigation Options:
Recent research based around the higher conversion rates of tightly-focused landing pages suggests that once the user has navigated to the Join page, they’re ready to make the decision to sign up and offering them extraneous links that might result in them navigating away is bad practice. Chances are, they haven’t gone directly from a Google search or link from a referring website to your “Join” page, but rather arrive at the Homepage, a Tour, a Features page or a targeted landing page from an AdWords campaign. If that holds true, then perhaps stripping out the navigation and making the user focus on registration makes sense. It may be that this streamlined approach increases the user’s focus on completing the form and beginning the process of getting started with your app. Does increased focus equal higher conversion rates?
3. Modal Treatment for Registration:
If the user is willing to click Join or Register in either the navigation, sidebar or in the form of a button on any of your site’s pages and you want them to focus on completing the form without offering navigation options, then why not simply open a Modal window with the registration form? Modals are notoriously well-known for getting users to focus on 1 simple task while keeping the parent page loaded in the background, often shaded out with a background color/image. Several well-known sites I’ve reviewed in the last few weeks use this treatment for not only Registration but also for Sign In forms. Certainly doesn’t seem like a bad treatment.
So now it’s up to you…
What do you consider the most effective way to design and develop a Registration treatment for a web application? What solution would you choose if it was your task to maximize conversions?
Brian Del Vecchio
To state the obvious…the modal treatment is especially useful if the user starts an interaction which requires registration (i.e. comment on this article). You want to get the registration done quickly and return the user to the intended interaction before they lose their train of thought.
Also, it's 2010, and unless you're creating a financial transaction, nobody should be requiring complex forms for signup. Check out this screenshot for a demonstration of how lightweight signup is done:
http://www.flickr.com/photos/hybernaut/4554692919…
freshtilledsoil
Great points, Brian. This registration form actually does happen to be for a financial app, but they're only requiring the very basics to get started. Adding more data happens in the user's account later on – so 1 vote for the modal treatment.
@loususi
I also agree that the latest trend AND the best way to focus a user on a singular short task ( like a nicely designed quick registration form or a sign in ) is the modal. Its nice to see where you came from dimmed in the background. A great way to prevent the jarring hop into some otherSpace within an experience or flow. But I'm not sure you can make a generalized 'one solution fits all' recommendation about such an important design decision that might benefit from a bit of expanded context.
( And these ideas are mentioned above, I know ) We must consider how the user came to registration and how this interactive paradigm fits into the larger universe of both the web app and the web we live in. For instance …
… a user sees an ad 'out there' and seems sufficiently motivated to click and check out all that the Flash skyscraper offers in all its graphic allure and promises. Off they go, here they come … and now the user most likely comes to some landing page, microsite-like experience that contains a condensed and rich version of what Company 2.0 is offering up as the latest geoMicrobloggish wonderment. Right there on the veryFirst page the user encounters within the landing page experience should be, right in the page, a quick and dirty form that just brings them right in. The page should ALSO contain some distilled information that really sells the sh!zzat out of the web app … maybe include a screenshot or some pizzaz that just makes the potential new user drool and really want it even worse. There should ALSO be some links that keep the prospective newbie within this landing page experience ( quick note: the landing page | microsite experience does NOT have the full corporate site navigation … its a little pocket of the web unto itself … but its still really nice ).
But, if the user then jumps over into the main corporate site experience the entire marketing campaign experience layout should open up to an entirely new world. Now the whole picture is exposed. A lot more robust examples of the app in action, user profile pics and their hawt sell examples of how they use the new appie app and now much they're loving every clickin' of it. Up in the corner of the corporate site, up there in the top right, the 'Sign In | Get Started' affordances in hyperlinky goodness reside in a subtle way while the primary call to action 'Get Started' repeats in a bold, clean button somewhere in the mainSpace centerStage of the layout design. Clicking 'Get Started' in either place brings up our most excellent modal and all's good in the webhood.
I would avoid 'Dedicated Page with Full Navigation' at all costs. Too distracting.