A user interface is like a joke: If you have to explain it, it's not that good.
User interfaces are the way we see the world. From the apps on our phones, to the software packages on our computers, to the displays on our washing machines. We're constantly engaging and interacting with different UIs to achieve our goals. The same goes for our work in visual effects, animation and games. In addition to the large commercial UIs in software packages like Maya, Nuke and Photoshop, there are a variety of custom UIs that we interact with on a daily basis: From third-party plug-ins to in-house applications. These custom tools are essential to our work and could potentially save us countless hours of frustration ... until the tools themselves become the source of our frustration.
The fact is: Most custom VFX UI designs suck!
They are clunky, overly complicated, and a pain to understand and use. Many developers prioritize functionality over user interaction. This is a critical miscalculation, because the tools they create are meant to help artists do their jobs better and faster. That won't happen if the tools are avoided like the plague because they look like they're from the same era. Appearance matters not only for aesthetic reasons, but also for confidence in quality and results.
Let's see how we can make our applications more accessible and user-friendly with just a few changes.
VFX Graphic User Interfaces
Graphical User Interfaces (short GUI or UI) are the bridge between the intentions of the developer and the artist. It is a way to add variety to an application to make it flexible to the needs of the user. Creating an intuitive and easy to use UI is an art form in itself and should be part of our time investment when creating an application that interacts with a user.
A simple rule before creating a UI is:
No UI is needed if a script only performs a single action or can determine the right options by context. Instead, we make them easily accessible in the menu, toolbar, or shelf to be activated when needed.
Visual effects, animation, and video game projects tend to use a variety of software packages or DCCs (Digital Content Creations). Fortunately, most of them have a strong Python API and allow technical directors and developers to automate and modify processes. The same blessing comes in the form of the UI library PySide, which is also included in most DCC packages. This allows us to standardize our UI development and design processes independent of the software.
In the past, many UIs were created through code, which was always an excessive and tedious task. Imagine if we could choose to build our UI by code or by drag and drop.
Which would you choose?
The free software Qt Designer allows us to create UIs by dragging and dropping elements from a sidebar into a window. Gone are the days of blindly programming a design with function calls and random hex values. Now we are using WYSIWYG (what you see is what you get). Design software packages like Qt Designer allow us to create and modify the look and feel of our application while using layouts to make it scalable and adaptable to the content. Another benefit for us and our team is that we can quickly add, delete, or modify aspects of the UI without having to dive into the code and its functions. The designer also helps us find the names of widgets when using third-party applications by simply clicking on the widget and looking up its name in the information tab which makes it simpler to find it in the code. Finally the Qt Designer also makes a clear separation between functionality and design by creating a separate .ui file next to the functional .py file.
Are there any advantages in coding a UI? A few, but not many.
Coding the UI from scratch avoids redundant attributes and metadata that are often added by the designer software. Most software is limited in the amount of complexity we can actually do, especially if we are building a dynamic application. Coding also opens up the possibility of using widgets and functions that are not built into the designer. A great middle ground is to create the basic UI in the designer and then extend it with additional code.
3 Level Problem
Design is a skill and follows certain rules. Though rules can be broken if we know how and why. Even for VFX applications, we can use these design rules to create UI designs that make our tools easier to understand and use.
Great UI design is built on three levels:
Intuition
Familiarity
Communication
1. Intuition
How do we intuitively interact and work with the world? How do we use devices and gadgets? How do we access and process information? These are the questions that good UI design addresses through its design. It may sound theoretical or even esoteric, but these questions open up simple rules that we can follow to make our UIs more intuitive to use.
A great example of intuitive design is to follow the pattern of reading. In most languages, we read from left to right and from top to bottom. By following this reading pattern, we're able to create an intuitive sense of information priority and order of consumption. First we look to the top left, then to the right, then to the bottom left and finally to the bottom right. In practice, this means that the first (and most important) information we want to communicate to the user should be at the top left, while the last and final information and approval should be at the bottom right.
Let’s take a look at the arSave interface of my Open Source Pipeline Plex:
On the top left we have the current screenshot of the scene, which gives a quick view of the environment that will be saved and opened later. On the right you can see the save information and additional input options for a comment. Finally, in the bottom right corner we have our Publish and Save buttons.
2. Familiarity
Familiarity is about how confident we are with the custom application based on our previous experience. We use hundreds of applications and user interfaces every day. Applications on our phones help us stay connected, software on our laptops allows us to get our work done, while reading on our iPads and Kindles, and even our microwaves asks us for input. Over the years, we have learned how to navigate this modern application-driven world, and we expect certain patterns and processes of familiarity to help us understand and access new things. This means that the closer an application's UI is to the application we use every day, the easier and faster it is for us to understand and use it appropriately. Familiarity also applies to similarity. The idea of a desktop and folders is to mimic real-world desktops and folders to make it easier for us to access new technology by moving real-world processes into the digital world.
The best way to use familiarity is to use similar applications as references for our own design. Ask yourself: "Why do they do it this way?" and see if the same approach can work in your design. It's important not to blindly copy other people's designs, but to use them as a starting point and guideline to create user confidence.
Another way is to take advantage of the familiarity of the current environment by following its design philosophy. This may mean using similar shapes, colors, structure, and wording to feel more integrated into a particular DCC. If you make your applications look like Maya, Nuke, or Photoshop, users will feel like they were designed by the original developers, which leads to more clarity and trust. This can also apply to your own applications, where following a certain consistency allows our users to jump between different applications with minimal adjustments.
3. Communication
The final and probably most obvious level is direct communication. Direct communication is how our UI interacts with the user. Independent of intuition and familiarity, our UI can spill the beans and tell them directly what an element does and what happens when they click it.
At this level, the UI communicates directly with the user through specific UI elements:
Labels
Buttons
Inputs
Placeholders
Tooltips
Keyboard shortcuts
Position
Colors
Help & Documentation
A tiny investment in the wording of our labels, placeholders, buttons, and tooltips can go a long way toward helping even the most oblivious user understand our application. A great way is to always ask ourselves: "Does this element help identify what it does?" while keeping it short and sweet.
Calling the final button in our save application "Accept" seems understandable enough at first, until we label it "Save," which tells the user everything they need to know. In addition, coloring it green, positioning it at the bottom (right), and giving it a helpful tooltip enhances its place in the UI. The same goes for the tooltip if it simply says "Save file", which is not really helpful, while "Save work file with new version" reveals new information about the process.
Finally, we can provide quick access to the documentation that breaks down the tool with videos, gifs, and text.
Example: Trello Cards
Trello is a well-known online task management application. However, even a large company with vast resources can fall victim to not understanding the principles of UI design:
Let’s break down a Trello card and apply what we just learned:
The Save and Cancel buttons are located in the lower left, which is too early for our reading behavior.
On the other side “Formatting help” and “delete” are placed on the bottom right, which leads to accidental card deletions.
Save is written out, while Cancel is represented by an X, resulting in mixed icons.
Save has a green background while Cancel is not colored at all.
Although the interface looks advanced with its soft colors and simple formatting, it is actually slightly confusing, which results in a loss of time until the user learns the structure of this application.
Testing & Feedback
The final step in any application development, from functionality to design, is the testing phase. It doesn't matter if we think our application is brilliantly designed, following all the design standards and patterns. What matters is what the real users of your tools think.
Is it clear how to use it?
Is there anything we could add, change, or remove to make it clearer?
These are the most important questions to ask when presenting it to them. Observe how they interact with it and ask them why they did what they did if they use the tool in a different way or miss key aspects. The focus must be on the user and how they interact with the tool to make it as accessible as possible. Remember that individual intuition and familiarity can lead to different results, so it's important to consider the person's background. We can normalize individual feedback by asking several people and averaging the results.
A user interface is like a joke: If you have to explain it, it's not that good.
Resume
For many developers, the user interface of their tools is more of an afterthought, done in the last minutes of development. This is even more true for internal tools that are used by a handful of artists, sometimes for only a few days or weeks at a time. Ignoring UI design pays a heavy price when the user feels like we don't care about them. They, on the other hand, may respond by not using our tool, or using it incorrectly, while crawling slowly to the finish line, making many mistakes along the way.
Spending time on our application's user interfaces is an essential part of any development workflow. It ensures that they are used correctly, avoids unnecessary support, and shows care for the users. In return, the users will show their appreciation by working with the application to successfully complete their project.
There may be a future where even in-house visual effects applications are indistinguishable from any commercial application out there. Following these simple guidelines will make your application more accessible today and more useful for your next project.
For more information check out my Python Advanced masterclass.