Questions tagged [layout]
The way in which the elements of an interface are laid out.
897
questions
0
votes
1
answer
16
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 costumer details in a CRM system.
Should the main criteria for order ...
1
vote
1
answer
48
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.6k
0
votes
4
answers
116
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 ...
6
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?
- 61
1
vote
0
answers
59
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 ...
- 73
0
votes
1
answer
123
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 ...
- 57
1
vote
0
answers
34
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. ...
- 37.3k
0
votes
1
answer
84
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, ...
- 103
4
votes
2
answers
149
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 ...
- 153
0
votes
2
answers
105
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 ...
0
votes
2
answers
328
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 ...
- 101
1
vote
2
answers
36
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
85
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
75
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
93
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 ...
- 143
3
votes
1
answer
344
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 ...
- 133
0
votes
2
answers
76
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 ?
...
- 23
0
votes
2
answers
44
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.6k
1
vote
1
answer
148
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
0
votes
0
answers
43
views
Mapping Data UI: Map objects (per childs) to additional data
I'm working on a UI problem when it comes to map data. Imagine you have a wall (object) that contains multiple layers like insulation, concrete and plaster (childs). To provide value with the software ...
- 1
1
vote
0
answers
91
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
111
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
0
answers
332
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 ...
- 27
0
votes
1
answer
371
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
67
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
133
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
60
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,146
0
votes
2
answers
196
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
111
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 ...
- 391
0
votes
4
answers
164
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
186
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
86
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.1k
1
vote
0
answers
65
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
1
vote
2
answers
3k
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 ...
- 23
2
votes
1
answer
114
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 ...
- 21
1
vote
2
answers
226
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
628
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.1k
0
votes
0
answers
65
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
0
votes
0
answers
395
views
Creating a better UX for Generating a Document, subsequently downloading and then uploading a Completed Document
I was brought into a project to improve the general UX/UI of an web application.
The section of the application where I have hit a roadblock works like this:
User enters Information and selects ...
- 1
1
vote
1
answer
59
views
Designing interface to accommodate physical devices with different number & layout of ports
The following device is a network switch.
This particular model contains 24 ports, arranged into 2 rows with 12 ports on each.
There exists hundreds of models of switches, each with different number &...
- 431
1
vote
1
answer
115
views
How to visually emphasize one card among many
I'm working on a portfolio and I want to present myself as "T-shaped designer", so I sorted my works into 3 different categories. These categories will be shown as clickable cards/gallery ...
- 296
1
vote
2
answers
393
views
Table with one column that has a lot of text
I am trying to improve the UI of a design of a table that has three columns. The first two columns have one or two words and the third column has a fairly long list of items.
My first solution was to ...
- 11
3
votes
2
answers
124
views
Why do web paragraphs break, while print paragraphs indent?
Both indentations and line breaks create a strong disruption that signals "this is a new paragraph" to the user.
Question: Several decades into web browsers becoming a major form of ...
- 12.1k
1
vote
1
answer
99
views
Show conditional elements?
Context:
I am designing an application with different login options.
In the settings of the application, you can turn on/off each of the logins options.
50% of the logins options require additional ...
- 35
0
votes
1
answer
441
views
Question about Grids and Layouts in UI Design
grids and layouts are something that i've struggled with since starting my design career two years back. I've read books like grid systems and watched several videos and courses but as a UI designer, ...
- 1
1
vote
1
answer
66
views
Google pay and Credit card in the mobile app
I just need one or two advice, regarding on this new booking system as the developer team create it without my knowledge and didn't ask me for advice or design UX before they went developed it and it ...
- 113
0
votes
3
answers
240
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 ...
- 131
1
vote
2
answers
197
views
UX Pattern to make it easier for the user to fill many different select boxes
We have a web form and the user is required to fill in atleast 5 (maybe more) select boxes. Our current UI layout (see below image) looks like alot of work to the user. Are there different UX Patterns ...
- 111
1
vote
1
answer
62
views
Displaying a simple list on different viewports
I am building a simple app with two screens that show a list of quotes (inside cards), an image and an about screen. On mobile it looks fine (using a tab approach), but for bigger viewports like ...
- 113
0
votes
2
answers
50
views
How do I best make a tally of items on a mobile phone
I'm designing a wireframe for a mobile app for logging materials.
One of the features needs to be able to log the makeup of a material.
fx in the case of a technical fabric the composition can look ...
