Questions tagged [alignment]

Placement of interface or informational items such that they line up neatly, which can be used for aesthetic design or to suggest associations between related entities.

Filter by
Sorted by
Tagged with
4
votes
1answer
81 views

Why spreadsheets (like Excel or Google sheets) align text at the bottom of cells?

See attached image, cell A3 has default alignment (bottom) and I always find myself changing alignment to the top (like cell B3), because it seems much easier to read to me. I understand there is a ...
3
votes
2answers
106 views

Left aligned vs. versus aligned chat messages

I was looking for answer through whole internet but didn't find any logical solution. Basically, I'm designing something related with chat app and my main problem is, which messages alignment should I ...
2
votes
2answers
94 views

Form alignment with numbers in B2B (integer)

i have a business application (desktop, no web). Different values ​​are entered in forms. These are then displayed in tables (grids). Numbers are displayed right-aligned in the table (as in Excel). ...
0
votes
1answer
128 views

UX solutions for data tables and alignment on large screens

I see a lot of excellent advice here regarding how to build mobile-responsive data tables. However, when it comes to large viewports, I'm not finding much. In general, I'm lost about what could be the ...
1
vote
1answer
66 views

Right side drawer - text and icon alignment

I want to give my users option to chose between right and left drawer and I'm wondering how to align elements in a Left-To-Right language. Bellow there are few examples but I want to hear your opinion ...
2
votes
1answer
36 views

Where to place output button below file field

I have multiple function which includes one or two file as inputs and a file as an output. I am not sure how to align the output button. Right align with the browse button of the field Left align ...
4
votes
2answers
374 views

How to deal with extra spacing with line-height when spacing between elements should be consistent

We want to design our website so that all elements are spaced 24px apart (paragraphs, form groups, header & content, etc.) and "related" elements (label & form field) are spaced 8px apart. We ...
2
votes
5answers
325 views

Switch camera icon on left or right side? [closed]

I'm building a custom snap-photo flow in between another flow in my App. So here I have an interesting dilemma. Should the Selfie/Rear cam toggle icon be on the left or right side and why? [image ...
1
vote
2answers
168 views

Vertical or Top alignment in card UI design

I need your advice Which is better in card UI design Vertical align or top align ? Vertical align Preview or Top align Preview As you can see, some cards with 2 lines text and some of them with 1 ...
1
vote
2answers
215 views

Should I use a left aligned scroll bar?

Usually, users expect scroll bars to be at the right side of the content they want to scroll. My page menu is located on the left side of the page however and is intended to be scrolled separately (...
2
votes
2answers
539 views

Where should I put the delete button?

I have a sidebar which shows all links that users saved. Since it's just a sidebar, I want to keep it as simple/clean as possible. Thus I use the cross icon next to the link for deletion. Option 1 ...
1
vote
2answers
1k views

Best way to align number columns in a table that has a text column after

It is a common knowledge that number column in a table should be right-aligned, whereas text column — left. In this example (taken from this article), you can see that there is a text column (...
4
votes
3answers
618 views

To align radio buttons in columns or not

I am building a form with two settings that have two choices each. The two settings are completely independent; the choice for one setting is unrelated to the choice in the other. The design calls for ...
1
vote
1answer
187 views

Rule for aligning Table Status indicators

Should status indicators in a table be centre aligned to each other or left aligned? Option 1: Left aligned Option 2: Center aligned
0
votes
2answers
594 views

Which icons have matching width / height ? Material Design icons are uneven [closed]

If you look at the containing vector of Material Design Icons, this is what makes the icons match in size. However the vectors of the content inside are not all the same sizes and follow no standard, ...
2
votes
1answer
90 views

Center text if two lines but not if they're more

I ran into this issue when designing an onboarding screen. I have the headline centered and the [NEXT] button as well. When there are two (or one) lines of text I prefer them centered as the overall ...
1
vote
2answers
85 views

Numbers alignment in a table and in a topdown label placement

Hello UX Stackexchange, Recently I'm facing an issue in terms of forms design. My developer has insisted that numbers should be aligned right. But I think that since the input for numbers are far ...
0
votes
1answer
149 views

UI Ideas to allow user to select the alignment of text

I have a feature in my application which allows user to select alignment or location of the text before printing. E.g. Top Left, Top Right. Right now, I have created a simple switch like the image ...
2
votes
3answers
560 views

What is the best alignment of the main container in a dashboard?

What is the best alignment of the main container in a dashboard if just a little content is displayed? Let's say the dashboard has a classic structure - header, footer, sidebar, and the main container ...
5
votes
1answer
683 views

Mixed alignment (LTR and RTL) in language selection list?

Most answers to this question say that for instance Arabic text should be aligned right-to-left even if the rest of the page is in a left-to-right script such as English. So, I was surprised to see ...
1
vote
2answers
2k views

Put large table and form on one centered layout

I'm currently developing a quite complex and growing website that has centered layout. These are some of the layout rules: Table width are 768px in default, but if not possible (overflow) the table ...
0
votes
1answer
40 views

Mobile view layout ordering

I'm confused about one of my eCommerce project product details page ! I couldn't understand am I keep right sidebar on top in mobile ? Now its after logo. Moreover I want to keep social media and ...
7
votes
2answers
9k views

In tables should date/time/year in table be left or right aligned? [duplicate]

I would like to know whether the date/time/year should be right or left aligned in data tables/table? Some articles mention right align, while some left align. Is there any standard followed ...
3
votes
2answers
774 views

Why Google Search bar and logo is not vertically center in large screen? [closed]

Its comes to my mind when i do googling on a large screen Desktop. the logo and search bar area is Horizontally Center (Near about, not so measurable) but not Vertically Center in case of large ...
4
votes
2answers
310 views

How to align prices in columns when both 2 digit and 4 digit variations of a price exist?

I am trying to display data similar to coinmarketcap with prices for coins, some above 1$ in which case they are rounded to 2 zeroes, some below 1$ in which case they have 4 digits following the ...
1
vote
1answer
637 views

What is the best practice for aligning table content for text/number mix? [duplicate]

What is the best practice for aligning table content for text/number mix? I know that for text/string content it should be aligned to the left and for numbers it should be aligned to the right of the ...
0
votes
1answer
600 views

Material Chips in table list

should the chips fill all the table cell width for clear alignment or is better to align them as they were a text element for better readability?
0
votes
1answer
333 views

The best approach for dashboard with forms, center or left align?

So, I'm currently trying to improve our system. But I've come across an obstacle. Whats the best approach for this kind of situation? Should I use it centered like this: Or Should I use it at left: ...
1
vote
1answer
143 views

Table Alignment [duplicate]

I am currently working with a developer who is arguing that all the number in a table should be aligned to the right-hand side(Please see below), this is only on one page on the website. I am arguing ...
4
votes
1answer
454 views

Is there a standard for text alignment inside of username and password input boxes?

I am working on designing a login window, and began to wonder if there is a standard for aligning text in an input box. A particular note here is that the username and password fields and boxes are ...
1
vote
2answers
123 views

Is there any situation when text should be center aligned (horizontally) in an input?

I recently tried to use some animations in my design and I checked some nice examples as inspiration, like this: "Inspiration for Text Input Effects". Some of them had the text centered. I know it ...
25
votes
3answers
3k views

Label & Text-box alignment. Read the case

Note: I have read this vaguely-similar question and its answers: Why might right aligned field labels be better? Case: I have a long (approximate 10-15 fields in 1 form) B2B form in which I have ...
1
vote
1answer
189 views

Align image on same line as text?

I'm a beginner at UX and have a question which may seem a bit dumb or silly. The situation is: A website which I am designing has a lot of text and images and I asked myself if it is smart to align ...
1
vote
4answers
121 views

Need different Good alignment layout

In these kind of forms, the problem is that, FirstName and LastName Labels are small in size as compared to "Explain your previous project details". So while user is filling up the form he might get ...
7
votes
3answers
13k views

Should i use left align or center align in webdesign?

I know that center align text would not easy to read , because user should be find where the next line text start. But i find that more web use the center align in their design , and it look ...
1
vote
2answers
126 views

Alignment of the labels in view/read only mode

I have a question regarding displaying the forms in the read only mode or a view mode. For example after one users inserts all the data (I use infield top aligned form labels) and then another user ...
3
votes
1answer
134 views

Order of buttons when on the right of the page

I've been going through various posts on this board to clarify my doubts but I haven't found anything yet. As I understand, there are 3 methods of positioning buttons, by importance of the action. ...
2
votes
1answer
302 views

What is the best way to align a paragraph beside an image?

The webpage has small paragraphs (5-6 lines) with images on the right of each paragraph. The text in paragraph is left aligned. The paragraph is not always as big as the height of the image that is on ...
8
votes
5answers
2k views

What's the best practice for button alignment in responsive email templates?

I was looking for case studies or UX research to figure out what is the best practice for button alignment especially in email templates, but couldn't find anything relevant. Our practice: We tend ...
1
vote
1answer
893 views

Field allignment with error labels

I am looking for possible solutions that could be used to make our forms look better when displaying errors. Our application is using Government of Canada Intranet Theme (WET 4) with bootstrap. The ...
1
vote
2answers
865 views

Why are websites center aligned instead of stretched to fit?

Trying to figure out the exact reasons why websites or web applications on wider screens 1. have space on either side (aligned center as a container) 2. instead of being left-aligned or 3. stretched ...
0
votes
1answer
62 views

How much flexibility is there in text / number alignment for non-tables?

I have a summary page design that includes both text and numeric values. The labels are under the values (as opposed to a more traditional left/right approach). I think the overall look is better ...
1
vote
1answer
302 views

Is there a best practice for alignment of nav bar content - with grid or not?

Looking at various site's nav bars I see some sites spread their content wide across the bar, anchoring their logo to the far left and login to the far right, navigation in the middle (examples: ...
0
votes
3answers
815 views

Best way to design a compact form intended for value calculations and entering lots of data?

I'm working on a very large form, which is an adaptation of an excel file my client was using. I need to find a way to group elements, align the fields, and manage several input types, keeping the ...
4
votes
7answers
452 views

Best text/icon/title alignement for feature box pattern?

You often see this pattern: My gut feeling would say the first is more readable (Is left-aligned text generally preferable over centered text?) but I could agree the third would look nicer (and ...
3
votes
1answer
135 views

Image width and alignment in long-form content: Best practices?

The website in question is for long-form blog content. The body will include images that users input when they create their blog/content entries, hence the number of images in post is not controllable....
2
votes
1answer
121 views

How to deal with multi directional footnote language?

How to deal with multi directional footnote language? suppose I have a multilingual document whatever it is (word Document or an HTML file) and I have to include footnotes in that document in multi ...
8
votes
3answers
2k views

Alignment of input fields in a form with plain text

I have a details page containing a list of information and input fields at the same time. Sections are alternating between information and input fields. I am debating between the alignment of data. ...
7
votes
4answers
4k views

Left-align or right-align a Call to Action button?

We are creating online presentation, and most of the text on the pages is centred, on the last page we have CTA, the button leads to a different website, that is aligned to the left. I was asked to ...
0
votes
1answer
167 views

Best way to align controls in different sections of a form that has different controls and layout

I'm having a hard time designing a simple form to make it look neat. Below is the snapshot of my form which has different sections in the form. Each section is having different combination of ...