Skip to main content

Questions tagged [layout]

The way in which the elements of an interface are laid out.

Filter by
Sorted by
Tagged with
1 vote
1 answer
55 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 ...
Lance's user avatar
  • 451
0 votes
1 answer
78 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 ...
Genio's user avatar
  • 3
0 votes
1 answer
62 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 ...
syoombraaya's user avatar
0 votes
0 answers
65 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 ...
Ryan's user avatar
  • 1
1 vote
2 answers
108 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. ...
Bluebug's user avatar
  • 336
1 vote
2 answers
110 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 ...
MYaelUXUI's user avatar
1 vote
1 answer
83 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 ...
Jrom's user avatar
  • 111
1 vote
0 answers
37 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 ...
swagstruck's user avatar
1 vote
1 answer
49 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 ...
Lance's user avatar
  • 451
2 votes
2 answers
94 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 ...
Ido Levran's user avatar
2 votes
1 answer
61 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 ...
Blue Ocean's user avatar
  • 10.7k
0 votes
4 answers
143 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 ...
elem3ntary's user avatar
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?
Khalid.'s user avatar
  • 71
2 votes
1 answer
102 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 ...
Romqa Ivanov's user avatar
1 vote
1 answer
196 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 ...
Mourad's user avatar
  • 87
2 votes
1 answer
51 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. ...
Devin's user avatar
  • 38.1k
1 vote
1 answer
120 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, ...
Răzvan Puiu's user avatar
5 votes
2 answers
171 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 ...
Koert van Kleef's user avatar
0 votes
2 answers
155 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 ...
Atharv Choudhary's user avatar
0 votes
2 answers
1k 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 ...
Artur Carvalho's user avatar
1 vote
2 answers
46 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 ...
Alex's user avatar
  • 11
0 votes
2 answers
225 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 ...
Ashley's user avatar
  • 1
1 vote
0 answers
126 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 ...
Seth Lutske's user avatar
1 vote
4 answers
134 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 ...
Angel's user avatar
  • 173
3 votes
1 answer
467 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 ...
CodeMan03's user avatar
  • 143
0 votes
2 answers
82 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 ? ...
chamou2099's user avatar
0 votes
2 answers
49 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 ...
Blue Ocean's user avatar
  • 10.7k
1 vote
1 answer
182 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 ...
run_the_race's user avatar
1 vote
0 answers
104 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 ...
user163962's user avatar
0 votes
1 answer
120 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 ...
Ahmed Nasr's user avatar
0 votes
2 answers
564 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 ...
Uzi Cohen's user avatar
0 votes
1 answer
834 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'...
Mehmet Kaplan's user avatar
0 votes
1 answer
70 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,...
puchu's user avatar
  • 3
0 votes
1 answer
179 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 ...
Antonis Vogiatzis's user avatar
2 votes
1 answer
62 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 ...
Gene's user avatar
  • 1,324
0 votes
2 answers
202 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 ...
user3262284's user avatar
0 votes
2 answers
123 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 ...
Lance's user avatar
  • 451
0 votes
4 answers
176 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
Drey's user avatar
  • 9
0 votes
1 answer
259 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, ...
dan00binator's user avatar
0 votes
2 answers
99 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 ...
Izquierdo's user avatar
  • 12.7k
1 vote
0 answers
70 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 ...
windofchange's user avatar
2 votes
2 answers
5k 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 ...
user2550900's user avatar
3 votes
1 answer
194 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 ...
João Santos's user avatar
1 vote
2 answers
258 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' ...
Suyash's user avatar
  • 151
1 vote
6 answers
705 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 ...
Izquierdo's user avatar
  • 12.7k
0 votes
1 answer
76 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 🙏
WEX's user avatar
  • 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 &...
cgtk's user avatar
  • 461
1 vote
1 answer
139 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 ...
Bluebug's user avatar
  • 336
1 vote
2 answers
517 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 ...
rageypaigey's user avatar
3 votes
2 answers
130 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 ...
Izquierdo's user avatar
  • 12.7k

1
2 3 4 5
19