Confusing UI in iOS7

It’s flat, it’s beautiful — and it can teach us a lot about how a sloppy interface implementation can successfully confuse users. 

Designers all over the world are ranting about the look and feel of iOS7 these days, there are full blogs dedicated to the sloppy user interface.

While I like the new look on my iPad, the user experience is not yet where it should be. I am not talking about colours and fonts, but about consequence and consistency. Whenever exposed to a new interface, the user will learn its elements and patterns when they first pop up. if this interface is not consistent, it will confuse users.

To show you what I mean, follow me through my first session in the built-in Clock app:

Needless to say, the overall style of bright tones and saturated accent colours looks amazing in the timer screen. One element immediately catches my attention: the big circle with the green outline and the label “Start”. It appears to be tappable and — yay — it is!

Different states of the primary “Start” Button

When I tap the circle, it highlights with a dark colour, turns red & changes its label, when I tap it again, it changes back. Pretty straight-forward.

For me as a user, this is the perfect learning-experience: Tappable elements are big, round and outlined. They are green if they perform a positive action, red if a negative action. When tapped, they give a little visual feedback. Amazing.

Let’s change to the Stopwatch: Again I find a big green circle — great, I know this element already!

Same Button in the Stopwatch — without highlights.

When I tap it, it turns red — but wait — it doesn’t give me the visual feedback. Did I break it? Is it even supposed to be tapped? The stopwatch is running and the colour changed, so it can’t too bad. Confusing, but no big deal.

Let’s take a look at the Alarm: No alarms yet, an empty grid, no big round green button. So, how do I create an alarm?

Empty Alarm Screen — what now?

The word “Montag” has different colour then other weekdays. Maybe tapping it will help? Nothing happens.

After some looking around, a little red cross in the corner of the screen catches my attention: The Plus could mean “Add Something”, but why does it have no outline? And why is it red? Does it perform a negative action? Confusing.

The little red + is the primary element.

I click it anyway, and hurray, a popup to create the alarm appears. Good stuff. The alarm appears in the grid, which I understand now is a calendar. I have no idea why the calendar is in German although the rest is in English, but fair enough.

Red rectangle is not tappable.

The alarm is shown as a red filled square, so when I tap it, it should perform a negative action, right? Nothing happens. Can I maybe drag it around the grid to change the time day? Nope, I can’t. So, how do I edit or deactivate this alarm?

What about this red rectangle?

Uh hey, there’s a little red “Edit” text in the top left corner. It’s not outlined, but coloured texts in corners seem to be tappable. Guessed right, once I tap it, it shows me a list with my alarm — and a red filled rectangle with the word “delete” on it.

Too bad that rectangles are not tappable in this app, right? Only outlined circles and words in corners are …

Very confusing.