Updating for Modern iOS Design – A Case Study

TL;DR — Check out the pictures and videos on this page, and you’ll see how I adapted the basic circular menu of Click version 1 to fit the new iOS 7 design aesthetic, not just in visual terms, but also in interaction style: clean and almost chrome free, with more color, more seamless transitions, new inertial/physics-y interactions and direct manipulation transitions.

 

Hello Again!

As you can probably imagine, a LOT has happened in my life in the last almost two years since I’ve posted on this blog (and therefore also on iDevBlogADay)! And most of it has not been iOS development related, so I guess that’s my excuse for such an incredibly long time between posts. But, I have been working when I have the time, and I just released a new version of my iPhone app called Click Metronome. The original version was the topic of many of my posts here on this blog, especially about the design of the circular control. For this post, I thought it might be interesting to explore some of the design changes I made to Click when releasing version 2. The principles behind the design – and the features of the app – are largely the same, but the actual look and feel is completely different. So first, how about a look at a screenshot from version 1, and then the promo video for the new version for iOS 7+. Can you guess which is which? ūüôā

 

Screenshot 2014.08.02 13.38.42

 

Circular Menu

At the time, I was really happy with how Click turned out.¬†Then – and now – there’s a lot of metronome apps out there, but they seem to either be too simple and missing key features, or feature-rich but with a screen that’s completely full of buttons. So, one of my main goals for Click was to offer all the main features people would want – wide tempo range, variety of time signatures, accent options, etc. – and make them quickly accessible, but without cluttering up the screen with tons and tons of buttons. So, after much iteration, I came up with this menu system that showed all the current settings around a small circle. Then, the user taps an item and all the options for that setting are revealed in the circle, ready to be set by rotating. Here’s that menu in action in version 1 and version 2 (watch in slo-mo):

 

Click1MenuSmall

Click2MenuTapSmall

 

Version 1 Problems and Fixes:

I felt like I accomplished the goals I had set out, and watching people as they used the app, they always eventually figured out how to use it. But, it was never as intuitive and easy as I had hoped. As I got feedback from others, and as I thought more and more about the app myself, I came up with a whole list of problems with the implementation of the menu:

  • I purposely designed it so that that current selection on each setting would be directly under that item on the main menu. (This is hard to explain, so if that’s not making sense, you can see my full explanation of my reasoning on this in the video accompanying my post, Introducing Click.) This had some advantages in trying to maintain context and usability between the transitions, but it had a bunch of negative consequences as well. For instance, for each setting the “selection point” is at a different place around the circle, and this turned out to be confusing for people.
  • The little blue arrow that’s supposed to help people see which point around the circle is the “selection point” was more confusing than helpful. “Why did it just move?” Or, after literally ten minutes of playing around with the app, “Oh, that arrow shows you what you’re selecting!”¬†Even with the arrow, the natural intuition was still to think of the “left” position as the selection position, and the fact that it moved around was more confusing than helpful.
  • In version 2, all selections occur in the same position, and the current selection indicator is much more clear: either directly inside the circle or indicated by the arrow on the end of the colored shape.

 

  • Also, by using this variable selection point, there was supposed to be a more seamless transition between the selection mode and the main menu mode, e.g., if you select an eighth note as the subdivision value, then as the control crossfades back to the menu, the eighth note that appears in the menu is in the same place as the one you selected in the selection. Oh my gosh, this has to be about the most boring and confusing thing I’ve ever written. Seriously, if you’re curious it makes a lot more sense by watching this video. BUT, since the two icons are slightly different sizes, and in the case of certain things like the time signature, they’re rotated to different angles, the simple cross-fade is just not actually seamless.
  • In version 2 – for all settings with¬†an icon representation – the icons transition seamlessly between appearing on top of the colored circle in the menu, to appearing as the currently active option in the selection mode. This is easier to see in this animation showing the transition by direct pan interaction (watch in slo-mo):

Click2MenuPullSmall

 

  • Most of the settings are available from the main menu – volume, tempo, time signature, subdivision, and display mode. Frankly, I would have liked to make everything available here, but that’s all that fit. So, the other, “less common,” settings are available from a separate settings menu: sound type, accent options, flash options. Somehow I convinced myself that this made sense to divide it this way. That was a mistake. Not that I necessarily got any specific negative feedback, but again, watching people use it, it was painfully obvious that it was confusing.
  • To make the settings menu even worse, three of the options are simple On/Off toggle switches that don’t even crossfade to a separate selection mode. You just tap them on the menu and the switch flips. I indicate this by using a different color and by giving the item a circular outline. And if that’s still confusing, if you try to swipe/pan on the item, a “helpful” little tip pops up to let you know that it’s a toggle switch! How nice of me, right? My sincerest apologies to all users of Click 1.0.
  • In version 2, all settings – including the On/Off toggles – have their own selection wheel, so that the selection dynamic is the same for every single item.

Creating Version 2

As you can see, in the months after a released Click for the first time, I realized more and more that my design had some pretty significant flaws. I still believed in the overall goals and general approach, but given the constraints of the design that portrayed this thing as a physical object, I was not sure how to proceed. Click saw some sales at the beginning, and a fair amount of downloads when I made it free for about I week, but then it pretty much died off. I was entering a time where I had even less time to devote to app development, and I had another app – theDrumDictionary – that was still making some money, so I basically abandoned the metronome and focused on the drum app. Once again, my apologies to anyone was using and enjoying the original Click. And then, about¬†a year later, Apple went and dropped the iOS 7 bomb. Now on top of Click’s usability flaws and failure to gain traction in the app store, its interface now looked like a terribly outdated turd. However, like I said, I had more limited time, and my drum app was still a higher priority. So, for¬†the release of iOS 7 in the fall of 2013, I worked first on updating theDrumDictionary with a new interface. I also started to explore some ideas I had for an iPad-only, much more advanced metronome that I would design for iOS 7 from the ground up, but Click just sat there, all lonely and unwanted and “skeuomorphic.”

I realized, however, that my iPad metronome project was going to take a long time. And then I read this “Fertile Ground” piece my Marco Arment about iOS 7 leveling the playing field, even for apps in crowded markets.¬†And as I opened up Click every once in a while to take a look at it again, I realized that I was still proud of the rotary menu system I created, and I still thought there was a place for a metronome app like this. As far as I know, it is still the only metronome app that offers so many different visualization modes in one app – one of the unique features of Click from the start. So, I set off doing a redesign of Click. And it took me way longer than I hoped it would. But it’s here, and I can unequivocally say that I’m more proud of this app than ever!

 

Other Design Considerations

  • One key principle of iOS 7 design is deferment to user content. Although a metronome doesn’t necessarily have content in a traditional sense, if you had to pick a piece of the app that was the “content,” it’s gotta be the visual feedback section. You’re not gonna spend all your time fiddling with the controls. Once you’ve got your tempo, etc. set where you need it to practice your song or scales or whatever, the main thing you want is of course to hear the metronome, and then to see the visual feedback. In version 1, Click already had a fullscreen mode that moved the controls offscreen, and version 2 keeps this as well. But without the extra edge chrome and fake glass glare, etc., it’s an even cleaner look: just the number, just the pendulum, just the whole screen flashing on the beat, show on the screen depending on which mode you’ve got set. And you can tap anywhere on the screen to start/stop the metronome, with the full controls available with a tap or swipe.
  • Click version 2 makes extensive use of UIDynamicAnimator and UIKit’s spring animations to provide subtle physics to the interactions: things like the slight over-bounce of the rotation or position snap animations, or iOS-messages-app-like bounciness while rotating the menu and icon-based selection disks.
  • As much as possible, transitions between gestures and animations are smooth and maintain the gesture velocity. This includes the ability to flick the menu or selection wheel and let it decelerate smoothly, as well as the push/pull transitions between the menu and selection disks.
  • Hopefully, I’ve been able to show that the redesign is not just about the look, but the look itself has also changed drastically: shadows, gradients, textures, and chrome are completely out, in favor of more bold colors, transparency, layering, and zooming.

Time will tell whether or not this update is enough to bring some new life to Click. I think the modern iOS design language helped me even better realize the vision I originally had in my head. There’s a wonderful freedom in letting go of the constraints of physical design and allowing the flexibility of the digital world to take over. I know I’m far more proud of this version than I was even of the first one, and I’ve got renewed motivation to keep working on new features and exploring the new possibilities that this opens up. If you’re a musician, or you’d just like to check out the app, you can find it here: Click Metronome. Thanks for reading!

Advertisements

3 thoughts on “Updating for Modern iOS Design – A Case Study

  1. Pingback: ios8 download
  2. Grreat goods from you, man. I hhave understand your stuff
    previous to and you are just extremely magnificent.
    I actually like what you’ve acquired here, certainly like what you’re saying and the way in which you say it.
    You make it enjoyable and you stfill care for to keep it smart.

    I cant wait to read much more from you. This is really a terrific website.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s