Questions tagged [layout]
The way in which the elements of an interface are laid out.
0
votes
3answers
161 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
163 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
0answers
4 views
Layout vs Grid Problem [migrated]
I have trouble understanding the relationship between Material Layout definitions and Material 8px grid system. When you place one above another, they don't match.
So, what do I use the layout for? ...
0
votes
1answer
92 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
62 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 ...
0
votes
1answer
63 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
181 views
0
votes
7answers
101 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
62 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
135 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
47 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 ...
1
vote
2answers
120 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
133 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
49 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
188 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
103 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
93 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
97 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 ...
1
vote
1answer
232 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
120 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 ...
0
votes
1answer
69 views
Does the location of “main buttons” affect usability?
Here we have Meta Stack Exchange:
The "Ask Question" button is part of the "search results" group. Could this possible confuse users? Should site-wide "main" buttons always be placed on the header ...
5
votes
1answer
70 views
How can I manage a module creation screen with multiple lists of templates selections
Specification:
The aim of the design below is to create one module by using 3 set of templates.
Each template is having list of templates which are coming from different database tables.
Template set ...
4
votes
1answer
79 views
What's the best way to inform users the results of their UI selections before they make the selection?
For example if a user is going through an online request form and must choose from a long list of industries, forms, job roles, types of jams, whatever but some of the items result in a different UX ...
1
vote
2answers
55 views
What is best practice on how to arrange products within a given category/department?
Customers have the option to filter by designer, price, item type, etc., but I have not been able to find any information on how to merchandise/arrange the products on the aisle level category page.
...
7
votes
7answers
471 views
Document space between components for designers
How are spacial relations between components documented by the big design systems? They only seem to explain how the components look and behave in isolation, not in relation to each other.
For ...
2
votes
1answer
73 views
How to visualize versioned data?
I work at a SaaS company that has a product for entering accounting transaction data. We are building out a new feature for visualizing versioned data, and I am needing some help on how this could be ...
1
vote
1answer
28 views
Displaying acronyms
I'm working on a website for a student society. The society has been established for a good number of years now, and in its humble beginnings it was known by an acronym. For the purpose of this ...
1
vote
1answer
99 views
Show multiple device in one location on map
I've wrote a program to manage our devices. As you see below, we show device status on the map plus junction traffic for entrance and there is ability to access configuration and reports by right ...
0
votes
2answers
159 views
Help me out with this double sticky bar in Mobile
I've run into a UX problem in a site I'm designing. I feel like there's an obvious solution but I'm having trouble finding it.
I have a site that has a global sticky bar.
In the middle of the site, ...
0
votes
1answer
84 views
Design was made to look perfect at full and fixed width, how to deal with it on wider screens?
A website design has been provided to me which I should turn into a HTML page.
But here is the catch:
It was made to only look good when taking full width (it has a slideshow, and also a horizontal ...
2
votes
1answer
98 views
How to display a grid of images that have different aspect ratios? [duplicate]
If I have a grid of images, let's say political cartoons, that have differing aspect ratios and cannot be cropped, how can I display them in a grid or even linear fashion?
This is for a newspaper ...
10
votes
3answers
509 views
Why do 4-wheel suitcases usually have their wheels on the short side, rather than the long side?
In a 4-wheeled suitcase, there are three possible ends to put the wheels. Most commonly, the wheels are at the short end:
Public domain image
I find it hard to keep them on 4 wheels; one has to ...
0
votes
1answer
44 views
Is it useful to have navigation/location labels and the page title duplicating information?
Navigation already tells you where you are. Do we need a title? Is it useful or is the title information just increasing interaction cost?
Example:
0
votes
2answers
142 views
How can I hide some UI elements until the mobile version is out?
The first picture depicts a design of notification preferences that is really strongly inspired by Backplane's solution (the second picture), because it suits my case perfectly.
The client saw the ...
1
vote
3answers
259 views
How to decide whether to paginate or scroll?
This game-related app is navigated through the sidebar, and there are tabs that in the main section to further navigate an area.
In the 'Updates' tab (shown), I am questioning how much information ...
0
votes
1answer
55 views
Should sections (sidebars, etc.) have a distinct background colour?
Consider the following layout:
It's divided into four horizontal sections using borders, each with their own heading.
On the web and desktop, it's a common pattern to give sections a distinct ...
1
vote
1answer
49 views
Two distinct value propositions for two distinct types of users
I have two distinct types of users. I would classify them as "beginners" and "advanced" users. I want to describe the value proposition to beginners in one way and to advanced users a different way. ...
0
votes
1answer
52 views
Where to place ads on a blog when viewed by mobile?
When a blog is read on computer with a full screen we can show the viewer ads on the right and left without being too intrusive. The user can still read the blog post unhampered.
But what about ...
2
votes
1answer
56 views
Differentiating between role based actions
Context
I have two types of users (Students and Administrator) who will be interacting with the preference view screen (Students select their desired preferences before while filling their admission ...
0
votes
1answer
143 views
How to display grid/card style information (without any images) so it doesn't look repetative?
My intent is to display data in a grid formation, presented as cards. I don't know what cardinal rule(s) of design / UX I'm breaking here but it is not working out how i would like it.
Here is a ...
3
votes
1answer
88 views
UI based on individual data / dynamic / generative
I am looking for examples where the UI is designed based on the individual user data. Not just a customizable profile page, more automated individual color palette / layout / typography / ??? ...
1
vote
1answer
52 views
Arranging role-playing ability scores
I am writing a small open-source web application to manage characters in a fantasy role playing game.
When a new character is generated, 6 random values between 3 and 18 are generated by the ...
3
votes
1answer
154 views
Tables with a lot of data for small screen sizes
It is probably not just me who finds responsive tables barely readable when using small screen devices. In most of cases they look like in example #1.
I find this way completely impractical when ...
2
votes
2answers
244 views
Hawaii missile mess [closed]
Are there any guide lines on how to implement security related interfaces?
I guess this isn't the best interface possible, as it caused a mass panic of probably at least a million Hawaiians:
https://...
1
vote
2answers
116 views
Simple filter form layout [closed]
I am making a public movie review website and am having trouble presenting a filter/search form.
This is what it looks like right now. How can I better present it?
0
votes
1answer
146 views
Gestalt grouping principles and subgroups
Are there some best practices how to solve a situation when Gestalt principles are in conflict?
For example, in the picture is example of a style where options that belong together are grouped by ...
0
votes
1answer
81 views
Recommended option to add item list from predefined list
I need to build an interface where the user will dynamically build an item from a pre defined list of items, like the following example:
Personnel Team
Name: Peter Gabriel
Description: Sr. IT ...
0
votes
3answers
200 views
CRUD without READ (detail)
Background
We have a list of users. Now the users have a button Edit that leads him directly to an edit screen:
In other parts of the app we have a similar list just there we have a Detail button ...
0
votes
1answer
95 views
Ideal way to show multiple columns in an input table for keyboard navigation
I have a page as below.
I have to show table with multiple input columns(> 30). in the region "input able with many coloumns"
One Idea is have arrows on right and left and navigate.
Another is have ...
0
votes
2answers
106 views
how to reduce content scrolling without reducing a story?
This is what I came up with: https://marvelapp.com/jjace4/screen/34738210 (summarized version)
After finishing the page I got user feedback (design leaders from the UX community). The feedback that I ...
