Over the past few months, I have worked with Erica Kreiger to rework the User Interface (UI) and User Experience (UX) for the S&D (Strike and Dip) Tool (Formerly the SaD Tool). Through this process we have improved the aesthetic, functionality, and interactions of the tool’s controls and menus. In this post I will highlight some of the key changes we made to improve the program. For a comprehensive tutorial video covering all of the updated menus, windows, and functionalities in the tool, a full menus tutorial video can be found at the link below.
New UI
When Erica and I first started planning improvements for the S&D tool, it was obvious that the first element that needed a change was the aesthetic of the tool. Until this point, all of the menus, buttons, and windows had been grey-box placeholders designed to verify the functionality of each object. After a few design iterations we found a style that felt like it would fit the tool well. Once Erica finished designing and creating the assets for the new look, I was able to implement them into the program.
The image below displays the original compass control panel on the left and the new updated compass control panel on the right.
New Screen Layout
The next element that clearly needed a rework was the layout of the objects around the screen. During the development of the tool, new functions and features continually got added. These features made the tool very versatile, but eventually started to take up so much screen space that new users felt overwhelmed as soon as they entered the program. So, the next design element to improve became the organization and accessibility of the various functions and features included in the tool.
Through a few design iterations we came to the improved screen layout displayed below. This new layout aims to minimize the amount of screen space that is taken up by menus, panels, and labeled buttons. Tabs on the windows and menus keep the panels organized while retaining easy access to content. We have replaced labels with icons on most buttons and tabs to further streamline accessibility.
The image below displays the original screen layout on the left and the new updated screen layout on the right.
New Navigation Controls
The next element to tackle was the controls. In early versions of the program the user would move the position of the camera view using the arrow keys, would raise and lower the height of the camera using on-screen menu buttons, and would rotate/turn the camera viewpoint by clicking and moving the mouse. The compass tool itself was moved by the user clicking on and moving dials and sliders on the on-screen compass control panel using the mouse. Although these controls worked, many users found them difficult to acclimate to, and users without access to a mouse had particular difficulties operating the controls.
To address these issues, I improved the navigation controls by making all navigation possible without the use of the mouse. Now users can move, turn, raise, or lower the camera view using a combination of the arrow keys, the WASD keys, the Q and E keys, and the SHIFT key.
I also added toggles for a second movement mode which allows users to change the compass tool’s position and rotation using the navigation keys. This gives the users that struggled with the compass control panel a different option for manipulating the compass tool.
Camera Controls
Compass Tool Controls
Leave a Reply