Questions tagged [layout]
The way in which the elements of an interface are laid out.
866
questions
0
votes
2answers
143 views
+100
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 ...
0
votes
0answers
31 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 🙏
0
votes
0answers
34 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
vote
1answer
52 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 &...
1
vote
1answer
46 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 ...
0
votes
2answers
78 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 ...
3
votes
2answers
101 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 ...
1
vote
1answer
62 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 ...
0
votes
0answers
42 views
Grid/Column layout: Fixed-width sidebar or sidebar is within the column grid?
This question is regarding grid layout, the context is that I am designing for a platform which has a pinned sidebar on the left. I'm trying to figure out the layout settings.
According to this ...
0
votes
1answer
188 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
vote
0answers
28 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 ...
0
votes
1answer
106 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 ...
0
votes
0answers
89 views
iOS download behaviour for pdf files in a shop
I developed a small shop for a client and have stumbled upon a bigger problem.
After completing a purchase for an e-book, customers can download it in the order overview. However, iOS does not load it ...
1
vote
2answers
107 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 ...
1
vote
1answer
55 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 ...
0
votes
2answers
39 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 ...
2
votes
1answer
48 views
Is the Floating Side Panel / Icons affect the UX?
I have been asked to include a floating side Menu Icons. Here is an example:
I am not convinced about this idea and I think it is intrusive & distracting, so I want to have your opinion about ...
2
votes
3answers
141 views
page overloaded with tables
I am looking for a better ui-design idea for this page.
So each company has different types of vehicles (trucks, personal vehicle , tractor etc)
Each vehicle has its own dates for the different ...
0
votes
1answer
28 views
Examples of two/multiple facet scoring?
Working on an interesting scenario - we need to communicate a "score" that has two facets:
A percentage based score that has a threshold that must be met to pass (90%)
Specific items that ...
0
votes
0answers
21 views
Where should website logo link to in an organization with multiple platforms? [duplicate]
We have an organization that has a /forum (discourse), a /news (ghost CMS), /learn(learning platform) and etc.
They all share a similar navigation with the organization's logo in the middle and ...
2
votes
1answer
60 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 ...
0
votes
0answers
104 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
62 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
87 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
90 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
67 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
147 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
55 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 ...
2
votes
3answers
115 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
88 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 ...
8
votes
3answers
288 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
73 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
73 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
99 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
62 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
81 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
64 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 ...
3
votes
3answers
234 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
155 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
555 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
137 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
103 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
39 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
98 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
107 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
96 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
53 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
65 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
81 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
65 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 ...
