Hot answers tagged alignment
28
I think this applies to this question too and answers it:
(Spoiler: It doesn't matter.)
In cases like this, it often doesn't
matter what you do. Either choice has
good arguments in its favor, and no
choice is likely to cause usability
catastrophes. It might save some users
0.1 seconds if you pick the "right" choice for certain circumstances, ...
19
Q1: First, the convention is to have these on the right, correct? Why
is that?
There are a few reasonable explanations for putting the drop-down arrow on the right (at least in LTR languages):
Readability: Since LTR text naturally starts on the left, this design gives the drop-down arrow some natural whitespace in most cases, and helps make the ...
18
Luke Wroblewski is the guru on this field.
He has written an entire book on web form design (Web Form Design) and he published an interesting article on the label-issue some years ago.
You can read the full article here: http://www.lukew.com/resources/articles/web_forms.html
Summarization of the article:
Vertical labels
Should be used when:
...
17
I have yet to meet a client who, when presented with a centered layout, says "can I see it left-aligned?" so, of the theories offered up in the Centered Layout vs Left-Aligned Layout thread at the IXDA discussion board, this one seemed to make a sensible case for the improved readability of a centered layout:
Left-aligned may not be evil but on a
wide ...
17
I can see a problem with inconsistency if you remove the buttons entirely and start moving active buttons around the toolbar.
The usual practice is to provide inactive buttons with an inactive state eg grey or faded. The additional benefits of this approach is that you are keeping the user informed via visual feedback of the state of the system; invisible ...
16
When strictly speaking about alignment, there is no right answer other than to be consistent.
However, the alignment of buttons is related to the positioning or logical order of the buttons.
There are two general paradigms that can be applied to the positioning of buttons**.
Reading Order - The first button encountered in reading order is primary (Ok) ...
16
I'm not going to copy everything directly, so here's a link to a discussion on IxDA.com on this exact topic. It has references to several research studies showing why left-aligned text is better. You are essentially right — it takes more work to read centered text when going from line to line. You are also more likely to lose your place because you ...
11
Fields should generally be an appropriate size for their expected input, which may well mean that one field in a form has a different width to another field. The size of a field provides a useful clue about the information that should be entered into it. For example, if you're asking a user to input a postcode/zip, a field that is 20 characters long would be ...
10
form labels should be consistent.
here's one of many solutions (I've used radio buttons which amounts to the same thing as one checkbox, but you could stick with the checkbox)
or you could top align:
edit to add:
http://www.slideshare.net/lukew/web-form-design-best-practices
good advice on form alignments....
10
Research has shown that consistent placement of the buttons is more important than labels, icons, or colour of the button.
Orbitz Can’t Get A Date
From these results, we inferred the location of the icon is more important than the visual imagery. People remember where things are, not what they look like.
This was also the reasoning behind Windows 7's ...
9
Here is some advice, taken from Quince, which has many examples of sites and software using each pattern effectively. Definitely check out this site.
Rationale Behind Top Alignment
"Each label and input field is grouped by vertical proximity and the consistent alignment of both input fields and labels reduces eye movement and processing time. Users only ...
8
No,for the simple reason that justified text can often create large blocks of white spaces which breaks the continuity of flow of words. To quote this article found in UX movement
When you use justified text, you’re not only making text difficult to
read for non-dyslexic users, but even more so for dyslexic users.
Justified text creates large uneven ...
8
When the form is too far off to one side it emphasises the fact that it doesn't fill the page more than it would if it were centred. And drawing attention to that element would be drawing attention away from the form that you want to be the focus.
So I would suggest having the form centred.
However I would also suggest not having a stark white ...
8
Yes, if there is a good reason to have two different style forms.
Remember that you should break any UX guideline when you have a good reason to. Consistency is one of those, but it is one that you should look at carefully before breaking it.
The biggest test is going to be whether users find it odd or problematic. Make your decision primarily from what ...
7
Stacking the controls is much better in terms of both scannability and association of the right control with the right label. In a horizontal list the distance between the control and the label is often similar to the distance between the label and the 2nd control, which can be extremely confusing.
The actual values also may have an effect on this. As ...
7
Option 3 (of the options shown) - it immediately gives the user the next piece of information that the user needs after reading the field label.
Immediately after reading the label, even before looking at the entry field itself the user will be thinking about the value to enter and wondering what units or how to work it out.
I know all three options show ...
7
I'd personally try to investigate this bearing in mind that people read online following the F pattern. In my humble opinion, if the menu is centered it breaks the F pattern into a T pattern forcing someone to expect more center-aligned content below.
As a natural habit (in the West), people read from left to right. I'd prefer left-aligned menu, so using ...
7
I guess if you put the rows a bit further away, and perhaps give a visual clue on baseline it should work.
See: http://jsfiddle.net/s35bh/2/
A bit subtle perhaps, therefore not necessarily the best solution, and you should be able to do this through alignment and proximity rules, but it does the job.
My rule of thumb is: if you're out of options grid ...
7
The size (length) of a field is a matter of usability in that it can provide a valuable affordance to the user.
Take the following example:
download bmml source – Wireframes created with Balsamiq Mockups
Even without labels you can probably guess what the fields are:
download bmml source
Obligatory Wroblewsky quote (The above example ...
6
One thing I don't see mentioned that has led me to default to top-labels these days is the mobile web. A big advantage of the top-labels is it makes your form that much more ready for use on a cell phone without having to rebuild the entirety of the CSS for a mobile device.
Since many phones these days will zoom in on your form field, having it to the left ...
6
There's a variety of ways to go about this. Here are some examples:
Wordpress uses massive fields:
Vimeo has an interesting picture
Twitter has a column solely for the call to action and for help mesages. Actually I think this is a powerful and impressive use of whitespace in the design
Moo centralizes everything in a box and makes the ...
6
Yes. English text is usually left-aligned. Numbers are normally aligned so that the various places (unit, tens, etc.) are in columns. If the numbers are integers, this just means right-aligning the numbers. If they have decimal fractions, then the decimal places should be aligned, with the units digits all in a vertical line.
This makes it easy to compare ...
6
Benny has given a great answer and I agree with what he has to say with regards to the fact that the contact us form is not part of the booking process and there should be no hard focus with regards to right aligning the submit button just to ensure consistency.
However you should ensure that your form layout is such that it allows the reader to quickly ...
6
I would go for option two since with option one,I have to drag my eyes all the way to the right to see the help icon,compare its alignment with the text field (and if the text field is short,then its a bit of effort) and then come to the conclusion that that the help icon is related to that text field.
However with option 2, its easy for me to make the ...
5
If your labels do say "high, medium, low" and this not just an example, then I'd say the first version is better, because it also illustrates (in a way) that the first one is "higher" than the others (and also, "medium" is in the middle, "low" is at the lowest position. On the other hand, if you had labels like "left, middle, center", I'd choose the second ...
5
On Facebook, it looks as though the user's name has been deliberately padded from the top to allow the background colour to be optionally set without changing the structure.
When this is done, suddenly the names look much more in place:
5
If you consider Google to be a successful company who have started to shape up on User Experience the last year, then that is your answer. They implement a full width top navigation bar on all of their sites, and some of the content is narrower and centered in the middle. It looks like the pattern in your question.
Google bar’s updated look
Posted on ...
5
Left align is basically the default for Left to Right languages just because all content will line up; this is a powerful tool for readability. Generally stick with left aligning unless there's good reason not to.
The exception, as you notice, is numbers. Here's a little blurb by Christian Heilmann:
I chatted quickly with Luke Wroblewski about it (one ...
5
Anything that adds cognitive load should be avoided. Different looks (alignment in this case) may get user to think about other things than you want them to. This is especially true in the checkout process of an e-commerce site.
Imagine a user on step four of five starts to think about why the background suddenly changed, why the logo was omitted, or why ...
5
There are good examples for each of the cases, but they are chosen in conjunction with the navigation placement and overall site design.
OKCupid uses a top filter and it suits their needs well, however they already have a left navigation bar, a top filter is the only option that makes sense for them.
oDesk on the other hand uses a left filter, which ...
Only top voted, non community-wiki answers of a minimum length are eligible
