Yaogang Lian

Quiver 3

Quiver 3 is finally released. This has been a long and arduous journey for me: 8 months, 2,400 commits. In comparison, Quiver 1.0 only took 3 months and 400 commits.

I didn’t expect the update to take so long, but I think at the end it’s well worth the time. Quiver 3 has implemented many features requested by users: side-by-side preview, integration of preview into the main window, all-dark themes, custom user themes, global hotkeys, PDF export, etc. However, most of the time I spent on Quiver 3 was actually not in implementing the new features, but to refactor the code and get the details right.

When I started working on Quiver in January 2014, I only had a basic idea of combining code and text in one note, but little knowledge of Mac programming. Luckily I had a few years of professional experience as an iOS developer, so it wasn’t too unrealistic for me to work on a Mac app. I have been constantly learning Mac app development as I built Quiver 1.x, then 2.x, and in many occasions, I got some enthusiastic user feedback and feature requests but had absolutely no idea how to implement them. Quiver 2 was good, but I had to admit that many small details weren’t implemented properly and some parts of the code were more convoluted than necessary. My goal for Quiver 3 was to make the app even simpler and more efficient, and get as many details right as possible.

I am working on this project all by myself, so efficiency is not just a nice-to-have, but a necessity for survival. In my opinion efficiency should apply to all aspects of a product: efficiency for the end users, efficiency in the code implementation, efficiency in memory usage and CPU usage, and efficiency in my own time management. I have strived to be efficient on all these fronts, and what I am most proud of Quiver is how lightweight and performant it is: Quiver 3 is only 4.7 MB on the Mac AppStore, compared to 52.8 MB for Evernote and 377 MB for Microsoft OneNote. Quiver launches instantly, does full-text search instantly, and uses as little memory as possible.

UI Redesign

Quiver 3 Screenshot

Efficiency starts with the design. Quiver 3 keeps the three-pane layout, but redesigned each pane. The sidebar in Quiver 2 was really cluttered, with notebooks, recent notes and favorites all in one very long list. The sidebar in Quiver 3 is much more streamlined: it introduces a new “Library” group, which contains Inbox, Favorites, Recents, Trash and All Notes. This is also more logically consistent: now all the items in the sidebar are note containers.

The note list (the middle pane) is also made simpler. Now you have an option to use a compact list style, which shows only the note title. And it’s easier to see how the list is sorted. Searching inside a notebook was a highly requested feature, and it’s there now.

The editor area (the right pane) has undergone the most changes. A segmented control at the top lets you switch between editor, preview and side-by-side preview. This design addresses two feature requests at once: side-by-side preview (for Markdown and LaTeX), and browsing notes in the preview mode.

The global search is also improved. In Quiver 2 the global search results were displayed in the middle pane, which interrupted your browsing. In Quiver 3 the search results are displayed in their own table in a popover, so it doesn’t affect your browsing. You can also sort the search results by relevance, title, created date or updated date. This design also makes the note list’s implementation simpler.

A new action menu is added to the bottom right corner of the right pane. This is a more scalable solution than adding a toolbar button for each note action.

Action Menu

All About Details

An app is a vast collection of details. If most details are implemented properly, the app will be delightful to use; on the other hand, if a lot of details are implemented badly, they can create enough friction that destroys the whole user experience.

In Quiver 3 I set out to get as many details right as possible. Most details are easy to fix, but some tricky ones can take days or even weeks to find a good solution. As a developer you get to know all the good, bad and ugly parts of the underlying frameworks or third-party libraries. Oftentimes I spent a whole day working on a tiny, little UI glitch, only to wake up the next morning with a clean fix.

A small example is the NSSearchField. It’s used in the global search popover and a few other places. NSSearchField is notoriously difficult to customize, and quite buggy on Yosemite (Apple has since fixed most of these little bugs for El Capitan, but you will be out of luck unless you only support the latest OS X). Quiver supports OS X 10.7 to 10.11, so I had to work around these issues.

I tried several approaches before settling on a clean solution. This is how the search field looks like in the Light and Spacegray themes in Quiver 3:

Search Field

Note the subtle differences in text colors, placeholder text colors, cursor colors, cancel button colors, search button colors and border colors. This might seem easy to do, but not every Mac app with dark theme support gets this right.

~

Quiver 3 is a big step forward, but there is still a lot to do. Many exciting things are in the pipeline, so stay tuned!

Yaogang Lian

An iOS, Mac and web developer. Focusing on building productivity and educational apps.