LinkedIn
Twitter
There’s some small fixes coming to Gallery view.
- These are visual changes to the app; no editor changes.
1. Consistent spacing w/ responsive sizing
- We’ve had an issue with uneven spacing for a while now. It results in some viewports as rendering with some large gutters between columns (or none at all, and images are jam packed like sardines).
We’re fixing that to get more even spacing and structure:
2. Bottom row left alignment
- This means the last incomplete row aligns to the left.
- This, along with left text alignment (see below) allows for an orderly visual scan of the labels and images.
- We’ve also fixed a bug in which the last row is wedged underneath the bottom appbar in some cases:
- This means images are more expansive, and can grow to fit many more viewport sizes evenly.
2. Bug: border round corner at bottom of image
- Some may have noticed the bottom corners of the image picking of a rounded border in small and tiny sizes. That should be fixed.
3. Bug: title padding and margin squeezed out in certain viewport sizes
- In some configurations, the title was squeezed up against the edge of the image and title boundary.
4. Text alignment change: left-alignment
- Along with a more structured gallery, we’re left aligning the title text.
- This allows the eye to quickly scan up and down, and provides a stable position for the titles in the image card. This is helpful in circumstances where there’s wide variance in label length across images.
5. Font size change: ‘tiny’ image size with smaller text
- We’ve reduced the font size default in tiny size to 12px equivalent, which is a little more than 1px smaller. Since tiny images have smaller containers, it sizes down slightly with this form factor.
6. Tooltips on hover (desktop)
- For titles that extend, we have truncation, and on hover, it will reveal the full title:
In terms of aignment for the items, I prefer the old style, i.e. items were centered horizontally, rather than left aligned all of them.
For instance, we are using the gallery view for view navigation menus, sometimes, and we just have few items, like three or four.
It used to be displayed in the middle of sreeen, which was perfect.
But now small chunk of cards are pushed into the upper left corner… Not user friendly.
I assume AppSheet should have been using Flexbox CSS to control the alignment.
I preferr the center alighnment with the evenly spread the space, which was old style.
I completely agree with @tsuji_koichi on this.
In terms of Alignment, the Old style looked much better and user-friendly.
In almost 90% of my apps, I use Gallery for creating navigation menus for different views.
If there are only 3-4 icons on the screen it looks bad. Earlier it used to center itself and looked pleasing to the eyes.
Please please at least allow us to select the alignment. I strongly believe app creators should be given a choice whether we want to include the new features in the existing apps. Most of the apps were working great and now again we might need to change how the app looks because of these UI updates.
For ex - See the attached screenshots and please try to think from a customer perspective. It looks bad. Earlier everything was center-aligned and looked great.
I really hope we will be provided some solution to this. Either allow us to select the alignment or give us a choice to opt in to the new UI features.
From my standpoint, more choice in app layout is always better… But if I were forced to chose between the new Gallery style vs old, I much prefer the newer style for photo gallery as well as navigation menus… just my 2¢.
I used to use gallery for navigation menus, but I have found card a much more flexible + visually appealing option since their addition… For example:
Updates on use cases
To recap a comment I discussed w/ Koichi: There’s two patterns we see people using the Gallery view for. Here’s a peek about our thinking on this.
1. The Image gallery pattern
We have the photo style, expansive gallery. That’s the primary changes I showed at the top of the post. It’s suitable for high cardinality, image based browsing: comparing, choosing, etc.
Now, I want to discuss the second use case I mentioned: that of a Launcher style UI.
2. The Launcher pattern
For the launcher use case, we tend to see destinations or core actions, often expressed as an icon, with a brief text label (similar to a phone home screen). It’s ‘go somewhere’ or 'do something’.
Even before the changes to gallery view, we don’t think that a launcher UI grid has to span all the way across a large viewport.
Let’s illustrate a difference: You have 8 or so base destinations or processes.
(Launcher UI patterns tend to be lower cardinality than image galleries)
Layout: a unified grid (tablet / desktop)
On mobile, this won’t really be different. Items will be placed at the top, and there’s only room for a few columns max. Space is always the constraint. Items are naturally packed together.
It’s tablets and desktop where it renders a bit different. Our goal is a contained grid-like structure that doesn’t stretch too far across the viewport, and maintains structure. We want to avoid the bottom row with just one or two dangling items. Here’s a sketch:
Determining the columns to rows balance is something we’re working towards; this is a heads up.
Image / icon sizing
Another change we want is for your icons to have some whitespace around them. Currently, since the image is automatically set to ‘fill’ the card, we see a lot of apps where icons have little to no space and bleed to the edges:
We’re planning on having a way where we can fit the images. We want to cut down on some of the slicing and dicing work you’d have to do so icons fit in a balanced way.
Stay tuned for more…
And how do I make it like that?
