Under The Microscope


Author Archive

The Design of SoundSource 5

Not so long ago, I wrote about the design of SoundSource 4. That version marked SoundSource’s transition from a simple audio device selector into a much more powerful app. Recently, we released the new SoundSource 5, featuring many improvements, both technical and in terms of design.

Getting Better All the Time

When I think of the design process for SoundSource 5, a single word comes to mind: refinement. We revisited every part of the user interface, to deliver an update that goes well beyond the sum of its parts. The new interface both looks better and works better.

In this article, I’ll go over some of the refinements we implemented to make SoundSource 5 both useful and delightful.

Compact View

SoundSource 4 started out very small and compact, but as features were added, the main window grew. While it wasn’t massively oversized, we knew we wanted to find ways to slim things down.

The most obvious way SoundSource 5 accomplishes this is with the new Compact view. As you can see below, when SoundSource is switched to its Compact view, many text labels are removed. This significantly reduces the width of the main window, which is particularly handy if you leave SoundSource pinned open. Clarity in the Compact view is somewhat reduced, but toggling back to the Standard view quickly restores it.

The Compact view also removes text from the device selector, cutting it down to a fraction of its standard length. The device icons which remain work particularly well if you have a small number of devices attached to your Mac, as most users do. To create consistency, we also added those icons to the Standard view, where they serve as a secondary visual cue.

Animation

SoundSource does most of its work while in the background, with its only visible part showing in the menu bar. When it is open, we wanted the app to feel snappy and vibrant. One of the ways we accomplished that was by adding subtle animations throughout. This is most noticeable in the toolbar at the top of the main window, where each icon subtly moves between states.

Here are two of the animations from the toolbar:


The size and pin toggle animations, enlarged and slowed to show details

All of these animations are native CoreAnimation assets, built with a tool called Kite Compositor. Kite builds pre-packaged animation archives, which allowed me to iterate super quickly on the animations. I could open, tweak, and re-export animations without much work from the developer.

Reducing Visual Clutter

Before starting work on SoundSource 5, I took some time away from version 4. When I came back with fresh eyes, I noticed a busier interface than I wanted. The bubbles within bubbles within bubbles were logical, but visually cluttered. The best example of this was the nesting that occurred with effects.


Effects were nested two levels in

We knew we could do better. In SoundSource 5, we cleaned this up significantly, and un-matryoshka’ed those nesting shapes. The selection indicator became full width, which rid us of the bubble around individual effects. We also moved the full version of our built-in 10-band equalizer into a popover, matching the way Audio Units are loaded. This enabled us to make the entire Effects area much more uniform. Moving the EQ’s advanced controls out of the main window also allowed it to fit better in the Compact view.



SoundSource 5, with fewer nested shapes

Overly-nested interface elements are harder to parse, so this new design is a big win for readability.

Accent Colours

For many years, MacOS has made it possible to adjust the hue used for all kinds of standard controls, such as sliders, buttons, and checkboxes. Changing the accent colour setting in the General System Preference lets the OS color those controls in many applications.

Though Rogue Amoeba’s applications use many standard controls, some also use what we call a “key colour”, which overrides the system’s accent colour. For example, our soundboard app Farrago has a purple theme, and many of its controls are thus tinted purple.


Farrago’s purple key colour in action

In a similar fashion, SoundSource 4 used its green key colour on almost all the elements in the UI. For version 5, we toned this down quite a bit. SoundSource now uses neutral greys and blacks in many places, and its remaining green elements can all be re-coloured programmatically:


The default tint

This change allowed us to also provide a new appearance preference. When the “Follow System Accent Color” checkbox is turned on in SoundSource’s preferences, the interface will respect the system’s accent setting, adjusting controls to use the selected colour. Here’s a composite, showing all the system tints SoundSource can take on:


Sorry, this trippy rainbow mode is not available in the app.

These changes should make the app feel at home in almost any setup. And of course, all of these tints look great in both light and dark mode.

Big Sur’s Influence

At the virtual WWDC 2020, Apple announced MacOS 11 (Big Sur), which will bring a wholesale redesign of MacOS. Development of SoundSource 5 was nearly complete when Big Sur was first shown off, so these changes didn’t cause much in the way of updates. Fortunately, many of our design choices for SoundSource 5 already aligned quite well with Apple’s new design guidelines.

However, we did make one change specifically as a result of Big Sur. You may have seen that one of the most talked-about changes in the new OS is its updated style of app icon:


Big Sur’s updated icon style

We don’t plan to rush out updates to all of our app icons to match this style. However, SoundSource’s icon adapted rather easily, so we updated to the new, boxier style for SoundSource 5.

The impact on SoundSource’s icon

We’re hard at work on updates for Big Sur (watch our Status page and social media for more), so this new icon will fit in nicely on Big Sur soon.

Handling Applications

The last big change I’ll touch on is how SoundSource handles configuring per-application audio control. In the previous version, controlling an application’s audio required you to manually add the app to SoundSource. We overhauled this rather dramatically with SoundSource 5. Now, when an app produces sound, it automatically appears in SoundSource’s main window. It’s then immediately ready for adjustment, with less setup required.

This improved behavior seems very natural now that it’s implemented, but it didn’t occur to us for SoundSource 4. Sometimes you arrive at a new solution to a problem, and it’s so obvious that other solutions no longer make sense. That was very much the case here.

Try It Yourself

One of the major areas we focused on for SoundSource 5 was doing existing things better. The update is faster, smarter, and takes up less space on your screen. Overall, it’s a tremendous leap forward in quality, and we couldn’t be more pleased.

If you’re new to SoundSource, learn more on the main SoundSource page. For existing users, we have a helpful “What’s New in SoundSource 5” page available. SoundSource has become an indispensable tool for controlling audio on our Macs, and we hope you’ll find it similarly useful.

Come Attend Everywhere School

I’m going to take a quick break from my usual posts about audio software design to talk about about a special personal side project I’m launching today: Everywhere School.

Everywhere School is a real-time web directory of educational live streams for kids stuck at home during the Covid-19 pandemic. The site shows a live chronological list of upcoming streams from artists, musicians, authors, and more. I’m adding streams each day, and will keep adding more as this isolation period goes on. Submissions are welcome.

Everywhere School Screenshot

I limit screen time for my kid, but these live streams have given our long days a much-needed combination of education, entertainment, and just plain seeing another gosh darn real person in real time.

The night before last, my family watched a live concert, after which we tuned in to a short talk on astronomy. That stream included a telescope tour of the moon’s Sea of Tranquility, as well as guidance for watching as the International Space Station orbited over our city. We managed a tour of outer space, all while keeping in strict isolation.

Everywhere School was built in a week or so of spare time in partnership with a web developer. In this difficult time, we hope it can give some relief to both bored children and stressed parents.

Designer Notes: Making a Colour Scheme

Introduction

When I start a design project, one of the very first things I do is come up with a colour scheme. For me, this is a limited set of colours which will be used for all the elements in our interface, including backgrounds, icons, and text. I think it may be helpful for others to see the thought that goes into this, so I’m going to walk through each step of my process.

General Strategies

Before I get into specifics, let’s cover some good general strategies for making a colour scheme.

Limit Your Number of Colours

To start, you should limit the colour set as much as you can. Using more colours than needed can make an app look sloppy and haphazard. A good interface should be consistent, and in most cases uncluttered. Having a set of colours, established at the outset, saves us from picking random colours each time we need one.

Understand Each Colour’s Job

Think about the job each colour will be performing. Perhaps one colour will be used to show activity or status, so it should be relatively high-contrast. Some colours provide secondary information, which can subtly fade into the background. For the rare colour that’s used to alert us to problems, something stark and eye-catching is needed. Each colour should have a well-understood role in your interface, and that role should guide your selection.

Break the Rules When You Have To

There aren’t any hard and fast rules that must be followed. It’s wise to follow sensible guidelines, but if you need to bend or break a rule, or come up with your own, go for it.

Selecting Our Base Colours

Ok, time to pick some actual colours. I generally start my colour systems with a set of three primary colours, which form my base. These colours are:

  • Key/branding colour

  • Primary content colour

  • Primary background colour

We’ll need more colours than that, but we’ll obtain additional colours by mixing these base colors.

Getting Inspiration

I could just start picking random colours I like, but I usually like to begin by viewing existing color sets. A site like Color Collective is a fantastic resource for this. However, I also like to look to the real world for inspiration.

For example, I have a shirt I like that mixes orange, green and white. I’m going to use it as a base for doing a quick experimental re-colouring of Airfoil Satellite for iOS.

Here’s the shirt:

And here’s what Airfoil Satellite for iOS looks like currently:

I’m going to combine this mockup of Airfoil Satellite with the colours from the shirt, and we can see what happens. I should note that the orange and green I’ve chosen don’t traditionally go together, but I’m going to demonstrate how we can still make them work.

Key Colour

The key colour is going to be the main colour for anything I want to denote as interactive. It’s not usually going to make up the majority of pixels in any interface, but it’s the colour most closely tied to the identity and branding of the app. For example, the key colour of our soundboard app Farrago is purple.

This colour will generally be used to show status or activation, often on things like checkboxes and sliders. It will probably also be featured prominently in the app icon.

I’m going to use a bright peachy orange, inspired by the shirt, for the key colour.

Primary Content

The primary content colour I’ll use for the most important content, like text. It’s generally less intense than what we used for the key colour.

The white from the shirt for this is a good choice for this, as it’s solidly neutral.

Primary Background

Finally, the primary background needs to contrast strongly with the primary content. It might not be obvious at first, but the primary background colour will actually be the colour that makes up most of the app on a pixel to pixel comparison.

For this, I’ll start with the green colour from the shirt. However, it needs to be darkened to get a background colour that contrasts with the other primary colours we’ve chosen. This gives us a very deep green, which I like.

Picking Utility Colours

The above three selections provide a good base of colours to work with, but even the most minimal app will need more. With that in mind, I’ll also select some utility colours

Warning/Alert Colour

When something goes wrong, the user often needs to be alerted of something they need to look at. Like a poisonous frog in the jungle, I want to make sure this colour stands out from everything else.

My Airfoil Satellite mockup doesn’t show error states, but most apps will need them at some point. I selected it both because it’s bright and because it will stand out from the key orange colour.

Disabled Colour

Elements in our key colour also often require an alternate “disabled” mode. For this, I generally use a moderately-desaturated version of the key colour, rather than a flat grey. It’s related to the key colour, but slightly washed-out.

For this, I’ve taken the key colour and desaturated it from a bright peachy orange to a more muted tan.

Choosing Alternate Colours

The above is a good base of five main colours, but this interface requires additional options.

Secondary And Tertiary Content Colours

These next colours will be used for supplementary bits of text, icons, and a few other things. In the app’s hierarchy of content, these colours will be used for the less essential, but still important, elements in the design. This is content that should be legible when focused on, but it should also slightly fade into the background, rather than calling attention to itself.

To make these colours, I combine my base colours somewhat like a painter mixes paint. I usually do this by literally putting one colour over the other, and reducing the opacity of the overlaid colour until I get a hue and brightness I like.

This is functionally the same as selecting a colour on a gradient between two primary colours. Here are secondary and tertiary content colours presented on a gradient that goes between two of our primary colours:

Alternate Background Colour

This design will also need a colour to use in the background in places where elements should be subtly grouped together. This colour should be close to the primary background colour, but different enough that people can differentiate it.

For this, I’ve taken the primary background colour and brightened it by about 10%-15% for use as the alternate background colour.

A Colour Mixing Note

One important note here: If you’re mixing with desaturated colours (including black or white), you might find the result looks a little less colourful than desired. I often find that I need to boost the saturation of the resulting mixed colour manually.

In Sketch, my design app of choice, colours farther to the right in the colour picker are more saturated, and colours to the left are less saturated. If your initial result is a bit dull, pick something a little to the right of it instead.

Trying it Out

We’ve now got a comprehensive set of colours, which should handle just about any job, at least for this app. Let’s look at all of our colours together:

Even though orange and green might be expected to clash, this entire group looks relatively harmonious, mostly because it was all derived from just three primary colours.

This gives us our final colour looks when applied to Airfoil Satellite for iOS.

And there we go, a solid re-colouring of our existing interface. Not all the colours I selected are visible in this screenshot, but when designing an entire app, it’s very helpful to have them picked out ahead of time. We’re not currently planning on actually overhauling Airfoil Satellite, but the above provides a great example of how colours that might seem to clash can work harmoniously.

Give It a Go Yourself

The process I’ve outlined can be used when designing an app, a website, or almost anything. I find starting with a colour scheme makes the rest of the design process much easier. I hope it helps you with your own work.

All-Up: What the Moon Landing Can Teach Us About Design

At the start of the ’60s space race, NASA was wary of changing too many things during any one launch. The intention was to keep each launch controlled, much like a scientist only changing one variable in each iteration of an experiment.

This conservative approach was safe, but it was also very, very slow. To hit the goal of putting a man on the moon by the end of the decade, the head of the Office of Manned Space Flight George Mueller knew that NASA needed to change its approach. He instituted a new testing philosophy dubbed “all-up”. This involved including many systems in each launch, even if they weren’t fully baked. If they weren’t believed to be a large liability, they flew. This strategy ultimately saved both time and money, and it’s hard to argue with the results:


Buzz Aldrin getting results.
[Photo credit: NASA]

Using All-Up in Design

Audio software isn’t rocket science, but it can still get pretty complicated. I try to embrace an all-up mentality wherever I can here at Rogue Amoeba.

Let’s take, for example, one of our product pages. After our initial planning session, I first do a super quick pass on all the elements. I make rough versions of everything I can. I use stock icons, I improvise text, I cobble together code from other projects or snippets. If I don’t have a good feature icon concept, I don’t dwell on it. I just use a placeholder and move on. The goal is to get everything up, connect links between pages, and establish a rough aesthetic.

Worth noting, except for longer passages like articles, I try hard to avoid using designer crutches like lorem ipsum. The eventual text is part of the design, and so we try to make even the first draft mimic what we expect to eventually see.

Sometimes, quickly writing in placeholder text can even result in usable copy. I improvised the first draft of what would become a tagline for SoundSource, “Sound control so good, it should be built in”, and it stuck.

My intention with this process is to get things “all-up” and have a passable first draft. Once we have that, we can work on improvements.

Iteration

Those who follow popular design chatter might recognize all-up as a form of iteration, and that’s exactly right. The goal is to get as much up as fast as possible, and then build on it. Part of the key to this is to iterate on things in place as much as possible.

In his architecture book “The Timeless Way of Building”, Christopher Alexander advocated starting work on a design for a building by visiting the construction site, walking around, and placing wooden poles in the ground to represent the different rooms and spaces the building would have. Alexander found this helps him visualize things at the real scale the building will eventually have.1

Alexander wrote:

Then we began with the design itself.

It took a week, Monday to Friday, out on the site itself, walking around parked cars and obstacles, overcoats against the fog, walking, walking all day long, cups of coffee, crazy dancing around, as the building took shape, chalk marks on the ground, stones to mark corners. People wondered what on earth we could be doing out there in the fog, walking around, all day long, for so many days.

The point of Alexander’s exercise is to remove as much abstraction from the process as possible. Rather than focusing solely on blueprints, he keeps everything at a human scale, and also going to maximum length to make sure the building design takes into account the context of the environment around it.

In a similar way, I like to design with the least abstraction possible, and like to jump pretty quickly to working in the direct medium. I often jump into the HTML and CSS early on, instead of making a pixel-perfect site mock-up with a design app like Photoshop or Sketch. This makes updating text pretty quick, and helps create a good sense of how the pages will work alongside the rest of our site.

Working Through Issues

One big benefit of the all-up process is that it leaves fewer places to get stuck, because getting everything perfect right away is not the goal. I’m a big advocate of quickly moving on to the next task the second you get stuck on something.

There will always be stumpers that threaten to derail the design process. Following this all-up thinking and having everything roughed out in place means there are many different elements to look at and work on improving. Stuck on icons? Work on the layout. Stuck on designing an interaction? Work on improving the writing.

Building Trust Within the Team

The all-up approach requires a fair amount of trust between team members. As a designer, I find it nerve-wracking to present anything that isn’t super polished. The whole team needs to have enough trust in the process and the design team for it to work. I have to trust that the team will see what I intend, and the team has to trust that I can get us where we need to be in the end.


[Photo credit: NASA]

Try All-Up Yourself

In the right context, all-up can be a super-effective process. It worked to put astronauts on the moon, and it can work for designing web sites, audio apps, and almost anything else you’re working on.


Footnotes:

  1. While designers and information architects often love Christopher Alexander, almost every architect I talk to hates him with a strange passion. Beware of this when trying to seem cool to your architect friends. ↩︎

The Design of SoundSource 4

At the end of March, we unveiled an all-new release of SoundSource, our powerful system-wide audio controller. SoundSource can help every Mac user who uses audio, whether you’re streaming music, participating in voice chat, or just watching videos.

Last month’s release was officially SoundSource version 4.0, but that doesn’t really tell the whole story. Despite its version number, SoundSource 4 is an entirely new app, with massive updates over what came before. Here’s a side-by-side comparison:

Unlike some more linear updates, the design and conceptualisation of SoundSource 4 began from a nearly blank slate. This is a story of how we got to our eventual release.

Starting With Posture

Whether intended or not, every app has what design researcher Alan Cooper calls a ‘posture’. From Cooper’s essential interface design book “About Face”:

Most people have a predominant behavioral stance that fits their working role on the job. The soldier is wary and alert; the toll collector is bored and disinterested; the actor is flamboyant and larger than life; the service representative is upbeat and helpful. Products, too, have a predominant manner of presenting themselves to users.

A workhorse app like Photoshop or Sketch, for example, takes over most of the screen and has what Cooper would call a ‘sovereign’ posture. These are apps you spend hours upon hours in. They tend to have a lot of features, and a correspondingly sprawling interface.

SoundSource is very different, as it works for you in the background, nearly invisibly. It needs to stay out of the way, so the user can accomplish other things. Occasionally, SoundSource needs to be accessed for a quick tweak, then just as quickly hidden away. It has a ‘transient’ posture.

Understanding that transient posture was essential to the app’s design. With this in mind, the menu bar was the obvious home for SoundSource. Making everything we wanted fit into the tight constraints of a menu bar app proved to be an interesting design challenge. At times, it felt more like working on a mobile app than a traditional desktop app, because of the smaller surface area.

Setting Priorities

Once we’d determined that SoundSource would live in the menu bar, the next step in our design process was creating a list of the main functions we wanted the app to have:

  • Volume control

  • Muting

  • Audio metering

  • Output device selection

  • Magic boost

  • Equalization (EQ)

  • Audio Effects

From this list, we needed to determine which elements were primary and which were secondary. Because of the transient posture of the app, we didn’t have the luxury of a lot of space to easily show all the controls at once. The more important elements needed to be more visible, at the top level of the interface, while the secondary elements could be slightly more tucked away.

We considered several options for elegantly hiding certain features. These included an inspector, a separate palette-esque window, and even an Audio Hijack-like popover bubble. However, I wanted to keep everything contained in the same space, which led us to an expanding “Advanced” area. When compared against the shipping product, even the very first sketches might look familiar (though messy):


An early, but recognizable, sketch of SoundSource 4. Most of the main UI elements are here, like boost, volume, and mute.

This layout was refined over time, but the basic ideas were set early on. Each source would get a single horizontal line, and an expanding section would hide the less frequently used controls.

Branding Boost

One of SoundSource 4’s central features is its Boost ability. This real-time audio compression makes audio seem louder, and it’s a great way of getting more out of even the smallest MacBook speakers. Right from the earliest sketches, it used a magic wand icon, because, well, in all honesty it was the first thing I thought of.

I assumed that visual concept of the magic wand would eventually change. In fact, I worked through dozens of alternatives. Here is the page from my most productive session of brainstorming alternative ideas:


A gallery of the many, many alternate boost concepts

Some of these ideas weren’t bad, but most ended up being too cute. We wanted SoundSource to feel reliable, almost like part of MacOS, and these concepts just didn’t help create that. Ultimately, the magic wand stuck, along with the name “Magic Boost”.

The App Icon

Once our Magic Boost concept was more or less settled, other elements like the app icon began to take shape as well.

SoundSource has had several icons in its long life. The most recent icon was inspired by the icon Apple used for the audio input on older Macs which actually, you know, had separate audio inputs.


An iMac’s audio input icon, highlighted


SoundSource 3’s app icon.

Working from that, I experimented with various ideas, starting with the previous app icon and eventually working in the magic wand:


Some early SoundSource 4 icon brainstorming

This was the first high fidelity version I made:


A mix of the old SoundSource 3 and the eventual SoundSource 4 icons

From here, the icon evolved slowly, eventually taking on a speaker background to help reinforce the audio aspect of the app, and losing the input icon altogether.


The final icon for SoundSource 4.

The SoundSource 4 icon also continues a bit of a retreat from flat design. The wand and speaker background are geometric, but still containing shadow and depth. The colours are bright and visually inline with the rest of flatter icons on the Mac these days, but overall I find the icon feels like a good combination of the two aesthetics.

The colour scheme of the icon was rooted partially in the green from the previous SoundSource, but then faded in a gradient to a new blue. This gave us a palette to use for the marketing, manual, and the website.

The Menu Bar Icon

We expect most users to set SoundSource as a login item, so it will run whenever their Mac is on. As a result, the menu bar icon will be seen far more than the app icon.

This icon took more time to get right. We wanted a design that captured the feeling of the main icon, while also feeling properly at home in the menu bar.

The above image shows a progression of menu bar icons (enlarged to better show details) made throughout the development process, with the oldest on the left and the final product on the right. Leading up to the final version, you can see a gradual simplifying of the wand to better fit in with the existing system menu bar icons.

Adding Life Through Animation

We took some time in a few places to liven up the UI with some animation. The first place we used animation was on our Magic Boost button. Early alpha builds used what was basically a check box, with just two states, on or off. We knew we could do something better though. I started by doing a mockup in Keynote, whose Magic Move transition is a great way to prototype ultra-basic animations. Then we built the final assets in PaintCode.

Magic Boost’s animation up close:

A second, and more subtle, animation can be found in our equalizer. When you change presets, the sliders all smoothly move to their new values, and the sparkline indicator in the menu updates as well.

These small details might be easily overlooked, but they do a good job of making the app feel livelier.

Iterating To Our Shipping App

Good design of any product takes many revisions. SoundSource 4’s interface is ultimately quite small, but it still required a great deal of design thinking. What’s described above provides a brief look into a process which spanned several months.

After many iterations, we succeeded in our aims to design something both compact and powerful. With SoundSource 4, we’ve made a useful sound control that’s simple enough for even novice Mac users, while also packing enough punch to be indispensable for the pickiest audio pros.

Our Software