Use your favourite games to enhance your users' experience

One of the biggest challenges in front-end development is UI decisions. When you go through business flows, especially if you don't have a design scheme to match, it's very difficult to understand which UI approach is best. For example, if you are on a screen where you have to select another node with a bunch of options, you may decide that a modal is a good idea. Or you might go with an inline box.

FluentUI Modal. See best practices here: https://developer.microsoft.com/en-us/fluentui#/controls/web/modal

It all depends on how many clicks you want the user to go through, how much screen real estate you want them to have, and how much capability you think your product will expand to in that regard. There are a lot of different factors going into the design of things like grids and tables.

Of course, in a startup, even if design resources are scarce, it is always a good idea to have a UI or UX generalist on staff just to make sure that the consistency of your product can be maintained across teams.

I'm trying to invent hypothetical situations that don't expose too much of the current work that I'm working on. A real-life example where using game UI could be you're making a network of friends you know, in real life and you're connecting people, or this person knows this person, and this person knows this person. Conceptually, the only way to really truly represent that perfectly is with a graph. So trying to put that into the user interface is quite hard. If you see one person and you're trying to add an array of connections to other people, then suddenly every person can theoretically be connected to every other person. So you're dealing with a one to 1000s ratio, our selection, in that case, you may be reaching for a modal like the one in Crusader Kings. Another thing that's quite challenging when you're developing web applications is trying to fit your solution into an existing product. The challenge of smashing two solutions together is something that I've faced quite a few times. Sometimes you're adding to a product that was very well made, and sometimes you're adding a product that was made with maybe UI frameworks or technologies that are quite a bit dated.

Sometimes you're working without designers, and so the design responsibility lies on you. Not unheard of in startups.

As a crutch, one area that really pushes the boundaries of UI design is game development. Often games are dealing with hundreds and 1000s of nodes and connecting them together. For example, in Stardew Valley when you're trying to manage your inventory.

Stardew Valley Full Inventory https://stardewguide.com/guides/is-your-stardew-valley-inventory-always-full-then-this-is-for-you

Or Crusader Kings 2 when you're trying to manage lineages. This is a screenshot of the mod Advanced Character Search in Crusader Kings 2. The idea with this specific scenario is that you're searching want to marry people off and you have like, a family of people on one side and a family of people on the other side. So you have hundreds of thousands of people in the world that each have their own status that puts them in a route of selection.

A screenshot of the Crusader Kings selection screen.

Games like these have faced challenges in interface design and the lessons that we can learn from their use. The hundreds of thousands of hours of development can be applied to similar products on the web, where solutions need to be done in a professional, quick, and easy way.

Here's a similar scenario from TailwindUI's templates

Tailwind UI

---

Wrapping up

If you're a front-end developer, your work will revolve around structuring themes and making interfaces making clear and basic, APIs talking to back-end developers, or making the backend yourself which talks to a database. These things aren't necessarily complex in the sense of complex data structures and complex performance issues.

Frontend developers usually don't have massive performance or design implications when they're developing, because most of the computations that you're doing, especially as a front-end developer, are not going to be super intense. But in this case, you are connecting one node with hundreds of 1000s of nodes, and you need to check every single node that they're compatible and so your big-O now matters, because if you do O(n^2) suddenly you are dealing with an impossible performance problem. One that can't be fixed easily and could create a terrible experience for users. Graphing problems are examples of the rare case where performance is crucial (inside calls that are made after the page is loaded) to ensure that your users have a good experience. It's actually a very nice sort of foray into more advanced things that happen where you need to draw on the sort of base principles to achieve results.

Sometimes you encounter cases where you need that little bit of magic sauce. Old data structures and old performance things you learned way back become handy again. And equally, sometimes leaning into your favorite games could be a good way to achieve great UI solutions for complicated systems.

Please let me know your favourite game and how it's helped you become a better developer :).