3

I have this page. This page is a combination between a "congratulations" and "here's something else to do" sort of page.

The very first piece of content (besides the header/nav) is a large block with a high contrast background that says looks like this: enter image description here

Someone who has no business with the design, but has a loud voice is trying to suggest making the first line ("Your card is now active!") the size of the second line and the second line the size of the first.

enter image description here

I'd like to be able to prove to this person, without stepping over my boundaries that this is incorrect, but I can't find a source as to why.

Please remember, this is the very first thing a user will see. Besides the design not looking good and this certainly not working for mobile, is there any article anywhere that can back up my claims?

4

Well, it could be argued both ways... mostly I agree that the first message LOOKS better.

But I think I might see it a little differently. One of these pieces of copy is a congratulatory message, and the other is basically a call to action. What if you were to keep the message strong, and then put a control below it with some variation on the other text at the same size or slightly smaller?

enter image description here

Super quick but you get the idea. Perhaps by providing a large, clear call to action control with big, inviting text, your stakeholder would allow the more conversational set-up to that action take a bit more of a back seat.

3

The idea of keeping first line big is because we are naturally inclined to read from heading to content. Our mental models are attuned to reading it in a Heading -> Subheading -> Content kind of way.

It is observed that users go from top to bottom and left to right. So your heading, subheading, content order should follow the standard of top to bottom.

You could argue that this is not really heading and content metaphor. Based on the content, you are right. However, speaking from layout point out view the first impression of the screen is to look at the bigger title and follow on to the smaller one.

Additionally, 'your card is active' is a confirmation of user action. Your user might have clicked on an email link, or clicked on an activation or paid activation charges. This deliberate action warrants a clear and distinct feedback. That is why the 'Card is active' message needs to be loud and clear. This makes the user comfortable that her primary action resulted in a success.

What follows (the direct deposit) although important, is a business action. A business action should not be more prominent than a required user feedback. Like @Mattynabib suggested, a specific call to action to next steps will also emphasize your next step.

1

In my opinion the second option looks a bit clumsy. And I like the idea of letting the user know "the card is active" in the first place. However, in the first case "Direct deposit" message is not getting the user's attention.

Since that is the next action, how about representing with different text color, font increase, using an icon to represent the action, altering the layout.

I am not sure if you have flexibility to rephrase the "Sit back and relax.. direct deposit part" But, if you can work around that and along with highlighting the Direct Deposit part you should be good to go.

1

Just going with my gut and basic psychology (which is what is relevant for the "customer's point of view" anyway) I prefer the first message because the second one appears like it's screaming at me to relax. All caps in internet speak usually convey something loud and aggressive, so the message in the second one - especially in contrast to the really small first line - appears very tense.

So I think the first one is definitely better. However, the font size difference between the two lines is too big, making the "Now sit back" line hard to read, additionally burdening the reader. Follow Mattynabib's recommendation of making them either more comparable in size or both small caps.

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.