Krista Kainzer
Technical and User Designer
This Dialogue Editor is a final year university dissertation answering the question, "Can dialogue creation in Unity become designer-friendly?".
Specification
The dialogue editor plugin will be created using Unity GraphView. Through the graph editor, users would be able to create and manage dialogue in a network of nodes with branching paths. Users could create a speaker and response node, and connect them to outcome nodes. Users can select character options and author dialogue text in these nodes. There will be a separate window for creating variables or trigger events to add to dialogue nodes. Moreover, there will be tabs to separate different dialogue files. Lastly, to ensure dialogue management is kept organized, auto-snapping nodes will be implemented.
The Research
Unity's limitations and narrative structure types were investigated to understand user's needs for dialogue creation. Design guidelines are made up of three design theories including, Norman's Design of Everyday Things, Maslow's Hierarchy of Needs, and Gestalt's laws. A Unity plugin will be created with the concluded research.
The Problem
Currently, creating dialogue in Unity requires users to involves various steps with some programming knowledge. Users with little to no programming or video game development would find it difficult to set up and manage dialogue in Unity. Moreover, the existing interface is difficult for users to keep track and manage dialogue in branching narrative structures.
01
Norman's Design of Everyday Things
Norman's theory discusses the human-centred design thinking by balancing emotional satisfaction and functionality. This project takes every principle into consideration such as Discoverability, Feedback, Conceptional Models, Affordance, Mapping, and Signifiers.
02
Gestalt's Theory
Gestalt's theory highlights the importance of pattern recognition and structures to create meaningful design decisions. This project uses Laws of Similarity, Continuation, Firgure-Ground, and Simplicity
03
Maslow's Hierarchy of Needs - Converging Perspectives
Converging Perspectives consists of principles using Maslow's Hierarchy of Needs for improving user experience in human-computer interaction. Useful, Usable, and Desirable needs were concluded in this theory.
Gestalt, Norman, and Maslow's theories and comparing them against Unity's dialogue creation interface, concluded a design guideline that combines ideas from all three theories.
Implementation
There are three sections to this project. The graph with nodes, blackboard, and mini map. These three sections will be designed with the framework concluded in assignment one of this project.
01
Graph Nodes
Graph nodes are used to show the flow of dialogue. There are three types of graph nodes including Start, Speaker, and Response nodes. Start node is the beginning of every dialogue flow, this node cannot be moved or edited by users because it exists purely as a starting point. A Speaker and Response node includes the name, feeling, sprite, and dialogue of a speaking character. Both non-playing characters and players can be assigned as a speaking character in this node. However, if a Response node comes after a Speaking node, it displays a list of choices for each response. The chosen response will trigger the selected sequence of nodes.
Next, the layout for the speaker and response nodes needs to be designed. This can be created by combining Gestalt’s Law of Similarity and Continuation, with Norman’s Mapping principles. Information about the speaker including the name, feelings, and sprite image field can be grouped together due to their similarity. Next, the user would want to assign who this speaker is speaking to, which ties into the text field/drop down of the listener. Lastly, a speaker and response node would include a big text field for dialogue. By providing the necessary actions a user would need in dialogue nodes, it creates affordance towards the plugin.
Lastly, improving the user experience by providing Norman’s Conceptional Model and Discoverability. Dialogue should be quick and easy to create and populate. Shortening the amount of user steps would create an effective interface design and streamline productivity Firstly, nodes can be created in various ways. As seen in Image 4, two node creation buttons are added on the toolbar for easy discoverability. Users can also right-click on the graph or drag out the output port of a node to create a new node. Moreover, users can select the name of a speaking character from a dropdown list, which auto-fills the sprite image in the node.
Desireable:
Lastly, to reduce interface clutter, users can now click on a foldout to show and hide node information. The foldout by default appears expanded to allow users to instantly add large number of texts. If the dialogue text is long, it shortens and adds “…” in the preview field when the foldout is collapsed as seen below.
Useful:
Following Maslow’s Hierarchy of Needs in media design, the first step of design is to identify and implement the “Useful” aspect of a product. The plugin needed to have basic functionality for dialogue creation before considering the visual aesthetic of the tool. As seen in the image below, the graph included a start, speaker and response node for users to link and edit. However, the button to add multiple response choices was deleted in the next iteration. Having one output port keeps the interface tidy, especially if users want to add a large amount of response options. The idea is to create a function that goes through the list of nodes from top to bottom and play the first possible node. Moreover, variables can be added to lock nodes to restrict or stop players from progressing without fulfilling the conditions. For example, a player may need to acquire a certain in-game item before progressing the dialogue tree. At this stage, variables are draggable and added in nodes to be triggered once that node has been reached in game.
Usability:
The next step in Maslow’s Hierarchy of Needs involves improving usability of a product. Gestalt and Norman’s design theories are added in this stage because it focuses on improving the visual interface and user experience. Firstly, colour coding each node type would improve visibility, especially in a large branching graph. According to Norman’s theory, signifiers are important because it improves discoverability and feedback (Norman, 2013). Having various colours per node type allows users to distinguish between node types easily. Moreover, using bright colours can help separate nodes from the dark background, tying into Gestalt’s Law of Figure-Ground. Moreover, the National Eye Institute (2015) states that up to 8% of males and 0.5% of females have colourblindess. To provide inclusiveness, the colour palette for this project has taken various colourblindess into consideration. By using an online colour palette tool (Colors, 2020), the chosen colours are distinguishable across colourblindess as seen in Image 2 below.
02
Blackboard Window
The blackboard window is used to create and edit variables such as Strings, Floats, Integers and Booleans. These variables, also known as “Stage Setters”, would be added to nodes to be triggered either OnEnter, OnExit, or during a dialogue node.
In terms of being Useful, the variable window should allow users to add variables through a button. After clicking the button, it should display a variable dropdown, name text field and draggable field. Through Norman’s Signifier and Conceptual Model principles, a drag field would signify players to drag and drop the variable to a node or property window.
Next, to improve its Usability and Desirability, the blackboard window should contain two columns to display all variables and node properties. As seen in image 7, The node properties would include the name and existing variables inside a selected dialogue node. Properties would not be displayed on each node to keep the interface simple with Gestalt’s Law of Simplicity. Moreover, by using Gestalt’s Law of Figure-Ground, the background colour of a node property is bright grey. This helps users to distinguish this column from the variable column, making it easier to read. Lastly, the variable column appears on the left side to promote Gestalt’s law of continuation and Norman’s Conceptional Model. Users can expect to create variables, drag them into a node, then having the node display a list of all variables in the blackboard window.
03
MiniMap
Users can click nodes to quickly navigate. A mini map with shapes reflecting nodes from the graph is added. Clicking on node shapes on the minimap would teleport users to the location of the node.
Final Outcome
Below shows a screenshot of the final outcome of implementing all three sections to the dialogue graph with placeholder values.
Desired Outcome
The desired outcome as seen in the image below, is a visualization of what the graph node was originally planned to be.
The mini map would have colour coded nodes with the selected node outlined in bright yellow. This would add Norman’s Discoverability principle of available nodes in the graph. Moreover, the star reflects nodes that users can bookmark. Making the starred node stand out from the graph and quickly navigate to important nodes.
Next, a key icon would appear on links to nodes to visualize the condition requirement to continue the sequence of nodes. If not, the node with no key icon will play. The Speaker node at the end of the middle sequence is grey. This is because it is a replica of another speaker nod, also known as a “Ghost node”. The idea is to allow users to play an existing node in another sequence without causing unnecessary and messy node links. This ties in well with Gestalt’s Law of Simplicity. Lastly, users would ideally be able to have keyboard shortcuts to copy, paste, and duplicate graph nodes.
Finally, the blackboard window would allow users to filter and search variables. This reduces user steps and improves discoverability when searching through a long list of variables.
Reflection
Originally, this project was going to be made using the xNode. xNode is a Unity plugin to help create node-based tools and dialogue systems. However, during development, I wanted to further challenge myself by using Unity’s Node Graph. This allowed me to explore and strengthen my understanding of low-levelled programming, which is important in the career path I would like to pursue.
Although most functionality has been implemented into this project, some features are not working due to some scripting functions not properly implemented. This includes link dragging to spawn nodes, variable dragging into nodes, and graph saving. Moreover, the final outcome is lacking the affordance and feedback compared to the desired outcome design.
This project has been a great learning experience as it helped me improve my C# programming skills and to demonstrate my current design thinking skillet. I would like to take this project further by achieving the desired outcome and exploring more ways to improve the usability and interface of this tool.
