Questions tagged [layout]
The way in which the elements of an interface are laid out.
848
questions
1
vote
1answer
13 views
Is filling the center-area of a GUI with several forms a good practice?
Center-area concept:
For a desktop application, we commonly find a similar structure for the GUI:
Top menu / Ribbon
Dockables left and right to explore the content and show properties.
Center-area ...
1
vote
0answers
30 views
Step shaped visual layout of cascading filters
I find this layout of cascading filters:
much more intuitive and much more "welcoming" to use, over the traditional, horizontal axis layout:
I am trying to explain to myself why this is so....
1
vote
1answer
29 views
Best layout/design for profile CRUD actions suggestions
I am currently working on a university project on an android app, that communicates with a device via Bluetooth and uploads profiles to it. So in the app I have a UI that provides different CRUD ...
0
votes
1answer
53 views
Image grid with clear order and different aspect ratio
I am making an image grid which shows about 200 images and they are user submitted, so I do not know the dimensions of the images. Some are portrait. Others are landscape. Most are landscape.
I have ...
3
votes
2answers
75 views
How best to display a network of friends?
Related How to properly show one's friends in a graph if the number of friends is large, but 1) I have max two levels of "depth of friendship" and 2) I want to group friends.
I want to show ...
1
vote
2answers
63 views
How is this UI called (multiple pages with settings, dots on bottom marks progress, usually after install of app)
On mobile phone when I install some app it shows few pages with basic settings, at the bottom are dots indicating progress, sometimes back/next button. How is this thing called? I want to find and try ...
3
votes
2answers
109 views
How to group multiple buttons on mobile
I'm working on a game website for desktop and mobile and one of the pages has 5 action buttons:
Edit (no text, just pencil icon)
Share (no text, just standard share icon)
Play (just text)
Compare ...
0
votes
0answers
36 views
Holy grail layout solution that makes complex apps being usable on mobile?
What's the best solution for responsive holy grail layout in the context of complex responsive design?
Some common layouts done in this way
Hubspot CRM
Problem: it doesn't work on mobile as most of ...
1
vote
3answers
74 views
How do I lay out the special offers page when most offers only apply to one product?
I am building an ecommerce web site, and am trying to find a way to present the special offers. Products on special offer are grouped, so the offer applies to all products in that group. For example, ...
0
votes
1answer
81 views
Can I improve this layout for a better experience?
Here I have tried two different layouts for fitting this information inside of my mobile app.
The picture inside of the app is actually a video demonstrating what to do. The first (left) layout ...
7
votes
3answers
175 views
Excel spreadsheet colour coding/design/layout principles?
With programming you have "software design patterns", with websites you have design standardised (and then some templates, e.g. "bootstrap"), and people know where the input etc. ...
1
vote
1answer
51 views
Should a web-app page title appear on every page, even with the current page highlighted in navigation?
I'm facing a dilemma with other designers within our team about whether the main page frame of our web app should iterate the title of the page itself at the top left corner or if it should not exist.....
1
vote
1answer
67 views
Redesign of a resultpage card [closed]
I am wondering about a redesign I have been doing. It is about a resultpage in which we have home insurance cards.. the current setup was not flexible enough to show a longer text for the usps.
My ...
1
vote
3answers
77 views
Time picker with blacklisted times
What would be a good design on an app for a time picker, incremented by 30 min with some blacklisted times?
So for ex. 9:00am, 9:30am, 10:30am 12pm, 12:30pm etc.
checked all over for inspiration, but ...
0
votes
1answer
54 views
Can a 2-column grid of info be acceptable if it mitigates an awkwardly large amount of white space?
I'm in the middle of a psuedo-overhaul of my company's platform, with an emphasis on "object-level" pages (ie the page for an individual task, or individual appointment).
A problem I'm ...
0
votes
1answer
73 views
Show all 6 features on home screen, or only the main 2 with the rest hidden inside?
Let's say there are 6 different features for an application.
Should we show all 6 features on the homescreen for better accessibility?
or should we show only the top 2 features which helps the user ...
0
votes
1answer
59 views
Which button placement is more usable for touch
I'm designing an order listing UI for a delivery person to fulfill their orders. I need to add a cancel button for ad-hoc cancellation in certain situations.
between the 2 options below I'd like your ...
1
vote
2answers
134 views
What is the correct placement of actions buttons
I am working on an application where user's data will be frequently added and updated.
In sample 1, I have added 'add address' links in each row per category for quick addition but it is breaking the ...
1
vote
1answer
87 views
How to organize nested groups of forms where a user can just keep adding to them?
Here's how it works:
The user uses the dropdown in the gray "new service" area to select a service.
Once one is selected, let's say Web Design (cuz why not?), then they can click "Add ...
2
votes
2answers
200 views
Is Cumulative Layout Shift a consideration while the page is still visibly loading?
Cumulative Layout Shift (CLS) refers to unexpected change in the position of content on a page, and usually happens because resources are loaded asynchronously or DOM elements get added to the page ...
2
votes
2answers
107 views
Best input validation approach for complex and busy screen
I have an extremely busy screen for a single page application that allows people to pick their own components and build a custom printed circuit board (following a template that we provide).
Our ...
1
vote
1answer
71 views
Should I align multiple search boxes horizontally or vertically?
Which UI/Ux is better?
horizontally placed search boxes or vertically placed? I am trying to understand which pattern is good in terms of UX/UI and reducing the user's effort
I am thinking in a way ...
0
votes
0answers
37 views
Dashboard with variable size section
I'm designing a dashboard, with various graphs and data tables, that has a section showing the relevant users. My initial design was to have a card design for each user and it looks fine if there are ...
0
votes
2answers
94 views
Good way to fit lots of numeric/config information on one screen
The goal is for the user to be able to configure what they want, and then "Do something" to their selected "thing," usually more than once, and see the results.
This screen is ...
1
vote
1answer
75 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 ...
1
vote
2answers
95 views
How to make sure people will see all the items/options on my website?
I'm designing a website for a dog and cat shelter. We will put the photos with the descriptions of the animals and any other useful infos.
Since there are about 50 dogs and 100+ cats, how can I make ...
0
votes
1answer
50 views
How to represent nested If-Else blocks in documentation?
I want to document a process that has some nested If-Else decision steps. The documentation must be printable, so I don't have a lot of space for proper left indentation to represent the current level ...
0
votes
1answer
40 views
Where to put a Map on the Contact Us page?
I’m working on a Contact Us page and trying to keep it minimal with only 3 sections (in order):
Map
Contact Us Form
Footer
Does it matter if it is:
Contact Us Form
Map
Footer?
Edit:
I have removed ...
1
vote
2answers
76 views
Should we include a 'collapse' on this page?
We're developing a page, where the user can unsubscribe at the top of the page, and 'email preferences' at the bottom.
The question is, once the user has 'expanded' to see the preferences, does he ...
1
vote
2answers
57 views
Referring to the position of an element in modern (responsive) design
This is such a common and basic issue that there must be an answer somewhere already, but I can't see it, so I'm wondering if I'm missing something. Should we avoid referring to the position of an ...
3
votes
3answers
67 views
Careers links in mega menu
I am designing a corporate website career page. Should I use a mega menu for the career page? Here are some of the items related to the career page:
Who we are!
What we do?
Life at Our Company!
...
0
votes
2answers
136 views
Which is best alternative design of a table which having only 2 column to display in UI with one edit button. Please advice me
Please help me to get the best UI layout as I don't want to use the table in my page due to less number of the column.
0
votes
1answer
32 views
How to correctly position data that has additional formatting for context
I'm currently working on standardising how read only form data is displayed. Right now, it can be stacked labels and values OR label left, value right. My preference is to go for the stacked view and ...
1
vote
1answer
31 views
Content presentation pattern name and known usability cons and pros
I am currently designing a long product page; usability testing shows that the monotony and the high homogeneity of the page represents a findability, legibility, and overall experience blunder. We ...
1
vote
1answer
78 views
What is this table format called?
What would you call this type of table row layout?
(This is from Mailchimp's email campaign manager section.)
It's not a traditional data table, since it combines about 6 pieces of information in ...
1
vote
2answers
127 views
What layout for a nearly empty web app? [closed]
Context
I am designing an ad hoc enterprise web app that is very simple: given two parameters (year, month), click a button that generates and let you download a file (an Excel spreadsheet). Users ...
2
votes
1answer
256 views
The right Layout grid for iOS UI design
I just downloaded the free iOS 13 GUI for figma and I tried to see whether their app templates follow a standard grid layout format, and by the way it looks they don't - components are not aligned ...
1
vote
2answers
78 views
Name for flexible view-based layout like in Photoshop, Eclipse, Blender?
Is there an established name for the visualization and interaction based on movable views as in Photoshop, Eclipse, Blender, etc.?
I refer to:
a screen with some global controls
onto which a set ...
3
votes
2answers
61 views
Requesting break down data for an amount or number
I am developing a page that allows managers to select teams and individuals needed for a project. When selecting a team, each employee within that team is shown with their known skills. Once an ...
7
votes
1answer
100 views
Order of arrangement controls for Back/Front Backward/Forward
Backstory
A discussion came up in my organization where we're looking at the conventions for ordering the Forward/Backward and Front/Back buttons for our desktop application, which runs on Mac, ...
2
votes
1answer
50 views
Is there a name for a layout containing a list and detailed view of currently selected list item?
Like in an attached screenshot - on the left there is a list of all orders and on the right detailed view of a invoice of a selected order. Is there a name for such a layout / UX workflow?
2
votes
1answer
120 views
When designing a 2 column form, should the logical order of fields flow vertically or left to right
I'm building a business system that has several screens with more than 20 fields. In order to improve the experience I have broken the form into multiple sections and used 2 column layouts.
Should I ...
1
vote
0answers
29 views
Layout for many independent navigation in a section of a webapp
There are many sub section in my project and I am not able to find right pattern for the layout the user navigates into the section from side navigation bar and then there are close to 25 sub sections....
1
vote
2answers
69 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. ...
0
votes
1answer
47 views
Showing two informations in tree node
In my web application I have a tree with each node holding two status.
Nodes are circles linked with each other.
The status can be either OK, KO, or PARTIAL.
The first status is the "technical ...
0
votes
2answers
120 views
Desktop application icons best practices
I'm developing a tool for a software specifically for only desktop, and I'm wondering what's the best practice to deal with many icons?
Right now I have them on the side of a treeview as they are all ...
3
votes
2answers
252 views
What is a better position for 'send OTP by email' on sms OTP feature
I'm working on an OTP (one-time password) screen on a mobile app. The primary method of OTP is via SMS. There's also an option for sending OTP by email. Currently, my layout is like this, where I ...
1
vote
1answer
132 views
Should a box shadow be used on a container? [closed]
I have a container that's used for pagination (as you scroll down it loads more elements). I rounded the edges out and added a box-shadow, but I'm not sure if this was the right decision. Is there ...
-1
votes
1answer
45 views
What is the best design for a table that contains many columns? [duplicate]
I designed a table to display a set of data, some take up a lot of space, and the table contains many columns .. Because of that I had no space to display the rest of the columns
2
votes
1answer
41 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 ...
