After years of bitmap-based graphics and tiny knobs, making interfaces scalable could be the next challenge for music software, regardless of platform. Today, it’s the iPad; tomorrow, it could be a new generation of touch-equipped devices, or greater sensitivity to people with aging eyes and vision problems. Musicians, translating invisible sound to the metaphors of music notation, acoustic instrument designs, visuals, and the abstraction of hardware knobs and faders, have a unique perspective. (Steve Jobs used to regularly brag that the original Mac team was composed of people like musicians and artists, not simply technology specialists.)

I got into a conversation with David Wallin, the developer of the elegantly-designed bleep!BOX, about his new iPad app. I’ve long been a fan of his iPhone and iPod touch designs, but I was curious about the iPad work. For one thing, I noticed some empty space on the layout, save for some (non-functional) background graphics.

David turns out to have a number of interesting things to say, not least talking about how he decided to support both landscape and portrait orientations. (Again, this could be an issue with other current and upcoming platforms, not just iPad. See the portrait view at the end of the story – it’s, so far, one of the only such uses of that orientation I’ve seen in upcoming music apps.)

Here’s his whole response, unedited:

I spent a couple days thinking about how I would have designed bleep!BOX differently to take advantage of the extra space. The first priority was adding better navigation than the app currently has. The corner sliders work fine on the iPhone and they don’t take up much space, but being able to see all the options and click right on the one you want is definately ideal. This change I did end up doing. The second biggest thing I wanted to do would be to expand the sequencer page so that you could see and put notes in for more than just one part at a time – so probably some kind of 10 part by 16 step grid. I think Nanoloop does a good job with this, and it might be something that I borrow from. Some other ideas I had for improvements – combining multiple pages together (though then the question becomes which pages make sense to be on the same screen, and is the UI becoming too cluttered?) and also providing a better ‘global’ view of the song with some more of the stuff that is cool for live performances – such as the mute buttons and maybe also the loop controller or song-pattern picker. There is also the possibility to turn the existing note-picker into a more traditional ‘piano keyboard’, adding a ‘mixing board’, etc..

Deciding what changes to make wasn’t easy. I realized that having a larger screen really does make a huge difference and I probably would have made some very different design choices if I had designed for the iPad to start out. I also have the issue that if I’m going to maintain one binary for both platforms, it’s going to be fairly difficult to make drastic changes to the interface flow without hacking my code to pieces. And also, as you mentioned there is the desire to keep some consistency between both platforms so that someone who is used to the iPhone version can hit the ground running with the iPad version. Plus I only had 60 days from the announcement of the iPad to make any changes I wanted to make. Since this is something I do in my spare time (not a full time job), I knew that I would have to be realistic about what I could accomplish in that timeframe. So, I settled on keeping the same page structure. I made extensive modifications so that the pages could resize to fill more space if necessary. I also added a ‘global area’ with an overview of the full song (that doubles as a navigation tool, since it lets you pick the current part and bar). Finally, I decided to leave the sequencer page as is, at least for now. I played with a couple interface possibilities for this, but none of them quite satisfied me. Once I get my hands on a real iPad and I have time to play with it, I might decide to make some more extensive modifications there (it is probably the most ’empty’ looking page on the iPad..).

So basically my goal was to expand on some of the elements that were a little cramped on the iPhone and give them space to breathe and also to provide a nicer experience without really adding any new features that can’t be accessed on the iPhone. Design wise, there are definately some areas that I think can be better/prettier on the iPad, and I hope to address those in my next few updates. It’s gonna be another busy month or two. 🙂

More info: bleep!BOX update submitted

  • Thanks for the article…I've been thinking about diving into iPhone/iPad app development myself. I too wondered how handling UI differences might be approached. It certainly does make the development process harder to support two platforms seemlessly, especially when keeping it in a single binary.

  • Well, here's what it looks like supporting a bunch of resolutions and aspect ratios on Android:

    It actually winds up being not all that bad. With the forward march of screen technology, thinking about *density* and aspect ratio I think is going to be something all developers will want to consider.

  • Dave Wallin

    I should also point out that I attempted to follow some standards the web has been using for making content work across different resolutions – I kept the main content fixed within some minimum area and allowed the background to extend out horizontally. Additional vertical space allows more content to be visible without scrolling. Web designers usually target the lowest resolution that the majority of computers support. In the iPhone / iPad case this is a lot more difficult just because the difference in resolution and form factor is so drastic. Having areas in your iPhone apps that scroll (as opposed to fixed layouts) definately makes it easier to adapt to larger resolutions.

    I expect there will be a lot more attention being paid to this topic as time goes on – in the past we really only had to worry about desktop resolutions (which were fairly consistent) – now there is a whole slew of sizes for phones, netbooks, tablets, televisions and giant monitors to worry about. This applies whether you are developing an application or a website. It should be interesting to see what strategies emerge and whether some of this can be automated via clever UI coding and smarter widgets or whether applications will need designers to customize their layouts for every new device.

  • Paul Compton

    Looks like a cool app with a well thought out and designed ui.

  • Similar experience with designing an App for the iPad – bodyCal2. Admittedly my App (a BMI and BMR calculator and tracker) is no where near as cool as the above, but I had the same problem. I have written programs for the Mac and Apps for the iPhone. On the Mac it all windows and menus, the iPhone is a 'stack' of views with navigation, the iPad is neither. You have to take your iPhone ideas and 'flatten' them. An interesting experience…

  • I've had sort of the opposite experience from David's in adapting PatternMusic to the iPad.

    The original design of the iPhone version of PatternMusic was intentionally a very flat hierarchy with just three levels – song management – instrument mixing – note editing). With the iPad version I've managed to remove the song management as a separate layer so now on iPad your experience is dominated by only two layers with total focus on the song or on the instrument part.

    The other aspect was that PatternMusic's pattern editor put a lot of UI effort in managing the constraints imposed by the compressed size of the iPhone screen. Spreading it out to use the space on the iPad was just natural.

  • Pingback: Create Digital Music » iPad Apps for Music Making: What’s Coming, The Bigger Picture()

  • Pingback: Waiting for news from Apple on bodyCal2 (iPad BMI/BMR calculator and tracker), and surfing the web : MMISoftware Blog()

  • Pingback: iPad Apps for Music Making: What’s Coming, The Bigger Picture «

  • Thank you for writing this. I love the internet because you can learn something new every day. I'll share this with my friends, thank you!