we are currently building a member panel. When user's first sign up there is some data that we absolutely need, home address, work address, and contact preferences. So, we came up with the following interface:


download bmml source – Wireframes created with Balsamiq Mockups


download bmml source


download bmml source


My concern is that the two addresses appear very similarly, and users might get confused, and not notice that the two panes are asking for different data. Any thoughts?

  • On a side note, I hope you're not actually implementing the "Slow down there partner" headline. – jgthms Mar 24 '14 at 22:22
  • @jgthms – Probably not, but it always makes me chuckle when looking at the mockups. – TimothyBJacobs Mar 24 '14 at 22:24

Obviously even you are having a hard time telling the wireframes apart, because when they were copy/pasted someone forgot to change "page 1" to "page 2" for the business address pane. That alone should tell you there isn't adequate distinction between the two.

Your contact preference page uses some icons. Why not carry the icon theme back into the contact information? Feature the home icon on the home address page. Feature the work icon on the work address page.

I'd definitely revisit your icons. Workplace icons don't generally have peaked roofs. In general, "home" icons have a door and a peaked roof, while "work" icons have rectangular skyscraper outlines with windows on a grid pattern. I realize this is biased against people who live in apartment buildings, or people who work in ski lodges, but it's a pretty common set of conventions.

Think about when you should be asking for addresses. Do you really want or need to prompt your users to fill out both? Is there a previous prompt that indicated they needed to enter both addresses?

Think carefully about why you are asking for both work and home addresses. I have been online since long before the start of the web, and I promise you the only time I've ever filled out both work and home addresses online for the same website is never. If I'm doing something business related, I fill out my work address only. If I'm doing something personal, I fill out my home address only. And I don't fill out any address information unless and until I'm ready to spend money. A website that requests both is intruding on my privacy. A website that requests either before I'm ready to make a purchase is likely to get ignored in favor of a website that's not so nosy.

You may think a user will just click "continue" and skip past the addresses they don't want to share with you, but most people won't argue with instructions. Of those that won't, many will be left with a bad impression of your site. Lots of people have recently been spooked by data breaches, and are hesitant to share such data. Be careful that you don't offend them.


Instead of having 2 panes that look similar, only have 1 pane with 2 columns.

The problem with 2 successive panes that only have different headings is that the difference is so insignificant that it will go unnoticed, and users will think "Wait, I just filled that form, right?".

With 2 columns in a single pane, there is no time difference between visualizing one form and then the other. The distinction is instant. People will see 2 similar forms simultaneously, which will make them understand that there are actually 2 forms.

  • Interesting. I see how that solves the lack of distinction between the two. My original reason for splitting it up into panels was to reduce information overload by chunking it into smaller, more bite sized steps. Additionally, it seems that two longer columns would probably result in the need for a scrollbar? – TimothyBJacobs Mar 24 '14 at 23:00
  • Considering you absolutely need this information: don't use modal boxes. They're meant for side information, small forms, onboarding help... but not for mandatory interaction. Plus: it's frustrating to see the dashboard behind and not be able to use it. – jgthms Mar 24 '14 at 23:13
  • Then when/how should we ask for it? – TimothyBJacobs Mar 24 '14 at 23:25
  • Just make a full page onboarding process, without showing the member panel behind, which is just noise because it prevents the user from focusing on what's really important: filling in his contact information. – jgthms Mar 24 '14 at 23:36

Your concern is justified - there is very little to differentiate the home form from the work form.

The benefit of the proposed solution is twofold:

1) While you have provided a progress bar, both presenting the amount of steps, and their nature is considered more usable - this way users are made aware of how much effort they may have to put, how many steps are left, and their nature. This is in contrast to a progress bar, which in comparison is little informative.

2) By showing the steps to the users, if they fail to notice that the next step is 'work address' (which, in my experience, they won't - as part of the effort to complete a task an opportunity to see the effort involved is typically not being ignored by users), once they get to the 'work address' step, they can compare and see that the previous step was 'home address'.

The common patterns to achieve this is either a horizontal step indicator, or vertical tabs. Here are a few screenshots to get you inspired:

An screengrab showing a checkout wizard. There is a top horizontal bar showing the 3 steps involved

A yahoo horizontal step pattern

A screengrab showing vertical tabs

Just a vertical list of steps

  • Thanks. I like the idea of doing horizontal tabs. I'm guessing, based on part of your answer, that you missed the step indicator in the top right hand corner — which speaks volumes about its current effectiveness. Would it make more sense to make the step indicator as it stands more noteworthy? – TimothyBJacobs Mar 24 '14 at 23:10
  • Yes, completely missed it. And I guess the reason is that the progress bar is where the eye went, and the brain didn't expect any other progress indicator to exist in far proximity. So if anything, instead of making it more noteworthy, move it next to the progress bar or have the text within the bar. – Izhaki Mar 24 '14 at 23:25

First, I'd suggest combining categories so that it is clearer what they are doing. What I mean is if you are going to present them those icons at the end, just show them Profile, Home and Office (change icon to an office building) tabs and each one shows the respective fields. Second, combine edit and display to allow users to just edit any fields that need changing and save automatically. No need for a bunch of separate screens that you then need to tie to each other because they are not moving around anymore.


There are a few solutions that you can implement with the design that you have, which means less changes.

  • Increase heading size
  • Use different backgrounds for each screen/block of questions
  • Alternate some other questions between both addresses.
  • Use a noticeable separation of instances, like an introductory page/modal box that states what kind of information is going to be entered next, something like "personal information" and after passing that, the personal questions come, after that, you present a new introductory screen with "business information" and after that the business information is the one being requested.

Of course you can combine some or all of the above to improve the usability, even if it takes one or two extra steps, if that increases noticeable the success of the user and reduces the failure and frustration, go for it.

And one obvious thing is, if you don't need that much information, don't ask for it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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