Generative UI Prototype #3

As mentioned previously, it was time to jump into a tool and start building something. I’ve been working on a few small mobile games lately in Unity, therefore I can find my way around relatively easy. Even though I knew it is a total overkill for the initial scope, I was just too eager to get going.I started by setting up the “Scene” with the right objects to manipulate:

  • Inputs for paddings as min and max ranges
  • Button to submit values
  • Area to generate alternatives
  • Other UI to explain constraints

Afterwards I started looking into the flexibility this software provides when it comes to modifying UI dynamically, through a script. As I assumed, my options were rather limited — Unity isn’t the best at creating UI generally.

Screenshot of Unity3D, a game engine software that I used to create the first logic. It has 2 fields, title and a button

Let me explain — logically, there must be a “master button”, a symbol if you wish. This will be rendered on the screen multiple times; each time as a different alternatives with different parameters — paddings in this case.
I realized that buttons in Unity don’t even change dynamically based on text length and padding; they’re using a simple width. Therefore, I needed to give “master button” a fixed width, a fixed centered text string and width+value, as padding.

The padding values are simply looping each other, if that’s a term. Going through them one way is actually enough, to avoid duplicate values. Yest another issue was that values didn’t directly match any of the real world px, rem, em, dp, pt — so who knows what padding 10 would actually mean…

Screenshot of code from Visual Studio. It includes 2 for loops for padding values and a function to render buttons

Another difficulty in Unity was displaying alternatives. There is no simple grid framework (that I know of) to just pick up, which meant that I have to, well, build one by providing position.x and position.y coordinates and stacking logic, in scroll view. After setting some basic conditions, I added the shape variation as well, which was fairly easy, but brought more questions. Having three variables already made my code rather messy. What would happen with more values that will be interconnected in a layout as well ?

https://www.youtube.com/watch?v=kuehKczaqt8&t=10s

The prototype worked just fine — it was good enough to feed my curiosity and push me forward. You can see the large amount of different buttons generated just by modifying paddings and shape.

I could already imagine a polished software in which I’d enter a bunch of parameters, maybe even goals based on user research.
However, it was clear enough that Unity is not the right tool for this. I needed something with precise UI manipulation, flexible classes, available to be pushed to anyone and easy to display — I want to focus on the logic,not grid systems. I decided to switch to the web: html, css and javascript to start with. More things to learn, easy to share project…sounds perfect !

Clever metaphors, that’s what I love. More about me: https://chaos-machine.github.io/tudorteisanu/