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

0
votes
2answers
22 views

When do you save and editable form when you have an editable grid that autosaves?

I'm designing a webapp that basically is patient tracking. We are in a claimant's "clip board" and it has all of the patients information. There are forms, and their are some grids. We currently ...
3
votes
1answer
21 views

At what grid dimension does a user change his scan pattern from L->R to F?

We know that English-speaking users read from left to right, top to bottom. We also know that on a web page, users scan using an F pattern (https://www.nngroup.com/articles/f-shaped-pattern-reading-...
0
votes
1answer
98 views

What is the best way to show the long grid/table in mobile app?

I am working on the design of mobile app which will connect with the Microsoft Dynamics CRM and show the data in the app. Now in the CRM there are many grids/table which I need to show in the mobile ...
0
votes
2answers
132 views

Is it necessary to have responsive grid limited to 1170 pixels only

Can we have the 12/16/24 columns in 1440(any size) pixel container to make a responsive grid while creating a design as I have seen most sources to use 1170 pixels area and gutter size 15 pixels only ...
2
votes
2answers
65 views

Showing selectable and non-selectable row in a grid

I have a grid where I need to show to differentiate 2 kind of rows, ones that can be selected and others that cannot. All the rows include a link and the user can select multiple rows. My question is ...
3
votes
2answers
60 views

When using a grid for a web app, does a sidebar /side tray fall within the grid or outside of it?

I have had this problem for a while. Designed many applications with a sidebar navigation but have never fully concluded on how to best use it within the grid. A, inside the in grid just included ...
0
votes
1answer
35 views

How to show long path within table cell?

Here is the problem I faced during making mock-ups for one web application. I have a grid that represents some essential details about "Roles". As you can assume the role is given profile to ...
0
votes
3answers
212 views

Expandable grid interaction

I am designing a grid and need to accomplish two actions when clicking on a row: 1) navigate to a detail page for that row information 2) open an accordion "drawer" with more information. I am a ...
0
votes
3answers
202 views

What are the best practices for sorting tables with sections?

When you have a table with sections, the sections denote a hierarchy for instance: Name Corners Perimeter - Standard Shapes 7 ...
1
vote
1answer
143 views

Is it a good practice to remember checkbox selection across multiple pages in a grid?

Suppose I need to select multiple items across pages and then apply an action (click of a button) on it. Is it a good idea? If user wants to know what he/she has selected then can I help him by ...
11
votes
5answers
2k 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 ...
0
votes
0answers
25 views

Grid external filtering and Action buttons UX requirement for below mentioned Use Case

I have the following Use case for Grid/List page: 1.User has the ability to filter data based on the query which he can generate using Query builder ( Named Advanced filter in wireframes) 2.Once the ...
2
votes
1answer
114 views

Better way to act on grid data?

I need to assign different levels of permissions to users in a grid. But in-line/direct editing of grid data is not allowed! As shown in the mockup below, in the action column, clicking "Add" will ...
3
votes
2answers
458 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, ...
12
votes
7answers
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 osx,...
1
vote
1answer
39 views

Checkbox column in grid with paging [duplicate]

I have a grid with a column of checkboxes that allows to select multiple rows. When any row is selected user can do some kind of action on them. Grid has several pages, sorting and filtering are ...
0
votes
2answers
76 views

How to add more columns to data grid keeping it more expressive

If i have a grid view like this and i have to add more columns one as link button and one for notes (text) .the table is full of data how to handle this problem:
1
vote
1answer
37 views

Is there an alternative to a video thumbnail frame?

I am designing an app for a piece of software. In a section of this very complex app, users can add photo/video/audio/excel/word files. Once uploaded, they can view them in a large thumbnail grid. ...
3
votes
2answers
98 views

Grid action button selection

Problem statement: 1. Need to select individual row and Copy. 2. Need to select multiple rows and Copy. 3. Need to select items from different page (Pagination) and Copy. 4. Need to select all items ...
7
votes
1answer
203 views

Adapting Outlook-style master-detail to a non-full-screen view

When a web app's master/detail grid (narrow master on left, wide detail pane on right) is not full-screen like Outlook or the iPad Mail app, but is instead embedded in a page that can be vertically ...
0
votes
1answer
41 views

Should the grid header use the same shade as its elements?

In a fast-paced environment (a desktop used by a store, to sell products), should I use a darker color as background for a Grid header, to differentiate the products and the header, or should I use ...
1
vote
1answer
75 views

How to display adequate info without looking “busy”

So I'm making a section of a web page for an "event management" system. The system works as follows: The Organizer Email field is an autocomplete. You start typing an email and it performs an AJAX ...
1
vote
3answers
218 views

suggestions for dealing with multi-dimensional hierarchical data

We are designing a price calculation tool, for which every property adds a percentage increase/decrease in value of the object. Properties in combination with each other can have shared impact on the ...
0
votes
3answers
87 views

Grid view or List view for musical instruments?

The "Grid VS List" question has been posted before. The answer seems to be: it depends on the contents you are displaying: grid for products in which the image counts a lot (shoes, dresses, etc.), ...
0
votes
1answer
36 views

Grid that shows payments and refunds at the same time

I have a grid where I need to show payments made by user and also refunds that could be issued to that user. How can I format the grid in order to make easy to differentiate payments and refunds, ...
-1
votes
1answer
136 views

What is the best way to display multiple columns?

I have been asked to come up with a solution for displaying 50+ columns that were previously viewed in excel and now need to be brought to the desktop application UI. Mobile version is out of scope.
2
votes
3answers
189 views

In a data-table, should actions be on the left or right

When working with tables, I prefer to place actions that are specific to the row (i.e. edit, delete, etc.) within the row. Sometimes I use an action menu, sometimes it's an edit or delete icon. ...
1
vote
1answer
102 views

Is there a best practice for alignment of nav bar content - with grid or not?

Looking at various site's nav bars I see some sites spread their content wide across the bar, anchoring their logo to the far left and login to the far right, navigation in the middle (examples: ...
14
votes
5answers
1k views

Why do very few e-commerce websites use full-width and fluid layouts?

Looking at some of the top e-commerces websites (Flipkart, Etsy, Amazon, Bestbuy) , I could find that only amazon utilizes a full width layout, and that too isn't fluid. While I understand the ...
0
votes
1answer
137 views

Pros and Cons of a grid/dot grid based Futuristic UIs

I've been recently curious about FUI's seen in sci-fi games or movies, it seems the conclusion on these UI's is that they are flashy and very unpractical. But one concept that I seen have seen used ...
0
votes
3answers
209 views

Grid with cards

I want to create grid withs cards that looks like on photo, every card have text in it. What would be better to make , all square or rectangular cards ?
6
votes
3answers
760 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.
0
votes
0answers
52 views

encourage renaming while displaying original name too?

I'm working on a very simple custom report builder in a web app where about 90% of our users are office workers with limited technical skills. For these low-end users, we want to present a simple set ...
6
votes
3answers
195 views

Indented row headers

We have a screen layout where we have several columns to display. The problem is - you guessed it - real estate - to be able to fit all columns. This is for desktop, tablet and mobile screens. One of ...
0
votes
2answers
62 views

What should be the column title in a grid which shows checkboxes, where sorting is enabled?

I am looking for a title for the checkboxes where sorting is enabled for that particular column. Since they're checkboxes, I'm not sure what the title could be since there isn't any descriptive factor ...
2
votes
2answers
76 views

Need a prominent way to show the sorted column

Formerly, grids showed which column was sorted, by using a glyph (▼) in the column heading. What I know In Windows 10's File Explorer, this glyph is visually less prominent and has moved to the ...
3
votes
3answers
417 views

Pagination vs Scroll in Datagrid

Normally, we can use pagination and scroll in a datagrid when it has too many records. How to balance when to use pagination or scroll, considering consistency in standard guideline in a whole system?...
1
vote
3answers
98 views

Dynamic grid-like input with user defined columns - width issues

I have a system where a user can freely define a set of columns. Later, they can select this column set and enter data for these columns. They can enter multiple rows of data. It looks like this: ...
2
votes
2answers
452 views

Responsive Grid View with Hover layer

I have a grid layout which has an hover state which reveals information that are crucial as below. The Content of each Grid Item Dish Name Dish Photo Rating Chef Name Chef Photo Chef Location ...
1
vote
1answer
128 views

Search Results in a TreeTable

I Have a TreeTable where groups of itens are organized by categories, as you can see on the image bellow. What is the best approach to present the list of results taking into account that is ...
0
votes
1answer
64 views

Best UX for suggesting members to connect with? Carousel on profile page or separate page with GRID

I am toying with how to show my users potential colleagues (friends if you will) on my site. These "friends" are a list of academics that have been drawn up based on 1) common research interests with ...
3
votes
3answers
216 views

separate or in-grid-column-header filtering for reports?

For filtering tabular data as part of a reporting feature in a B2B web application targeted at relatively low-tech users, what are the pros and cons of having filtering UI be part of the column ...
0
votes
0answers
90 views

Displaying a lookup table in a complex grid

In my application I have a fullscreen form which has some edit fields with buttons on the right side. The value of some edits has to be chosen from a huge table, after clicking a button (for example ...
2
votes
1answer
65 views

Best data formatting for sorted and unsorted lists (names, dates, etc) [closed]

Anyone have guidelines (ideally backed up by scientific study) for the best way to format data in lists/tables/grids? I'm arguing with my group about name formats--I think we should always display ...
0
votes
2answers
150 views

Displaying add & edit note actions for each row in a table

I work on a web application and i have a list of users. On each user i can do some actions (Enable/Disable and Add/Remove Tax). Now my users could have need to add some note on a row, for example I ...
0
votes
1answer
204 views

Grid view vs List view

A similar question has already been asked here - Grid View vs List View for products . But i would like to get clarity on some specific facts. The questions is wether to use or this. Here are a ...
1
vote
1answer
160 views

Property Grid vs Dialog

I have a general question about the use of property grids. There are forces within my company who want to implement a blanket rule of "no property grids". Here is an example image of a Property Grid: ...
1
vote
0answers
83 views

Columns or Rows: Showing data in grids or lists [closed]

When presenting a list of quite detailed information (lets say a title, a date, a number, and then several paragraphs of description) which provides the better usability; rows or columns? Why? ...
0
votes
2answers
394 views

Inline Editing v Section below grid to edit

Is inline edit good UX? Which is a better way to edit a grid, providing an inline edit option or providing a view below the grid, (display additional details and provide editable fields)?
1
vote
3answers
685 views

Research on the Usability of Grid Views

I have been trying to persuade my colleagues that viewing, sorting, and searching large lists of data in a grid are less usable than performing those actions on that data in the context where it is ...