0

I'm working on a new feature that allows people to share items. To do this i'm overlaying a modal on our site with 10 e-mail address input fields.

modal experience for sharing

As you can see, because of the spacing on this modal, the 10 inputs overrun the screen space (this was taken on my 22" 1680x1050 monitor).

To overcome this, I'm wondering if it is better to put these into groups of 5, so on the first time the user clicks and is given 5 input boxes and they submit the form. the main underlying page will then display "send to 5 more people". or if any are unused in the first 5, the main underlying page will display "you can still send to x more people", with the modal populating with 5 or fewer inputs.

Improve this question
4
  • 1
    Why are you using a modal for this?
    – JonW ♦
    Commented Aug 7, 2014 at 10:34
  • For a start I would suggest that having a label above each field ("Client email address 1", "Client email address 2" etc) is redundant. Since all you are collecting is a list of email addresses, a placeholder prompt inside each field would suffice. You would of course still need those labels in the markup for accessibility but they can be hidden.
    – Matt Obee
    Commented Aug 7, 2014 at 10:43
  • @MattObee you're right, that does make a big difference and brings it down to being fully displayable on the page, bar a bit of padding that can be adjusted.
    – Jarede
    Commented Aug 7, 2014 at 10:52
  • 1
    @JonW the designer thought that it wasn't quite important enough to warrant a separate page. I think the feeling is, that this is a fairly quick action and not one that should take you through a process of pages.
    – Jarede
    Commented Aug 7, 2014 at 10:52

1 Answer 1

Reset to default
1

Given the nature of this task I would offer a single text-area where the user can write or paste the emails separated by a space, a semicolon or both.

Below the text-area there could be a greyed out sentence that counts the number of available emails allowed.

If the number of email addresses exceeds the allowed amount, the text gets red and the sentence explains the issue.

If a regular expression fails when testing the email addresses, the same line could alert the user of the issue.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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