We picked the Grid Layout feature to dive deeper into the user experience. Below you will find them divided into categories of the feature. After our feedback, we also provide one specific use case (tables) we believe that can reap the benefits of the Grid Layout to the max.
Even if we communicated privately, we think it is important to share the outcome with the community for the sake of open design Thank you Clara and Andrés for your kindness and openness; we are excited about this feature and the future of Penpot. Let’s keep this collaboration going!
— Ege and Juan
For the user that isn’t familiar with the CSS grid, there are some points that might contribute to a slow learning phase at the beginning of their exploration:
- Function names of items and content are confusing. I needed to read the Complete Guide to Grid in detail to understand it. It was very hard to observe/learn by doing.
- Same for the different naming of align and justify under content functions.
Suggestion: Provide onboarding tooltips, contextual information/help, and links to documentation or a reputable source that explains the general concepts.
- Grid configuration is lost when the user swaps from grid to flex, and back to grid.
- Suggestion: Either save the config or display a warning such as “Your grid configuration will be lost if you switch to flex.”
- Bug: Similarly, when a frame is already a grid, clicking on “Grid” on the Flex/Grid selector resets the grid as well. Nothing should happen when clicking on the grid again.
- Currently there are two properties called the Grid (layout grid and the grid of the page). For the layout grid the differentiation exists because it’s under the title layout. For the grid of the page this is not the case.
- Suggestion: Specify the function name more i.g. Page Grid vs Layout Grid.
- We are not sure if the Edit Grid button has the right button style. It’s a button that activates another function/mode that can be configured. However, it’s the same button style as the buttons whose function directly affects the selected item. For example:
- When the user clicks on the buttons above, related property is modified in that instance.
This button has a different property but looks similar to the ones above.
More importantly, Edit Grid is inherently different from the functions that are grouped together. Unlike flex, grid would arguably always need to be defined before it’s used, so “Edit grid” becomes step 1 when using the Grid feature.
- Suggestion: The button style should be different and should be as prominent as possible. Also it should be located separately from the other grid functions due to inherent differences from others. We think it’s best if it’s located above because it is necessary to define a grid before using it.
In the popup above, both Done and Close buttons have the same functionality. Our initial thought was that the changes made will be lost if the user clicks on the Close button, and will be saved if they click on the Done button. However this isn’t the current experience. If two buttons work the same way one of them is redundant. Clicking on the page already closes the edit. In this case we have 3 functions that serve the same purpose.
- Suggestion1: Given the changes are always automatically saved, remove the “Done” button.
Also on the popup, Locate and Done (Saving edits or finishing editing) are contextually different functions. It’s confusing for the user for them to be grouped together.
- Suggestion2: Move the “Locate” button to the side panel.
Unlike all the other functions, there is no hover information about what the above properties are in the Edit Grid mode. So the user can only learn by trial and error. It is particularly important to explain units, such as “fr”, as designers might not be familiar with them.
- Suggestion: Having a hover explanation similar to other functions.
- Bug: When the column/row size unit is in AUTO, there are two bugs with the bin icon above. Instead of deleting the column/row it only resets the size changes if the user has made any. In other cases, the bin icon performs as expected (removing the column).
- Bug: When zooming in, the bin icon gradually disappears into the unknown. See below:
- Note on accessibility: we noticed some fields are not labelled for screen readers. Clara mentioned that you will be updating Penpot’s UI soon with accessibility in mind. Let us know if you would like us to have a look at that at some point, we’re not experts but we are interested in accessibility
Creating table layouts is notoriously impractical on other design software. Our colleague Maximilian Blazek has high hopes for Penpot’s grid to make table creation easier. Grid is powerful and versatile, and we think making it work for this use case would be great.
One tricky bit would be the behaviour of adding or removing columns and rows. In HTML, tables (what is in a cell, row or column) are clearly defined by markup. For grid, it is not as straightforward, as this is only done by CSS styles. By default, content in grid “cells” flows to the next free cell. For instance, this means that adding a new column would move the first item in the next row to the previous row in the new column. Similarly, removing a column would push the last element of a row into the first column of the following row. This behaviour is consistent between CSS grid and Penpot, but impractical for the use of grid layout for tables.
One suggestion would be to use all the work you have put into the grid to have a separate “table” layout mode that is just adjusted to account for the differences between HTML tables and CSS grids, while retaining features such as drag and drop for cell content.
Some other features that could be helpful for this use case are:
- Keep the ability to change the size of rows and columns, not only individual cells (vs flex/Figma’s auto layout behaviour)
- Drag and drop to rearrange rows and columns
- A way to duplicate rows or columns
These are common in visual editors (from Figma to text processors and spreadsheets) and could work even with the current “grid” layout.