New Blender UI Proposal

In this video I'll attempt to provide a solution to the problems I addressed in Parts 1 and 2.

Main Problems with Current UI:

  1. Inconsistent - Some operations, terminology and mouse functions differ, depending on the screen or operation.
  2. Unfamiliar - Mouse functionality difficult for newcomers as left-click for select is the UX standard
  3. Recall instead of Recognition - Heavy use of keyboard shortcuts make users think.
  4. Poor Error Prevention - Blender let's operations proceed that will cause errors.
  5. Poor Feedback - Many button presses don't respond immediately. System lag with heavy meshes.
  6. Poor Recovery from Errors - Undo functionality sometimes clears work from other modes. Crash recovery hard to use.
  7. Visually Complicated - Too many buttons. Should adhere to Gestalt Principles. Text too small. Wireframes too dark for good readability.
  8. Not Goal Oriented (the main one) - Too much emphasis on customization and not enough on users common tasks. Results in slower workflows, and confused users.

Proposal

#1: Tabs

Give each task in Blender it's own tab and selection of tools. This gives the artist all the tools they need to perform that task. Eliminating the need to keep multiple windows open to access their tools.

"You can turn scrolling into clicking by making a deeper hierarchy, for example turning panels into tabs." -Brecht Van Lommel, UI Analysis post, BlenderWiki.

“Tabs are one of the very few cases where using a physical metaphor in a user interface actually works… [they’re] so visually distinctive, they’re hard to overlook... As interface devices go, they’re clearly a product of genius.

-Steve Krug, Don’t Make Me Think

Modelling Tab

Modelling Tab

Material Tab

Material Tab

EDIT: On the "ribbon" debate, here's a quote about why it works so well for complex software:

"Displaying commands in menus, toolbars, and dialog boxes works with a limited number of elements. But Microsoft Word 2003 has 1,500 commands, and users typically have no clue where to find most of them... [with ribbons] the focus is now on letting users specify the results they want, rather than focusing on the primitive operations required to reach their goals. (Update: The ribbon was indeed used in several of the winning application designs of 2008 — only a year after it was released.)" -http://www.nngroup.com/posts/rip-wysiwyg/

#2: Home Tab

"From its first screen or home page, software should show users the way to their goals."

-Johnson, Jeff. Designing with the Mind in Mind.

The Home tab allows users to save, open, import, as well provide a list of commonly used objects.

Home Tab

Home Tab

The objects can even be clicked and dragged onto the workspace:

Elements can be clicked and dragged into scene

Elements can be clicked and dragged into scene

#3: Drop Down Menus

A way to hide the less used functionality and make the most used functions more available.

Demo

Demo

#4: Sidebar

A bar situated to the right that's designed to help the user understand and interact with their scene better. Also gives developers more room to add custom tools.

Notifications Panel

For displaying alerts, warnings or errors. Since it's always on display it doesn't break the non-modal workflow, nor risk the user not seeing it.

Info Panel

Used to display controls for certain tasks like adding a sphere or using an addon.

Controls when adding a Sphere

Controls when adding a Sphere

Properties Panel

A clean display of the selected object's properties.

Layer Manager

Finally! Layers with Names!

Layers with names!

Layers with names!

History

An easy way to backtrack through your previous actions and undo or redo without fear of losing your changes.

Click back or forth between previous tasks

Click back or forth between previous tasks

#5: New Toolbar

Replaces the current toolbar, using icons instead of words, saving x4 the space. Allowing you too leave it open without it taking up so much of your screen.

Plus you can hover over each icon to learn the shortcut:

#6: Rendering Process

The render panel has several big changes:

  • Stills and Animation are separated to avoid clutter
  • Commonly used functions are visible. Advanced functions are hidden below drop down menus.
  • Render Slots now nameable and easier to access in sidebar
  • Preview Render uses OpenGL to preview the scene before rendering

Pre-Render Breakdown

Shows the user what Cycles is doing before it starts rendering, as well as an estimated time till start.

Pre-Render Breakdown – shown once render starts

Pre-Render Breakdown – shown once render starts

Rendering

Whilst rendering a progress bar with time remaining is shown (giving user more feedback). Along with a physical cancel button to remove the Esc key button mashing to stop a render.

Rendering in Progress

Rendering in Progress

Post Pro Screen

Once the render has finished, the sidetab switches to Post Pro, allowing users to make click and drag adjustments onto their render and see the results in realtime.

Demo of the Post Pro Screen

Demo of the Post Pro Screen

In Closing

This UI concept was just a glimpse of the idea. There will no doubt be plenty of questions about how certain things could function, but for now I'm going to see how the community responds. Especially at the Blender Conference which is in one week ;)

Bonus! Survey Results!

At the end of both Part 1 and 2, I posted links to surveys that discussed various topics from the video.

So as promised, here are those results:

#1 Mouse Functionality

"What should be default for selecting in Blender?"

#2 Asking to Save

"Should Blender ask to save before closing by default?"

#3 Crash Recovery

"Would you prefer a crash recovery dialogue box after closing?"

#4 Design

"Would you prefer white wireframes over black ones?"

Wireframe Comparison – Current/Proposed

Wireframe Comparison – Current/Proposed

#5 Readability

"Would you prefer an increase in font size (to at least 14pts over the current 11pts)?"

#6 Undo Functionality

"Would type of Undo functionality would you prefer? Chronological (regardless of mode) or Mode Dependant (current)?"

#7 Python Tooltips

"Would you prefer Python Tooltips on or off by default?"

So there we go, lots of controversy :)

Understandably there's gonna be some things you disagree with in this proposal, and that's completely fine. You're welcome to express your opinions.

However as I've mentioned before, please be respectful to others when commenting.

To better understand the community's thoughts on this proposal, please give your feedback in the official survey:

And on that note I'll finish on one last quote from "Don't Make Me Think". On the topic of usability debates:

“I usually call these endless [UI] discussions “religious debates,” because they have a lot in common with most discussions of religion and politics: They consist largely of people expressing strongly held personal beliefs about things that can’t be proven… 

The right kind of question to ask is “Does this [function], with these items and this wording in this context on this page create a good experience for most people who are likely to use this [software]?” -Steve Krug

So when discussing any feature or proposal, if we can keep that question in mind, then I believe we can have a much more constructive discussion.