10

I have information in short sentences (bullet list) and each bullet could be pros/cons or plus/minus toward a product. What is the best way to display it nicely?

For example:

+ Price is cheap

+ Many people bought this and found out that it is very easy to use

- It's somewhat ugly in design

- They don't have many retail locations yet

I tended to put + and - as the bullet image for each line but then it seems to look ugly. Is there any other way or examples of how people do this in web design?

UPDATE 1: I had some ideas but could not find good example. How about:

  • Sub-header saying Pros/Cons and just any bullet image
  • Text color: red vs green?
  • Background color: light red vs. light green?

etc...

More examples from Stackoverflow (using -1 as a mark of negative). Or Quora/Digg also using points. Dunno...

UPDATE 2:

Added one important piece of information: the pluses/pros always go together. The minuses/cons are the same - All grouped together.

Attempt to do the arrow based on vision below

enter image description here

UPDATE 3:

Potential grouping of positives vs. negatives.

enter image description here

UPDATE 4:

Use red and green left border to market Pros/Cons section. Then have thin separator for each line:

enter image description here

UPDATE 5:

Use two indicators of Pros/Cons: green/red thumbs and the words Good/Bad. Also light color bullet points to market each line:

enter image description here

UPDATE 6:

Use two indicators of Pros/Cons: Good/Bad words and the underline color:

enter image description here

UPDATE 7:

Use two indicators of Pros/Cons: Good/Bad words and the color of each bullet point:

enter image description here

UPDATE 8:

Use simple smiley icons with red/green and vertical align with the bullet also in red/green:

enter image description here

Improve this question
2
  • Any other context you can provide about how you're using these pros/cons? You ask about the "best" way to display them "nicely", but there's no answer to that question. Instead, think in terms of a concrete, measurable goal. The right choice will depend a lot on your application and your users. Determining which implementation is "best" will require some testing and validation. For example: I would not expect the styled border option in update #4 to be among the best solutions, but it's always hypothetically possible that it could be an ideal fit for your particular application.
    – Noah C
    Mar 22, 2013 at 19:20
  • I didn't pay attention much to wording here. Pros/Cons could be used to. Actually it's more for services review, not exactly product review. But concept is the same.
    – HP.
    Mar 23, 2013 at 5:45

5 Answers 5

Reset to default
2

One suggestion if you will, try placing the negatives and positives side by side. It can help make the users see a clear cut distinction right off the bat when you have a red and a green list laid next to each other rather than one following the other. So, you have a list of "The good stuff" and "The not so good stuff" there for direct comparison. It also helps to show if there are more good points than bad (since it's more difficult to make that comparison when the lists are stacked). Apart from that, I think you've figured out most of the different ways in which to highlight the content.

A word of caution: Depending on your audience, you might want to rethink the coloring. Different colors have different interpretations across cultures.

Improve this answer
2
  • What do you think on my Update 8?
    – HP.
    Mar 22, 2013 at 15:16
  • 1
    Something along those lines. Now if you compare reading your update 7 vs update 8, in 7 you read all the good stuff and then all the bad stuff. You keep moving up and down to weigh the options. In 8, you read 1 good point, 1 bad point, it facilitates a conversation in your own mind. Like hearing 2 people debate rather than listening to 2 monologues.
    – rk.
    Mar 22, 2013 at 15:23
2

The bullet style in Update 2 is too representative of a trend. You see this type of indicator in stocks or other performance monitoring to represent a positive of negative trend since the last measurement. See a snap from New Relic below:

enter image description here

Update 3 & 5 look to me like I might get to vote or weigh-in with my opinion in some way.

I didn't expect it, but I really think Update 8 provides the reader with a quick way to judge the balance of good to bad, something less obvious in the other styles. I can easily determine which list is longer and make a judgement based on that. With the other treatments, it's not as obvious whether the 'good' outweighs the 'bad'.

Improve this answer
1

I have found ✓ is the best bullet for such list which intends to build credibility or value of a product/service. ✓ symbol is provided by Unicode and can be used as Text

BUT

If you were looking to use it as bullet list, you might have to use image icons. http://www.iconfinder.com/search/?q=tick

Go for green tick-marks, as green adds another positive layer of impression.

Improve this answer
2
  • 3
    I try to think out of the box about just picking bullet point image. Having check mark everywhere seems redundant. Plus what about the negative one? It has to have both.
    – HP.
    Mar 19, 2013 at 3:22
  • @HP You could use a check mark for pros and an X or a dash for cons. Green and red, respectively, to further differentiate as Salman pointed out.
    – Noah C
    Mar 22, 2013 at 19:13
1

You can use UP arrow and DOWN arrow for positive and negative points respectively.

Arrows should be those filled up triangles just like the ones shown in Stock market ratings.

Also, you can fill them green for positive and red for negative display.

Refer this image.Bullets can be in this manner.

enter image description here

Improve this answer
14
  • Would it clutter the line with bunch of arrows? Since I plan to have a group of, let say, 5 pluses on top, and 5 minuses on bottom.
    – HP.
    Mar 19, 2013 at 6:00
  • Let the arrows be small colored triangles. It will not look clustered; it will give a vertical stack look and will make the positive and negative points very clear.
    – Haze
    Mar 19, 2013 at 6:11
  • Answer edited and image added for your reference.
    – Haze
    Mar 19, 2013 at 6:21
  • you can adjust size of triangles according to your convenience.
    – Haze
    Mar 19, 2013 at 6:44
  • 1
    Would want to make sure the shades of red/green are chosen to be likely to appear different for a red-green colourblind user. Obviously hard to get away from red=bad, green=good, but a dark green / bright red might still allow a colourblind user to easily differentiate.
    – drfrogsplat
    Mar 20, 2013 at 2:48
1

It's difficult to make a general statement. But I would group the pros and cons as in your example "update 3". Some users want to catch the cons or pros quickly. The example "update 2" has too many redundancies and is (IMO) too cluttered.

Improve this answer

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.