Node-level Design


As a part of the Computational Design Research group at Simon Fraser University, I have worked on a node design for GeneretiveComponents new dataflow graph representation, called Graph. The final design presented to Bentley Inc. was a result of a collaborative effort of our group. The prototypes and sketches presented are designed and developed by me, unless otherwise stated.

We have addressed three main aspects that a node design in Symbolic Diagram lacks: visibility on information, accessibility of information, and effective interaction design.

Visibility of information:

Node Design - Lack of Visibility

One of the main issues that we have outlined is a lack of information on a node. The information about incoming and outgoing data on a node was not supported, which in turn hindered the detailed visualization of dependencies on a graph. Thus, we have proposed 'input' and 'output ports' on the node that exposed the required data.

Accessibility of information:

Node Design - Lack of Accessibility

The second main issue was a lack of accessibility of the presented information on a node. Our redesign proposed to support progressive refinement of all aspects of the node.

Thus, at any instance, providing designers to change the input and output parameters, the object type, and the way a node is constructed.

Effective interaction design:

Node Design - Lack of Iinteraction Design

The last issue we have addressed is a lack of effective interaction techniques.

I have proposed to rethink the whole design of a node creation process, direct manipulations on the node, zooming in / out of node.

Some of the established HCI interaction techniques were implemented, such as guided visual attention, semantic zoom, focus + context, etc.

Some aspects of the proposed design were implemented in the next version of GeneretiveComponents. This case study helped my to build a fundament for my future work, because the proposed design exposed the input and output data on the node, which can help with the detailed visualization of dependencies on a graph.

Here are some of the original "work in progress" files: