Obsidian Commander is a plugin for Obsidian that allows users to add and remove commands from various parts of Obsidian's user interface. I am working on this project as the Project lead and UX Designer in collaboration with one developer, phibr0.
🏅 Runner up in Plugin Update category of Obsidian October 2022
⬇️ 70,000+ downloads
⭐️ 350+ stars on Github
Obsidian is a note-taking tool which allows for extensive customization as a standalone application and through the addition of 3rd party, community developed plugins (like this one). Commands in Obsidian are actions that the user can trigger either with a hotkey or by clicking an icon placed on the left ribbon of the interface. Examples of commands that can be triggered include: `save current file`, `export as pdf`, `use dark mode`, and more.
Several, separate community plugins provided the user with the ability to add and remove commands from the left ribbon, page header and titlebar, and context menu, respectively. Because of the common functionality of adding and removing commands from Obsidians interface, I saw the opportunity to consolidate the plugins which would make the core feature (adding/removing commands) more accessible to the community. Instead of having to download three separate plugins, the user could download one.
The goals for this project were:
1. combine the functionality of several community plugins into one plugin to make the entire feature set more accessible
2. reduce interaction cost of adding and removing commands from Obsidian's user interface
After getting permission to use the code of the three plugin developers, phibr0 and I began working on Commander.
Design-Development Loop
phibr0 and I worked asynchronously over the course of several months using ClickUp as our project management tool and Figma for my designs. ClickUp (screenshot below) is where I created all project related tasks. We also used Figma's comment feature to discuss specific design decisions.
User Feedback Loop
A user feedback survey, created with Google Forms, is accessible to the user in several locations (the plugin settings menu, the plugin Github repository readme, and the Obsidian Community Plugin browser page for our plugin). A significant portion of Obsidians user base is familiar with Github and share feedback on our repositories issues section.
With the combined feature set of the previous three customizable command plugins, Obsidian Commander allows the user to add commands to all of the following locations of the interface: the titlebar, page header, file menu, ribbons, context menu, and status bar.
With Commander, we created two flows for the user to add and remove commands from Obsidian's interface. The first, is through the plugins settings menu.
In the menu, the user can select the user interface component from the top navigation bar then see all of the commands currently located on that component in a list view. From these pages, the user is able to add new commands and delete, remove, rename, and change the icon of any already added commands.
The next method for adding and removing commands is from the interface itself. For adding commands we added a `+` icon which appears when hovering at the end of the group of commands on the ribbons, titlebar, page header, and status bar which. This icon, when clicked, activates the command creation prompt. To remove a command from one of these locations, we added a command customization menu that appears on right click of the command icon.
To add and remove commands from the file menu and context menu, we added an "Add command" menu option as well as a 3 dots icon that appears on hover and gives the user options to change icon, rename, or remove the command.
By providing the user with the ability to add/remove/edit commands from the interface itself rather than needing to go into a settings menu, we reduced the amount of steps needed to access those actions thereby reducing the interaction cost of the task.
The previous plugins that added and removed commands only did so through the plugin settings menu. Since each plugin only covered 1-2 parts of the UI they put all of the plugin options on one page. With Commander subsuming the functionality of each of these plugins, we decided to organize the plugin settings page with a tabbed menu on desktop and a menu list on mobile to make sure that all features were more easily discoverable.
Commander allows users to hide commands that are added to the left ribbon and status bar by Obsidian and third party plugins. In an early design of Commander, hiding commands for both the left ribbon and the status bar were featured in one 'Hide Commands' menu. In the 'Left Ribbon' and 'Status Bar' plugin settings pages we had and eye icon next to the 'Add Command' button that would take the user to the 'Hide Commands' page.
Hide Commands (before):
After using the plugin ourselves for some time, it became clear that merging the hide commands functionality into the respective UI component menu would make more sense.
Hide Commands (after):
Initial designs for Commander did not have an empty state for the situation where a particular UI component did not yet have any commands added to it. For the first iteration we added a logo, a message "No Commands added yet!", and a button with a + icon.
Next, we experimented with different copy and a button variation:
Finally, we decided on the version below. The copy was chosen for its conciseness and the button without an icon was selected for its simplicity as well as conforming to buttons seen elsewhere in Obsidian's user interface.
On October 29th, 2022, phibr0 and I gave a presentation to the Obsidian community describing how we worked together to build Commander. You can watch the talk below:
