Tag Info

Hot answers tagged

122

Screen digits are right aligned to maintain positional consistency between what a number represents (in base 10 that would be units, tens, hundreds, etc.). E.g. If I were to have 764 and then multiply it by 24, the answer would be 18336. By aligning to the right I've consistently seen the same unit representation in the same position, and when I've had new ...


35

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, ...


33

If you are looking for the most easily recognizable use of a 5-star system, they should work from left-to-right. The star-rating system is very common now, and when is the last time you say it work right-to-left? Users will likely find it confusing and will have difficultly understanding why they only gave something 2-stars, when the meant to give it ...


32

Digits are right aligned for similar reasons as you would right align them in a spreadsheet or a table. i.e. when you see multiple numbers (and they all have a fixed set of decimal places), then it's easier to compare the numbers with each other because the digits corresponding to each place value are in the same physical position, thus making it easier to ...


27

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) ...


26

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: ...


22

Do what fits in with your application and the target OS. However, as you point out, being consistent across your application is probably more important.


22

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 ...


21

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 ...


20

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

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

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 ...


16

The placement of the icons beside the numbers would go by the natural reading order. Status icons would appear at the end of the line. As seen in the example below, this makes sense because the viewer sees the subject first, then the count associated with the subject, and finally the status of the count. (For RTL languages, the figure would be a mirror ...


15

Of the two options you have given, the second one is the best, as it's more visually obvious where the message starts. Hence it is easier to use as people have to think less about the structure of the message and can focus more on the content. It can however prove problematic if you have some long names in the chat, so you will likely have to come up with ...


14

Right align Yes, it is reasonable to right align in your case. For other date and time formats, the alignment can be discussed. Example from Spotify: The biggest number can vary in number of figures -- in your case the hour, in this example the minute -- but the smallest cannot. So right alignment is a simple way to a keep a consistent scale along the ...


14

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 ...


14

Netflix uses filled stars from the left even though the ratings are right aligned. This follows the ability to quickly scan down the list of ratings and quickly assess at a glance which film is higher rated. Same goes with Paragraph alignment, as per Evil Closet Monkey's answer.


12

Generally, align the left of the field, not the text content: There are several reasons for this: Better alignment. For boxed input elements (i.e. with outlines, borders or shadows), the vertical | edges of the box tend to attract the eye as it scans down the left column so the form will be perceived as more organized if that vertical line is ...


11

Same direction as your text. Star ratings are most easily read when the significant part (filled stars) comes before the filler (unfilled stars). "Before" can mean left or right, depending on the direction your user reads lines of text. Unless your site is in Hebrew, Arabic or another RTL language, the stars should be LTR.


10

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 ...


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 ...


10

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 ...


10

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 ...


10

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 ...


10

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 ...


10

I don't have any data about this question, neverthless here my thought: Readability is much better for right aligned numbers. Why? Consistency. The Decimal points always stays at the same location, decimal separators too. So it is much easier for a user to identify how big a number is. download bmml source – Wireframes created with Balsamiq ...


9

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 ...


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 ...


9

When using right aligned numbers you must note that decimal separators are aligned only if there are equal amount digits after decimal separator: 12 345,90 132 987,9376 Aligning such numbers left would probably be even worse, so in cases where number of digits after decimal separator are not equal numbers should probably be aligned by decimal ...



Only top voted, non community-wiki answers of a minimum length are eligible