Tag Info

Hot answers tagged

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


31

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


23

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


21

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


20

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.


19

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


19

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


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


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


15

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


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

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


13

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


13

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

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


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

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

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


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

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


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

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


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

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


7

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


7

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


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



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