Rectangular layout of information. As well as tables, grid layout also refers to a 'typographic grid' used to position items on a page.

learn more… | top users | synonyms

2
votes
4answers
407 views

Best UX for interacting with a grid that auto-updates on an interval

I have a grid that auto updates every 30 seconds. Each row has a checkbox in the first column where the user can select multiple rows and apply an action to it. They can also apply an action to an ...
2
votes
3answers
820 views

Best way to show one-to-many relationship in a grid?

This is probably the most common issue when it comes to grid/table design; How to display one-to-many relationship such not to repeat the item nested. Please take a look at two solutions I came up ...
9
votes
6answers
351 views

How to layout an icon, text and number within limited space?

If I have limited space, typically narrow enough that I cannot just spell things normally like "4 Strength" or "Strength 4", as this shrinks the font to nearly unreadable. How can I layout an icon, ...
2
votes
2answers
93 views

Is it a good idea to use letters as column labels?

I ask myself, is it better for users to use a generic grid with letters as column labels instead of numbers ? Excel, OpenOffice and Google Spreadsheet do it by default but I'm often confuse. I have ...
2
votes
1answer
259 views

What is the best way to lay out a list of date ranges in a table?

I am showing a webpage where I list out where people will be out of the office. I want to get some feedback on which is a better format (obviously forget about the fact that you can't draw good tables ...
2
votes
2answers
360 views

What is the right UI for showing a grid that can be ranked

I have a grid of information (using jqgrid). One of the new fields is Rank. Its quite cumbersome to go in and edit each item and update the rank field and then have to update all of the other ...
0
votes
4answers
169 views

Display Items in 2-Dimensional Grid by Row or by Column?

I need to display a number of Contacts in a grid and they sorted by name. Should they flow from left to right in rows? Or from top to bottom in columns? Although my examples don't illustrate it, ...
0
votes
1answer
130 views

On what grounds do we reject showing one and only one item in a grid?

A colleague of mine recently showed a single entity, in a grid. In this form, we have three sections: A section which shows the main entity (say a school) A section which shows a vote form (each ...
1
vote
2answers
157 views

Indicate Which Item is Open in a List

I have a grid of items. I want to indicate which item is currently open (which one is the user editing?) The user can select other items in the list so I want the open indicator to be different than ...
0
votes
1answer
150 views

Set color for status buttons inside grid

I have to update the buttons for a grid. Currently the ones used are the ones in the skin/light orange color and I am testing different ones. There are 4 buttons: Active Inactive Active long term ...
3
votes
2answers
436 views

Responsive solution for quick view on grid items

When showing a grid view of items for desktop and tablet screen sizes, are there any examples or suggestions of how to offer a quick view option for both mouse and touch devices? Often on websites, ...
1
vote
2answers
456 views

A survey of grid box layout user experience design

I'm looking for other ideas to give a grid box (which contain an image with its title) a better user experience, make it easy to use. I think some people can't find out that they should hover and then ...
1
vote
1answer
177 views

What is the most intuitive way to allow users to convert tags to grid columns?

In my desktop application the users can add tags to files. I would like to provide a way to display certain tags as columns in the grid: I have a few ideas how to let users convert tags to columns, ...
2
votes
1answer
253 views

UX for specifying & showing mutual exclusive pairs in a group

I'm working on a SaaS/B2B web app that includes forms that allow choosing and later showing mutually-exclusive pairs among a small number of options. Here are some examples: if the customer buys ...
10
votes
1answer
500 views

Why are nested column layouts getting so popular?

Google+, Ebay, Tumblr are just a few of many who have changed their layout to nested multiple columns instead of a uniform grid view. Personally I find it unorganized and hard to find what I´m looking ...
1
vote
4answers
2k views

Grid layout - why should I use it, and should I use a framework like Bootstrap or Foundation?

I had experience with Twitter Bootstrap and Foundation, and I personally think the only thing I want to use is their grid system. Other features are just bloated. So I read about the prospect of a ...
2
votes
3answers
1k views

Table/grid design for website when a rows column has multiple values

I am designing a website in which users will input data into textboxes of a table, similar to this excel spreadsheet (but imagine textboxes and drop downs instead of table cells) The highlighted ...
8
votes
4answers
2k views

how should the “select all” select when paginating elements

Suppose I have a list of 100+ pieces of data that I'm displaying in a table that's paginating 40 elements per page. Each row has 'select' checkbox that enables the user to select/unselect an ...
5
votes
3answers
566 views

GUI for creating a grid view of user defined headers that are based on a closed set of fields

Business need is for ability to see a grid of values for custom fields that are created by user. Example of business need. Take Microsoft Visual Studio for example. MVS has a closed set of fields for ...
2
votes
3answers
243 views

Panel arrangement and responsive design

In a user interface it is often appropriate to use to panels arranged in a grid to display content, either as a way of showing content instances to a user or as a way of arranging content instances ...
-1
votes
4answers
429 views

Is a grid layout for a music/video player bad ux?

I'm working on this app for a music festival @ http://www.acl.fm - we don't have much traffic so I can't test my assumptions, but the bounce rate is high. I'm curious if this type of layout is a bad ...
2
votes
2answers
233 views

number justification in HTML table cells where some cells are editable and some are not?

A convention in financial software is to right-justify numeric and currency values when they are displayed in a table. This allows easy top-to-bottom scanning and summing of numbers. The same ...
3
votes
2answers
397 views

User access level grid - idea for gui

In my software application, multiple users can be created and every user belongs to a single Department. Users can add tasks to other departments. For example, the accounting department can add a new ...
1
vote
1answer
176 views

Optimal way to handle multiple many-to-one attributes in a grid control

We are working in web app where we have parent records that have multiple attributes that have many-to-one attribute values tied to them. We are attempting to list these parent records in a grid ...
1
vote
3answers
391 views

Grid design and pop up

I have little knowledge about user interface design and I just started building a public website. I wish to display an editable list of complex objects that include a list of elements. My initial ...
4
votes
3answers
488 views

Action menu placement for bulk actions in a grid

I have been playing with an idea of placing a bulk action drop down menu for a grid/table in the header of the column where the selections are done. This is to save some precious space above the table ...
2
votes
0answers
583 views

Expandable\accordion table row example [closed]

I would like to to present the users with a set of data, in a table\grid and when they click on a row, instead of taking them to another page with a form, to expand the row (like accordion) and show ...
2
votes
4answers
229 views

Grid view for Events on travel website [closed]

I can't decide which is the best option for this type of grid view. The problem is that I need to have all the information listed below: Picture Price Icon Date (can be shown as a range or as a ...
-2
votes
1answer
178 views

How to inform a designer to use a grid for responsive CSS? [closed]

How do you share information on a grid with a designer / design process, such that it helps in further coding of CSS of a responsive interface? Do you use any tools in a mock? Do you show blueprints ...
6
votes
3answers
157 views

Showing preview rows of content types vs picking a default type and showing it in full?

I'm trying to figure out what would be a better experience. We have 3 "types" of content usually, in this case let's say they are photos on user profiles. Is it better to show a row of each type with ...
0
votes
2answers
269 views

Is an accordion worse than a grid?

I am building an author site for myself, and would like to display, for each book, the cover image, the title and an enticing blurb, and links to (say) four other books that might be of interest. ...
5
votes
4answers
433 views

Grid - Inline Editing and Sorting - How to handle the features together

The Dilemma: You have a grid/table with sorting (and/or multi-sort) and inline editing. The user modifies a value that should modify the sort order. What do you do? An Example: Lets take ...
5
votes
4answers
359 views

Users don't understand how to interact with my grid

The problem The users that I have tested my application on don't see that clicking individual cells in the grid gives them the possibility to configure the content of that cell. Basically they all ...
2
votes
1answer
89 views

Importing and Updating Old Records within a Grid

I am in the process of designing a feature that allows a teacher to select students from the previous year who they used our product with, and be able to update the records of those students to the ...
1
vote
1answer
183 views

Do dynamic height changes jar users on web page load?

When a web site loads, sometimes an element's height needs to be determined dynamically with javascript. This can happen with a responsive design where the width of a fluid element is not known until ...
1
vote
3answers
5k views

Do you wireframe to exact size? [duplicate]

Looking for your steer on best practice for wireframes. In the past I've never wireframed to a particular canvas size or utilised a grid. This is usually because a designer knows the sizes they are ...
5
votes
3answers
231 views

Form for property rent prices depending on season and length

Seeing the similar post about Form for inputting operating hours of a business, I am hoping you might help me with a similar issue. We run a holiday property rental website. Properties can be rent on ...
5
votes
4answers
344 views

Adding a state to a control that indicates a row hasn't been saved yet

I'm working on a web application that users use to approve a bunch of items from a list. Imagine, say, an expense report that someone has to approve every item that's listed. Currently, the system ...
5
votes
1answer
255 views

Displaying varying prices

The holiday accommodations my company rents out have varying prices, depending on the day of arrival and the duration of the stay. Currently, these prices are charted in a scrollable table, with on ...
3
votes
1answer
160 views

Snapping to grid

What is a good threshold for a UI which allows users to place objects, snapping them to a grid? 25% of the grid size? Less or more? Should the user be able to change this?
5
votes
4answers
2k views

Paging buttons position – Top, Bottom or both?

The question is on where to place the paging buttons on a catalog page. We have some basic choices here. Only on bottom. Both on bottom and on the top. The obvious argument to place it only on ...
4
votes
2answers
722 views

Should I use a popup window (lightbox) for edit and viewing details of grid records?

I have a web application that allows the user to immediately do one of two things: 1) Search for records OR 2) Create a new record As a result, I have two links in the menu bar called Search and ...
3
votes
1answer
614 views

Grid text alignment rules

I was wondering if someone has come across rules used by web designers for text alignment in a grid. I was observing that majority of text is aligned towards left, but financial figures with ...
1
vote
4answers
3k views

1000px width layout. May I have problems using it?

I'm designing 12 columns site using Bootstrap. I have a quite crowded layout (can't simplify it further), so I want to use a 1000px wide layout (exactly this one), instead of using classic grids like ...
1
vote
1answer
459 views

Display change history of grid

Assumption: if there is a grid with 20 columns (I mean a lot of columns), and users can add/edit/remove rows and columns in bulk. Now we want to display the detailed changes of this grid (which means ...
1
vote
2answers
281 views

UI State Management in a multi-form grid with many elements

Details: The application is a form based application. The form elements are arranged in Grids. Each of the Grids encapsulate related set of fields. Now the question is related to cancel buttons. ...
3
votes
1answer
114 views

Printing Job Queue Grid display

I'm building a Printing Job Queue Grid Layout which contains 9 columns( Name, Status, Owner, Duration, Material 1, Material 2, Material 3, Material 4, print mode... (relevant for the current printing ...
3
votes
3answers
414 views

When to show a Selection Column in a data grid

I have a windows based desktop LOB application. In a multi step process a user is requested to select a SINGLE row on a datagrid. My question is? should or shouldnt I use a selection column to ...
3
votes
2answers
1k views

How do I display large amount of table data on iPad?

On our windows product we display large searchable grids, with a large number of columns that can be reordered, sorted, and filtered. This is a fairly common method on Windows (explorer for instance) ...
3
votes
3answers
502 views

Are there any better ways to present/edit a very large matrix?

We have a page where user selects what training courses are required for each role in organisation (HR-type web-based system). That looks like that: Now have ability to hide columns, fix headers ...