Questions tagged [layout]
The way in which the elements of an interface are laid out.
799
questions
0
votes
3answers
60 views
Material Design card with a lot of information
This is very much related to Material Design List with a lot of information
The previous question and answer does not cover how to layout the information in a material card.
Let's assume I have some ...
0
votes
0answers
33 views
Vertical versus Horizontal Scrolling Patterns
I've seen sites that have horizontally scrolling content as their main content. For example, Trello and Jira have many columns that extend out horizontally. The page then allows for scrolling. I've ...
0
votes
3answers
120 views
How best to arrange a group of 6 numerical input fields, one text field, and 3 radio buttons?
I have a GUI form with multiple group boxes. One of the group box has 6 numerical input fields each with an average input length of 3 or 4 digits, one text field with an average input length of around ...
1
vote
0answers
35 views
How to display products from various menu's in a smart way?
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 ...
1
vote
4answers
349 views
Best way to deal with multiple choice checkbox UX?
I know this is somewhat subjective, but I can't really make up my mind on the following UX issue (please ignore the design, so far the site is purely for functional testing)
I've got a site that acts ...
0
votes
1answer
42 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 ...
0
votes
2answers
70 views
Form alignment left side to right side
I am very new to UX and I find my form to be sloppy.
Is it an alignment problem? Should I align the text on the right side with the text in the left side of the form? For example: should I align " ...
0
votes
1answer
77 views
Add an element to an interface without increasing the complexity of the layout
I need to implement a text and a switch to a login interface. This is what I made:
The problem is that I think it is a bit inappropriate, considering the layout and colors chosen in the interface. ...
-1
votes
1answer
64 views
Portrait vs Landscape Mode [closed]
Portrait & Landscape layouts - What is the UX guidelines for making two distinct layouts i.e. where the layouts will be significantly different from each other.
0
votes
0answers
54 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
102 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
68 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
238 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
175 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
39 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
170 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
54 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
92 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
81 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
74 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
195 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 (...
1
vote
2answers
77 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
89 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
143 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
87 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
64 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
286 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
7k 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
112 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
177 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
127 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
56 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 ...
6
votes
1answer
280 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
228 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
124 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
39 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
109 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
75 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
82 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
276 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
267 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
104 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
127 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
79 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
194 views
1
vote
8answers
186 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
80 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
519 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
63 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 ...
