I’m also using the new Grid UI to overhaul Shattered Pixel Dungeon’s journal notes page! The automatic adventuring notes, which record keys and landmarks, are now presented in a much more compact form! I’ve also added a few new landmarks, such as special floor types.
You might notice that there are a couple of other new things in this UI as well, more on that next week…
(Image description: An image showing the new ‘adventuring notes’ UI in the journal on the left. Notes are organized by dungeon floor with icons the player can tap for more info. On the right two example note descriptions are shown)
That’s awesome! Showing icons are great. I have to say, though, I’d really rather have it be less compact. Just show each floor as a separate line and don’t bunch them up. I’ve always had a hard time reading lists that ascend or descend by going left or right before going down. Examples:
Is harder to scan than
These simple examples are both really easy to read. I’m only trying to explain what order I mean. It gets harder to parse when the list items are variable width like filenames or these icons.
I’d really rather just have:
Especially since it looks like there’s going to be a variable number of floors per line based on how many icons each needs. A single column would be much easier to parse visually, and scrolling isn’t a bother. It would work much better if all the icons lined up in neat columns.
I really appreciate all you do for this game! I do hope you reconsider the layout of the list.
I went back and forward on this in development before settling on the more compact view. I do agree that this can result in reduced readability, but I felt it was worth it compared to making the player scroll a whole lot to access earlier floors. I made this choice partly because the lack of compactness makes the current list UI totally unusable, and moving to the grid’s main goal is to address that. Using one floor per row would also be especially bad in landscape where there’s roughly twice the horizontal space and half the vertical space.
Perhaps adding separators as visual cues to help readability?
9 X X X -------- 8 X X X X -------- 7 6 X X X X X X X -------- ...
Please look at the screenshot again, there already are separators when two floors are on the same row. Separators on different columns seems unnecessary as there’s already a new header that serves as a separator.
Oh, I see the vertical separators now. Maybe a 1 or 2 pixel padding would make it easier to see?
I feel like either vertical space or horizontal separators between rows, would better signal that you’re supposed to read left-right, then up-down. With the current layout, my eyes are drawn downwards first and see Floors 10 ➡️ 9 ➡️ 8 ➡️ 6. Horizontal separators, for example, would break that flow and tell me to look right and see Floor 7.