You often see this pattern:
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?
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.
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)
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
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:
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.
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.
I think the number of lines does not matter as long as it works with its surroundings.
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!
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 °-)
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.
