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
-1
votes
0answers
20 views

Header Padding for Card

I am working on web component design and here are different type of headers for the card design. We want to create a single card component but there are many variations of the header from each ...
1
vote
0answers
32 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
35 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 ...
3
votes
2answers
109 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
246 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
109 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 ...
0
votes
2answers
132 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
419 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
484 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
500 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
98 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
354 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
72 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
77 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
146 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
476 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
543 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
1k 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
39 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 ...
6
votes
2answers
6k 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
582 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
304 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
535 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
499 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
265 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
126 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
386 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
120 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
172 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
119 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
11k 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
116 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
122 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
252 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
1k 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
838 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
506 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
60 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
288 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
735 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
419 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
132 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
111 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. ...
6
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
165 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 ...
2
votes
1answer
2k views

How to align a Date/Time in a field?

I have some issues about choosing how to align a Date/time data type in a field. Which is the best way to align this type of date and why? Right or left? P.S We use WPF. [------25.03.2015] or [25.03....
5
votes
3answers
946 views

Is there evidence that text in a table vertically aligned middle is easier to read compared to vertically aligned top?

I have an html table and there is one column that is much taller than the others and I am trying to get a recommendation if I should be vertically aligning the rest of the columns to the top or middle....
70
votes
7answers
12k views

Why are calculator screen digits right-aligned?

Is there any logical reason behind digit alignment on a calculator? If yes, can we apply this for visual interfaces of numbers on the web?