Redesigned UI in Rundeck 3.4.0
Rundeck 3.4.0 includes an exciting redesigned user experience! This article summarizes the updates and provides insight into why we made the upgrades.
With an internal initiative for “Building the Best Rundeck”, we set out to improve critical pain points that aim at solving problems that will benefit users of both Rundeck Community and Rundeck Enterprise.
If you’re an experienced Rundeck user, I’m sure you will recognize the pain points outlined in this article and hopefully appreciate our improvements!
Update #1: Project Selector with Search
- Organizational Hierarchy: Within a project level view the “Projects Explorer” was positioned alongside project specific actions. In regards to it’s hierarchical grouping, this component didn’t exactly belong with the others. The menu bar better served as a way to navigate actions that are specific to the individual project and not for interacting with global aspects of Rundeck.
- Constrained Project Picker: Prior to 3.4.0, the Project Selector would show and hide items in the sidebar, causing other items in the navigation to be hidden and requiring a user to scroll to see the other items. It is a cumbersome interaction as parts of the menu UI would start shifting and become inconsistent. As mentioned before there is a better location for the Projects Explorer than the side navigation, so recreating the Projects Explorer was a logical step forward.
Re-positioned Project Selector in Rundeck 3.4.0
- Stand Alone Project Explorer: We re-positioned the Project Selector to the top navigation, making it an easily accessible component across Rundeck. As a higher priority navigation item, it provides the hierarchical context to navigate outside of a project view. With the newly embedded search bar, finding specific projects amongst a giant list of other projects is much easier. By bringing out the Project Selector from the sidebar it also maintains the consistency of the UI components, making for a much more predictable experience.
Update #2: Condensed Project Menu
- Hidden Menu Items: As Rundeck continues to add more integrations and features many of these features aren’t available at-a-glance for users. Additionally, the initial view doesn’t have indicators that there are more items available if you scroll, which could cause issues for a new Rundeck user.
- “Takes Up Too Much Space”: Prior to 3.4.0, the Side Nav Menu took up about 1/5th of the screen and could hinder the space available for displaying the main components of the page. This large menu occupied a majority of the workable space and made it especially difficult for Rundeck users accessing the app through a VNC client - which delivers resolution at lower aspect ratios.
Condensed menu in Rundeck 3.4.0
- Condensed Menu: You guessed it, we reduced the size of the menu! Many of the items remain the same and continue to include icon labels, so users can understand what icons are at-a-glance. Along with the smaller footprint, came obstacles for displaying additional sub-menu items. In the previous iteration, the Menu would behave like an accordion and show items in a limited space that would require additional scrolling. In this iteration, a drawer will pop in with plenty of space to show additional menu items. The Menu takes into account the vertical height of your display and will accommodate items into a “More” Menu item with a drawer for overflow items.
New Utility Bar in Rundeck 3.4.0
- Utility Bar: Rundeck has many plugin points to adjust/add enhancements to the delivered functionality. Our newest plugin point is the Utility Bar. The initial 3.4.0 release has widgets for Version Info, News, and Support easily available for users. The new Utility Bar adds another layer of useful information to the interface, with the ability to provide the extra bit of functionality waiting just off screen. As a static part of the Rundeck interface, the Utility Bar serves as a point of interaction that will help with having shortcuts or visual references to information that can be useful between projects. The Utility Bar is extensible and we will continue to explore ways to add more options that benefit from Real Time Ops.
Additional space in Rundeck 3.4.0 allows for viewing data points more comfortably
General UI Enhancements
- Tabs: Tabbed navigation now has a bolder color to help highlight where users are in the interface.
- CTA Hierarchy: Across the app, there are more color and button variations. This helps distinguish the prioritization of actions based on the type of appearance. For example, a solid green button will help to define what is the most important action on the page. In previous versions, finding the most important action on the page could be difficult since the primary button would not have visual distinction from other buttons in some cases.
We continue to be obsessed with providing users with the “Best Rundeck” and with each iteration we are actively listening to feedback from customers and the community as we set out to continuously improve the experience of using Rundeck.
Special Thanks to Greg Zapp of the Engineering team for carefully building many of the components featured today in this article. Many thanks as well to Greg Schueler and Forrest Evans for providing ongoing feedback in the development of this design update.
Please send any questions, feedback, and opinions to firstname.lastname@example.org.