Introducing: Click

I’ve mentioned my upcoming metronome app a few times before on the blog here, but now that I’m getting closer to completion, I thought I’d take a moment and give it a formal introduction. It’s still very much a work in progress, so don’t take this as a press release or a marketing video. It’s more like, a behind the scenes intro from a developers perspective. So, without further ado, here we go!

The Name

“Click,” or perhaps with a subtitle, “Click – Metronome” is the title of my new app. Honestly, I’m not 100% happy with this name. To the general population, it’s probably pretty ambiguous, hence the subtitle. But among musicians – who would be the majority of those purchasing this app – a “click” is a common way of referring to a metronome. Basically, there’s a lot of metronome apps out there, and this was one of the only non-corny, non-“punny”, simple, to-the-point names that was not yet taken.

The Design

It’s easier to show you this than to try to explain it – so jump to the video if you want – but I want to share some of my rationale/process of design for this app. There’s lots of metronomes out there (are you seeing a theme yet?), but from a design perspective, most of them are just plain crap. Now, I’m no design expert by any means – it’s only been in the process of making this app that I’ve begun to truly dig in and study principles of UI and UX design. So, that being said, if even I can see  – and articulate why – these apps are crap, then they must actually crap!! Seriously though, there are some good metronomes out there, but there’s definitely room for more quality ones.

One of the issues I see, even with the good ones, is that they want to be powerful and give the user a lot of options, but in doing so they sacrifice usability. Even the easy to use ones still end up filling the entire screen with buttons and cram the visual part of the metronome itself into a small section of the screen. So first and foremost, I wanted to find a way to give plenty of options, but still leave lots of screen space for the metronome itself. In that respect, I’m very pleased with how the circular menu/selector has worked out for this.

As far as the actual *look* of the design goes, I’m shooting for something with both realism AND digital “flexibility.” It’s realistic in the sense that the app looks like a real object – with shadows, highlights, texture, some physical buttons and handles, etc. But, it’s not overly skeuomorphic and doesn’t necessarily directly resemble any real-life metronome. The main controls and the central view are basically just “screens” upon which I can display anything I want, completely unrestrained by what would or would not work on a physical device.

Another thing I wanted to do with this app is minimize the use of words or labels. Obviously, there are a lot of numbers used – no way around that really when you’re talking about setting specific tempos and time signatures – but there’s very few words. As long as I can find appropriate symbols to communicate what each thing does, I think this will give the app a nice, clean, accessible quality. Not to mention how much easier localization will be when there’s only a handful of words in the whole app!

The Video

Enough talk, just watch! Not everything is working yet, and even the working things are still in progress, but this will hopefully give a nice preview of what’s coming up. I’d love to hear any feedback you’ve got, positive or negative! Thanks for watching.

—-  Yikes! The video quality did not turn out too well after compression. Oh well, you get the idea. It looks *great* on the device, I promise  🙂  —-

P.S. – Wanna Help Test?

If you’re interested in helping beta test Click, follow the link here to Test Flight. I may not be able to take everybody – Apple’s 100 device limit is turning out to be more restrictive than I realized at first – but I will take whoever I can. If you’re a musician or otherwise particularly “qualified” to test this app, that will help me narrow it down if I need to, but it’s not a requirement. Thanks!

Test Flight –


9 thoughts on “Introducing: Click

  1. Hi Ryan,

    Really nice work so far, especially with the orientation handling.

    Regarding the different state when clicking the gear icon, the animation is good, but I would suggest making a visual change to signify the different mode, such as changing the gear icon or background in color or to a different icon that means “go back to other mode”, like maybe a note icon.

    I also think the decoration on the left edge of the controls area might not be big enough or noticeable enough for users to realize that they can hide the controls.

    After you made it disappear I found myself thinking “What did he do to close that control area?”

    If it looks more like a tab sticking out, that might convey the possibility more.

    1. Thanks for the feedback and the encouragement! That’s a great suggestion for the button to switch between the settings and main modes. I had thought about making the gear/button a different color, but I didn’t even think of making the icon different. That might be even better. I’ll have to try them both out and see how it looks. As for the controls sliding off the screen – I used to have a button dedicated to make it slide off, and then you’d swipe to get it back on, but for various reasons I just recently decided to go with more direct manipulation off and on. So, yeah, figuring out how to make it obvious how to do that is now one of my remaining challenges. It might be that I just need to make that “grip” stick out a little more. Really appreciate your comments. Thanks so much!

  2. Looks great. Clean and obviously well thought out and implemented I’d suggest that you consider that as you change orientations that the word “Tap” be rotated so that it is right side up and that the Tap and gear buttons remain in consistent reletive positions.

    1. Yes, that’s definitely a part of the rotation that’s not completed yet. I’ll also be updating the highlights/shadows/gradients so that the apparent light source is always coming from above. I meant to say something about that in the video but forgot. Glad to hear you like the overall look. Thanks!

  3. Hey Ryan, just stumbled here from iDevBlogaDay.

    Looks like a cool tool. I play guitar and I’d be willing to check it and and give you some further feedback.

    One bit of advice just based on the look: I think you’ll grab a lot more attention and downloads if you invest a bit more in the aesthetics. Your overall layout and UI seem solid, but it’s lacking that spit-shine polish that you’d see in something like GarageBand. People judge the quality of the app by the screenshot and icon.

    1. Any specific recommendations or observations? I agree that it’s still not quite there when it comes to the polish, but a lot of the interface look is actually pretty subtle too. Between the screen-captured video and the further compression online, some of that is getting lost in this video. Let me know if you have specific comments though. Thanks!

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s