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

103
votes
5answers
6k views

Avoiding the Hermann grid illusion

I'm a UX newbie and I'm trying to design a page of image thumbnails. I came up with this: The trouble is that this layout creates the Hermann Grid illusion. When looking at the grid, most people ...
56
votes
2answers
12k views

Ideal column width for paragraphs online

There is nothing worse than coming across a website with paragraphs that span the width of your screen resolution. They are usually so hard to read, I don't even bother. A lot of web designers use ...
20
votes
10answers
4k views

How to display a division by zero in a grid?

I have to make an internal web-app for my company (with asp.net C# and Telerik). I have a grid with financial reporting inside with a simple KPI displaying the budget already used in percentage : ...
13
votes
6answers
555 views

Should I combine these 2 mutually exclusive actions?

I have an interface for managing multiple email addresses associated to an account in my web application. This interface is to be used by an administrator. The interface shows a list of email ...
12
votes
6answers
2k views

List vs tiles for links

I am designing a drop down panel which houses a collection of quick links / bookmarks to other areas of an intranet. Users access the intranet through a laptop or desktop pc running windows or mac ...
11
votes
6answers
439 views

Method of showing that a row has been edited and will be changed upon “Save”

What paradigms exist for denoting that a row of data has been modified and that a Save action on the view will change them in the data store? Which paradigms are recommended? A few that we've ...
10
votes
4answers
1k views

In a grid, how to display long column headers

When displaying data in a grid (each row contains a record, each column a different record field), vertical space need is easily solved with scrolling or paging. We are usually sooner missing ...
10
votes
1answer
385 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 ...
9
votes
3answers
682 views

What is the correct way to format cents and dollars in a grid column with a total?

I have a grid with columns that are formatted as cents and dollars. By default, the tender and amount columns are being formatted as integers, but for the total we are formatting it as 2 decimal ...
8
votes
6answers
275 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, ...
6
votes
3answers
261 views

Aligning text data in a grid

I've been asked to look at one of our legacy applications from a usability perspective. On one screen, we have a situation where data is displayed in two columns (eg. Key: Value) where we've ...
6
votes
6answers
387 views

Interaction with a grid with complex cells

Problem definition: A grid where each column represents an attribute of a task and each row is a task One of the columns represents the progress reported on that task Multiple persons can be ...
6
votes
2answers
204 views

How should I align field “format” markers?

Let's say I have a form with fields that accept data in very specific formats, such as currency (£) or percentage (%). How should I convey that to a user? If I use 'sub-labels' (symbols that represent ...
6
votes
5answers
679 views

What can I do with a grid entry to make users not assume that it is just like Excel?

I have a lot of grid entries in my applications and I struggle with the paradigm because I feel that grids are hard to use for data entry for my users. Whenever they see a grid, they think "Excel" ...
6
votes
3answers
122 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 ...
6
votes
2answers
773 views

Best way to show “select all” in paginated table with some of the “all” not shown on the screen

A user can conduct a search in a grid that has pagination (i.e. over 25 rows is shown on next page). If the search returns more than 26 results and allows a "select all" checkbox, what's the best way ...
6
votes
2answers
153 views

How do we design elements that feature unpredictably sized images?

There are contexts where a design needs to represent several items, each with inconsistently sized images. One example might be a customer database, where the customer's logo is an identifying ...
6
votes
3answers
723 views

Best way of selecting rows in a grid across pages?

Best way of selecting rows in a grid across pages? We have a data grid which spans multiple pages, which is core part of our web based application. Scenario 1: Checkboxes denote selection. Use Case ...
5
votes
4answers
254 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
4answers
373 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
437 views

What are good UI Visualizations to show in a grid for ranking activity?

I have a grid with a list of runners (one person in each row) on a webpage. I want to show some visualization in a column to represent how much they have ridden in the last year. Right now I am just ...
5
votes
6answers
428 views

Furnishing the sidebar the honest way

I'm developing yet another website (non-blog, static), and yet again I'm stumbling upon the same problem with inner (non-home) pages design. The layout is conventional: 960px wrapper header with ...
5
votes
4answers
248 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
2answers
380 views

I want to let the user toggle a column heading to sort a grid by a date field. How can I make ASC/DSC intuitive?

I want to let the user toggle a column heading to sort a grid by a date field. How can I make the ascending/descending dichotomy intuitive? EDIT: I was looking for date-column specific solutions.
5
votes
4answers
296 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 ...
5
votes
4answers
658 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 ...
5
votes
2answers
657 views

User interface for a “mapping” table

I have the following problem. I need to provide an interface for users inserting/editing "mappings" in a database. A mapping is a record as such: [Field A, Field B, Field C] --maps to--> [Field X, ...
5
votes
1answer
201 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 ...
5
votes
3answers
171 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 ...
4
votes
4answers
441 views

What's the best way to represent a number which is over/under a reference?

I work with a resource management web application. I have a grid of numbers (resources forecasts). I need to show in this grid if the numbers are over or under a reference (resources capacities). I ...
4
votes
3answers
426 views

Selection of items in a grid across pages

Would you expect when making selections across multiple "pages" in a grid or other list style control that it would remember your selections? Would you expect it to forget your selections the moment ...
4
votes
5answers
1k views

In a grid, how to manually reorder rows?

I wish to let my users reorder elements in a grid - not do automatic sorting on a column. They select which element is the first, which one comes after the other, etc. I thought of and saw some ...
4
votes
2answers
340 views

Affordance (indication) of an editable grid

Working on a form with multiple small grids for information display and adding a new grid. (Grid is the right display here.) The business unit wants the legacy grids to remain editable with a pop-up ...
4
votes
4answers
630 views

“Edit” button in a grid

I have an Intranet application that displays a grid. Every row of the grid is editable. Which option is more user intuitive: Having an "Edit" button at the end of each row. Have one "Edit" button ...
4
votes
2answers
452 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 ...
4
votes
2answers
805 views

How can I preserve readability when using a dynamic grid layout?

There's a recent trend in web design to use dynamic masonry grids, like Pinterest, for just about everything these days. If you haven't seen such a layout before, it presents content of variable ...
4
votes
3answers
330 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 ...
3
votes
3answers
258 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
203 views

How to display complex, interactive grid?

I am working on the admin component to a web app that will create/manage web sites for multiple clients. This admin portion will determine what pages/features will be included, as well as what ...
3
votes
3answers
347 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 ...
3
votes
4answers
6k views

Whats the average screen size of a handheld android tablet device? any wireframing mockup available?

I am designing a UI for an android app that is developed for tablet devices, I would like to know is there any mockup grid available? Like 960.gs for web... what is the good size to start designing. ...
3
votes
2answers
285 views

What is the best way to display 15-50 choices when most users will select all and not know meanings, but some users will want specific choices?

In a program with users spanning from basic users with limited knowledge to super users with specific needs and detailed knowledge, we need to offer the option to select and deselect among elements ...
3
votes
3answers
152 views

Indicating A Document Has Been Drawn On

Imagine layed out in front of you is a large board with little white pieces of paper representing the cover pages of system files on them. You are shown a title, and a modification date. How might ...
3
votes
1answer
389 views

Are there any guidelines for vertical layout and spacing?

The proliferation of grid systems have made it easy to determine the horizontal layout of a site - column widths and margins are just made to fit into the correct grid spacing. But what about ...
3
votes
1answer
95 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
226 views

Presenting partially overlapping tables

Let's say we have a grid displaying a bunch of devices, where each row is a device. The devices have performance data and configuration data. Some users are going to be interested in the performance ...
3
votes
3answers
297 views

Data Grid double click for detailed record view or single click to populate constantly visible single record form?

It was hard to phrase the question clearly. I'm looking at two options: 1) Full page data grid. On double click on a record, a window pops up showing the record in a form view. 2) Top half: form ...
3
votes
1answer
389 views

When to use grids vs lists?

In which cases are grids more useful? With grids I mean something like the homepage of youtube, where you have many rows of videos, and in which cases are lists better, such as the youtube search ...
3
votes
4answers
98 views

Should quantities with unit labels be left- or right-aligned in a grid?

e.g. 3 months 12 years, 3 months 10 years 8 years, 6 months
3
votes
1answer
132 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?