Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [layout]

The way in which the elements of an interface are laid out.

0
votes
2answers
201 views

Navigating a double top bar

I've ran 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, I ...
0
votes
0answers
31 views

What is vertical tabs? [on hold]

cat -A file Create a vertical table and paste it's code using the above command. I couldn't make it in vim and saw unexpectedness in visuals unlike horizontal tables. How could a table be vertical? ...
0
votes
2answers
93 views

How to decide max-width in XD? [on hold]

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
2answers
41 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
80 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
4answers
42 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, ...
5
votes
8answers
218 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 ...
2
votes
2answers
135 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?
0
votes
1answer
44 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 ...
2
votes
3answers
106 views

Content on left with image on right in magazine websites

I came across the New Yorker website and noticed that in some of the inner category pages, the content is placed on left and the image on the right. This is a structure I see quite often. Is there ...
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 ...
82
votes
12answers
51k views

Should checkbox labels be to the right or the left?

I've got some checkboxes with text values of varying lengths (from say 5 characters up to about 60) - which is the preferred layout? Value to the left and checkbox to the right, or vice versa?
4
votes
6answers
921 views

Is it better to put “Preview” on an iFrame with a specific height or just show it in full?

We have a page that shows a preview of another page (newsletter) on an iFrame. Now we have two ways of displaying this: Give the iFrame a specific height so that the user can scroll up / down ...
0
votes
2answers
148 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
117 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
47 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
184 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
215 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: ...
1
vote
3answers
144 views

What is a good way to let the user change screen layout?

I have 2 layouts. A 1/3 2/3 Sectioned layout and a Full 3/3 Layout. I want the user to be able to change between the two. Right now I have this in the header: Is there a better or more accepted way ...
0
votes
1answer
104 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
34 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
8answers
134 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, ...
28
votes
6answers
8k views

Usability of vertical text

I am playing with ideas for a menu that I want to add to some site designs and was wondering: How usable is vertical text in any portion of a site (specifically menus)? For example You can have ...
122
votes
6answers
34k views

Why do numpads on keyboards and phones have reversed layouts?

I came across this on the web. It's supposed to be funny, but we all know better :) So, why are the numpad layouts different, and what are the reasons behind each?
6
votes
3answers
2k views

Why is the new Twitter menu bar on the bottom on iPhone?

Twitter recently released a complete redesign for all major platforms, in part the redesign has been made to unify the experience across platforms. But, because of this goal I couldn't help noticing ...
0
votes
1answer
49 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 ...
325
votes
23answers
106k views

OK/Cancel on left/right?

Should OK button be on left of Cancel button or vice versa? Are there any studies suggesting either of the solutions?
0
votes
0answers
43 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
71 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 ...
6
votes
3answers
10k views

How to let the user add and edit items in a ComboBox? (WinForms)

In my WinForms application there is a ComboBox with default values. The user should be able to add items to the ComboBox or rename existing items. I want the design to be simplistic. This was my ...
2
votes
1answer
132 views

Rarely used translation function placement

I have just been looking at the analytics of one of the websites I work on, and one of the features is required - but rarely used. There is a Microsoft Translate button, with their "Powered by ...
0
votes
3answers
212 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
235 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
98 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
1answer
70 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
188 views

Why computers and books aren't square

Wondering why they are rectangular rather than square.
14
votes
3answers
15k views

Why does the Xbox controller have non-symmetrical analog sticks?

The image below shows the controllers of the three eighth-generation consoles (Xbox One, PS4, Wii U). As you can see, both the PS4 and Wii U controllers have symmetrical analog sticks, which seems ...
0
votes
3answers
323 views

Apply material design to a list with a text, like and dislike buttons

I have a list that shows items, and users can like or dislike them. I have the following items on my cells: Item name Like button with an icon and a counter Dislike button with an icon Here is how ...
-2
votes
1answer
67 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 ...
1
vote
1answer
103 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
3answers
346 views

Options for card layout on website

I am creating a screen which displays courses. Currently, I am using card layout. Here each card displays a course name, and a button .on click of that button, a form will open in a modal window where ...
2
votes
1answer
219 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
53 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
136 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
57 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
230 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
149 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
141 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
105 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
634 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 ...