Questions tagged [layout]
The way in which the elements of an interface are laid out.
907 questions
2
votes
1
answer
85
views
Price Tables: what's the best position for "Best value" option on even grids?
Is there a documented 'best position' for highlighting the 'best value' or 'recommended' option in a table with four columns? In tables with 3 or 5 columns, the best placement is typically the center. ...
CommunityBot
- 1
2
votes
1
answer
254
views
Guidelines for layout of component that can have variable sub components
I've been asked to design a component that lists objects on a page. The component needs to be able to display between 3 and 6 numbers of objects in the list.
Here's what I have for 6 objects in a list:...
CommunityBot
- 1
1
vote
2
answers
53
views
Offering downloadable marketing content as the final steps in an analytics console
I'm a UX intern working for a startup and i'm building an analytics platform that offers analytics driven marketing.
The current flow essentially moves the user through analytics from high level to ...
CommunityBot
- 1
6
votes
3
answers
226
views
Is "at the front" top, or bottom?
At our office we have a dual garbage bin behind a door. Let's put aside the fact that you have to open a door, and then pull out the bins.
What has puzzled me is that the labels were placed on each ...
- 1,217
1
vote
2
answers
295
views
What is a better way to present sign up / login form?
It has become quite common and dare I say annoying these days to see websites and mobile apps prominently highlighting the 'sign up' for new user fields but at the same time why do they make 'Login' ...
CommunityBot
- 1
0
votes
1
answer
56
views
What is the significance of the undocked state on the UI layout of the pane?
On the UI layout of the pane, there are operations of Dock and Undock.
We can see that in the undocked state, other interfaces will be covered. What is the function of the pane in the undocked state(I ...
- 3,017
0
votes
2
answers
394
views
Seeking UI design advice for implementing trash function in a list of sections
First time poster here, and seeking UI design advice. Feel free to ask me any follow up questions for clarification.
This is for a web-application. Requirements for this UI component are that the user ...
CommunityBot
- 1
1
vote
4
answers
188
views
Header Alignment on centered page layout
Context
Current page layout stretches across the screen, as this was overlooked in the past due to a small team. I'm looking to fix content width and stretch first and last column of the grid system ...
CommunityBot
- 1
3
votes
1
answer
306
views
How to deal with centered content on a layout with a sidebar?
I have the following view in my application, where a list of cards containing some information and a button is present. In order to prevent uneeded space within the cards and make the button closer to ...
CommunityBot
- 1
0
votes
1
answer
64
views
Need help with a vertical form in a pane above a table
I'm struggling to add a form that needs to sit in a pane above a table. The form fields needs to be vertically arranged. It currently feels...off. I've tried centring it and stretching the card to 100%...
- 20.4k
4
votes
2
answers
453
views
Adding comments to a list of items, is there an elegant solution?
I've been looking through the forums and haven't had much luck. I have kind of a weird dilemma, I hope someone can help.
I have a list of items (like a list of favorite movies) each item has buttons ...
2
votes
1
answer
344
views
Handling long text in width-constrained layouts
I'm working on an application in which there are occasionally single-word strings that need to be represented in a box that isn't wide enough to contain the word unbroken:
The example above is in ...
- 1
2
votes
1
answer
156
views
Screen-size based layout presets
I am looking for a better way of designing settings page, where users can define which layout preset they want to use based on their screen size.
Use case 1:
I started session on a 27" desktop ...
CommunityBot
- 1
1
vote
1
answer
248
views
"Translate" mobile app mockup dimensions from desktop to smartphone size?
I'm pretty sure this is a common issue, but I'm not certain if I'll be able to explain myself correctly. So please bear with me.
I'm including a screenshot of a mobile app I'm working on in my ...
CommunityBot
- 1
0
votes
1
answer
88
views
Optimal layout for a horizontal product card
I’m wireframing the product list of an e-commerce app. The client requested a horizontal card layout with a lot of information that is necessary to display:
Product image
"Sale" badge
...
CommunityBot
- 1
1
vote
2
answers
129
views
How to make it clear to a user that they can click a row of data and get to sub-rows of data WITHOUT using collapse or expand?
Basically users have >25,000 rows of data. I chose pagination to allow the user to navigate the data. In some cases there are sub-rows. I would like to allow the user to "dive in" to ...
CommunityBot
- 1
0
votes
3
answers
188
views
Problems with UI UX design for grid elements
i am facing a problem with my grid elements, the design is made to look good when the grid element is filled with long information, but it looks empty and filled with lots of white space when there is ...
- 3,386
2
votes
3
answers
160
views
Page indicator dots - necessary, useful or redundant?
In our credit card wallet app, we're debating the value of page dots to indicate how many cards a user has. This is more or less the layout of the section with the cards in our app today.
If the user ...
- 166
1
vote
1
answer
98
views
How can you combine the full-width laptop admin UI that has a sidebar, with the centered readme / content UI?
Here we have the nice and elegant Linear App admin UI stretching full laptop width:
And here we have a "centered" slim column of text like in a nice clean distraction-free blog post.
Often ...
CommunityBot
- 1
0
votes
1
answer
102
views
UI Design for dynamically manage multiple groups of form elements
I'm developing a user interface where users need to dynamically manage multiple groups of form elements. These groups may vary in content and quantity. What user interface guidelines and patterns ...
CommunityBot
- 1
0
votes
1
answer
88
views
UX article/study on CLS (cumulative layout shift)
I’m struggling to find any article/study on CLS from UX perspective, almost all resources I found are written from SEO standpoint. Please could anyone point to any article/study? Many thanks 🙏
CommunityBot
- 1
0
votes
2
answers
691
views
How wide should my artboard be (Container width)?
I came to a point when I needed to decide what would be the container width for my pages.
My project involves designing a web platform with a dashboard and a side menu for navigation.
I made a little ...
CommunityBot
- 1
0
votes
1
answer
205
views
2 steps process in side-panel
We are designing an e-commerce website where our client is a marketplace for merchants to offer discounts or great prices on services/products to end users.
Some merchants may give multiple options ...
CommunityBot
- 1
0
votes
1
answer
320
views
Study showing it's better to have images in their own row on a text/news article page, rather than in a column with text wrapping around it
I'm remembering a usability study I once saw that demonstrated it's better for scanning or readability on a website's news article or text-heavy page to have any photos as their own row by themselves, ...
CommunityBot
- 1
0
votes
2
answers
454
views
Page thumbnails - right or left side of document?
Working on a "fancy PDF viewer".
Was thinking of moving the Page thumbnails to the far right of the page (to clean the design up a bit), but all apps I can recall have the thumbnails on the left side ...
23
votes
7
answers
40k
views
Best layout for a settings page
I have a settings page with a fair number of options. See screenshot
Each of the links will take the user directly to a form where they can change the details (ie Business Settings) or a search/list ...
- 101
1
vote
1
answer
106
views
Ideal way to draw complex network process diagram?
How would you redesign this so it is easier to follow along with the pathways that are interacting?
The arrow means that thing goes and binds to that other thing.
The | means it interferes with that ...
- 1,812
36
votes
11
answers
13k
views
Is there a usability reason for centering a website's content area on a page?
A lot of websites these days have content area's which are center-aligned: User Experience Stack Exchange is an example.
However some sites are left-aligned, e.g. Adobe Support Community, Area 17, ...
- 103
0
votes
1
answer
106
views
How to present rooms in a grid style for booking
I am creating a booking style website where students can reserve classes/labs/gyms etc
I feel like my current grid style feels overwhelming. Does there exists a more user friendly way to display this ...
- 20.4k
22
votes
7
answers
21k
views
Fixed width for buttons or proportional with the text?
What is the best practice for a UI, to make all the similar buttons with a fixed-width, no matter how long is the text (with the condition to fit) or make the width proportional with the text and add ...
- 101
140
votes
7
answers
58k
views
Why do numpads on keyboards and phones have reversed layouts?
I came across this on the web. It's supposed to be funny, but we all know better :)
So, why are the numpad layouts different, and what are the reasons behind each?
- 263
0
votes
0
answers
72
views
Complex table design based on diagram selection
enter image description hereI am building a web based tool to manage car repairs. The user would select an area of the car and a part from a list of supplied parts. They would then select what they ...
- 1
18
votes
13
answers
4k
views
Separation of play and pause buttons for playing media
I seem to remember reading somewhere that having the play pause actions triggered from a single button that toggles is a bad idea
It seems to me that this idiom works well (e.g. pressing space to ...
- 101
0
votes
3
answers
287
views
Design pattern for collapse but not entirely
I have a bunch of cards in a 2 column layout in my grid. If there are more than 2 items to display I want to show only 2 of them and hide the remaining behind a "Show all" button.
What is ...
CommunityBot
- 1
1
vote
2
answers
141
views
How to redirect viewer's attention to a certain card among similar cards?
I am a product designer but I also work on illustrations and web designs on the side. On my portfolio, I would like to motivate viewers to click the first card (UX/UI card) rather than the other two.
...
- 20.4k
1
vote
1
answer
113
views
Updating UX for time selection
I am building a tool to convert between local times across multiples locations: cities, airports, timezones. Right now, the site updates the local time every second. I want to be able to let users ...
- 111
1
vote
0
answers
51
views
How to initiate designing a iPaas Product from scratch? [closed]
As a Product designer working in an iPaas company, I have worked on various features of the product. On both the scenarios like designing a new feature and also improving the existing features. The ...
- 21
2
votes
2
answers
108
views
Best method for ordering information in a form
Is there a good method for deciding on layout and order of information in a complex form ?
For example - deciding how to order many customer details in a CRM system.
Should the main criteria for order ...
- 426
2
votes
1
answer
62
views
Whats a better way to group dates on a form
Looking to improve a claims form that claims assessors to review and approve in the insurance industry. One of the comments the user mentioned was that dates related to the claim was all over the ...
0
votes
4
answers
154
views
Choosing between two UI variations
Assumption: I assume no user testing could be done, and implementation decisions should be made based on the logic and available data.
Let's assume there are two possible implementations of how UI ...
- 153
7
votes
4
answers
4k
views
According to the basic principles of UI Design, which alignment works the best as shown in the following picture
which alignment works the best and what is the proper way of doing it?
- 11
1
vote
1
answer
260
views
Best layout for radio buttons on forms
I have a webpage with a form arranged in a "Z" pattern, consisting of input fields. Additionally, I need to incorporate three radio button choices into the layout. Given that I've organized ...
1
vote
1
answer
153
views
How can I improve the UX of the following time picker. This should allow the users to set their weekly availability
Availability is Set
Availability is Not Set
I am looking to improve the UI and UX of the following page where users can set their weekly availability for a meeting. I have attached 2 screenshots, ...
2
votes
1
answer
160
views
Does bigger/wider grid better provide better user experience nowadays?
Does bigger/wider grid provide better user experience nowadays as 16:9 are more common?
I don't see many 960px/1000px wide layouts these times.
There is some data favouring e.g. bigger buttons, but ...
CommunityBot
- 1
1
vote
2
answers
2k
views
Showing error messages on form without shifting layout?
I have a form where I want to show some errors (like "Email field required"). What I currently have is a red error message under the description (like shown below).
The issue is, when the ...
- 1,812
2
votes
3
answers
6k
views
Group rows in a table
It is very common to see tables on web applications nowadays but is not that simple to see tables with groups of rows.
I have a table which can have multiple groups of rows. Each group can have from ...
- 205
1
vote
0
answers
170
views
Best layout tactic for repeated, semi-sequential, nested form inside a bottomsheet [closed]
I am developing a mobile app that offers a GIS utility. As such, the main feature of the app is a map and a graph. In order to run the utility, the user must input 2 locations, i.e. a start and an ...
- 121
3
votes
1
answer
548
views
When to display a modal popup over a card flip on mobile or desktop?
I am building a Bootstrap website for a mobile application. It's basic HTML with no real backend coding involved at all.
I have a photo with a chapter and verse from the Bible. I want to show that ...
- 38.3k
0
votes
2
answers
90
views
How do you manage spacing between text styles in different context?
I am using texts in different context and thus I am changing the padding depending on the context. (as in the attached image)
Regarding collaboration with developer what is the good practice ?
...
- 33
39
votes
7
answers
12k
views
In burger menus, should "Logout" always be at the bottom and why?
I noticed this while using websites that require login/logout - I get used to accessing the "Logout" button at the bottom of the menu. For example:
On burger menu, the logout option will always be at ...
- 38.3k