Questions tagged [layout]
The way in which the elements of an interface are laid out.
897
questions
0
votes
2
answers
44
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 ...
- 91
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 ...
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' ...
CommunityBot
- 1
0
votes
4
answers
117
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 ...
- 86
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 ...
CommunityBot
- 1
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 ...
CommunityBot
- 1
2
votes
1
answer
115
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
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?
- 11
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 ...
CommunityBot
- 1
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 ...
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
225
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
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 ...
CommunityBot
- 1
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 ...
CommunityBot
- 1
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, ...
2
votes
1
answer
158
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
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 ...
CommunityBot
- 1
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, ...
CommunityBot
- 1
2
votes
1
answer
204
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
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 ...
CommunityBot
- 1
0
votes
2
answers
331
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,684
2
votes
3
answers
5k
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
76
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
345
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 ...
- 37.3k
0
votes
2
answers
77
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
38
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 ...
- 37.3k
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 ...
- 2,205
34
votes
11
answers
12k
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
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 ...
- 1,702
1
vote
2
answers
77
views
user controlled map direction
This is an app which provides the location of grocery items in a grocery store. I am trying to figure out the best way to communicate to the user which side of the aisle the item is located, based on ...
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 ...
CommunityBot
- 1
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 ...
- 2,615
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
1
vote
1
answer
2k
views
Where to put live chat?
We are considering putting live chat on our website to be able to help our customers when they need. Now we are deciding where to put it. Usually they are location on the right bottom corner, or they ...
- 1
135
votes
6
answers
53k
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?
- 241
407
votes
24
answers
184k
views
OK/Cancel on left/right?
Should OK button be on left of Cancel button or vice versa?
Are there any studies suggesting either of the solutions?
0
votes
1
answer
372
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'...
- 14.2k
23
votes
6
answers
38k
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 ...
- 3,310
1
vote
2
answers
1k
views
What is a good reason to tell clients who want their logo to be always included in every screen that it shouldn't be done for a mobile app?
Just as the title says, I'm not a fan of always displaying the logo at the title bar of a specific app. I sometimes come across a client whose concept screens are like that. What would be a good ...
- 18.3k
0
votes
1
answer
68
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,...
- 200
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 ...
- 18.3k
2
votes
0
answers
127
views
How to display products from various menu's in a smart way? [closed]
for an application in the restaurant business I am thinking of a smart way to display ALL menu items, both foods and drinks, from various menus. Now a restaurant may have several menu cards, so a ...
CommunityBot
- 1
2
votes
2
answers
130
views
Aligning single column layout
In his article "Designing Learn JavaScript’s course portal", Zell Liew chose a single column layout aligned closer to the left.
He defends his choice by explaining that it improves legibility. ...
CommunityBot
- 1
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 ...
- 4,518
0
votes
2
answers
329
views
Laying out radio buttons and text area in a dialog
I have a dialog where I need to lay out radio buttons and their corresponding text and icons, and a text area. This is my current dialog layout, where the colors denote the icons. Note that the last ...
CommunityBot
- 1
4
votes
3
answers
1k
views
"Here will be your logo" - any idea how to visually represent this to a client on a demo website?
"Here will be your logo" - any idea how to visually represent this to a client on a demo website?
We are a company offering free demo of client's website, before going for a deal.
Although, the ...
- 1
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 ...
- 200