Progress towards a TrueUX product

Part 6 of the series about UX tools. In my last article I explained the focus on creating a product; a super fast text command based wireframing tool. In this article I share the progress of the prototype.

Since there is an online version of the prototype, I have been able to learn from how it is used.

Lessons learned from the web-app Sandbox prototype

The online prototype has been live for a while now, this is what I learned so far.

• People are willing to try it out, but find it hard to understand where to start. To solve this issue, I soon added example commands. The logs show this clearly helps. The percentage of people entering commands has increased, and the number of commands per user has increased as well.

• Most don’t use the more advanced commands. A small percentage of users writes more than 10 commands. They mostly use add and update commands. Perhaps I should add a ‘load example’ button. So you can start tweaking a more complex wireframe and feel the potential of features like the repeat command.
• Less feedback from the form than expected / hoped for. I probably need to add a more in-your-face request to receive more feedback.
• Tuning the layout was more work than expected. I’m using bootstrap columns, I might be better off using CSS grid.
• A few users created quite elaborate wireframes, proving there is potential.
• The scenario’s feature was not really used. It’s a bit hidden, and that’s ok. For the product I first need to focus on a great experience for quickly creating wireframes.

Progress in wireframe presentation

Since the previous article, I’ve added some features to create better wireframes. In the image below, you can see all of them in action

New features: width to fit, border specifics, text size, icons.

Width to fit

Type u about > w0 to let the about block be as small as possible while still fitting the content. In the Twitter wireframe, this is used in the menu for Home, Notifications and Messages.

Border specifics

Use ba for border all, bn for border none, bl for border left, etc. In the Twitter wireframe, this is used at the top menu to have ‘border bottom’.

Text size

The s for size. where 0 is smallest and 3 is largest. In the Twitter wireframe, this is used for the links on the right (c 2018 Twitter About..).

Icons

Icons can be set using u searchbar > isearch. At the moment there is no auto-complete or dialog to help you, so you have to guess or look at this cheat sheet:

While working on the Twitter wireframe, I noticed that there are some features still missing, like a way to quickly add a little bit of padding to group blocks. Also, as described earlier, it would be nice to be able to store and re-use blocks. So you can create a block consisting out of multiple blocks called ‘tweet’ and then use that multiple times with different content.

Commands referring to (other) files

While adding the most basic form of personas, I ran into the need to use commands that refer to files.

When you make a selection that refers to a block inside a wireframe, you just type the name like this: u menu > h3 . This will set the height to 3 for all blocks starting with ‘menu’.

When updating a file you add two dots like this u ..menu > n’note for menu file’. If you want to update the current file, you can just type u .. > n’note for this file’.

Connecting personas to scenarios

You can add a persona to a scenario using this command link ..mike.uxp or the shorter l ..m assuming mike.uxp is the only file that starts with an m.

With a source code..

# Layout
export.uxw
exported.uxw

# Notes
Since HTML is most likely, it’s pre-selected
# Linked
mike.uxp

..resulting in:

While it’s a start, it’s a bit of a rough and buggy feature at the moment. I’ll probably not put much effort in improving this, since I want to focus on the wireframing first.

Receiving feedback

I posted a link on reddit in the r/vim. VIM is a text editor that uses commands and is somewhat of an inspiration for TrueUX. The link resulted in a couple of sign-ups to the newsletter. In the feedback field, someone wrote:

I really, really like the idea of a vim-based wireframing tool. I would totally buy a Linux version of this with an ncurses interface

Perhaps the somewhat obvious critique in the comments itself, was that it’s in many ways not like VIM. For instance, there is no persistent cursor to move around. This could be nice to explore later.

Live feedback via Twitch?

Twitch is a platform for live streaming your games or other activity. There is a page where you can find developers at work. I think it might be interesting to use this platform to get more feedback. So I’ve been ‘secretly’ experimenting with live streaming. So far I’ve found three challenges:

1. I can only stream on Twitch late at night, when my family is asleep. Almost by definition I’m a bit tired by then, and probably don’t do my best coding.
2. Explaining what you do while you are doing it requires extra mental energy. On the plus side, the rubber ducking, probably helps me better understand what I’m doing.
3. I’d like to chat to receive feedback, but twice missed a ‘hi there’, because I was focused on programming, and just didn’t notice the message.

I’d like to try to live stream more often. If you have suggestions on how to better go about that, let me know in the comments.

Next steps

Up next are some must-have features. Starting with a decent undo and redo. After that the feature where you can quickly store and re-use groups of blocks. Allowing you to add do commands like ab .socialfooter to add your own social footer component to the bottom of the wireframe.

Do you think I should first focus on something else? Let me know!

That’s it for now. I’ll keep pushing forward. If you want to give feedback or be notified when there is news, fill in this tiny form.

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:

TinyUX — Low fidelity UX design on your mobile phone