I want the user to have the ability to add features and add-ons for each line on the website (order page).

If you look at the UI wireframe, it will ask you how many lines do you want from a drop-down. In this example I have selected two and which will automatically add two boxes of features/add-ons.

I am concerned that it may impact the UX if the users select 10 lines from the drop-down and a page will become very large (a lot of boxes) and confusing.. It may scare user away.

Do you have suggestion what can be done to improve the UI?

enter image description here

Note: It will be about 20 items for "Additional Features". I showed 4 items in the screenshot as an example.

  • Is it actually desirable that the user can add that many lines at once, or is there a smaller maximum number? – Dan Hulme Aug 14 '14 at 8:56
  • @DanHulme 1 line are minimum. If user wish to add more than 1 line, they can do so. Maximum lines are 10. – I'll-Be-Back Aug 14 '14 at 9:08

I suggest a grid so the user have the choice to focus on one phone at the time (vertically) or on the features (horizontally)


download bmml source – Wireframes created with Balsamiq Mockups

  • Very nice idea I like that, thank you! Sometime user need to enter their existing landline number for line 1, line 2, etc. What the best way to do that with your design? – I'll-Be-Back Aug 14 '14 at 9:55

I can think of two ways of doing it. The first is to put all the lines into a single table, with a column for each phone line.

That is, the feature list at first looks much the same as now, but with the checkboxes &c. on the far right instead of the far left, to the right of the prices. The "Phone line: One" message would also be at the far right, atop the column of checkboxes. When you use the spinner to add an extra line, it adds a new column of checkboxes on the right, with a "Phone line: Two" header. You might also consider putting the total price for each line at the bottom of that line's column, so that it updates as the user turns features on and off.

Getting the accessibility right for a complex-shaped form like that might be very tricky, but it'll be an important consideration.

The second alternative would be to have a separate page for the features on each line. The first page shows the spinner to select the number of lines, and optionally the form for the first line. After the features are input for the first line, and the user presses the "Next" button (I assume this is already a multi-stage form), the next page says "Line 2 of N" and shows the same form of features, for the user to select the features for the second line. This pattern repeats until all the lines have been entered.

If you go with a design like this, you might consider populating each line with the options selected from the previous line, if it's a common use-case to use the same features for several lines. (Using the previous line also makes it easier to have say 3 lines with lots of features, and 4 more lines with a smaller set of features.) If there are any features that are only available for the first line, or that automatically apply to every line, you should say this up-front on the first line's page and then display a reminder message to the user in the place where that feature would be on subsequent pages. In addition, if you do it this way, it's important to let the user revisit earlier pages, for when they get to the last page and realise they've spent too much money and want to turn off a feature for every line.

Additionally, if the most common use case is to have the same features on every line, you might make that case simpler by having two alternative forms. It would start with a simple form with the spinner, one list of features, and a button for "I want different features on each line." When that button is pressed, you can change the form to one of the more complex designs.

  • Thanks @Dan - that was helpful. Don't mind doing a quick UI wireframe so I can see what you mean. – I'll-Be-Back Aug 14 '14 at 9:25
  • I'm afraid the site's wireframing tool requires Flash, and Adobe doesn't support 64-bit Linux, so I can't use it. – Dan Hulme Aug 14 '14 at 10:04

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.