139

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


40

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


36

Luke Wroblewski (aka LukeW) wrote an article about different label position. Like many things in UX Design, its a question about pros and cons.http://www.lukew.com/ff/entry.asp?1502 Mateo Penzo then did some eyetracking to test Luke's article on label placement: http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php For labels left ...


34

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


32

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


23

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


22

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


20

Yes, this is a "standard". I am >25 too and I know where to look up this guideline :-) This is guideline 2.3/16 in: Smith S. L., Mosier J. N. (1986) Guidelines for Designing User Interface Software (ESD-TR-86-278), Bedford: The MITRE Corporation | http://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/DA308/MITRE(1986)smith-mosier.pdf Authors ...


17

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


16

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


15

Darkhorse Analytics has one of the easiest to understand explanations for improving tables The points relevant to alignment of table data are: Left align text (where appropriate) Right align numbers (where appropriate) Align titles with data Resize columns to data


15

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.


13

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


12

It's ok to have input fields of different length if the size of the input demands it. However you must avoid inputs of only slightly different lengths: Last Name: [________________] First Name: [_______________] <- not ok, even if that's the actual field length in your DB Age: [__] <- ok: length contrast is sufficiently big


12

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.


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


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

Columns of figures should be tabular and right aligned if they share the same unit, and the headings should match. Guidelines, via Morten Hjerde (IXDA thread): All text left aligned All numbers right aligned Single characters are centered Numbers that are not values, like product codes for example, are treated like text and left aligned. ...


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

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


10

It seems to me that your first approach (decimal aligned) is pretty obviously much more readable. The amounts are much easier to perceive because of the same position of digits of the same significance and so it is much easier to quickly spot lager differences of the numbers by just scanning the table. Only if none of this is relevant in your design, but you ...


9

Another reason to center a site's content - it seems that some people could not stand having a huge chunk of white space, and must resize their browser to eliminate the white space before focusing on the content. From Choosing the Right Search Results Page Layout: Make the Most of Your Width: In my field research, I’ve observed people’s reactions to the ...


9

If the column is a text, left-align it If the column is a number or number + unit, right-align it (like excel) If it's a multi-part value separated by a common separator (like 1024 x 768 is multi-part value separated by x) then align by a separator. CSS for this would be something like text-align: 'x' center; (Reference: Web typography book)


9

I would strongly advise against right text alignment from the readability point of view, at least for countries where the text is read from left to right. It is the same case as reading a book, if it would be right aligned, your eye would get quickly tired by searching the start of every line. See the image: Also when user knows what he is searching for, he ...


8

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 is from Ch. 5 ...


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


8

Both options you presented have drawbacks. Have you considered removing the logout button? Other apps that I log into, such as Facebook, Twitter, and YouTube, have the logout functionality in settings. Is there a specific reason a user would need to logout functionality immediately accessible? Would users of your application need to log out frequently? ...


8

In the West we start writing and reading from the left and move to the right. As such, if the input would exceed the visible space of the input box, it makes logical sense to start from the left. If your centred search only allows for X characters, which would not take it past the bounds of the input box then the centred text-box could work. If you were ...


7

Best practice You'll find a lot of info out there about CTA tests and theories. But you're not going to find a whole lot that tells you what to do with horizontal alignment. The reason is, it depends on your design. The norm If your colleagues want to talk about what is more common, then you should align right, as you suggest. This is used more often than ...


7

In the article How to Use Centered Alignments: Tips and Examples the following recommendations are suggested : There’s nothing inherently bad about a centered alignment, you just have to know how to properly yield one if you’re going to implement it with any amount of success. The first thing you need to learn is when not to implement a centered ...


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