Questions tagged [layout]

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

Filter by
Sorted by
Tagged with
243
votes
6answers
29k views

Is there a name for this drop-down anti-pattern?

Recently I have seen a small UI issue in mouse-over drop-downs. Here is an example of such a drop-down (although Bloomberg is not the only offender): https://www.bloomberg.com/view/articles/2017-08-...
0
votes
1answer
94 views

Showing order with thumbnail links

I'm putting together a little tutorial website, where tutorials should be read one by one, in a particular order. The tutorials are shown as thumbnails that can be clicked on, like this: I want ...
0
votes
3answers
383 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 ...
1
vote
1answer
100 views

What is better to use for controls that make an action and change the layout?

I have an app that remotely controls a device. The device has several modes. Switching the mode activates some actions. For example, air conditioner do different job in different modes. But my device ...
0
votes
3answers
335 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 ...
6
votes
4answers
863 views

How can I show a clear label on this start page without pushing the content vertically?

I'm working on a web app which shows a bunch of charts for how the sales are going. This screenshot is from my startpage. The label I've marked with a red arrow is a label indicating who the sales ...
0
votes
2answers
315 views

should header be fixed when using three column layout?

I'm designing three column layout website where all columns scroll independently. There is no problem on large displays, if header(I have large header) is fixed, but on smaller screens (1366x650 px) I ...
2
votes
3answers
130 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 ...
1
vote
1answer
203 views

How to show long navigation list horizontally?

We have a screen as below that has a long left navigation list that spans the whole height of the page and is scrollable (a lot of rows). We also have an info panel that is basically tabular data. ...
2
votes
1answer
74 views

Order of displaying information

Is there a golden rule to go by when deciding the order in which users are going to see the content? I made a mockup in which I compare two cases. The first one is the one I'd like to apply. The ...
1
vote
1answer
63 views

Laying out Dynamic Objects: Guidelines?

I'm working on an application that uses VR target recognition to display information on screen. The design is to point out areas of the recognized object and make these objects interactible as well ...
1
vote
1answer
77 views

Need help with button layout on small device

I have the following button layout on my web app and it looks fine on larger screens.. On portrait iPad or smaller it looks like this.. I'm not sure what the best way to display, hide/show these ...
0
votes
1answer
49 views

Expandable list of names. Want link to open page. Should the link be the name or something like “Go to profile”?

Name__________Go to profile Name__________Go to profile Name__________Go to profile I have a list that if you click on a row it will expand. I also want to be able to go to the profile page ...
0
votes
1answer
65 views

How to mark dependent fields while updating rest of the fields?

I'm working on a B2B application where huge numbers of fields (up to 100) are divided into ten categories. Please note, fields are grouped into different categories but impact each other. like: ...
2
votes
2answers
594 views

How to fit tabular report with > 30 columns fit onto a single print page

Please excuse my English and nay grammatical errors you observe. I am trying to create a report in SSRS, the data-set contains more than 30 columns. The issue is that all columns don't fit onto a ...
23
votes
2answers
3k views

Better way to show books in a row

I need to set area on site with most downloaded books and I'm facing the following problem: Book covers can have different width and height ratio, meaning not all books have proportional edges. There ...
0
votes
1answer
149 views

How to layout tabs when the website becomes responsive?

We have this kind of layout on our e-commerce website. Basically, you can move from one tab to the next to view the different promotions. My question is since on the responsive version the screen ...
1
vote
0answers
95 views

Survey with many optional questions

I'm planning a website that will have a survey of user preferences for various topics. All of the questions are optional although some of them may be more important to users than others. The questions ...
0
votes
1answer
125 views

Best way to toggle between scheduling options

I have two options available to my users. The first option allows them to schedule their own dates. The second option allows them to open and close a time window manually. They can only choose one or ...
1
vote
1answer
360 views

Will a banner with CTA (Call to Action) drive more users click than banner without CTA (Call to Action)?

I'm just curious that a banner with CTA (Call to Action) will drive more users to click than banner without CTA (Call to Action). The banners will be placed on homepage as a slider.
11
votes
4answers
3k views

What is the name for wireframing in the browser?

I am working on quite a large web project and I am thinking that I will first design a series of wireframes in Sketch... but then once those are approved, I plan to build the wireframes using ...
38
votes
7answers
10k views

In burger menus, should “Logout” always be at the bottom and why?

I noticed this while using websites that require login/logout - I get used to accessing the "Logout" button at the bottom of the menu. For example: On burger menu, the logout option will always be at ...
1
vote
1answer
64 views

List of item damage checkboxes with severity input

I have this web-app that is being used for intake and conditioning items. One of the pages currently has a list of 30+ damage type checkboxes that you check if the item has that damage. This is what ...
2
votes
3answers
608 views

Best format for registration form? [duplicate]

I am working on a registration form. I am trying to find the friendliest way to organize the content. I would appreciate if you could tell me: 1. Which layout you find better 2. If double checking the ...
2
votes
1answer
122 views

pdf download url on a webpage

I seem to remember that a browser can be configured via a setting to control what happens when a pdf url is clicked. I think the options are something like "Open in new page" or "Open as file". I ...
6
votes
2answers
662 views

Subgrids - Tables within tables

Users wanted a way to view kinda-related data for records in different tables. The solutions was to take those and make them child tables of the rows in the parent table. It will probably be easiest ...
1
vote
1answer
53 views

Balancing page which has few elements

How i got few pages, where i have a search page like below, It display features of web store and a search box to search. The page looks pretty empty and a lot of space is getting wasted, in other ...
7
votes
9answers
1k views

When there is a lot of white space, should text be centered or placed to the left of the web page?

Consider Paul Graham's site as an example: There is a lot of white space. He chooses to put his content at the left of the web page. Alternatively, he could have chosen to center it (while still left-...
8
votes
3answers
613 views

Should I keep my website logo always visible?

I'm building a website for a new company and right at the homepage there is a main action where users need to select wich city they are located in order to show specific results, which depends on the ...
2
votes
3answers
173 views

Need help in deciding the layout of an interaction

I am currently designing a system where doctor needs to input a reason for every case(patient history). My current concern is the placement of the reason box. First time there will not be any data in ...
6
votes
3answers
10k views

Material Dialog header with background color

I'm currently working on visual design for web application which use Angular 2/ Material design. In there, I have a doubt regarding a MD dialog header design, does it need to be with background colour ...
2
votes
2answers
101 views

How to display a label-field with multiple pieces of data

Let's say I have a details page that lists various pieces of information taken from a form. This works fine when I have a single attachment (link) per field. However, let's say the user can attach ...
6
votes
3answers
608 views

Placement of Dashboard and sub category tabs in UI

I am in the process of reviewing this UI. All the tabs on top navigation bar can also be opened directly by clicking the links available in the main area of the Dashboard view. In the UI, tabs that ...
17
votes
5answers
6k views

Fixed width for buttons or proportional with the text?

What is the best practice for a UI, to make all the similar buttons with a fixed width, no matter how long is the text (with the condition to fit) or make the width proportional with the text and add ...
2
votes
3answers
372 views

Where to place “Change Status” button on a Order page that improves look and feel?

I am looking for general UX advice on how to arrange buttons on the screen, in particular, the "Change Status" button that I'm adding onto the screen below. There were two buttons (Accept, Reject) ...
3
votes
3answers
170 views

Start Screen Issue *To much White Space*

I am designing a start screen for a tablet application and I don't understand what info I should put into this page. I got my inspiration from 'Envoy', example: But when I showed this off to other, ...
0
votes
3answers
114 views

Why would users prefer to use a diluted layout when given the choice?

Some web apps from Google such as Gmail and Drive offer a "comfortable" option with lots of wasted white-space, which I'll refer to as being diluted for lack of a better term. I'm creating a web app, ...
1
vote
1answer
164 views

Filter menu icons on search page, left or right of menu item?

Curious what people's thoughts are for filter menu dropdown icons, should they go on the left or right side? My thinking is the icon provides a buffer between the dropdown menu text and the search ...
0
votes
1answer
67 views

Is it correct to have the same button in several areas of your application?

Imagine an application with an Employee register option in its header, but when you click another header option (let's say, Salaries), there is a button to register employees inside of the Salaries ...
3
votes
2answers
169 views

How can I improve a invoice capture and upload?

I'm creating the UX for an Invoice capture/upload to translate to text feature in a mobile application. The journey that I have for now is: User taps on "Invoice Upload" Pop up with "Application ...
1
vote
2answers
108 views

Trying to design an appropriate UI for holding 4,000 plus records

I'm new to UI design so basically I'm trying to make a simple application that displays the current population of a species and it's trend of going up or down from the previous year. The trouble I'm ...
2
votes
3answers
416 views

Better design to displaying a lot of data within tables

This is the current design There could be hundreds of the 'panels' with tables that expand underneath when clicked. The tables could contain thousands of rows. What would be a better way of ...
1
vote
3answers
116 views

Website, there are two top float will be strange, is there any other examples?

On our website we have two header rows that float. Is this strange? Will it cause UX issues? Are there other examples of this? And,why is this kind of interaction is very common on the mobile phone?
3
votes
6answers
90 views

How to place 3 textbox in 1140px width of card? There are 2 tabs in card. width is fixed due to content in other tab

The width is 1140px width. The content in tab 1 is more and takes width 1140px. so to maintain consistency can't change or make smaller width Suggest any other layout or better solution Find attached ...
2
votes
3answers
157 views

Showing little text in a big panel

Intro I want to show a list of 5 to 10 items, each about 5-15 words. The list has a significant role in the view, and the user must notice it and understand that it is very important. My page is ...
1
vote
2answers
838 views

Where to put a close/back button when I have a drawer in a mobile app?

I am designing an Android & iOS app which are supposed to look similar (as much as possible). Some screens have left drawer: One of the requirements is to have modal screens (on top of other ...
1
vote
1answer
94 views

What is a good way to deal with a very long column of buttons in a fluid web page?

So I have a fluid web page which will be used on both desktops and mobile devices. If I put the long column of buttons (300+ buttons) on the side it looks great on desktop but looks ridiculous on ...
2
votes
1answer
757 views

What is the difference between spatial analogy and perceptual analogy in Natural mapping

I am reading Norman's book, The design of everyday things where I came upto the natural mapping part. There, he defined 3 kinds of natural mapping. 1- Spatial 2- Cultural 3- Perceptual Now, In ...
3
votes
1answer
319 views

Improve line graphs on responsive mobile view

I have tried to looking for best practices on charts, especially line graphs viewed on mobile devices and seems like there isn't much information about it. This is my first project involving charts ...
2
votes
1answer
465 views

Complex forms with many variables

I'm really striggling to simplify this data set. I need all the information as chosen inputs so the system is able to read the input and spit out a rate at any request. I'm really not sure on how ...