I am working on updating the layout and styles of our existing application. At the top of a very wide table that has lots of checkboxes and fields is a information box. We need to explain some basic information to the user.

The original information box is centered and 600px wide. It has a comfortable amount of text per line. However it looks very out of place compared to the rest of the design, I would rather it be anchored to the side or the whole width of the table.

The following image has the three possible layouts I am contemplating.

Possible Layouts

The first seems like too many words for each line. The second and third seem better. If someone has links to how other sites successfully execute instruction sections on the top of very wide forms would be the best resource for me.

  • 1
    I also thought maybe have the instructional box be as wide as the form, but have padding on the sides of the text to make it readable. – Eric H Jan 31 '12 at 22:54
  • Your second thoughts should answer your question perfectly, I am sure. – Kris Feb 1 '12 at 5:11

The most readable box will be the one aligned to the left and taking up no more than half of the width.

The text needs to be aligned to the left because you're working with a table in a left-to-right language. People don't read tables completely - they scan them for the records they need, which is similar to the way people "read" web content: the F-shape. Since you want users to read the instructions, you'll have to present information in the layout most comfortable to them. (If you want to adapt the layout to a right-to-left language, you'll have to change the alignment accordingly.)

When your text takes up the entire 1200px across (I realize the actual text a bit less wide to account for padding), it's too wide to be read comfortably. On my 15.6" diagonal screen with 1920×1080px resolution, such a text box will measure about 8.5" (~21.6cm) wide. When you go to a lower resolution or greater diagonal screen size, that distance is going to increase.

The optimal width of a column, according to this answer on UX.SE is between 40 and 75 characters depending on the font size.

  • Interesting,I would have assumed that people read in a z shaped pattern,thanks for the link about the F-shape – Mervin Johnsingh Jan 31 '12 at 23:38
  • Z-shape applies to books. In a table, like on a web-page containing extra info, people are going to follow the F-shape. – dnbrv Jan 31 '12 at 23:46
  • I am wanting to have some sort of set width for each of these boxes. There will be many instances and I don't want them to sized randomly due to text size but follow some sort of pattern. This application is not using the grid system either. – Eric H Feb 1 '12 at 0:11
  • @EricH: When I said that the optimal width is 40-75 characters, I didn't mean the box should be of a random size in that range. Sorry, if that's how it came off. Obviously, you need to size it to keep it in balance with the surrounding elements. – dnbrv Feb 1 '12 at 4:27
  • @dnbrv: it may even be advisable to keep the box the same width as the table, keeping the box and the table visually "connected". Drawback could be that it may look peculiar to have a very wide box with narrow text. – Marjan Venema Feb 1 '12 at 8:30

Does the user really have to see this box every day?

You wrote that it is for "basic information". How much focus do you want to put on this small box with basic information? The F-shape reading pattern mentioned in another answer might be unrelated. It is more concerned about how human eyes scan a page, and less about where to place information or provide help text in any given application. How you should layout your info box is totally dependent on its content and purpose.

Is this basic information worthy the prime spot of your application?

Is the info box context sensitive, and changing on user actions? Consider if maybe just a small mouse over pop up could be enough? Or putting it somewhere else completely, like in a corner or collapsed behind a help button.

Back to your design, if needed, your first instinct seems good to me. Not too wide to read, and centred to look pretty. You wrote:

The original information box is centered and 600px wide. It has a comfortable amount of text per line. However it looks very out of place

Maybe a designer can help you to make that original solution look more in place? These sketches are ugly, but just to show how I am thinking:


Good luck! :)

  • Good point re: necessity. – dnbrv Feb 1 '12 at 13:30
  • I value your input and yes this application needs to display this information everytime. The users tend to not be experts in any application and need to be reminded everytime. Also it maintains accountability for the user. If the user made a mistake the application owner does not have to do work overtime to fix issues due the error being there "fault" – Eric H Feb 2 '12 at 17:32
  • I am thinking about how to make the message more context sensitive and less just a message at the top, but it does not seem obvious at first. – Eric H Feb 2 '12 at 17:33
  • If there is a save button, you could pop at its press. And later even add logic for when it needs to pop or not. But I guess that's another question. :) – JOG Feb 2 '12 at 19:59

I am in favor of the first option primarily because your user will read from left to right and back and the in a zig-zag manner and once he has finished reading his eyes would follow the natural path back to the start of the text box.However in the case of the right aligned,the user has to scan all the way to the right,read the text and then scan to the start of the box.

I also prefer the longer approach because you want them to get to the form quickly in one continuous flow and the more lines you have(due to the shorter length) ,the longer it will take

Regarding readability, your text should not have more than 50 characters per line, with standard font size of 16px and line height of 1.45. You can experiment by yourself to see that.

It can be floating with little arrow pointing to exact row. Otherwise I would go with positioning it left.

Your Answer


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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