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.

The grey area underneath the design is basically a container holding future alternatives

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.

This is called a “prefab”, a master componento. I’ve set the width as close as possible to the text, as if padding in all directions is 0.

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…

Everything become too fixed, packed with confusing names and values — me learning on the go doesn’t help either

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 ?

Low quality screenshot: displaying a few button alternatives in the scroll view panel

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 !