Evolving the Unity Editor UX

A new design signifies the first step towards improving the user experience (UX) for an ever-evolving and increasingly complex content creation tool: The Unity Editor.

Millions of creators use Unity every month to make amazing content and interactive experiences. Over the years it has steadily grown in size to become the world’s leading real-time creation platform with a diverse and expanding audience of passionate users. As a productivity tool that’s used frequently and for long periods of time, ease of use and efficiency are everything. 

With that in mind, we took a step back to find opportunities for making improvements that are less about new features, and more about the look and feel, core interactions, and workflows. 

Design improvements in numerous areas of the Unity Editor UX are reflected in the latest 2019.3 beta release, with more to come soon. This long-term effort, which will be released in multiple phases, is driven by the goal of ensuring the Editor is:

• Modern. We want to provide Unity users with a modern and professional Editor experience that feels inspiring, well-crafted, and trustworthy. 
• Familiar. The Unity user interface should be consistent and aligned with industry standards.
• Accessible. The Unity user interface should be accessible to a wider range of users and their abilities.
• Efficient. We want to enable users to create content and complete tasks efficiently by offering a clear and optimized user interface (UI) for common tasks, as well as streamlined workflows. 

This blog post summarizes the UX improvements we’ve made to the Unity Editor over the course of multiple releases leading up to and including 2019.3.

A modern look and feel

We believe that good design is a harmony of form, function, and aesthetics. A product’s visual design should be purposeful and in service of usability and workflows. The visuals of the Unity Editor’s interface have varied significantly over the years. As our ecosystem grows, we wanted to update the appearance of the Unity Editor for a consistent look and feel and a more cohesive experience.

Themes. The Light and Dark themes have been updated with new colors and treatments throughout the UI to increase clarity. We’ve introduced a more lightweight and minimal look and feel to allow users to focus on their content and workflow. For example, we’ve removed gradients from the UI to reduce distractions while addressing user feedback to maintain a sense of depth in the UI, which ensures that controls are visually distinct and convey their behavior and functionality. 

Icons. Icons are an essential part of the Unity Editor UI, visually expressing objects, actions, and concepts. They add many benefits, such as preserving screen real estate, communicating meaning at a glance, accelerating the understanding of the UI, and enhancing aesthetic appeal.

As part of evolving the Unity Editor UX, we felt it was time to refresh our icons, aligning their style with the icons now found in the Hub, Services Dashboard, and other Unity web properties. These new icons help express Unity’s visual identity. Each icon has been created in multiple sizes so that it renders optimally across display types (e.g., HDPI) and resolutions – icons will appear crisp on every screen. 

New Editor and Hub app icons. Icons that appear in the Windows taskbar and the MacOS dock serve as the front door to the apps that are launched when clicked. The new app icons are fresh renditions of the signature Unity cube: white on black background for the Editor, and black on white for the Hub. This modern visual style is consistent with the Unity experience across our ecosystem and reflects Unity’s continued design evolution and attention to alignment.

New UI font. Text plays an important role in any user interface, and in one as information-dense as the Unity Editor, UI text is crucial. Proper legibility is essential. Getting text to display with consistent quality and reliability across multiple platforms is a challenge, as each operating system will render the same font differently. The Unity Editor has used the same typefaces for a long time, but they have had quality and rendering issues, so we’ve introduced a new font that improves legibility and complements the new UI. After careful consideration, we chose Inter, a modern typeface designed for computer screens. It’s highly legible and helps minimize eye fatigue. Additionally, it renders well across all operating systems and screen types, including both low and high DPI. 

From an accessibility standpoint, we’ve made further improvements to UI text. Previously, the text size in dropdown menus and text fields was extremely small, so we increased the minimum text size to make the UI more inclusive and usable for a wider audience. 

Revamped core interactions and controls

The Unity Editor has many core interactions (also known as “micro-interactions”) and controls that are used frequently across many workflows. Improving them can, therefore, have a broad impact on efficiency and ease of use. That’s why we’re committed to addressing existing core interaction problems as well as improving the quality of controls both near-term and long-term.

Here are just a few of the improvements we’ve implemented in this area:

1. Window focus. The Unity Editor is a dense environment where many different windows are open and in use at the same time, making it difficult to keep track of which window is currently in focus. That’s why we introduced a visual indicator, a blue line, to clearly indicate the active window receiving input from the user. By reinforcing a sense of context, we hope this helps users focus and stay in their flow.
2. Tab improvements. In the past, the width of tabs in the UI was fixed, but this created a visual imbalance where the tabs contained text of varying length, causing irregular spacing. Now the width of tabs is based on the length of the text, so the spacing around the text is consistent. The flexible width also helps with localization as translated text strings can vary greatly in length across languages.
3. Adding new content. Adding content is a key interaction in all creation software: The “+” button has become a signature element in modern UI that users look for when starting their creation workflow. We’ve adopted this element in the Editor to preserve space and provide a familiar experience for creators.  

Hover. We’ve added a hover state to controls in the Editor for a more responsive and interactive feel. Hover helps clarify which element the user is interacting with and acts as a prompt for tooltips.

Workflow improvements

Every task a user performs in Unity is part of a workflow: We define a workflow as a set of steps a user performs to achieve a goal. There are hundreds of workflows in Unity, with different levels of complexity and granularity, meaning there are many opportunities to improve and streamline the experience. 

With the 2018 and 2019 releases we’ve begun implementing some key workflow improvements, including the following:

Project Settings. Project Settings have long been reported by users as an area that needed improvement. Previously, each Settings page was accessed via the main menu and shown in the Inspector. This meant that users would need to go through many clicks to find the right settings to edit and would often lose the page if they selected something in another window (since each settings page was bound to the Inspector). We’ve now streamlined the Project Settings workflow by unifying all its pages into a single dockable window, allowing users to easily navigate them using a sidebar with tabs for each page. We’ve also added the ability to quickly find specific settings via a Search box. Being able to switch between Project Settings pages in a single click has resulted in a significant gain in efficiency, so we’ve applied the same window layout and behaviors to the Preferences window for a more efficient and consistent experience.

Quick Search. When building a large game with hundreds or even thousands of assets and game objects it can be tedious and difficult to locate specific content. The Quick Search feature allows users to easily find anything in the Editor, including assets, game objects, settings, and even menu items. It can be quickly invoked via the shortcut Alt + ‘ and is fully operable using the keyboard: Users can take action against the search results, navigate to an associated settings page, drag an asset into the scene, or activate a menu item. This method for finding content can significantly speed up the user’s workflow and save a lot of clicks and mouse travel.

Shortcut Manager. Keyboard interaction is an important aspect of ensuring both user efficiency and accessibility. Being able to execute commands via a keyboard shortcut (a key or combination of keys) drastically speeds up workflows and reduces the need for mouse travel. The new Shortcut Manager lets users view and manage these keyboard shortcuts in the Unity Editor. We’ve also identified many other opportunities with regards to both keyboard and mouse interaction to make the Editor accessible to all users – stay tuned for future releases.   

We’re on a mission to improve how users work so they can achieve their objectives with the minimum amount of effort. If we shave off even a small percentage of time from a task users perform many times a day, it begins to add up in terms of efficiency gains. Going forward, we’ll continue to make updates that improve workflows with the purpose of increasing user performance and satisfaction.

Engaging users

One of our core values is to put users first: Collecting user feedback early and often has been, and will continue to be, a key element of our journey. 

The new Editor design has been available in preview builds for almost a year. During that time, we’ve received an incredible amount of useful feedback via the forums, surveys, and social media, which is a testament to our extraordinarily passionate user base. We’ve actively applied the feedback in our design process and iterated based on what we’ve learned from users. 

Since we’re making big changes that must be grounded in real needs, we’ve actively involved users from the start. At the end of the day, changes are only worth making if they solve problems and add value for our users. If you’d like to share your comments on the new design you can do so in our forum.

What’s next?

This is just the beginning. Users can look forward to more UX improvements in future releases at all levels, including look and feel, core interactions, and workflows.

Below is a concept visualization of several future UX improvements under investigation: We’re reimagining tools and actions to bring them closer to the user’s area of focus and help them stay in their creative flow. Additionally, this concept explores Workspaces that enable users to easily create and switch between Editor layouts that are optimized for specific tasks, e.g., World Building, Animation, Lighting, etc. 

Data-oriented game creation and development is an important area of investigation that we’re dedicating a significant amount of user research and design effort into. We’re also working hard to evolve workflows to be intuitive, user-centric, and efficient as part of our long-term vision to empower creators to achieve their goals with ease.

We’ll continue to engage users for feedback to inform and validate future designs and we’d like to sincerely thank the community for sharing their valuable input thus far. 

Human Interface Guidelines for developers

If you’re an Asset Store developer with an existing Editor extension or package we have created a Transition Guide as part of our new Human Interface Guidelines site (currently in beta) to help you adopt the new themes, look and feel, and interactions. 

The Ninja Megacity project

The Ninja Megacity demo shown in the screenshots above was created by the Graphics and Animation teams to demonstrate new features being released in the Animation Rigging package in Unity 2019.2. We used these tools to teach a Studio Workshop at this year’s SIGGRAPH and the example project is available on github. We then upgraded the project to Unity 2019.3 in order to test the new UX improvements featured in this blog post.

Acknowledgements

The work described in this blog post represents the combined efforts of many teams at Unity: R&D UX, PM, Brand & Design, Labs, Content, Product, QA, and Editor teams have all come together to envision and implement the Editor UX improvements.