User Interface Enhancements

[jetspiking]

From usability-testing the following improvements were found and should be implemented in the next iteration:

• Launching and using the application for the first time is time-consuming, since no tutorial is present. A future version could benefit from a short tutorial that appears on launch, which explains all actions and possibilities.
• The .json file could contain color codes for the Toolbox-items, so the colors are no longer randomly generated and will appear equal on all processes of Roblocks. This will make referring to items by color more easy, for example during a video call.
• The Add (+) and Remove (-) button are not very intuitive, this could be improved a lot by a drag and drop system or by giving component or blocks their own Add and Remove button. This is also the case with the "Settings icon".
• The output-view currently appears default on the left of the screen. This should be changed to invisible by default, the average user will not benefit of this view. The position of the Window might also be something to improve.
• The log contains both expert and user messages, this should be unambiguous.
• Create demonstration and explanation video for the UI.

[jaschahuisman]

Node management v0.1 (Wireframes)

• Adding nodes
• Hidden node actions
• Reordering nodes
• Wireframe sprint overview

Adding nodes

The function of the Add (+) and Remove (-) button is unclear in it's current location. I propose to put the desired action on the area it's being applied on: the node sequencer.

One solution is to put an empty field at the end in the block sequencer (i'd rather call it a node sequencer) with a CTA option to insert a new node in the sequencer.

The last node in the sequencer (or the first if it's empty) would look something like this:

The resulting node chain would look something like this after adding one node:

Hidden node actions

Other node actions, such as renaming, duplicating and deleting are hidden behind the individual node's settings icon.

Reordering nodes

For reordering nodes I added a drag handle at the top left of each node so that you can easily drag nodes around the sequencer.

Wireframe sprint overview

[jaschahuisman]

Splash

#4 (Splashscreen)

Hi @jetspiking

Little off topic, but what do you think about this fancy new splash screen (& logo) design? 😏

[jetspiking]

I think it looks amazing @jaschahuisman! If you are okay with it, I am going to implement this in the upcoming version. I will add a credit section on the GitHub, because your Wireframes and Splashscreen are a large contribution to the project.

Combined with your updated GUI Wireframes it would look much more modern.

[jaschahuisman]

Alternative user flow idea

Today I came up with an idea where users can fill action sequencers with blocks, from which variables can be stored in a common side panel.

I also came up with the idea of providing built-in blocks, in the example below: conditional blocks, but you can also think of variable or math blocks.

In the example below, a situation is wireframed in which the robot walks 1 meter ahead, takes a measurement and stores it in variable $sensorValue, and then checks if that variable is greater than 8. If so, it jumps to the next sequencer: Sequencer 2.

Pro's and cons

Pro's in this user-flow can be that in the sequencer scope block contents are visible to the user. It also uses screen space more efficiently.

In case with variables, cons can be that the application is less accessible to people with no coding experience, unless this issue can be solved with a different approach.