0

I currently preparing a CRO validated design and I have questions relating to the layout.

Below is an image of two options, Option 1 is the original and Option 2 is my proposed tweak which simply switches the hierarchy of the button and the supplementary text.

Visually I think option 2 looks better and the heir chary makes more sense, therefore my instinct is to move the text which I deem to be supplementary / supportive to below the button.

Additionally I also have considered accessibility with screen readers, my concern is that if the text is below then the user may confuse the text to be in relation to the second button rather than the first. enter image description here

If anyone can provide any insight into conventional reading patterns that may indicate which is the better option, perhaps also taking into account accessibility.

Improve this question

1 Answer 1

Reset to default
1

Some points to consider

There is an important premise, if a button needs explanatory text, either below or above, that button is not convincingly complying its function.

  • If the text is an explanation of the button's function, the design fails. I would study the button design from scratch.
  • If the text is complementary to the button, I would prevent the design from showing it as an explanation enter image description here

If the design is unmodifiable, at the perception level, so that a text is interpreted as part of a parent object, the left alignment is a factor against it due to the reading order from left to right: the jump to the next line unlinks them. On the opposite, the central alignment offers a single reading direction, from top to bottom, placing the eye in the center of each object, simplifying the overall reading and consequently grouping them as a single element.

enter image description here

Edit after the comment

Regarding which of the two options is preferable, I don't think it's possible to choose one or the other without knowing the context. As an aid, it may be useful to formally break down the group. Both options form a triangle. Unlike other shapes, a triangle, among other qualities, always establishes a hierarchy: from the tip to the base or from the top to the bottom vertex.

  • Option one: the text floats on the button, personally it's the one that I see as the most unstable despite the fact that the triangle rests on its largest base.
  • Option 2: the text hangs from the button, I think it's the one that most invites you to click on the button, it is perceived as a projection from the bottom up.

I would choose any option based on the level of importance of each component.

enter image description here

In the global design, option 1 loses balance by having more weight on the right, option 2 is more stable.

enter image description here

Improve this answer
3
  • Perfect, thanks for your feedback. I will certainly go with your central alignment suggestion as this definitely makes sense, but could you clarify whether you believe Option 1 or Option 2 would be your preferred suggestion and why? Again with the context that the text above / below the button is not a description of the buttons function but merely some incentivising text to entice the user to learn more etc.
    – Joshua Munn
    Aug 9, 2022 at 9:07
  • Answer updated.
    – Danielillo
    Aug 9, 2022 at 9:33
  • Appreciate the feedback, thanks for your help!
    – Joshua Munn
    Aug 9, 2022 at 9:55

Your Answer

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

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