Generative UI Prototype #7: new UI and output details

Last time I finished setting up all the tools and built an environment that allows me to play around with the prototype. Therefore, I started to focus on polishing and adding more functionality which would generated a larger and more diverse amount of UI combinations. Whenever I got stuck in the algorithm details, I went back to building a better UI. Seeing the chaos machine take shape and learning how to build different elements, boosted my morale and pushed me forward.

first iteration for the colour scheme — trying to keep it simple

First, I fixed the letter spacing parameter, since combinations were not considering all possibilities given in the letter-spacing range. I was simply using the [index] value of another parameter(facepalm). Afterwards I finished the capitalization parameter, which allows dynamic change of all button combinations to be displayed in three ways: all caps, title caps or no caps.

This parameter can be set before buttons are generated as well

Afterwards I turned my attention to displaying each button’s property. Generically speaking, the chaos machine is useless if one cannot pick up and compare different combinations’ properties. In the previous post I struggled with using a tooltip and eventually moved towards a pop-over. These can hold more information and don’t disappear on hover. Unfortunately, I only got so far after quite a few frustrating iterations in which I did not manage to access the newly created button elements from the script. Here are some of my franpopsteins:

I either got hold of the right data and didn’t manage to show the popover, or showed the pop-over in a chaotic way. Enough is enough…I’ll get back to this later. For now a combinations’ property will be shown as a simple text in the output area. The only thing left is to format those properties in a readable manner; once again I spent hours searching for a basic line of code — this shows how painful it is to not be a professional and missing the basics…

document.getElementById('output-text').innerHTML = s.split('\n').join('<br />');

This is the culprit. Displaying those properties in new lines gave me a harder time and getting the properties themselves.

There is clear and simple function to set which properties to display, based on the selected object — for now, buttons. As mentioned before, I’ve been working on the UI while struggling with all these things.

Working on the right panel, making it expandalbe for now

The last iteration can be seen live as well:
https://chaos machine.github.io/WebIdea/

I’m also continuing conversations about involving UI in the high fidelity design process. A fellow designer said something rather interesting
“We humans design for humans. Our imperfections make for things to be unique and innovative - Debashish Banerjee.

Interesting stuff I read
Google AI article about deep learning and crowdsourcing used to create an AI software able to analyze whether a designed UI element will be tappable or not: https://arxiv.org/abs/1902.11247

Still To do:

• Set typeface and font weight as parameters
• Show properties in a better way
• Keep Generate and Delete buttons always visible at bottom
• Think about sorting and filtering
• Light and dark mode css
• Make combinations selectable and add them to a separate filtered list