Learning to Focus – How we created Focus Mode

What do you do when your ideas become overwhelming? When you need to concentrate on just one thought? These were some of the questions our team was asking itself nearly a year ago, and resulted in the development of Focus Mode.

It’s now been a few months since we released MindNode 6, and many of you have had a chance to experience it for yourself. We’ve been happy to hear from plenty of our customers about how Focus Mode has become a part of their brainstorming process, from helping them put a spotlight on the details, to presenting just the right part of their mind map to their audience. Your feedback has been indispensable, and we’ve already been working on squashing bugs and looking into how we can make Focus Mode even better.

To shed some light on how we work, we spoke to one of our engineers, Michael Schwarz, & our designer, Harald Eckmüller to gain some insights into what goes into making a new feature.

Baby steps

Michael’s motivation came from wanting to find the solution to a problem: “It was a challenging task, and as I have many large mind maps, I liked the idea of focusing on the sub-content”. With the challenge set, the first step was imagining what the feature would look and feel like. Even though the idea seemed straightforward, focusing on one particular branch and make the rest of the document less distracting, the nature of the tree-structure of mind maps raised a lot of questions that added a layer of complexity.

Harald explains: “Mind maps may have content all over the canvas with naturally occurring clusters. These draw more attention visually, so should they be de-emphasized more when focusing elsewhere? How much of the surrounding of a given branch do you need to clearly see to be able to work with it? When you start focusing on a branch with a node three tiers removed from the main node, do you need the path all the way up to the main node with the focus, or is this too much context?”

To answer these questions a few different approaches were tried out, at first with paper prototyping and static mockups, and later creating an entire Swift Playground to quickly tweak parameters like opacity, blur, hue etc. One of the earliest implementations was a “hoisting mode”, elevating a subsection of the mind map into a separate document. This seemed too disconnected, leading to a “presentation mode” which showed more context. After seven iterations the final result was a dynamic mixture of both approaches, using the zoom factor as a way of presenting more or less surrounding content.

An early version of Focus Mode (above) showing a different approach of presenting the unfocused nodes compared to the final version (below).

Solving problems and creating new ones

As development continued new questions were appearing all the time - from designing the user interface and interaction to how other features like undo & redo were impacted by entering Focus Mode. Michael and Harald elaborate:
- How can you effortlessly get into and out of Focus?
- How does an unfocused node react to a mouse cursor?
- Where do you refocus if you delete all of the focused nodes?
- Do you re-enter Focus Mode if undo/redo is triggered?
- How does keyboard navigation work?
- What is selected when you use a shortcut like select all?
- How can you make the feature discoverable, yet keep it easily at hand for more pro users?

Indispensable to finding a way through this maze of issues was the support of our fantastic QA team and our beta testers. Trying something new meant we had to learn what works and is right for our users. We combed through our support requests for inspiration, conducted interviews, and collected as much feedback as early as we could into the process to find the right solution.

Learning by doing

What Harald and Michael both learned from working on Focus Mode was the importance of prototyping and creating an environment where the designers and engineers could play with and adjust the feature and quickly collaborate. With something as nuanced as Focus Mode the limitations of static design mockups became apparent very early on, and revealed the need for more dynamic tools. Simultaneously working in an environment with flexible project management allowed the ultimate goal to be changed as much as necessary. And what have they been able to do with the fruit of their labor? Harald and Michal explain in their own words:

Harald: “I do a lot of narrative design for interactive fiction in my spare time, and being able to throw all my thoughts into a document, then sort it, and eventually fine-tune my thoughts into a workable narrative idea is a process that produces huge mind maps. All the characters, places, events, plot-relevant objects, groups and what not can make it hard to concentrate on a specific part. Don't get me wrong, I need that creative chaos to find unexpected connections and come up with plot-twists that are interesting, but having the option to simply push away all the distraction and focus on just one scene is extremely helpful to me.”

Michael: “I use it most of the time to present the content of a large mind map in smaller pieces. It’s also useful during joint brainstorming sessions to ‘lock in’ into a special subtopic.”

Focus Mode is available now in MindNode 6 on Mac and iOS.

We’d love to hear how it’s become a part of your mind mapping flow and what you love, hate or would change about it.

Pro-tip: Refocus quickly from one node to another using the long press gesture on iOS or Option-click on Mac.