4

You often see this pattern: enter image description here

My gut feeling would say the first is more readable (Is left-aligned text generally preferable over centered text?) but I could agree the third would look nicer (and decently readable) if it had less lines.

Anyone has studies about this? For everything centered, what is an acceptable number on lines? What about the second version?

6

Because the image and text are differently in each case I would do the following.

1st grouping I would only use that in an aligned left scenario

2nd grouping I would have to use this in a centered design

3rd grouping I would use this only when floating like elements next to each other.enter image description here

  • There are actually three elements next each other in the design. I was thinking that maybe the middle one could still work when next to each other. I find it is a good compromise that would satisfy the symmetry balance of the 3 columns with the page and at the same time be more readable the the centered text. Would you agree? – borisrorsvort Sep 26 '15 at 8:31
  • I think that could work too. – riotgear Sep 30 '15 at 13:42
4

I haven’t heard of any study about your question. But I can only base my opinions on readability issues, for this specific case.

(See image)evaluationborisquestion

For the big paragraph text, is easier to read when aligned to left . It makes it a clear paragraph. Your 3rd option shows the typical “teeth” that annoys the readability. Also not applied in print design for such big amount of text.

For the image, it doesn’t make sense to align it to the left, as it is not a squared image. Since you want to use rounded images, the best is to align those in the center, at equi distance.

As for the title, this choice remains yours, dependent on the content: align it to the center with the image to give more emphasis to the “label” of the image, or align it to the left if to be read together with the paragraph block.

After all, it is all about readability. Inspire your self from print magazines if needed. They figured it out way before the web, and as designers we should not forget that domain.

All the best,

Nádia Ferreira

  • +1 for not center aligning paragraph text. – Ken Mohnkern Sep 28 '15 at 19:01
  • Would you say that if the big page header is centered and the boxes had less text, centering the paragraph like in example 3 would be acceptable? – borisrorsvort Sep 29 '15 at 17:30
1

You apparently need 50 rep to comment, so I would just like to add to @riotgear's beautiful "context dependent" answer.

You also asked about an "Acceptable amount of lines"

I would say this is again dependent on context. Only this time, instead of it being around placement/surrounding, based on you user's viewing context:

  • On the go, quickly scanning a mobile device
  • On a desktop, thoroughly researching before making a decision to purchase
  • Etc.

It is somewhat common to see shortened text for smaller screen resolutions. Or at least emphasizing text in your blurbs so that the gist can be observed at a glance. As always, this is also driven by the kind of content you are trying to display, and what information you're trying to impart. For example, content may not always be a paragraph. It could be a list, or a blurb that has a CTA link.

Regardless, limit the fluff, and cut to the chase quicker for contexts in which your user may be making a quick scan.

  • 1
    Key here for line length: "limit the fluff, and cut to the chase quicker for contexts in which your user may be making a quick scan" Be concise, use only as many words as it takes to make your point. So typically 1 liner, 2 at the most. Especially if you have multiple small blocks like this on the screen. – nightning Sep 25 '15 at 18:28
0

I have predominantly used #3, if you are doing many columns in a row left alignment creates off balance. In this site: http://www.booker.com or this site: http://tedmed.com/greatchallenges I have used center alignment. enter image description here

I think the number of lines does not matter as long as it works with its surroundings.

0

Just a thought, have you considered a: [left ] [ center ] [ right] design for a 3-part effect?

In my expectation it would look good as the text content on either side emphasizes the content margins of the page, and logically centering the center one. Basically aligning them towards their region/portion of the row.

Of course when/if they collapse into a single column on a break point or condition, adjusting the alignment may be of consideration. Perhaps you want them to be left aligned in that case, all centered, or see how the flow works as is vertically. A diagonal flow may be distracting to users or unnecessary for your uses.

Thanks for this question, you've inspired me to a new design today!

0
  • The question is about "best". You should first define "best", as there is no "one size fits all" best. It's all about target audience, contexts and objectives.
  • your question is about text alignment, but you could also question the validity of displaying a list of features horizontally (even though it is used very widely, it does not make it the "best" go-to solution). Per se, horizontal organisation is efficient to help users perform comparisons, whereas in the case of features, you are really adding one to each other. Hence, a vertical organisation might be more adequate.

To elaborate on this, think about the last time you went to buy a sandwich and had to dive into your pockets to fetch your coins. What did you do? You probably spread the coins one next to each other (on an horizontal axis) on the palm of your hand, so you could better pick the right coins (50, 20, or 10 eurocents here in Euroland) to hand over to the cashier. You performed a comparison. Same goes for interfaces: horizontal for comparison, vertical for lists of complementary elements. (example? Ebay login/register screen).

As for your text alignment question, as a UI designer I'd go for 3 because it looks visually more balanced, but again: as a UX designer I would definitely try to avoid using such layouts as they are too common nowadays. These layouts try too much to sell, whereas, IMHO, people need clarification, not another sales pitch. Make it easy for them to grasp the benefits of the product to their situation. And Features are not benefits...

That was my 0.02 euros °-)

0

As you can see, you're getting completely different answers. All of them are correct. It really doesn't matter. You'll make some users happier with left alignment, some happier with center alignment. At this point, you're just guessing.

The only way to tell which is better is testing. A simple A/B test for a few days should tell you what you need to know.

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.