We are developing an E-Commerce website, and our content team are writing user guide or help of the website.

there are some screen-shots of the website in each help pages.

Some of our team members asked to put border (CSS) for help screen-shots but I think LESS IS MORE and user needs to see more white spacing.

What do you think?

Which one is better in point of your view as a UX designer?

  • I assume you have visual designers involved in the creation of this document. It's up to them. – Ken Mohnkern Mar 7 '16 at 16:52

I think it really depends on the style of the page and the images.

If the images are very detailed and the cognitive load is high, then line borders won't make any difference.

Using borders is a good practice when you have white background images on a white background page and you intentionally want them not to blend in but have a containing frame.

If that is the case, I recommended to have a very light border so it will give you better balance and look and feel.

  • 1
    Whether the images should not blend in is the key factor here. Since this is a help page, and the screenshots are of other parts of the website, they may replicate UI elements at 1:1 scale (or close to it). In that case, it's very important that users not mistake the content of screenshots for elements of the help page. – recognizer Mar 8 '16 at 16:43

As long as the user can see the details in your screenshot and can understand what you are explaining in the text by looking at the image (is the image too small? Are you showing more than what is necessary so the user does not know where to look at? Perhaps a short video or gif is better?), you are good to go.

The border conversation really depends on aesthetic and overall layout of your page, which comes down to personal preference.

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