Bubble Browser for iPhone/Sensus and How We Designed for a Device We Had Never Seen

So Many Bubbles on Such a Small Screen…

After the release of Bubble Browser for iPad, it seemed quite natural to take one step forward and adjust Bubble Browser for the iPhone. On the one hand, we doubted whether an iPhone version was really necessary. On the other, we wanted to go with the flow.

We needed to answer several questions:

  • Will the handling of data typical for Bubble Browser work on such a small screen?
  • Will we be able to maintain all of the functionality?
  • Do we need it all?
  • How can we keep the notes’ navigation comfortable and clear?

Bubble Browser is a visual metaphor and a new way of viewing and browsing your data. Tags, notebooks, and dates are presented as colorful and differently-sized bubbles that show the most important information in any context.

Out of pure curiosity, Bartosz, chief developer in the Bubble Browser for iPad project, decided to launch the iPad version on the iPhone. It wasn’t a total bust, so we were able to clear some of our doubts immediately.

We started to work. The further on we went, the more questions and issues there were to solve. We had no deadline; we were told to do the best we could, concentrating on esthetics and reasonable, comfortable navigation. I think we managed quite well. But before I expound on that, let me discuss BB and … Sensus.

Sensus and Positive Time Pressure

A few days after we started designing, Daniel―who was Bubble Browser’s initiator―came back from California and was so inspired by the Canopy team that he suggested it would be great if―in addition to transferring Bubble Browser onto iPhone―we could also adjust it to the Sensus hardware, which is the Canopy team’s main project.

According to its creators, Sensus is a touch-sensitive, app-enhancing case for your mobile device that expands the touch interface to the entire back and right side in addition to the front.

Because of business needs, we had a deadline: ASAP. Canopy asked us to prepare a pretty, operating application (a non-game one). It was quite clear to us that Bubble Browser for iPhone would be the best choice. It would seem obvious that the next thing to do was testing Sensus itself, performing all the tactile experiments with the very object we were supposed to create the software for. Suprise, surprise! The only person in our team, who had ever seen Sensus before was Daniel. Nobody else. Sensus was still in the testing stage at Canopy. They promised to send us one of the first cases when it was ready, but that deadline was quite far away (we’re still waiting). It meant, our challenge was to design software for the hardware we did not have. We couldn’t wait!

During the initial meetings regarding the project, it became clear that Sensus raised many questions and issues concerning the UX of the add-on itself, as well as the mixing of the touch sequence and experience of the application. Even better―we were to work on something potentially innovative and disruptive. When we see stuff like that we make a beeline for it!

Crazy or Reasonable?

We had nothing to lose. The Bubble Browser version for Sensus was an experiment from the very beginning, therefore―as always in such situations―we had every reason to go crazy and show off all the potential Sensus could provide when combined with Bubble Browser for iPhone. This was also Canopy’s goal―efficiency and brilliance! Moreover, we were justified in our craziness as neither the guys (developers) nor I had ever seen Sensus in person. We were excited to be doing something that no one―except a few chosen people―had had the opportunity to do: adapt an app to a device that dramatically changes the interaction paradigm. Suddenly you may touch the rim, tap the side, navigate with your finger at the back of Sensus; and it all reacts and brings concrete results. I started to draw almost maniacally, bringing in everything that could potentially be used in the Sensus to navigate through Bubble Browser.

Quite soon we realized that this was not the right way to go. Using everything we had would not be good for OUR OWN Bubble Browser. We knew what our focus needed to be: the Sensus case was supposed to be an addition to a fully functional version of Bubble Browser by providing a layer of extra “experience” to the application―not acting as a replacement.

One Hand Cannot Clap

For a very long time (as compared to the time we were given) we were convinced that using Bubble Browser with the Sensus case MUST be done single-handedly―after all, people use their iPhones with one hand, not two (at least most of us do), despite the fact that the Sensus promotional ad clearly shows that all actions are executed with two hands. This conviction―one-handedness―gave us many problems.

The main problem was that (considering the small size of my hand) when I moved my finger along one side of the case, from the top to the very bottom, the phone fell out of my hand or became very unstable. Taking into account the sensitivity of the iPhone (although Sensus is also supposed to provide protection), it was bad news and didn’t bode well for the Sensus, not to mention the Bubble Browser and our Dock-like fisheye control. The case also increased the size of the phone. When I moved around the back of the Sensus, my hand was permanently tense.

The fisheye was described in more detail by Bartek in his article “Bubble Browser’s Fisheye or How to Make a Dock-like Control for iOS“

And then it dawned on us. Sensus is an add-on, something that requires special will to interact with. When you decide to use it, you enter another world of experiences―it’s not a mere smartphone, but a gadget, something to play with. Initially, Sensus was designed as a tool to explore the realm of mobile games―to grab and experience with both hands. This realization solved so many problems, and the idea of Bubble Browser combined with Sensus became a very interesting way to explore data. Using both hands gave us the stability we were lacking all along.

Personally, in my excitement, I forgot that it was just an experiment; it didn’t need to be perfect―we were only exploring the fact that using two hands for something more than gaming may bring about a new quality that Sensus only begins to tap into.

What We Achieved

We used the design and functionalities of Bubble Browser, which are present in the iPad version, but changed some details in such a way so as to ensure that Bubble Browser operates well both with and without Sensus. Here are the key points:

  1. Move the fisheye browser to the right side to be able to operate it comfortably with the right thumb without obscuring the view on the bubbles or notes (I can still hear the lefties’ laments;);
  2. Limit the orientation to vertical only. We were not able to think of an alternative for fisheye in the horizontal position in such a short time. You can imagine how bad fisheye would look in a horizontal position―and how uncomfortable it would be.
  3. Change the notes’ view. We made this decision early, but it proved to be a very good one due to the ease of selecting a note using the back side of the Sensus.

Here are some (not all, of course) of the solutions we have proposed and implemented so far in the Bubble Browser used with the Sensus case:

  • Tapping on the Sensus’ back to select and filter bubbles
  • Sliding on the edge to filter the fisheye
  • Scrolling through notes thumbnails using the edge wheel
  • Tapping on the Sensus’ back to select a note to read
  • Scrolling through note’s content using the edge wheel
  • Tapping on the edge to dismiss the note

Here is a short movie from Conopy team, where you can see how it works for now.

Everything we designed had to be based on assumptions and simulations of the Sensus case, and we know that all the fun will start anew as soon as we lay our hands on the actual device. So far, these are only hypotheses, assumptions. As far as we have seen in the movie provided by Canopy, we are aware that the question of whether or not Bubble Browser can be used with Sensus will be answered only after we experience the device “hands-on” and see for ourselves whether the experience is worth the implementation and improvements. 

Understanding Frame
Hold on to Reality: Restrain Your Creativity And Your Feedback