4

enter image description here

enter image description here

I'm designing an interaction for email sign up for a client website, and I need to replace the red ? next to "Email Sign Up" with some kind of arrow to indicate that the site will slide down to reveal form fields. I would like to stick to using a triangle that rotates, but I am unsure of what direction makes the most sense for each state and why.

  • Please let your client know that the excessive yellow (the painful yellow) doesn't help. Truthfully, my eyes did not cope well when that image popped up, I would fear visiting a page were that engulfed my screen. – Evil Closet Monkey May 8 '15 at 20:41
  • The yellow is kind of intense, but also something the client specifically wants. On normal pages it's less intense because there's content below the header, but it was removed here for anonymity. Do you have any thought on the arrow? – ryan_filler May 8 '15 at 20:47
  • Why do you need to indicate something will happen? The user will see it happen once they select it. – DA01 May 8 '15 at 20:50
  • We want to use a graphic to indicate that clicking email sign up will have a different response than taking you to another page like any of the other header navigation will. – ryan_filler May 8 '15 at 20:56
  • 1
    I would think that the link would take the user to another page. Giving the user information about what is going to happen when they click a link is important. without some form of indicator, it seems to me that the user would assume it's linking to a separate page and not expanding the page. – Bryan Robinson May 8 '15 at 20:56
4

Why not style the Email Sign-up differently than other nav items to indicate there's a hidden bar that will accordion open on click.

Bonus: styling it different gives it more of a CTA feel that draws the user's attention to it.

And don't forget to autofocus the name field for accessibility and keyboard users :)

Email sign-up closed

Email sign-up closed

Email sign-up open

Email sign-up open

Edit: Added 'bonus'

3

EDIT: Based on comment that this is the only utility-nav element that works this way...

It's a bit confusing to put an email sign-up form (like for a newsletter) above everything else. Seems like a way to trick people into signing up when they simply want to log in to the site - not a good way to win customer trust. More importantly, putting the form up there doesn't leave any room to explain the benefits of signing up or give me any reason to give you my email address or zip code (therefore I probably won't, which likely isn't the result your client is hoping for). This also seems much better suited to linking to a separate page to explain why the newsletter is awesome & ask them to sign up once they're convinced by its awesomeness.

If the client insists on keeping the form on this page, perhaps instead place it directly below the text, with a downward-facing arrow. The arrow could be brown at first & then red when selected. No rotation necessary, and people won't be as confused by the break from convention.

mockup w/form below text and downward-facing arrow.

If this doesn't fly either & the client insists on having the form up above, try recoloring the form to make it more obvious & animate an arrow/line from the text to the form as it appears. Rather than animate the form down as part of the page, animate it up from the "Email Sign-up" text so its origin is obvious.

  • I agree that the organization of the utility nav isn't great, but it was also specified by the client to be organized this way. Email sign up, which does subscribe you to a newsletter, is the only item in the navigation with an unusual action tied to it; the others are just links to interior pages. I agree about adding a very obvious active state, but this isn't exactly what I'm trying to accomplish with the arrow. The arrow needs to indicate that "email sign-up" will do something different than link you to another page. – ryan_filler May 8 '15 at 21:35
  • In that case it's doubly confusing. It doesn't match the behavior of the links directly next to it, puts a form where people won't expect it (necessitating this need for a solution) and it's self-defeating because few people will sign up w/an email address w/o first having a clear idea why they should. Might try to find research on improving sign-up rates to show the client as justification for linking that to a separate page as well. Short of that, a bouncing cartoon arrow saying "Hey, look up here!"? :) ... Also maybe change the color scheme of the form to make it more obvious? Good luck! – mc01 May 8 '15 at 21:40
  • @ryan_filler : Edited based on your comments – mc01 May 8 '15 at 22:08
1

If the arrow is to the right of the "Email Signup" link, it should point towards the link to call attention to it:

Email Signup <--

Then, once clicked the arrow should point to the form, so as to indicate to the user where to look.

Email Signup ^

Apologies in advance for my crude, text-only examples.

0

I feel like it should point down initially and then flip up once clicked to indicate that it can be clicked again to hide the email bar.

Edit: I think of it as sliding the page down (down arrow) to reveal the bar, then back up (up arrow) to re-hide the bar.

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.