I am looking for some input on a dilemma. I need to implement a newsletter signup box and I am struggling to fit it in properly to the space I have.

The restrictions are:

  • The left hand column is the full height of the users browser window, so therefore is flexable based on the users resolution, so space is an issue.
  • I NEED to include all 3 fields as a minimum due to back end restrictions.
  • I am unable to put the sign up box anywhere else, so not in the header of the footer. It needs to be within this space.

enter image description here

Based on that, I have come up with a couple of options.

Example 1

This is currently my most favorable option, where the box asks for the user to initiate the task, before then showing them what data they have to enter.

enter image description here

Example 2

This is option that other people want to implement, but I do not like the idea of a user thinking they have to enter an email address, then as soon as they want to, they are asked for other data.

enter image description here


  1. What are other peoples thoughts on the options and the issue?
  2. Is there UX issues with the options?
  3. Does anyone have any other ideas for how I could resolve this issue?
  • 1
    Do you need to collect the user's name? Other newsletter signups ask only for an email address. (You say you have back-end requirements, but I'm sure your devs are bright enough to ignore null values for name.) Commented Mar 6, 2016 at 17:19
  • Have you considered using the material design input fields? Those placeholders will save you some space too :-) Commented Mar 6, 2016 at 17:25
  • @KenMohnkern - I know, it has been a long standing battle. The newsletter people are going in to the system as "users", which need to have minimums. I might fight a bit harder as I feel all you need to newsletters are email. You also get more people signing up if you ask for less. We do not even personalise the newsletters at present, so we do not even use the name at the moment.
    – stradled
    Commented Mar 7, 2016 at 10:33
  • @MaxdeMooij - I will take a look, thanks for your comment. I LOVE the material design stuff, its very well thought through. It just looks a bit odd unless it is used throughout the site instead of just one area.
    – stradled
    Commented Mar 7, 2016 at 10:33

1 Answer 1


Both design looks legit to me. I prefer the first one because:

  • It looks cleaner.
  • It provides information on what to expect after I signed up.
  • It also reduces the possibility of user entering garbage information if the email field is visible.
  • Form fields are distracting, hide it if they are not needed or optional.

In example 2, the email field has 2 purposes. 1) To reveal additional form elements 2) To act as email input. It is not a good practice to use a single form field to perform two different roles and should be avoided. As always you should conduct user testing (A/B) to determine which one coverts best.

Is there UX issues with the options?

Since you mentioned that the 3 fields are absolutely necessary for backend integration, if not I would suggest you to drop all the name fields. Then replace the ">> Join the mailin..." in example 1 with an email field. Less form filling always translates to higher conversion. This also solves your space issue.

Additionally if getting user to sign up with your newsletter is important, then you might want to focus on conversion. Personally I feel there is much more than just UI and interaction consideration. The location of the newsletter sign up box as well as the content that appears before it affects the overall conversion too.

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.