Podcast #128: We chat with Kent C Dodds about why he loves React and discuss what life was like in the dark days before Git. Listen now.

Questions tagged [layout]

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

Filter by
Sorted by
Tagged with
0
votes
1answer
67 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. ...
0
votes
0answers
17 views

3 column layout for a song site. Sidebar on left/right, and content between them [closed]

So I'm working on a website, an anime one to be precise, where people can read about anime songs, their singers, rate them/post comments to them, add them to their list etc., and this is the current ...
2
votes
1answer
66 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
votes
1answer
56 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.
29
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 ...
0
votes
0answers
45 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 ...
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 ...
6
votes
3answers
15k views

How to best display a lot of information or data on a single webpage?

Are there any "rules" or recommendations in UX Design for displaying a lot of data on a webpage? Or how to select the most needed information to display data?
0
votes
1answer
94 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. ...
1
vote
2answers
233 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 ...
0
votes
1answer
52 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 ...
2
votes
1answer
174 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
35 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
273 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
2answers
168 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 ...
1
vote
3answers
79 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
2answers
111 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
82 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 (...
2
votes
3answers
4k views

Best way to display more table columns and rows than I have room for?

I have a similar problem to what is mentioned in Best way to display more table columns than I have room for?. But to make things a little more difficult, the table has approximately 1000 rows and 64 ...
6
votes
5answers
8k views

Form layout. Vertical Labels vs Horizontal Labels. Images inside

After reading http://www.lukew.com/ff/entry.asp?1502 and http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php Placing labels above input fields is preferable, but if you choose to ...
1
vote
3answers
90 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 ...
2
votes
2answers
795 views

How to make fluid web site consistent

I am redesigning my fixed-width web site to be (more) responsive and ran into some problems: For one, I really like using a fluid width layout since a lot of visitors are using my web site in (much) ...
14
votes
5answers
7k views

Where should form instructions or hints be placed?

I was browsing Forrst and came about a screenshot of a form designed with Twitter Bootstrap that had the label on the left, the input field on the right, and the instruction that it's required under ...
0
votes
3answers
72 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
2answers
65 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 ...
214
votes
23answers
120k views

How To Display Too Much Data

We're building a web-based platform where the main dashboard shows a table of data for users to view and analyze. As we're growing this tool, we seem to be adding more and more columns and are running ...
5
votes
3answers
781 views

best way to represent horizontal reports?

i need to display reports with various fields, column wise. The length of each column could go along 50px appx. So , the overall report length would go upto 2k-3k px , since i need to display them in ...
17
votes
9answers
4k views

How do you conquer the challenge of designing for large screen real-estate?

This question is a bit more subjective, but I'm hoping to get some new perspective. I'm so used to designing for certain screen size (typically 1024x768) that I find that size to not be a problem. ...
11
votes
4answers
1k views

How to present Actions (eg. CRUD) buttons without taking focus away from main content?

I am looking for a way to present Actions (eg. CRUD) buttons while not taking focus away from main content. It'll be great to see examples of good application design (I am doing a web app (probably ...
15
votes
10answers
21k views

Should headings always use the same font as the body?

I'm working on some of the layouts for a User Handbook and right now my main concern is fonts. I'm trying to decide whether to use the same font for the body text and the headings. If I use different ...
8
votes
4answers
1k views

How many elements are too many for one screen of a mobile (iOS/Android) application?

Without scrolling, what would be the maximum amount of centered buttons I could arrange on a vertical axis before it became too cluttered? Interface Builder gives suggested distances between elements,...
35
votes
8answers
4k views

Is it a good idea to have a large footer containing many links?

In recent years, it's become quite a common design pattern to have a large footer on every page, containing a 'mini sitemap'. For example: This has supposed SEO benefits but would also seem to be ...
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, ...
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 ...
15
votes
8answers
30k views

Security question: What questions do you ask?

Working on a save quote feature for our new website, one of the security requirements is to ask a secret question and obtain a value from the user. Does anyone have suggestions on the type of ...
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 "...
0
votes
1answer
69 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. ...
63
votes
8answers
10k views

Most User Friendly Color Picker

I'm designing a website, and I need to allow the user to change the color of some elements. I will have to implement a color picker. What kind of color picker is the most user friendly, and looks best?...
1
vote
1answer
57 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, ...
11
votes
3answers
5k views

How to design usable web site terms & conditions?

What are some guidelines and examples for designing usable legal terms for web sites? I know that most users don't read it, but are there innovative ways to improve readability and presentation of ...
0
votes
2answers
118 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 ...
5
votes
8answers
278 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
162 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
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 ...
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 ...
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 ...
85
votes
12answers
54k 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
993 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
168 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 ...