Questions tagged [layout]
The way in which the elements of an interface are laid out.
907 questions
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 ...
- 103
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%...
- 3
2
votes
3
answers
158
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 ...
- 51
0
votes
1
answer
101
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 ...
- 1
1
vote
1
answer
105
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 ...
- 523
0
votes
1
answer
104
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 ...
- 3
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
...
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
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.
...
- 336
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 ...
- 11
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
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 ...
- 523
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 ...
- 21
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 ...
- 10.8k
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 ...
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?
- 71
2
votes
1
answer
155
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 ...
- 83
1
vote
1
answer
259
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 ...
- 149
2
votes
1
answer
79
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. ...
- 38.3k
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, ...
- 113
6
votes
3
answers
225
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 ...
- 175
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 ...
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 ...
- 111
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 ...
- 11
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 ...
- 1
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
1
vote
4
answers
187
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 ...
- 173
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 ...
- 143
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
0
votes
2
answers
53
views
Showing multiple role linkages in a single form
Working on a form design that lets the admin manage users. Besides editing user details, they can add or remove roles, Also for each role added, it should display the reports and forms it makes ...
- 10.8k
1
vote
1
answer
232
views
Why does Amazon NOT fill the entire page width with products [duplicate]
Amazon seems to try show you as many options as possible, each being an attempt to get you to click on something to buy. However I was surpised to see they limit the page width, in the image below you ...
- 115
1
vote
0
answers
124
views
How do I design "Show all Dupicate items"? [closed]
There is an input field we need user to input a name in, and as they enter the name, system checks if there is a duplicate name and if there is, it will be shown under the input box.
Currently, we ...
- 11
0
votes
1
answer
145
views
How would I go about designing a home screen whose sole purpose is navigating to other [5] pages?
The homescreen really only needs 5 buttons that navigate to other screens. there isn't much more to show in this page since they are static screens.
This is what the homepage looks like:
I've tried ...
- 103
0
votes
2
answers
690
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 ...
- 37
0
votes
1
answer
1k
views
What are the most common screen and browser width/height sizes to handle in order to cover common devices and browsers (i.e. both web and native)?
Question
I have a library that I implemented to use in my frontend projects. (Details are not much relevant, but just in case you may wonder, they are provided below in the Background Info section. I'...
- 103
0
votes
1
answer
83
views
Adding new attributes to a screen
I am trying add three new attributes to the screen. I am very much confused and not sure where to add would be best for the below screen. Please suggest. Also if you can suggest how it would look like,...
- 3
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 ...
2
votes
1
answer
65
views
How to show two different ways to update the same router? (manual and automatic)
so I am designing a webui for a router and I am struggling with organizing the two different ways to update the router. Here is my mockup:
I don't like the way it looks with two different update ...
- 1,334
0
votes
2
answers
216
views
Dealing with non-fluid data tables
I have pages consisting of mainly data tables. So far I'm using a fluid design with Bootstrap's rows/cols. Here is an example:
As you can see at the bottom of the page, table 1 has very wide columns ...
0
votes
2
answers
141
views
A good design of adding lots of numbers?
I am breaking down a large number such as 1022056271142522954 into adding the individual digits, and want to show the process of adding the digits. What I have now is this, which overflows onto ...
- 523
0
votes
4
answers
189
views
How do you find inspiration without copying someone's work [closed]
Say you want to design a mobile app and the like a few stuff about some design choices and decisions on similar apps designed... You'd like that in your app design wouldn't that be copying
- 9
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, ...
- 147
0
votes
2
answers
106
views
Mixing true/false and open-ended settings
I've been handed a settings page to review. The settings mix true/false and open-ended items. Some of the open-ended items can be long and wordy. This is an example of the current design:
Mixing the ...
- 12.9k
1
vote
0
answers
82
views
What is a good way to display a list and editable list item on a detail page? [closed]
I have detail pages that are kind of like the attached image. An "entity" might have 1-15 children. Each child can be edited. You can also create a new child.
I can think of two ways of ...
- 13
2
votes
2
answers
6k
views
Form UX UI add item with multiple input fields
I have a form in which a user can add items with 3 inputs to each item. I need a label for each input and a label for the whole item group. I have a problem with aligning things up.
As a general rule ...
- 33
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 ...
- 31
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' ...
- 151
1
vote
6
answers
732
views
Too many expanding panels, not enough room
The scenario: An enterprise software platform uses a collapsible left panel for its navigation and a collapsible right panel to show customer info. The customer info panel would be used side-by-side ...
- 12.9k
0
votes
1
answer
87
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 🙏
- 1