Questions tagged [layout]
The way in which the elements of an interface are laid out.
872
questions
0
votes
2
answers
128
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
99
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 ...
- 321
0
votes
4
answers
144
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
29
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, ...
- 73
0
votes
2
answers
75
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 ...
- 8,759
1
vote
0
answers
46
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
123
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
1
vote
1
answer
47
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 ...
- 11
1
vote
1
answer
58
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' ...
- 21
1
vote
6
answers
456
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 ...
- 8,759
0
votes
0
answers
40
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
54
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
53
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 &...
- 251
1
vote
1
answer
54
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 ...
- 247
0
votes
2
answers
127
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
2
answers
106
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 ...
- 8,759
1
vote
1
answer
71
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 ...
- 25
0
votes
0
answers
51
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 ...
- 53
0
votes
1
answer
248
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
38
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
1
answer
117
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
0
votes
0
answers
91
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
1
vote
2
answers
119
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
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 ...
- 113
0
votes
2
answers
41
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
1
answer
52
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 ...
- 21
2
votes
3
answers
143
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 ...
- 123
0
votes
1
answer
30
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 ...
- 655
2
votes
1
answer
63
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 ...
- 143
1
vote
1
answer
75
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
1
answer
132
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 ...
- 105
3
votes
2
answers
104
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
2
answers
77
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 ...
- 11
3
votes
2
answers
249
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
0
answers
65
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 ...
- 844
2
votes
3
answers
116
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, ...
- 195
0
votes
1
answer
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
3
answers
393
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. ...
- 81
1
vote
1
answer
104
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.....
- 31
1
vote
1
answer
75
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
3
answers
116
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 ...
- 881
0
votes
1
answer
64
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 ...
- 533
0
votes
1
answer
82
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
1
answer
67
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 ...
- 10.5k
3
votes
3
answers
238
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,790
1
vote
1
answer
199
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 ...
- 127
2
votes
2
answers
742
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 ...
- 175
2
votes
2
answers
145
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 ...
- 907
1
vote
1
answer
106
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 ...
- 11
0
votes
2
answers
100
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 ...
- 105