Query Editor

Query Editor

Overview

For properties that require selections of objects Simcenter STAR-CCM+ can apply dynamic queries that evaluate the selection based upon specific criteria, automatically updating selections whenever the state of the system changes, relieving users of the manual burden of managing all of their object selections themselves.

Problem

An editor was needed for users to easily create these queries. In addition users will open the editor just to quickly understand the logic and preview the results of the query without being exposed to the underlying plumbing, the syntax of the actual query language being used.

Users and Audience

Experienced users of the product with complex scenarios where it is not possible to manage selections manually.

Roles and Responsibilities

Design lead and one of the UI developers.

Scope and Constraints

  • Future proof the design to allow for changes in the query logic.
  • No changes were to be made to the underlying logic code.
  • We were not to present the syntax of the underlying query language and the user was not to directly edit queries using this syntax. The user was not to be exposed to the plumbing.
  • Quick understanding of the logic and previewing results was very important.

Process

Project Launch and Design Studio Brainstorming

To launch the project, I facilitated a Design Studio where different stake holders from users and product managers to developers could come together and brainstorm how they felt this editor should behave.

A lot of people referenced existing editors like the iTunes Smart Playlist editor during the brainstorming sessions and mentioned how important it was to be able to visually scan the whole query…

  • “I like the iTunes Smart Playlist editor.”
  • “I can’t understand the whole query displayed in one line.”
  • “I have to scroll to understand what’s going on.”
  • “I need to see the results while I’m editing.”

First User Journey

The persona Jessica, representing a regular user, creates a simple query to return all geometry parts whose name contains the letter “t”, the activities of this scenario broken down into…

  1. Jessica creates a predicate to return all geometry parts.
  2. Jessica creates a predicate to return all objects with the name containing the letter “t”.

First Iteration

To confirm what people had said earlier, I created the initial wireframe mock-up referencing the designs created during the design studio, and performed cognitive walkthroughs with representative internal users.

I included key designs decisions from the design studio here. The participants of the cognitive walkthroughs wanted to see the results as they were editing. They also didn’t want to see the whole query in one line. The compound logic needed to default to “AND” to reduce the number of results as quickly as possible.

Second Iteration

The “AND” compound predicate needed to be visible and editable to be able to change to an “OR”.

Third Iteration

With my prompting, stake holders agreed that it made sense to see as much text with the minimum clutter, only showing the editors for the predicate currently being edited, making it easier to understand the query in a single scan.

This was backed up by additional cognitive walkthroughs.

  • “Just show the text if I’m not editing.”
  • “I’m only editing one thing a time. I don’t want to see the drop-downs and text fields for the other stuff.”
  • “I don’t like the way that editor clutters things up with those drop-downs all over the UI.”
This image has an empty alt attribute; its file name is Iteration3.png

Second User Journey

A second, more experienced persona, Clark creates a more complicated query to return geometry parts or part surfaces whose names contain the letter “a” or end with the letter “t”, the activities of this scenario broken down into…

  1. Clark creates a predicate to return all geometry parts.
  2. Clark creates a predicate to return all part surfaces.
  3. Clark combines these predicates under an “OR” compound predicate
  4. Clark creates a predicate to return all objects with the name containing the letter “a”.
  5. Clark creates a predicate to return all objects with the name ending with the letter “t”.
  6. Clark combines these name predicate under an “OR” compound predicate
  7. Clark combines these “OR” predicates under an “AND” compound predicate

Fourth Iteration

This more complicated query has both AND and OR compound predicates clearly needs work to make the compound logic understandable and editable.

…as a result I nested the compound logic as follows to make the compound logic much easier to understand…

Wording of the Compound Predicates

There was a lot of strong opinions on wording, particularly with respect to the compound predicates. I came up with the following shortlist…

  • All of/Any of
  • Matches all/Matches any
  • All/Any
  • AND/OR

After I performed thorough A/B testing with these options, I was able to deduce that AND/OR was the preferred wording.

Editing Each Predicate

Each new predicate starts with the left-most combo-box which determines the type of predicate and the editors to the right of it. The initial supported predicate types were…

  • Type
  • Name
  • Tag
  • Objects (Static)
  • Filter

Functionality

Each predicate has Add, Delete, Edit, Undo, Redo, Cut, Copy, Paste and Rename actions.
After further user testing, personally organizing and moderating Think Alouds, I was able to prioritize the Add, Delete and Edit actions, so that those would appear in-line as the user navigated through the predicates.

To reduce clutter, the Undo, Redo, Cut, Copy, Paste and Rename actions are only available in a context menu or by keyboard shortcuts.

I made sure that all the actions had keyboard shortcuts and navigation could be performed using the keyboard.

Predicates currently being edited have OK and Cancel to commit or reject the edit.

Highlighting the Matching Objects

To differentiate the objects that match the query from those shown to provide context I highlighted the matching objects bold and provided a list view that only showed the matching objects.

Completed Editor Within Simcenter STAR-CCM+

This image has an empty alt attribute; its file name is Final-1.png

Outcomes and Lessons

The query editor has been successfully expanded since this original design to handle the following additional types of predicate without needing a change to the overall design…

  • Relationship
  • Comment
  • Inherited Parts
  • Contents of

The lessons learnt by using in-line editing and action here allowed us to make significant usability improvements throughout the rest of the product.

One really interesting finding from my user research was that users either wanted to just create very simple queries or create really complex queries. The design satisfied the needs of both types of users.