4

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.

Improve this question
2
  • 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, 2012 at 22:54
  • Your second thoughts should answer your question perfectly, I am sure.
    – Kris
    Feb 1, 2012 at 5:11

4 Answers 4

Reset to default
5

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.

Improve this answer
10
  • Interesting,I would have assumed that people read in a z shaped pattern,thanks for the link about the F-shape
    – Mervin
    Jan 31, 2012 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, 2012 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, 2012 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, 2012 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, 2012 at 8:30
2

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:

ideas

Good luck! :)

Improve this answer
4
  • Good point re: necessity.
    – dnbrv
    Feb 1, 2012 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, 2012 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, 2012 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, 2012 at 19:59
1

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

Improve this answer
0

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.

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.