Generative UI Prototype #6
Things have moved a bit slower with the chaos machine. I’ve set quite a few goals last time; some changed, some are still in progress.
The focus was a bit more on tools that will help the project in the long run. For one, I learned how to use version control in VS and GitHub. Now I’m consistently pushing to the live web!
https://chaos-machine.github.io/WebIdea/
The next step was to start looking into jQuery. I’ve noticed that a lot of the solutions in Javascript can be written in a simpler way using jQuery. I find it amazing that animations can be triggered sequentially based on the way they’re positioned in code. However, it was a bit difficult to set up Visual studio to include jQuery suggestions — which brought me to using npm and node; I’m done with setting up tools for a while…
Afterwards, I started exploring ways of displaying properties. All these automatically generated UI makes little sense if one can’t see each element’s anatomy. The first idea was to use a tooltip — you could hover over any button to see the parameters used to create it. This failed miserably…
I’ve decided to use Popper.js, which was easy to pick up and customize as seen above. The issue is that tooltips use existing elements in the domain only, while my buttons only appear at some point. Another solution relied on changing the “title” and “data-toggle” attribute through the script. Unfortunately this had a known bug which kept adding “data-original-title” in addition to “title”…I gave up at that point. In the end, the idea of a tooltip didn’t make sense. Right now there are only a few parameters / button, however I’m planning to have a bunch of them and display interconnections as well. I decided to start using popovers, on clicking a button.
Would you use an AI to help you generate high fidelity design alternatives ?
In parallel, I’ve had a few interesting conversations with fellow designers.
I talked to 6 product designers, all friends of mine and got mixed feedback. Three started playing around with the idea, from a plugin in Figma to voice controlled sci-fi design helpers. Two showed me tools that generate high fidelity designs based on wireframes and one just said “yeah sure”. Obviously, this isn’t a proper test, just poking some minds. It is an interesting conversation to have though
Still to do
- Add a popover showing each button’s properties
- Show total amount of buttons generated
- Clean up code
- Back to paper — think of pre/post generation parameter and further logic.
