CFD Software UX Design Patterns & Benchmarking

Discover some of the best CFD software design practices from our research & benchmarking

CFD software has the power but lacks the looks. These systems allow the user to utilize scientific data, to analyse and structure data in order to solve tech issues regarding fluid flow. In such a complex piece of software, the system's intricacy & overall processing power is only second to UI design. Maneuvering around clunky & cluttered interfaces is an issue that cannot be solved from within the program itself.

The user needs to be in control.

The control needs to be readily offered to the user, from seasoned veteran to beginner. The added strain of an underdeveloped UI design should not be present when operating such complex software. CFD software needs to also focus on providing a quality user experience. This would, in turn, greatly enhance the effectiveness & usefulness.

The Creative Navy design team has conducted this research & benchmarking in order to pinpoint some of the design patterns encountered throughout CFD user interfaces.

Photo by Zan on Unsplash

The State of CFD Software Interfaces in 2022

• Computational Fluid Dynamics (CFD) software is for experts only, which means it is highly specialised in solving complex physics problems.
• Whilst usually difficult to access due to necessary user knowledge and hardware prerequisites, we can notice some tools becoming increasingly accessible by offering cloud solutions and increased support via tutorials and other resources.
• Nevertheless, many of today’s existing CFD tools have a dated interface. Too little time has been dedicated to the user interface design & accessibility.
• As time passes, CFD users become more experienced with digital products. This results in higher expectations in terms of UX/UI. In order to stay relevant in such a competitive market, CFD tools should not dismiss user research and user experience design.

CFD software benchmarked

General Layout Benchmarking

Insight from our experience designing CFD interfaces.

Pros of using a Ribbon Menu

Example of a Ribbon Menu

1. Using a ribbon increases the discoverability of features and functions, and enables quicker learning of the program as a whole, as a result, it makes users feel more in control of the CFD tools.
2. Using a ribbon also scales better than menu bars and toolbars for future growth.
3. Ribbons work best for commands that apply to the entire window or to specific objects.
4. A ribbon with topic-related command tabs might feel more familiar to users, as it resembles common industry patterns and the current functionality organisation method.
5. Aligns better with modern UX navigation patterns.

Cons of using the Ribbon Menu

1. A ribbon menu might not be suitable for contextual commands, as ribbons work best for commands that apply to the entire window or to specific objects.
2. Uses valuable vertical space and thus decreases the size of the visualisation area.

Pros of using the menu bar & toolbars:

Example of a Menu Bar

1. Menu bars and toolbars are customisable and extensible. They allow the users to make significant changes to the command presentation contents, location and/or size.
2. Users might benefit from mini-toolbars, palette windows and direct commands, since they might only work in a specific area of the screen.
3. Could suit hierarchical commands better than ribbons, thanks to menus and submenus.
4. Primarily designed to be space efficient.
5. Toolbars allow for customisation and flexibility.
6. Menu bars have good keyboard accessibility.

Cons for using the menu bar & toolbars:

1. Can pose discoverability and learnability issues (especially to novice users), since some commands might be difficult to find or are buried deep in the hierarchy.
2. Icon-only toolbars can be confusing initially and require a lot of trial-and-error for the user to get the correct command.
3. Do not align with modern UX navigation patterns.

Discover UX & UI case studies on professional software.

Layout concepts: Menu bar (Traditional Windows)

STAR-CCM+ — CFD UX Design

STAR-CCM+ CFD Layout

• STAR-CCM+ follows a standard Windows layout approach; settings are grouped under dropdown menus, as the main navigation on the top screen area. This approach is likely familiar to many users and, as a result, will give a sense of comfort and ease when navigating around the app.
• However, this might feel dated and old-fashioned to other users.
• STAR-CCM+ also includes a quick actions strip underneath the main navigation. This conveniently pins frequently used actions as to be more accessible. Including such a feature seems to be a common practice around highly complex CFD tools, as is the flexibility of relocating these quick actions strips around the interface, for a more customised experience.
• Another highly appreciated layout feature is detachable windows. This means that each individual window-component from the interface behaves independent to other components. Each one can be viewed separately or integrated back into the interface.
• This also allows for a high degree of flexibility and customisability. Despite this, some constraints need to be imposed. Too many overlapping pop-up windows can become chaotic for the user.
• The default component layout is standard in the 3D modelling and simulation software industries. The left area is reserved for an object outline (also known as a file tree) at the top, and the properties window at the bottom.
• This type of view allows for more straightforward navigation of complex hierarchical structures. It also follows the logical flow of the CFD process. The user needs to begin by setting up the geometry and the initial boundary conditions before following up with the actual running of the simulation and the post-processing of the results.
• Users can control the minimising/expanding of directories as they please, which makes navigating through a complex structure much more accessible in this CFD software.
• The bottom horizontal area is dedicated to a status bar, whilst most of the screen real estate is occupied by a visualisation window that can host multiple tabs.

ParaView — CFD UX Design

ParaView CFD Layout

• ParaView is a CFD software that follows a very similar approach to STAR-CCM+. ParaView offers a multi-level shortcuts menu that includes some dropdown sub-menus.
• Similarly to STAR-CCM+ and following the standard Windows layout approach, these shortcut menu strips are flexible and can be relocated across the interface for a more personalised experience.
• The main windows layout stays the same, with most of the screen real estate being dedicated to the visualisation window that also includes and XYZ axis component and a magnitude scale.
• ParaView’s visualisation window also has some shortcut actions of its own, as well as options of changing the view.
• The left-hand area of the screen is allocated to the file outline, which marks the user's current selection. Underneath, the properties windows are quite crowded with options and sub-settings, lacking visual hierarchy and organisation. However, dropdown sub-menus are clearly signalled, and selection components such as checkboxes and buttons are used correctly.

in:Flux —CFD Software Design

in:Flux CFD Layout

• in:Flux aligns with the standard CFD layout, having a basic menu bar on top, followed by a toolbar and a file tree on the left.
• The file tree content follows the basic CFD processes (geometry, simulations, scenario and visualisation), which acts as a logical navigation guide for the user.
• Simulations are grouped by simulation type (ventilation, dispersion, explosion etc.), which can be useful for users running many simulations on the same geometry and scenario.
• The menu bar is kept very minimalistic, with many commands being available via context menus that are right-click activated. While this is common desktop behaviour, it’s important for all commands to also be available in their respective menus (apart from context menus) so that discoverability is kept high and the risk of trial-and-error is minimised.
• in:Flux breaks the pattern by employing a tabbing system on top of the file tree. The "Add item" tab is used for user input. The input fields change depending on the type of item the user selects from the dropdown menu, which is an unusual pattern.
• It is recommended that tabs are employed when they contain information that the user would not need to view simultaneously. However, we can argue that the user might need to view the file tree when inputting data, which is not possible in in:Flux.
• in:Flux also uses a traditional properties window in the bottom left of the screen, which displays information in a compact, tabular format. The different input formats (“Add item” tab and Properties window) seem to serve similar purposes, yet there are UX and UI inconsistencies in the input fields’ format.

Layout concepts: Ribbon menu (Modern Windows)

ANSYS-Fluent — CFD UX Design

ANSYS-Fluent CFD Layout

• ANSYS is currently one of the most popular CFD tools, with many users recommending it online.
• We can see that ANSYS follows a modern Windows UI/UX approach, organising settings under tabs rather than under dropdown menus.
• Each action is illustrated by an icon and belongs to a sub-category, which helps the user scan through them much faster to find the option of interest. This organising method reduces trial-and-error behaviour, as tools are meaningfully grouped and also carry a visual cue rather than a plan label.
• The information architecture is coherent here, as the tabs and sub-categories create a nice visual hierarchy.
• As customary in many complex applications, ANSYS uses an outline view with a search bar on top that clearly shows the 3D model’s components and subcomponents.
• We can see that ANSYS integrates the pre-processor (‘Setup’), the Runmanager (‘Solution’) and the post-processor (‘Results’) into one interface, which allows the user to navigate between them and have a unified experience as a whole.
• Highlighting the outline view item, that the user currently uses also helps with navigating through the software. The outline view is not flexible and detachable as a separate window, which might be an appropriate constraint in this situation.
• We can see that a particular outline view item also opens a side panel of specific options and other settings, including another search bar. The available actions are designed as buttons on the bottom area. What could be optimised here is the labelling, as some button labels are too long to fit into the container.
• Most of the screen is dedicated to the visualisation window, which has a vertical strip of task-specific actions, as well as an XYZ component for space orientation. Underneath this, we can find the Console window, which also displays status messages.

PipeSim — CFD Software Design

PipeSim CFD Layout

• PipeSim’s tabs are very similar to Microsoft Office UX/UI. This gives the appearance of a modern, clean interface spaced out enough and not cluttered, despite being content-heavy.
• PipeSim divides its settings into only three tabs that also have subcategories. The subcategories items have large enough icons and labelling, which can be of great help, especially for a novice user, but also makes the interface look more personalised and approachable.
• On the very top area of the interface, there are three frequently-used actions (amongst which: Save and File). This can also be useful for users that still haven’t gotten in the habit of using keyboard shortcuts such as ctrl+S.
• Underneath the main navigation, we can see a thin menu strip that enables navigation between different files of the same type.
• The left-hand side is very similar to many other tools in the industry, using a file outline (called ‘Inputs’) to show different types of objects currently existing in the 3D model. Higher-level items can be collapsed if necessary.
• Underneath the Inputs window, we can find a ‘Tasks’ menu, which shows a series of possible actions for the current selection in the model.
• Properties or editing settings windows appear as an overlaying popup. The use of headings and correct alignment create a good visual hierarchy, despite the editing window being content-dense.
• On the very bottom area of the interface, we can observe a status bar, as well as debugging or status messages and validation warnings.

SimulationX — CFD UX Design

SimulationX CFD Layout

• SimulationX is yet another interface that uses Windows’ latest UX/UI. We can see a tab-based navigation that looks very much like the one employed in the Office Suite. Each tab reveals a ribbon of actions separated in specific categories. We can notice that the main actions have large icons, whilst the secondary ones either have smaller icons or no icons. However, they are all clearly labelled, which aids the users in the learning process.
• At the very top, on the left-hand side we can see a series of quick actions such as Save, Undo etc., a similar pattern amongst other interfaces.
• The left area of the screen contains an object outline (named ‘Library’). Superior categories have the collapse/expand function, which is useful for controlling which levels of the Information Hierarchy to view at once.
• Icons for the different components would be helpful, especially if they correspond to those in the visualisation window. Adding a search function can also come in handy, especially for large and complex libraries such as the one in the screenshot above.
• Under Library, we can see a properties section that is non-detachable.
• The visualisation area is split into two windows, one of them showing a schematic representation of the 3D model on the right side. Both windows contain tabs.
• The 3D model has a small XYZ axes component. On the right side of the 3D model window, we can see several vertical tabs that seem to open separate menus. Including vertical tabs with vertical labels decreases accessibility, yet it might be a solution for crowded interfaces.
• A full-length strip at the bottom of the screen is used as a status bar, with more viewing controls on the right side.

Solidworks —CFD Software Design

Solidworks CFD Layout

• Solidworks has a similar tabs approach, choosing to place the labels underneath the components instead.
• This can work out fine for a smaller amount of items. However, it would be a bit difficult to scale since it would interfere with the visualisation window and specific tools. As a result, a slight layout redesign would be needed.
• The currently selected tool is highlighted. This can prove useful in easing the user’s memory load while operating this CFD software.
• As per common practice, the left area is occupied by the object outline. We can see other tabs available. However they do not have any labels, which makes it difficult to infer their functionality.
• The tabs component has an arrow button, which is not ideal but can prove helpful in the case of limited space. Underneath the tabs reside the usual objects outline, which has additional icons for better visibility. The items can expand & collapse.
• On the very bottom left part of the screen, we can notice a ‘tabs’ area. This allows the user to switch between different visualisations. On the right side of the 3D model window, we can notice a tabs-navigation system that is icon only.
• Including labels would improve the user’s experience, as they don’t have to remember or guess which tab hides which functionality or content.

Altair CFD —CFD UX Design

Altair CFD Layout

• Altair uses an uncommon approach. The CFD software keeps some of the traditional Windows dropdown menu items (e.g., ‘File’, ‘Edit’) while also turning some of them into tabs (e.g., ‘Motion’). This might confuse some users, as the seemingly similar menu items have quite different behaviours.
• The actions menu strip is highly visible. Its illustrations are of a bigger size, which really aids to identifying the appropriate action, that the user is interested in taking, as does labelling.
• The bigger portion of the screen is occupied by the 3D model window, which also has a series of specific actions on the bottom. A XYZ axis component is also present to aid with spatial orientation.

HELYX — CFD Software Design

HELYX CFD Layout

• The HELYX CFD tool uses the ribbon menu to make functions explicit to the user. This is done by employing both labels and large icons, as well as meaningfully grouping them in categories.
• HELYX keeps the overall number of ribbon tabs minimal. The traditional ‘File’ tab is followed by 4 of the main CFD processes: meshing, setting up the scenario and geometry, solving the simulations and then visualising them. This means that the user will easily identify which command belongs to each tab as they follow the standard CFD process.
• The CFD software also uses the traditional object outline, an essential aid in navigation.
• Overall, the HELYX interface gives off a modern look yet seems cluttered and overwhelming due to a lack of proper spacing. This is especially visible in the geometry view, where the outline is overwhelmed with geometry elements that seem to lack any white space.
• HELYX uses a side panel for information input that allows the user to view the visualisation area simultaneously. This could be considered a good use of screen real estate, as it can be highly useful when adding scenario elements in particular locations (e.g., monitor points, leaks etc.)

Phast 3D — CFD UX Design

Phast 3D CFD Layout

• Phast 3D uses a standard ribbon menu that is similar to the Office Suite design. Most commands are assigned icons and labels. However, less frequently-used or more advanced controls are less prevalent and sometimes lack an illustrative icon. This establishes a visual hierarchy that places the most commonly & frequently used commands first for ease of use in the CFD interface.
• Phast 3D also uses a detachable file outline. This displays all the project’s objects under a tidy hierarchical format. However, this CFD UI deviates from the standard layout by also using tabs at the bottom of the outline. These tabs filter out object categories, such as Models, Materials, Map, Effects, Parameters, Weather & others. The placement of these tabs is not ideal since they are essentially filters for the project outline side panel. A better placement would have been on top, as this would pinpoint their functionality more clearly.

Other Layout Concepts

SimScale — CFD Software Design

SimScale CFD Layout

• SimScale is a unique CFD tool that is entirely cloud and web-based.
• In terms of layout, SimScale evolved and set itself apart from most CFD tools by employing a simple, minimalistic menu for navigating other projects. On top of this, SimScale uses toolbars for most in-app commands.
• The interface is simple & focused on productivity.
• SimScale employs a collapsible floating layout on the left side that displays all project objects and a different outline on the right side for displaying geometry-specific objects. This type of layout seems appropriate for a web-based application. However, it does not offer the same flexibility that detachable windows would.
• SimScale stands out amongst other CFD tools by separating the geometry functionality from the rest of the application. This happens by entering a so-called ‘CAD mode’. This mode allows the user to edit & manipulate the geometry. Showing only geometry-focused commands improves overall productivity.

Other Design Challenges & Possible Solutions

1. Accessibility

The Challenges:

• CFD applications are complex; they are made for experts. So their main value propositions are usually: solving capabilities & result accuracy.
• Therefore, it’s easy to overlook (or even dismiss) seemingly unimportant details, such as accessibility issues, such as inappropriate contrast, small fonts, insufficient white space, insufficient clickable surface around buttons & the lack of visual hierarchy.

The Solution:

• Ensuring WCAG compliance is a minimum requirement that should be taken into consideration. This can significantly affect users’ experience (e.g., ensuring a minimum font size of 12–14px for body text, providing a minimum target size, aka clickable surface of 44x44 px etc., providing a minimum contrast ratio of 3:1 etc.).

2. Learning Curve

The Challenge:

• Our thorough user research has confirmed that most CFD applications aren’t novice-friendly, have a steep learning curve, and require a long list of prerequisite knowledge.
• Although the importance of understanding physics & computational fluid dynamics cannot be denied when utilising these CFD tools, it’s still essential that the software is inviting for new or transitioning users (such as users who come from another such tool).

The Solutions:

Follow smart UX patterns.

• General good practice in UX, as it improves user experience, bringing familiarity and comfort when transitioning to a new CFD tool, thus increasing retention rates.
• Our user research showed that CFD tools that follow a standard industry layout are preferred. These tools are viewed as easier to get accustomed to — this naturally improves the chance of recommendations.
• Providing lengthy documentation and sufficient resources would be great(e.g., user manual, tutorials, sample projects, scripting tips etc.), but embedding enough feedback into the software so that the user’s workflow isn’t disrupted should also be done.
• Instead of asking users to follow the meshing guidelines as described in a tool’s user manual, CFD tools could have an automatic software check of such requirements & include warnings or notifications when they aren’t met — this minimises the need for external tools and provides a more unified experience. A minimal level of feedback and validation inside the CFD software could make a difference.

3. The expert wall to efficiency

The Challenge:

• Most available CFD tools nowadays can be automated and improved using scripts.

But what about users who do not have access to scripts or don’t know how to code?

• Given how long and time-consuming the process of setting up scenarios and defining variables can be, having the possibility to automate some actions could prove of great help to users. They could then redirect their resources to other activities, such as Quality Assurance.

The Solution:

• Design and implement functions that enable beginner or intermediate users to reap some benefits of scripting without all its prerequisites. One solution that some CFD tools already have implemented is recording macros (also known as tracing, journaling etc.) This allows the user to record a log of actions that are then saved as a shortcut and can be repeated in an instant when needed, all directly from the GUI.