iPhone X and Why I’m (sort of) Ignoring the HIG

iPhone X and Why I’m (sort of) Ignoring the HIG

What Apple Wants

The iPhone X has been out now for several weeks, and slowly but surely, I’m seeing app compatibility updates hitting the store. According to Apple and the HIG, the message is a loud and clear, “embrace the notch!” But will designers and developers follow those instructions? Immediately after the initial announcement, there were plenty of ideas (and jokes) about how to deal with that pesky notch. I’ve been a bit slow on getting my metronome app Click ready for the iPhone X. I ended up making some design choices that I thought might make for an interesting blog post, sort of striking a middle ground between the letter of the “law” in the HIG and going completely wild by totally hiding or calling attention to the notch. These decisions were also influenced by the existing style and purpose of the app, so I’ll talk briefly about those factors as well. So, without further ado, let’s dive in!

Here are the most important official summary statements from Apple about handling the “key display features”:

Avoid explicitly placing interactive controls at the very bottom of the screen and in corners. People use swipe gestures at the bottom edge of the display to access the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area. The far corners of the screen can be difficult areas for people to reach comfortably.

Don’t mask or call special attention to key display features. Don’t attempt to hide the device’s rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don’t use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas, either.

My Design

So, will people follow the rules? How flexible will app review be with apps that push the boundaries? It certainly appears that many people do not like the notch, as evidenced by such sites as notchless.space for creating notch-hiding backgrounds! And, what did I decide to do with my design? I’ll include the current preview video of Click from before iPhone X, as a little intro to the design of the app as it already was. A few things probably jump out to you right away as potentially interesting on iPhone X: the completely black background, and the presence of a LOT of elements laid out way into the corners of the display.

 

Hiding the Notch?

Continue reading “iPhone X and Why I’m (sort of) Ignoring the HIG”

Advertisements

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:

Continue reading “Updating for Modern iOS Design – A Case Study”