Questions tagged [layout]
The way in which the elements of an interface are laid out.
791
questions
0
votes
0answers
37 views
Best practices for designing layouts of highly configurable/customizable web applications
As the title says, I'm looking for best practices or guidelines on how to design highly configurable web applications.
We're currently doing a complete redesign of our HR application and there isn't ...
0
votes
1answer
76 views
Why do most interfaces rely on sticky top bars instead of sidebars?
Most web interfaces have the classic sticky topbar + 2-3 columns layout (just like StackExchange).
Some but few websites use a different approach and, instead, have a collapsable sidebar (i.e. ...
2
votes
1answer
48 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:...
1
vote
2answers
190 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 ...
2
votes
1answer
166 views
What gestalt law is being used on main page of youtube for videos thumbnails?
I'm a bit confused on what law is being used on the video thumbnails, in the main page of youtube.
The thumbnails are closer together then they are from the 4 lines of text below them, yet I see a ...
0
votes
1answer
31 views
Page thumbnails - right or left side of document?
Working on a "fancy PDF viewer".
Was thinking of moving the Page thumbnails to the far right of the page (to clean the design up a bit), but all apps I can recall have the thumbnails on the left side ...
0
votes
2answers
166 views
Is showing the same shape for different purposes a bad practice?
For instance, in this image I am using a line for both dividers and inputs.
Could there be any kind of confusion?
Maybe it's a better idea showing coloured lines, like this
Or to change the shape ...
0
votes
1answer
50 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 ...
1
vote
3answers
87 views
Search box layout problem
I have two similar kind of searches:
Clients: can be searched by code, name, state (active or inactive) and zone.
Companies: can be searched by code, name and zone.
Client zone and companies zone ...
1
vote
3answers
78 views
Showing additional details on enabling checkboxes
In the screenshot below, there is a section for vendor types. On checking (enabling) each vendor type, the application requires the user to add more details to configure it (notice the cards at the ...
0
votes
3answers
71 views
How can i show and save details of two inter-related editable tabs on same page?
I am working on this sales app, where the manager can assign a sales target to an individual salesperson. Now the " Target Amount" can be split into two ways:
1) By adding Items and setting the ...
0
votes
1answer
81 views
Should expanded search tools collapse automatically after searching?
We have a page with a list of elements and a hidden advanced search panel that slides down after the user clicks a button. With the advanced search panel hidden, the user will see two rows of results (...
0
votes
2answers
62 views
Adjusting information inside a card visually
Context
Currently, I'm working on Product Listing page of a web-store. Products shown on the web-store can basically be rented out and we have defined rental prices for different time duration such ...
10
votes
3answers
2k views
How to deal with an excess of white-space in a CRM UI?
I'm designing a CRM-style interface for nurses to help them manage their workflow, and I'm running into a UI issue where, in most use cases, there's kind of an awkward excess of white-space in the "...
1
vote
1answer
53 views
Make desktop application support the minimum resolution
Windows UX Checklist states that a desktop application should:
Support the minimum Windows effective resolution of 800x600 pixels.
For critical user interfaces (UIs) that must work in safe mode,
...
0
votes
2answers
113 views
How to decide max-width in XD? [closed]
I have seen old questions about this subject but they are quite old. I guess things change so that is why I ask this. I want to be updated.
I am about to design a web page mockup in Adobe XD. I will ...
1
vote
4answers
86 views
Space is not available for Text Area and Date Cell
Plan:
I'm Creating one dashboard page which required one table which dynamically adds Row when user clicks Add Row Button.
Each Row Contains key Information like Item Name,Code, Item Description, ...
0
votes
1answer
59 views
How to add in new items that don't fit in existing menus?
I have a mobile app with the general layout of having a menu menu, a queue that needs to be easily accessible and show a list of items in or previously in queue and any statuses, and a submit button ...
5
votes
8answers
270 views
Is there a mathematical formula for the Gestalt Law of Proximity?
I would like to know if there are any mathematical formulas that define the Gestalt Law of Proximity.
For example, in the picture above, at what distance of Y would the 4th square be perceived not a ...
40
votes
4answers
6k views
Button changing its text & action. Good or terrible?
After the user Registers for an event (he goes to cart and pays, etc.) the next time he visits the page, the event for which he registered now shows a less emphasized Unregister button, which does the ...
1
vote
2answers
110 views
Focus style accessibility - Is colored underline enough of a change?
I am currently assessing styles for accessibility for a project onto which I am working. Overall, the layout has a black background (#050000) and text and components are either beige (#FEF0D6) or ...
0
votes
2answers
162 views
Are unclickable tags/chips a good practice?
Title says it all basically.
I have to show a trip that contains Title, description and a bunch of random additional info (the tags). The issue lays in those tags they should not be clickable and ...
0
votes
1answer
125 views
Icons alignment issue
I'm trying to find out another way to show the big icon (dumbbell) or re-arrange the rows, because the first icon from the third row (the clock) looks a bit strange when it's next to that big dumbbell ...
0
votes
1answer
55 views
Layout for Manuals - “Hiding” content in Large Page vs Making lots of small pages?
I've been writing down an Online Manual for a programming library, and the service I'm using (ReadTheDocs) allows me to use plenty of HTML features in Markdown + JavaScript besides integrating nicely ...
5
votes
1answer
240 views
How to best improve information density for long, complex forms?
How to layout long, complex forms such that the largest possible number of fields is visible on the page, but legibility is maintained?
I am re-designing an enterprise web app where there are a total ...
2
votes
3answers
226 views
Is there any reason the discussion is inverted in e-mail threads?
In all e-mail clients I know, when someone is responding to an e-mail, the response is written at the top, above the original e-mail.
I don't understand the reason for this choice. It seems that:
...
0
votes
1answer
116 views
What is best practice for large amounts of options in an HTML form?
I inherited an old web app, which includes an HTML form. This form has a large list of checkboxes for a yes/no on selecting counties to receive updates about.
Obviously this is not best practice, ...
0
votes
0answers
38 views
Desktop-Mobile layout change Framework
Looking for a Toolset/Framework of ~5+ different concepts about how content placement should be changed between desktop and mobile displays.
It was called something like: "The 5R's of X", which ...
0
votes
1answer
66 views
Best way to draw an app flow diagram which includes the 4 different user roles in the app
I am in the process of drawing an app flow diagram, specifically using the screenshots of the application. This specific app has 4 different user roles. Some of the screens in the application are ...
0
votes
1answer
65 views
Main page VS Side menu for long flat list of items on mobile
I am looking to implement a mobile / tablet application. It currently has two views: an items list view that shows all the items, and an item detail view which shows more detail about a single item. ...
1
vote
1answer
74 views
Advice for improving internal dashboard [closed]
I work for a book manufacturer, a component from our internal dashboard looks like this: .
I'm not a designer by trade and as it's come to refactoring the project, I figured now would be a good ...
0
votes
3answers
260 views
Best Practice for Form Layout - UI
I'm building out a form at the top of page, where we are collecting 3 pieces of information. Would it be best to display this one line at a time or show all at once?
Scenario 1:
- The first form ...
0
votes
2answers
255 views
Card Design - Layout
My mobile application has 6 cards. At any given time the user would view only one card. However, the user has an option to swipe left/right and view a different card.
I am having a hard time deciding ...
0
votes
1answer
101 views
I made a minimalist webapp for public-key encryption. How can these problems with its UI/UX be addressed? [closed]
chausies.xyz/encrypt
I probably don't know the first thing about UI design, so I wanted to get some more expert input. Forgive me if this is an inappropriate question to ask here.
Half of my ...
0
votes
2answers
108 views
Canonical web page layout articles
I need scientific works or articles about canonical layout forms used in e-commerce shops, something about prototyping and trying them on a real audience.
Maybe can you lead me were I can found ...
1
vote
1answer
78 views
What symbol/figure should I use to demonstrate a game ended in a draw in a table?
In my program, a user will write a bot and at the end of the benchmark it will be showed to them a table showing how the bot did against some premade bots in some maps.
What I have now is this:
(The ...
3
votes
2answers
191 views
1
vote
8answers
166 views
How to handle cascaded navigation in mobile design?
I'm designing an app for HR use. As you can see in the screenshot below, there is a dropdown box where you can select the person to view. There are a few different subsections of that (Details, ...
-2
votes
1answer
76 views
Design/development frameworks equally suitable for both desktop and mobile views
I am quite a new to (or way too old for) a modern HTML, and i had to develop simple UI. I need to support 2 types of screen in it:
So UI consists of a menu, and content, for instance, a text with a ...
2
votes
1answer
394 views
How to choose a color combination for main header and sub-headers for better UI and UX?
I'm always confused about the BG (background) colors or a header and sub-header of a website or an app.
There can be at least 3 options to choose BG for them:
1. A dark color for main header and a ...
2
votes
1answer
62 views
How could I make this sheet more intuitive?
I recently wrote an open-source application that lets you practice Chinese writing and the decisions I made about its inner workings were related to my theories of how human memory works. I'm not sure ...
2
votes
2answers
157 views
Should the 'Reset' or “Reset to default” button be made disabled before any updates are made
Should "Reset settings" or "Reset to default" be disabled if the user has not made any updates/changes to default settings?
2
votes
2answers
144 views
How to present a tree in which objects may appear more than once?
I have a window showing a number of objects that can be individually hidden or recolored. Accordingly, in a sidebar each has a checkbox and a color swatch that launches a color picker when clicked:
...
1
vote
2answers
94 views
responsive two-column layout
This might be a really basic question, but I am trying to figure out how to best create a responsive two-column layout. Let's say you have two sets of data. For example, latest departures and arrivals ...
0
votes
2answers
306 views
Responsive feature comparison layout / grid
I have a list of applications (~120 items).
Each application on the list has the same features (logo, name, OS name, price range, short product info), so basically this is a table with 120 rows and ...
0
votes
2answers
193 views
Label width in horizontal forms
In a horizontal form, each label and its corresponding form item are in one line. To make these labels aligned properly, they must be of equal width. Then what width should we choose? There're at ...
2
votes
1answer
167 views
Is a CardView-based UI the best approach to section rich content? [closed]
Im working on a "smart-home section" that is beeing redesigned at the momment and i'm not quite sure about the approach of our designers.
My question is: Is a CardView based UI the best approach to a ...
0
votes
1answer
110 views
How can I improve the experience of filling this form in? [closed]
I have a web form with several buttons - for saving/restoring drafts & also a submit button. It has the capability to display alerts when drafts get saved/restored. In the screenshot, an alert is ...
2
votes
1answer
885 views
Material design: Can you use bottom and top app bar at the same time? What's the relation between them?
I'm currently designing a B2B app that will have plenty of buttons (on top app bar) that just can't be hidden. Is it possible to transfer some of the buttons from top app bar to bottom app bar, just ...
1
vote
2answers
145 views
Switch Dashboards along with menu
I am working on a mobile application which will have two different areas in same app.
Suppose:
Area 1 -> Learning Management System
Area 2 -> School Management System
Both areas will have its own ...
