I am currently designing a long product page; usability testing shows that the monotony and the high homogeneity of the page represents a findability, legibility, and overall experience blunder. We are looking for ways of presenting information in different ways to chunk and group content while increasing rhythm and visual difference in the page.

I have two sections that I want to link together: one about the right target for the product, and the other about how the target will benefit from the product.

I found this UI pattern that seems to answer the need for visual change on the page, while also allowing for a different way of consuming information and connecting two content sections. split list UI

1) How is this component called? (we are looking for other virtuous examples);

2) Are there any strong points against using it (i.e. column reading is harder, increased visual clutter, split layout is more challenging)

PS: let me know if the question is too broad or only superficial related to usability

1 Answer 1


Pros & Cons Diagrams

What you describe in your question has this name in graphic design. Doing a simple search in Google gives many results: Pros & Cons Diagrams.

If you are looking for something more elaborated search for Pros & Cons Infographic.

About its use, I don't see any strong point against it, on the contrary, the more graphic the description, the better it will be achieved by the receptor. This is as simple as imagining the opposite: a text with bullets describing a list of pros and cons:

What you need:

  • List item
  • List item
  • List item
  • List item

What you don't need:

  • List item
  • List item
  • List item
  • List item

Clearly your image is much more descriptive than this text, more than enough reason that favors its use.

Personally I think the image you share in your question is halfway between a bulleted text and a good design. Despite this, it can be taken as a good starting point.

As an example, the check icon is almost imperceptible while the "X" icon is too important in addition to the conceptual meaning in UI: anyone may want to find a functionality by clicking on it to close the page.

You will find many reasons about the usefulness of Pros & Cons Diagrams in the previous searches such as those described on this page: How to Show Comparison with Pros & Cons Diagrams.

  • 1
    Thanks for you reply. I wonder if this type of content presentation comes with an ingrained meaning of value comparison (pros VS cons). My goal would be to split a long text that describes two aspects of the same thing (both columns would give answers to the question: "Is this the right product for me?"). Anyway, your answers points me towards a number of visual variations, so thank you for that.
    – Blooba's
    Jun 4, 2020 at 11:17

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.