The Coppice Blog

News, tips, and sneak peeks

Designing for macOS Big Sur

Posted:

Coppice has been under development for close to a year and its interface has undergone many design changes over that time. We had finally got the interface into a state we were happy with a few months ago and were expecting to ship with that interface this Autumn. Then along came Apple with WWDC…

Coppice, running on macOS Catalina prior to WWDC 2020
Coppice, running on macOS Catalina prior to WWDC 2020

Every developer goes into WWDC week expecting that they'll have to make some changes to their apps. There are the inevitable bugs that new OS versions introduce, and the new platform features to implement. And then, every so often, Apple decides to completely redesign the visual appearance of the OS.

The first thing to do when this happens is install the new beta OS and launch your app to get an idea of the damage. Thankfully, in Coppice's case, it wasn't too bad. As you can see in the screenshot below, most of the UI updated just fine.

Coppice, re-compiled to run on macOS Big Sur with no changes. Some toolbar icons are clipped or the wrong size and all on the right side of the toolbar, the selection highlights are misaligned, and the toolbar stretches the full width of the window
Coppice, re-compiled to run on macOS Big Sur with no changes

The bulk of the work that needed to be done was with the sidebar and the toolbar. In simple cases, icons and controls were just misaligned. However, Big Sur is not just a visual update to sidebars and toolbars, but also updates how these work, and what counts as "standard" behaviour.

First, the sidebar. Big Sur makes a full height sidebar the new norm. This was thankfully a relatively easy thing to implement and makes a huge difference to fitting in with the new aesthetic. Besides a few bugs fixes not much else had to change.

Next, the toolbar, which represents the biggest change. Previously a window had a title bar, containing the window's "traffic light" buttons and the title of the window, and a toolbar full of controls below the title bar. In Big Sur these can both be merged into one.

The first change we made was to break up the sidebar/inspector toggles. Previously the convention was to have such controls grouped together, but Apple has moved them to the left and right sides of the toolbar in their apps with Big Sur.

Next, we looked at the New Page control. One of the changes to Big Sur is developers can link toolbar items to panes in a split view. In our case this allows us to move the New Page button to above the source list in Big Sur.

Two images of Coppice's toolbar on macOS Big Sur. The top toolbar image shows the toolbar icons all on the right, with some clipped icons and some icons the wrong size. The bottom toolbar shows the new page item shifted above the sidebar, the toggle sidebar and inspector items split up and put either side of the, and new icons for all toolbar items
Top: initial toolbar after building for Big Sur
Bottom: final toolbar for Big Sur.

We also took this opportunity to rethink how the control works. Previously you could click on it and get a menu to select the page type. This is great if you're wanting to make pages of different types, and the final version of the control still works this way if you click and hold on it. However, it made creating many pages of the same type just that little bit harder. To fix this we made it so that simply clicking on the button will now create a page of the same type as the last page you created. It's an example of how having to redesign for a new OS can help improve things for users on older OSes too.

The old create page button, a basic pull down control with a dedicated 'new page' icon The new create page button. The icon now shows the text page icon, and the menu shows page type icons next to the menu item title
Left: The old create page control
Right: the new create page control

Finally, we have the icons. Apple has built up a large collection of icons for developers to use over the past few years called SF Symbols. These help to give a more consistent look and feel to the platform. With Big Sur, Apple has brought this collection of icons to the Mac.

We wanted to replace the icons in Coppice with these new icons. Unfortunately though, they don't work on macOS Catalina. To work around this we decided to re-create the icons ourselves, so we can keep them consistent across platforms. We also added some of our own, such as for the Canvases item in the sidebar.

This also had another benefit. Traditionally, icons like this have been designed to perfectly align with pixels on your screen. This helps keep them crisp, clear, and easy to understand. Unfortunately, Apple's new icons are designed to be infinitely scalable, which means they don't do this pixel alignment. This isn't too bad at large sizes, but at the sizes required for use in most apps it can lead to them looking very blurry, especially on non-retina displays. By re-creating the icons ourselves, we were able to fix this issue, so they should look crisp no matter what Mac you run on.

A selection of icons from the sidebar and toolbar of Coppice. The top row shows SFSymbols icons, which are all blurry. Below are the re-created icons optimised for non-retina displays with non of the blurriness
SF Symbols (the top row of icons) vs
manually re-created icons (the bottom row)

In case it is a bit hard to see the difference, here is the same image scaled up. Note that in both cases these images show non-retina versions of the icons.

A selection of icons from the sidebar and toolbar of Coppice. The top row shows SFSymbols icons, which are all blurry. Below are the re-created icons optimised for non-retina displays with non of the blurriness

So that is some of the work we have done to help make sure Coppice is ready for Big Sur from day one. Be sure to subscribe to the Coppice Blog, sign up to the Coppice Mailing List, and/or follow @mcubedsw on Twitter to stay up to date on Coppice's development.

Why Create Coppice?

Posted:

Last week we took a look at Coppice's features and interface, looking at what Coppice is. This week we'd like to take a step back and talk about why Coppice exists. There's little point in creating a solution unless there is a problem to solve. So what problems is Coppice trying to solve, especially in a market that is replete with apps to let you take notes?

The Problems

There is a principle with programming that you should optimise your code for readability, as anyone working on that code will spend far more time reading it than writing it. This principle is not limited to just code though, it can apply to any sort of information.

There are plenty of apps out there that are excellent for collecting information, for taking notes, etc. They optimise for getting information into the app, but allowing you to actually use that information is often a secondary thought. They offer basic tools such as grouping, sorting, and searching. Some apps even use machine learning to help surface what they think might be relevant. However, they all assume that once you've found that piece of information, that's all you needed to do.

The second problem is these apps don't treat information as intrinsically interconnected. Again, you can do things like create links between bits of information, but these merely navigate between information. They don't treat the relationship as a first class citizen, nor really allow you to view all these connected bits of information at once. This promotes users to create fewer entries in the app, but make each entry bigger, such as having large sprawling notes that contain multiple thoughts or ideas.

The Solution

Coppice tries to solve these two specific problems. It is optimised for using information over collecting it, and it promotes using smaller but interconnected Pages rather than a few large sprawling notes. This is visible in many of the concepts and design choices in Coppice.

One of the first things you will find is that Coppice is a document-based app. It is not designed to be a central repository of all your knowledge, but series of documents focused on understanding particular things. This lets you keep unrelated things isolated, essentially letting you explicitly state that two bits of information don't have any relationship by having them in separate documents. After all, there's no reason why the information on that client project for work should be held in the same library as the information on redecorating your kitchen at home.

Next, Canvases let you visually organise these thoughts on your computer. We do this all the time in the real world, from laying out papers on a desk to drawing on a whiteboard. However, unlike the real world Coppice can give you an ever expanding space to grow your thoughts.

Canvases also allow you to see the relationships between bits of information. When you open a linked Page on a Canvas, there will be an arrow between the two Pages showing the relationship. This makes the relationship a concrete and visible part of understanding your thoughts. This can also help you see relationships you have yet to make. If you place two pages close to each other on a Canvas, but they don't have an arrow between them, maybe that's a sign to you that they should be linked.

These relationships can also depend on context. You may want the same collection of Pages to be grouped or linked differently in two different contexts. To solve this, Coppice Pro allows you to have as many Canvases as you like, giving you many different views on the information in a document

Examples

These high level concepts are all well and good, but what does this look like in practice? Here are a few examples from our own usage of Coppice:

Learning a new Subject

A key part of building and selling any piece of software is learning new things. One of the things we needed to learn was how to set up and handle payments with our payment processor. This required reading their documentation and creating notes. As this required learning about many topics, Coppice was perfect for the task.

We created a Canvas and added Pages as we moved through the payment processor's documentation. As we had multiple Pages on screen at once we were able to add the information we found to the appropriate Page, so that it fit the mental model we were building as we learned.

Running an RPG

At M Cubed Software we enjoy playing table-top RPGs. If you have ever run such a game, you may know that it requires keeping track of a lot of information: locations, characters, plot points, player backstories. It's an ever-changing, ever-growing story, and one that requires the ability to think quickly and improvise to what your players choose to do.

You can use Coppice to store all the information on the campaign you are running. You might create a Page to represent a town in your world, then create linked pages for all the locations in that town, which in turn link to pages on characters the players might find in that location.

You can then use a Canvas to organise information that you think may be relevant for the next session you play, but you can know that any related information will always just be a click away if you need it.


So that is some of the thought process behind why we built Coppice, and why Coppice works the way it does. What ways will you use Coppice? Let us know at @mcubedsw on Twitter.

Next week we'll be talking about how we re-designed parts of the Coppice UI for Apple's upcoming macOS release: Big Sur. If you don't want to miss that and other updates on Coppice's development be sure to subscribe to the Coppice Blog. Alternatively, you can now sign up to our mailing list, which you can find at the bottom of the Coppice home page.

Exploring Coppice

Posted:

Last week we launched the Coppice website, where you can learn what Coppice is and the concepts behind it. This week we want to delve deeper into the actual app and show you what these concepts look like in practice. So let's take a tour through Coppice's interface.

Note: the screenshots here are from an alpha build running on macOS Catalina, so may look a bit different to those on the home page

Sidebar

The primary way to navigate through a document in Coppice is via the sidebar. This contains a list of all the Pages in your document, as well as providing you access to your Canvases. Pages can be ordered however you like and, with Coppice Pro, can be grouped into folders for easy organisation.

A standard mac app sidebar. The top row says Canvases. Below are rows for pages and a folder

Editors

Editors take up the bulk of the window. If you select a Page in the sidebar you will be presented with that Page's editor. Each type of Page has its own editor. The first version of Coppice features two type of Pages: Text and Images. Text Pages give you a rich text editor, whereas Image Pages provide a more modest editor allowing you to set the image.

Selecting Canvases in sidebar opens up the Canvases editor, which requires a more in-depth look.

A text editor in the middle of an application window. It shows multiple text styles in the one page

Canvases

On the left is a list of Canvases in your project, and on the right is the editor for the selected Canvas. The core experience of Coppice is adding Pages to a Canvas and visually arranging them to help you make sense of the thoughts they represent.

A list on the left side shows previews of each canvas. The majority of the image shows a canvas with several pages containing text laid out. Arrows go from the centre page to various pages surrounding it.

Adding a Page to a Canvas is as simple as dragging it from the sidebar. You can also add Pages to a Canvas using the Menu Bar or by right clicking on Pages in the sidebar.

By default, Pages have a minimalist appearance, only showing their content. Hovering over a Page will show more details, such as the Page's title, as well as letting you close the Page. You can move and re-size pages much like windows on your Mac, so you can position and size them however you like. You can also select a Page by clicking it. You can select multiple Pages by dragging a selection on the Canvas or by shift clicking, much like selecting files on your Desktop.

Each Page on your Canvas features its full editor, letting you modify the Page directly on the Canvas. To start editing a Page you simply click it once to select it, then you have access to the full array of editing functionality for that Page.

Inspectors

On the right of a document's window in Coppice are the Inspectors. Inspectors allow you to modify attributes of an object, such as a Page's title, a Canvas's theme, or the current font when editing text. Which Inspectors are visible will change depending on what you have selected in the editor.

The right side of a Mac window showing inspectors for editing the Page title, and for styling text inside the page.

Page Selector

The Page Selector is a special window that can appear in certain circumstances. It allows you to search through the Pages in your document and then selected one using only the keyboard, in a very similar way to Spotlight.

A window with a search field at the top with the placehold text 'Jump to page' and a magnifying glass icon to the left. Below is a list of pages showing the titles and a snippet of content from each page

What happens when you select a Page depends on what the selector is being used for:

  • If you choose Jump to Page… from the Menu Bar, selecting a Page will navigate to that Page, just like clicking it in the Sidebar
  • If you choose Add to Canvas… from the Menu Bar, selecting a Page will add it to the current Canvas
  • And if you are creating a link, selecting a Page will create a link to that Page

Search

Finally, we have search. As your document grows, you may need some help in finding information in your document. The search field in the toolbar allows you to search for some text in every Canvas and Page in your document. As you type in some search text, the sidebar will change to show the results of that search. You can even drag Pages from your search results onto a Canvas.

A standard mac sidebar showing the results for the search term 'request'. At the top it says 'Matches for 'request''. Below it lists canvases and pages that match, showing titles and content. The canvas row states it has 2 matching pages. The three matching pages highlight the matching term in their title or content

Hopefully this has given you a more detailed overview of Coppice's UI, and some of the features and functionality that will soon let you cultivate your thoughts.

Be sure to subscribe to this blog and follow @mcubedsw on Twitter to be notified of future updates. Next week we will be looking at what motivated us to create Coppice in the first place.