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:
Press enter or click to view image in full size
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!
Press enter or click to view image in full size
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!
Press enter or click to view image in full size
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?
Press enter or click to view image in full size
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.
Press enter or click to view image in full size
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.
Press enter or click to view image in full size
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?
Press enter or click to view image in full size
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.