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
1answer
18 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
78 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. ...
1
vote
1answer
70 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 ...
0
votes
1answer
57 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
1answer
25 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 ...
5
votes
1answer
128 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
3answers
97 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
3answers
90 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
50 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
1answer
82 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
793 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
112 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
135 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 ?
5
votes
3answers
626 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
42 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
184 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
53 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
62 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
312 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 ...
1
vote
3answers
72 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
432 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
2answers
85 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
49 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
190 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
61 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
46 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
111 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
127 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
125 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
1answer
71 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
272 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
610 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 ...
1
vote
2answers
115 views

Designing show/hide flow for admin

Running into a UX problem on a webpage I'm designing. The flow is than an administrator of a company can select what items to show/hide to a member. So he will have access to a list of all items and ...
1
vote
1answer
49 views

How should empty details in master detail grid be displayed?

If I hide the captions for empty information and rearrange the elements, it is harder to check for details. If the caption is displayed, it is also confusing to read. (especially if there is another ...
0
votes
1answer
84 views

How to manage a dashboard displaying resources production/consumption?

Let me explain the context. The user has a list of Factories. Each Factory produce 1 to 5 Resources. For producing a resource, the factory consume 1 to 3 resources. I need to give an overview of all ...
1
vote
1answer
100 views

Best way to add filtering for the data in grid ? dynamic filter fields or filter for each column separatly?

How I can add 'Multiple' filters on my page for the data in the grid (grid is having 10 columns and I want to add filter for all the columns) which will be more obvious and easy to use for the user ...
1
vote
1answer
190 views

Summarising grouped data in a data table

I'm working on a financial app and we're getting mixed feedback from users as to how we've displayed the summary for groups in data tables. We've data tables which are, say for example, shopping lists ...
2
votes
2answers
72 views

Manage long grid data

I am creating an app which has functionality to search in some specific database and result it back in grid format. Sometime resulted data words are so long that it is not cover in column and it split ...
8
votes
3answers
758 views

Alignment of input fields in a form with plain text

I have a details page containing a list of information and input fields at the same time. Sections are alternating between information and input fields. I am debating between the alignment of data. ...
125
votes
5answers
8k 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 ...
1
vote
2answers
98 views

How to visualize identical cells in a data table

I have a time series grid for which there will be sparse data, as changes won't happen often, as shown: I'm wondering what the best way to display cells when there haven't been any changes is. The ...
1
vote
0answers
236 views

Need help on creating innovative sleek data grid table design [closed]

As we can see in the the following URL, conventionally lot of supporting UI elements are available to sort out, search and navigating pages for data grids. https://www.datatables.net/ Now a days, ...
2
votes
1answer
667 views

What's a typeable symbol to indicate “starts with” in a filter field?

I am building a custom data grid control. The users do a lot of sorting and filtering. I want them to be able to do this with only the keyboard. Currently they can filter columns by typing in the ...
3
votes
5answers
199 views

How to signal the user must add a minimum number of images to continue?

I'm making a utility where users rate images from favorite to least favorite. In the creation flow, the user must add at least two images, and is given the option to provide a title or description. ...
3
votes
4answers
91 views

Show a blank sidebar to preserve layout consistency?

In our product we have a sidebar which contain some widgets. However, certain pages don't need any widgets. On these pages does it create a better UX: a) Keeping the sidebar as a blank column. This ...
5
votes
1answer
208 views

Wizard inside a Wizard?

I am a UI designer, working on a webapp that deals with lot of user data and grids. The base portion where the user enter their personal details has been split up into a wizard. Here the user may be a ...
0
votes
2answers
57 views

Which are better: image sliders or image grids?

I'm desiging a site for a client that wants to implement and image slideshow on interior detail pages. I'm curious if people still use sliders or if an image grid would be best for UX. Thoughts?
2
votes
4answers
72 views

How to improve “between” operator usage in grid?

I have a grid with comparison functionality. The problem is I have to use column 2 only for "between" operator, for other comparison/search operators it's useless. How can I improve this? Open to ...
1
vote
2answers
865 views

selecting multiple items on a grid, which is only a part of the total set

I need to show a set of N items to the user, but I can render comfortably only M. (M ~ 20, N ~ 1000). The user then can select one or more of these items and then move on to the next stage. I need to ...
0
votes
1answer
3k views

Android- Navigation Drawer with sub-menu

I am designing android app in which I have some categories and sub-category. What I am doing? In first image I have placed category menu item with sub-category menu item in Navigation Drawer. Sub ...