Interaction design

Tonight I worked on the party page. I am trying to continue with the side pane metaphor, since it will be important later for other things I want to build.

Since we're building this as scaffolding for the whole app to use, the primary constraint we have to abide by is that all content must be visible and interactive while the side pane is open. I struggled with this so much because that makes the minimum desktop width 1200px, which I suspect is too wide. We will have to work exceptionally hard to make sure the grid portion (the left side) is responsive enough to keep the minimum desktop width a little bit narrower than that.

Other than that, I do like where this is going. Removing some of the team detail information cleans up these pages a lot. The main concern that remains is what to do with the Save/Remix buttons. I wanted to make Save into Like and make it more robust, but as things are right now, I might not have space to.

Instead of going straight for the team page, I started thinking about the side panel paradigm. I like this and want to make it work because it feels like side panels will be better than hovercards at presenting detailed item information.

The hard part is granblue.team is a fixed-width centered webpage to help with responsiveness, and that makes designing a side panel pretty difficult. Right now, I'm thinking of presenting them like floating panes that animate their position and opacity to make it seem reasonable on large screens, but I think the only way for me to figure out if that works is to build it.

I decided to start this project on a whim, but since I'm going away for a long weekend, this is kind of the perfect low-effort thing to work on if I have downtime. It's also nice since I just came out of writing (slash-generating) a whole bunch of tests, which is the opposite of fun.

Today, I focused on a few things:

- A more seamless, visible way of filtering teams

- How to represent a "group" of teams (which I'm now calling playlists)

- Introducing a little bit more fun into the UI by letting players theme it with their favorite element

I also traced some icons from the game so I could use them at higher resolution. This has consistently been a problem in this project and I didn't want to trace or draw icons because... I don't like drawing icons, but I think it is going to be necessary to take this app's design to the next level.

A small tangent: I was talking with a friend about this project, and I realized that as small and silly as I treat it, this is actually a pretty gnarly design problem. You're dealing with a massive amount of information, most of which is critical to understanding any one object. You also have a massive amount of assets, but you control nothing about them. Re-contextualizing the project like that is fun, and is helping me feel more okay with spending time on it.

---

Currently, filtering is a group of 3 dropdowns and then a (...) button that exposes a modal dialog with a ton more mostly-binary options. It's not great because you can't see most of the filters you've set at any given time.

In this revision, players can click the (+ Filter) button to expose a typeahead that combines game items with filters, letting them keep typing to add filters, which are exposed at the top level of the UI.

I made a prototype and it seems really cool and like a step improvement, but... I am worried. I think I cooked, but I am not sure that I want to be the one to serve the dish. It is going to be incredibly hard to build and get right, so I am going to do a lot more design exploration and prototyping before I try to build it.