Optimize Obsidian UI for a more seamless experience

Basement
1

Recently, the developers have brought a lot of features to Obsidian, which makes it into a very flexible note-taking app. However, the flexibility comes at a cost, which as a user, makes me feel overwhelmed every time I open the app. So many panels, buttons and settings.
So I think for mass adoption, UI optimization should go hand in hand with feature development. Right now Obsidian already has ‘enough’ features to be a decent note-taking app for most cases. I think optimizations could go in two directions:

  • Designing a more minimal and intuitive interface, meaning hiding buttons and panes and showing them only when the user has an intent, e.g. when hovering. Also a more intuitive behavior for easier navigation between notes.
  • Make some design choices as defaults. The plugin system is a clever move, but making everything plugin-izable will make the new user experience a mess. For that I think the devs can make some design decisions as a default, either through their intuitive sense or through the most common use case (by making a UI category for voting on this forum, for example). Of course users can still change these in settings if they want.

Below are some of my suggestions:

  • Display backlinks right inside note pane. It gets quite confusing when I need to look at the backlinks on the outer right pane for my note on the outer left pane.
  • Reduce the number of panes by grouping some of them or making them appear on hover
  • Reduce the number of UI elements, e.g. close button shown when hovering over note title; remove pin button (who needs this anymore if you can middle-click or Ctrl-click to open new notes like Chrome, which Obsidian now supported)
  • Display the number of backlinks right on the backlink button, and display the word count right inside note pane. That way the bottom pane can be disabled.
  • Combine Search with File Switcher, to form a universal search bar.
  • Borrow the navigating behaviors of Chrome, which many people are familiar with.
  • The Wiki-link suggestion is almost unusable for me recently, as it is cluttered with folder path and all types of file. At least there should be a setting to disable it.

I hope to hear your comments about what you think might make Obsidian more pleasant to use.

11 Likes
2

I agree with the combined search and file switcher. But I think implementing most of these would actually remove most of Obsidian’s power as a note-taking tool, but I may be misunderstanding your suggestions.

The wiki-links and backlinks are the core of what makes Obsidian interesting compared to the hundreds of other note taking apps out there.

1 Like
3

Yeah probably some misunderstandings here. My suggestion is not to remove any of Obsidian current features, but make them more easier to use by minimalize the UI and make some settings as default. Any personal preferences can be change through Setting, like I suggested above.

1 Like
4

You may be able to achieve a much simpler UI by editing the CSS to hide certain things and using hotkeys a lot. This snippet auto-collapses side panels:

/* auto collapses side panels */
/* .app-container.is-left-sidedock-collapsed .side-dock.mod-left:not(:hover), .app-container.is-right-sidedock-collapsed .side-dock.mod-right:not(:hover) {
  width: 0px !important;
} */
1 Like
5

Based on your code I did more simplifications:

/* auto fades note header controlls */
.view-header:not(:hover) .view-actions {
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
}

/* auto fades status bar items */
.status-bar:not(:hover) .status-bar-item {
  opacity: 0.25;
  transition: opacity .25s ease-in-out;
}

/* smaller scrollbar */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, ::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

Edit1: Updated smaller scrollbar code to fix all scrollbars

5 Likes
6

Rsdimitrov: The “smaller scrollbar” code only effects the editor scrollbar. Do you know the code for changing the Preview scrollbar? –Thanks!, Frederick.

7

@Frederick_Lost, thanks for the nudge!

This code snippet resizes all vertical and horizontal scrollbars in the editor, preview and the whole window (if you are using Andy Matuschak mode)

/* smaller scrollbar */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, ::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
2 Likes