Introducing the TrueUX Sandbox Prototype!
Part 5 of the series exploring the potential of a true UX tool. I’m building and sharing small prototypes and writing about it. The goal is to gain a deep understanding and perhaps build something valuable along the way.
You may have read my previous stories where I discussed UX Source Files, the speed of text commands and further growing the UX tool prototype. While reading is fun, it’s even more fun to try it out yourself.
So with great pride and joy I hereby release the prototype to the internet!
In case you haven’t read all the articles, here is a quick recap:
The TrueUX prototype aims to increase how fast UX Professionals can update and communicate their UX design.
By making core UX design feedback loops quicker, UX design is more fun, clients are more engaged, you can do more iterations and deliver better quality work in a shorter amount of time.
All design choices are made with this need for speed in mind. One of the key features is that it works with UX source files that form a single point of truth you own. Preventing you the tedious work of having to update all assets (prototypes, docs, presentations, etc) one by one.
A quite unique feature I’m experimenting with is the manipulation of UX files with text commands. Once you have the commands in muscle memory you can outpace your colleagues who drag and drop.
While wireframing is only a part of UX design, the early prototype does start there. You can create wireframes and make scenarios made from them.
You can try it out here, and here you can learn the text commands. No account, money, ad watching or personal information is required. Just create a room with max 6 characters and start playing.
Disclaimer: All use is at your own risk. In order to learn more a log is kept of activity, like what commands are typed. If you want to work on a private project, don’t use this sandbox. Contact me and I can set something up.
After you have played around with it for a while, let me know what you think using the feedback form.
Recent Updates
A small group of testers had a sneak preview. One of these tester is Chris Chard (Thanks Chris!), whose feedback drove me to add the width_in_columns attributes to better align elements.
Also, knowing other human beings will be using this, I felt the need to rewrite most of the layout code. Now the prototype is capable of creating wireframes like this:
Also, for fun, the text rendering based on the same ux source.
------------------------------------------------------------
|hom|noti|messages |spacer| logo |spacer| search |user|
|----------------------------------------------------------|
| | | | | |who to follow |
| | | | | ---------------|
| | TrueUX | av | whats happening |img | |
| ----------------------------------------| |
|ico|@trueuxap| | person |
|-------------| ---------------|
|twe|foll|foll| | |
|-------------| | |
|100| 74 |248 | tweet_2 | person |
|----------------------------------------------------------|
| trends |chan| | |
|-------------| | |
| Topic | | person |
|-------------| ---------------|
| Topic | tweet_2 | Connect |
|----------------------------------------------------------|
| Topic | | |
|-------------| | |
| Topic | | |
|-------------| | |
| Topic | tweet_2 | links |
|----------------------------------------------------------|
| Topic | |[] advertise w|
|-------------| | |
| Topic | | |
|-------------| | |
| Topic | tweet_2 | |
|-------------------------------------------- |
| Topic | | |
|-------------| | |
| Topic | | |
| | | |
| | tweet_2 | |
| ------------------------------- |
| | | |
| | | |
| | etc | |
------------------------------------------------------------Aside from creating this sandbox prototype, I also did several updates. Here are some of the most recent:
Repeater
For lists or grids you can now clone an element with the repeat_horizontal and repeat_vertical attribute. You can set it with a command like u img > rh2. Meaning update the img element to repeat itself horizontally becoming 2 rows. Confused? I’ve set up a help page to explain how commands work.
Width in columns
Normal width (relative_width) is relative to other blocks in the same row. Now you can also set width relative to the full width of the wireframe using width_in_columns.
It assumes a wireframe has 12 columns and you can set it like with a command like this: u img > wc4. Meaning update the img element to take on a width of 4 columns.
In the future it would be nice to also add a width_to_fit attribute that resizes blocks based on content.
Text align
Components (used to be called ‘type’) have a default horizontal text alignment that you can now override with a command like this: u a > tar, meaning update all elements starting with the an a to have a text alignment value of “right”.
In the future it would make sense to also add vertical alignment.
Let us know what you think
If you’re interested, go ahead and create your own wireframe or scenario in the TrueUX online prototype. Share your thoughts in our feedback form, and in the comments below.
Stay tuned
If you want to keep informed, the feedback form has a checkbox to sign up for the newsletter. The next articles can be found in our Proof of Concept publication, and our website.
The next article:
Update November 2022 — My new low fidelity UX app
I created a low fidelity UX tool for the mobile phone. For now it’s about capturing your UX ideas while you are on the go, in the train, in bed or on the toilet. I plan to revisit and implement ideas I wrote about in this article in future releases, when web and perhaps desktop clients are added.
Read about it here:
