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
0answers
21 views

Does one need to follow a specific grid pattern or rule when design an app on iOS? [on hold]

Is there any specific grid rule or pattern that I need to follow before designing an app on iOS ?
0
votes
2answers
30 views

How to indicate that an element in a grid is the current one

I'm working on a real-time web application that has a grid displaying a a list of elements that can change continuously. Currently, I'm just displaying a checkbox "Is latest" for development ...
0
votes
1answer
50 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 ...
0
votes
2answers
47 views

What should be dimensions of a grid of images for review be?

I am creating a webtool for image moderation (approve / flag / delete). My starting image set to review is about 200,000 with 400 images added per hour. The end users of this tool will be outsource ...
0
votes
1answer
75 views

Mobile grid views - which style is preferred by users - rounded corners with borders or rectangles?

Is there's a way in which users of mobile devices prefer to perceive grid view content? I'm a mobile developer and stare at mobile interfaces quite a lot. One of the things that was bothering me for ...
0
votes
0answers
20 views

Would laying out a multitude of [text-only] topics/options (> 15) in a card layout increase interface clutter?

I am trying to figure out when a card layout is optimal and when alternatives are ideal. For example, Khan Academy's lists has > 50 items, and is arranged in a neat list. Observing the flat trends ...
0
votes
0answers
105 views

User Interface for Role Management

I'm creating a role management screen and wondered if anyone had any good ideas. The basic idea is there are 4 possible roles a user can be assigned for a given category. There are approximately 12 ...
0
votes
0answers
53 views

Layout filterable grid and categories

Background A user goes to this page to view the levels their groups (>=1) have been placed in for certain categories, i.e., basketball, etc. Each category has an overview pdf document assigned to ...
0
votes
2answers
385 views

Grid design for complex data design

The purpose of making the design grid / cards alike is to display the information directly to the users, so we avoid things like accordion, drop-down that could have hidden information. The ...
0
votes
0answers
46 views

Display dynamic length list in grid column

I am looking to implement a custom expandable text block on UI. If the string (actually a list of people) is below a certain length (say 10 characters), it would be displayed as it is. If the length ...
0
votes
2answers
137 views

Where Can I Find Good Contemporary Tabular Data Design Examples

We are building a reporting/dashboarding application that mixes data visualizations with more traditional gridded tabular type presentation. In our application one can click on a chart, and drill down ...
1
vote
1answer
37 views

Save or clear Sorting and Filtering settings when adding to a grid

The layout of the page is a grid on one side with a list of items, and on the other side displays a snapshot of something selected in the grid, or if you're adding an item, it displays the form. I'm ...
1
vote
6answers
173 views

Add button for grid list

My team is developing a widget that uses a grid layout to display a list of webpage links, and we would like to have an inline add button so that our users will be able to add more pages to the list. ...
3
votes
1answer
52 views

Where should an item on a 2d grid be pasted to be not overlapping

I have a grid on which boxes can be placed like in the image below. The main constraint is that two boxes must not overlap. Box X is not allowed to be on top of box E. Now given each box should be ...
110
votes
5answers
7k 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 ...
21
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 : ...
0
votes
3answers
206 views

Best way to display a long list of static values

I am creating a grid-style list of attributes for a complex tool. Each line gives their name, data type, description, and their respective lists of values (LOVs). However, the LOVs can range from 1-2 ...
1
vote
3answers
107 views

Displaying and editing multivalued attribute?

I don't know if "multivalued attribute" sounds good but I will try to explain my problem. I work on a web app and I have a list of users. Each user has a number (from 0 to ≈100) of "codes" related to ...
4
votes
4answers
450 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 ...
1
vote
3answers
100 views

Should the “zebra striping” data grid set-order column be highlighted, or is it enough that little arrow?

[For PC applications (desktop and web)] As a common rule, when showing data grids, and sorting data through one of its columns, a little arrow appears on that column (sometimes also, the header ...
2
votes
8answers
404 views

How to launch an additional info popup from a set of cells in a grid

I have a grid with a large amount of rows and columns. Columns are logically grouped together in sets of 5 all related to one data item (the letters in the below example). Header | Property 1 (A) | ...
3
votes
2answers
217 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 ...
1
vote
2answers
45 views

Should I show first page when user sort the grid?

Consider this grid as an example. In grids, should I show the first page when user sort the grid by a column? I think logically I should. But I am not sure from UX point of view.
1
vote
1answer
110 views

Correct Use of ComboBox

I'm trying to think about a better interface for a combobox and grid control that I have in WinForms application. The combobox is used a search box to find Tenants that we have in a database. A user ...
3
votes
4answers
106 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
0
votes
1answer
27 views

Should read-only Boolean grid columns be aligned to center?

My understand is text should be left-aligned; dates, times, and numbers should be right-aligned; images should be centered. What about Boolean strings "Yes"/"No"? My hunch says to center them.
1
vote
4answers
630 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 ...
0
votes
1answer
37 views

Recommendation on where to arrange button and overall color schema for this search screen? [closed]

I have the following search/landing page...The buttons above the grid/table look busy and the colors do not seem to match the grid and header. Any recommendation in terms where to move the buttons and ...
2
votes
1answer
140 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 ...
3
votes
3answers
201 views

Presenting data in a grid form versus a tabled form

Is there a general rule when displaying data in a grid form versus a simple tabled list? Since modern screens tend to be wider now, it makes more sense to me to start utilizing grids instead of normal ...
2
votes
2answers
73 views

report authoring workflow for non-technical users

I'm overhauling the reporting features of a B2B web app whose users are usually smart but not-very-technical managers in blue-collar workplaces. Report generator apps like Microsoft Reporting ...
0
votes
1answer
104 views

Expanding video/photos preview

I'm working on different options to preview video and photos that are laid out on a grid without triggering a pop up or a new page. One option is the expanding preview. ...
0
votes
1answer
66 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 ...
1
vote
1answer
114 views

Should column labels for numbers be aligned right?

In a grid structure, I understand you should right-align numbers in the cells. Should you also right-align the headers for these columns?
1
vote
1answer
61 views

What's a pleasant way to mark a point in a 3D grid?

This question is related to a problem a friend of mine has encountered (in the context of a 3D video game, if it matters at all). I'd like to know if there's a UX pattern for the following use case: ...
6
votes
3answers
278 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 ...
56
votes
2answers
13k 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 ...
0
votes
2answers
104 views

Is it good to present unlimited data in carousel view?

I have unlimited list of contacts. That list will contain my contacts plus shared contacts with me. I want to know: It will be good practice to represent that list in carousel view. Or should i ...
0
votes
1answer
128 views

Android: Hint/Clue to distinguish (product) categories from (product) items?

I am currently designing an Android app that allows users to browser a product database. The database has a defined tree structures with inner nodes representing product categories and leaf nodes ...
1
vote
1answer
321 views

Are editable grids and split pages with tabs bad web UX?

I'm rebuilding an Win Forms application that handles a lot of product data. I'm building the new application as a Web App with angularjs. The UI of the existing app has a ton of editable grids and ...
1
vote
2answers
317 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 ...
0
votes
1answer
142 views

Usability of masonry grids for older users who are not tech-savvy?

I am redesigning my company's site. The primary persona is a marketing director in her 50s (edit: late-career professional, not retired / senior citizen) who is computer-literate for basic tasks but ...
9
votes
3answers
781 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 ...
0
votes
1answer
44 views

How to allow the user to create three grids filterable between them?

It's hard to be clear so I'll try to explain with a concrete example. I need three grids. Category, Sourcing and Service. I need to display them at the same time with all the related data but I also ...
2
votes
1answer
57 views

Is multi-layer ESCAPE expected?

We design an application, containing a grid with an active filter search and inline-editable columns. Each row represents a record, of which multiple fields are editable. The application should be ...
2
votes
4answers
163 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 ...
0
votes
1answer
121 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
3answers
393 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 ...
5
votes
4answers
273 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 ...
8
votes
6answers
285 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, ...