Wednesday 12 June 2013

So this week iOS 7 was presented, as Apple said, it "is the biggest change to iOS since the introduction of the iPhone". Indeed it is a big change, at some point they also said
"...absolutely no virtual cows were hurt in the making of this user interface...",
"...what's really amazing is that even without the stitching, the window still sticks right there on the screen, it does not falls off without the stitches...", "...and game center, we completely ran out of green felt, and wood as well, this is got to be good for the environment..."
all those being references to  "getting rid of the skeuomorphic" elements of the current GUI.

However, there are still some "skeuomorphic" bits in the new interface, like the new weather app, or the camera icon, like we will see later on.

There is a bunch of people already making comparisons between iOS7 and Android, Windows Phone (metro), Nokia, etc. but the reason I'm writing this is because I believe iOS7's current "beta" GUI has some usability issues that hopefully will be fixed before the final release.

No Buttons?


I think the biggest usability issue will be the "buttons" (or the lack of it), if you look at it, there are no buttons. Previously (as in before iOS7 beta), the GUI made it pretty clear which elements were buttons and which ones weren't.
Actually, I was so used to those useful and necessary visual cues that when trying an Android (Jelly Bean) phone, I was lost. I did not know which elements were buttons and which ones weren't. Let's take an example (NOTE: I don't have an iOS7 compatible device so I will be taking some screenshots from the internet):






As you can see above, it is not really clear that 1, 2 or 3 are "buttons", they could as well be part of the normal text, especially 1. As for 4, what does that icon means? "exit"? I agree that the previous icon for 4 (whose meaning I suppose is "share") was not so great either, especially if nowhere in the GUI does the same icon appears captioned, but I think it was a bit better than the new icon because it supposedly showed a screen (a rectangle). The new icon shows a square which is not really representative of a screen, especially considering that the "airplay" icon, is still based on a rectangle.

Now let's do a side by side comparison:





Now look at how in the previous interface GUI elements considered as buttons are more clearly separated from the surrounding.

I think this will be a big problem for many people, I am sure this new interface wouldn't pass the "parents/grand parents" test, ie: I'm pretty sure that if I gave my mother (who has never used a touch screen device of any sort) two devices, one with iOS6 and one with iOS7, and asked her which one is easier to understand, she would say iOS6. Why? because buttons look like the computer's buttons, they have bounds, that separate them from the rest of the interface which is not active as a button.

The boundaries of the buttons are not part of some "unnecessary skeuomorphic" concept. Yes, real world buttons have borders, but GUI buttons have always had borders (or were "3D" with a pseudo-animation as they were pressed, even on Windows 3.1!) not to make them look like "real buttons", but to make them different from the surroundings and to give visual cues on where its limits for "activation" are.

That is very important because on a computer, using a mouse, one can always "hover" items to see if they are active. However, on a touch screen device "hovering" does not exist, so the "active" elements must be clearly shown.

There are more examples of this issue, but I don't want to make this too long. For more side-by-side comparisons, you can check here and here for example.

Android's GUI has the same issues (at least Jelly Bean which is only thing I have tried to use). Apple, if you are listening, that was not something to "mimic"! I understand that Android has X % (with X > 60) of market share and that people might be becoming used to dysfunctional GUIs, but it is sad that these many new GUIs we see around are trying too hard to be "modern" or "different" and seemingly forgetting about what works and why.

It is sad that ergonomics and usability were seemingly trashed together with the "wood", the "leather" and the "green felt". Hopefully this will be corrected and OSX will not see these mistakes poured on it.

Other issues

Nothing to slide?

  1. After all the suing, the patents, etc. about the "slide to unlock" thing, now there's nothing to slide! I wonder if this does even follow Apple's patent on slide to unlock.



Slide or tap to answer?



On Facetime it looks like "tap" is for answering, however, incoming calls require "slide" (see previous subsection)

Inactive icons? 


  1. Are those inactive icons? why are they different? after all they are still valid actions to do, whether the actions are "send to camera roll" (as it could have been "send to 'photos'" -camera roll is part of 'photos'-) or "send to email". In other parts of the GUI "contour" icons are used for "inactive" stuff.
  2. Why is the "cancel" button blue? it used to be grey (which conveyed no info on the positiveness or negativeness of the action that follows)
  3. That's a good addition, although it would be better if instead of a few pixels, a bigger part of the next icon (like 30-50%) was shown, that would accentuate the fact that there is something more over there, otherwise some people will miss it. By the way, using this "partial icon" visual cue instead of the "... more" button could be nice.




Low contrast

This is present everywhere. If you look closely, you will notice that the names of the apps on the "app view" are drawn in white with no border as well. That presents another big usability issue because of reduced contrast. Previously the text had a small black shadow that helped a lot to create contrast.
The low contrast is also visible in other apps, like below.


  1. See how it is hard to distinguish that there's a small yellow sun on Saturday and the options (or whatever that is) icon on the bottom right of the screen.




 Where are all the buttons?


  1. Is that a button?
  2. That button is going to have a very small active area, otherwise it would interfere with the slider above. By the way, what does it "create"?
  3. Look how small is the slider, you wouldn't even notice that it is an active (is it?) thing that you can actually control. The previous sliders were better at this.
  4. Is that a button? if yes, where is it going?



  1. Are those buttons?
  2. If the blue stuff are buttons (whether they are icons or text), would this one "iCloud" be a button as well?




About the control center


  1. Look at how the transparency makes it look like the "torch" is on
  2. Are those buttons? if yes, why don't they have a circle (like 3) or a square (like 5) around?
  3. Now, what is supposed to be enabled, I mean, what it is supposed to be "on" and "off"? At least SBSettings (which control center tries to mimic) uses "red" (for disabled) and "green" (for enabled). Black and white don't convey such associations.
  4. Look at both sliders, which one do you think you can "slide"?
  5. Compare the AirDrop icon and the AirPlay icons. The AirPlay icon is the same on OSX, the AirDrop icon is not, besides it does not even relates to "air drop", which the OSX icon does. It might be "skeuomorphic" but so is "AirDrop" as a name.
  6. This is interesting. While most controls here are there for the convenience of not having to go into settings and navigate inside its menus, some of them are actions, like the "camera" one. Which is strange, considering that there's already a "dock" where the user can dock whatever apps he uses the most often. Also, it think Apple has missed a great opportunity to integrate the task switching (for multitasking) on the "swipe from the bottom". On the iPad, a 4-finger swipe upwards would show the "background" apps. They could have done something very similar and instead put the "control center" on the "notification center" panel (like SBSettings does), or if they had preserved the way the "background" apps were presented (as icons, instead of the a-la-WebOS "card view" in the iOS7 beta), the "control center" could have shown the background tasks' icons as well, which incidentally makes sense for a "control center". 




Signs of skeuomorphism


  • The Camera icon stylised as an old camera (I say old because most cameras now do not look like that, and if the iPhone and other smartphones are the most popular cameras on Flickr and other services, then current cameras look more like smartphones). If anything the old icon was more modern.
  • The Weather app shows animations of fictional weather, which is pretty strange, considering Apple said "...it [iOS7] has a whole new structure that is coherent and that is applied across the entire system...". The fictional animations have a lot in common with the "wood" and the "leather", right?
  • The "camera roll"? come on, not only the interface does not look like a roll at all, but there are no "rolls" on the iPhone, ever.

Some Inconsistencies and strange things

  • The Notes app icon has lines in it, the app has not. Previously, the icon was very similar to the look of the actual app, but now that they removed all the lines, the icon does not relate very well to the actual app.
  • Generally speaking, the icons are not even close to being similar to those on OSX. While that might be the goal being pursued, it is strange considering that cross-platform apps are extremely likely to use the same icon across platforms, after all, for most apps the icon is part of the brand.
  • The Settings icon: it is probably the most strange of the new icons. In that respect, I think the settings icon for Android's Jelly Bean is better.
  • Wait, Settings was not the most strange. What's with the Game Center app icon? How are those bubbles related to gaming? a Joystick, a sort of stylised Gameboy or even a console controller would have been a lot more related, and thus help people make the "connection" between the icon and the concept behind it. 
  • The Maps icon was changed and now the "Infinite loop" does not even shows. Agreed, for people outside California that part of the icon was meaningless, but why such change?
  • What about the Compass icon? While the North at 45Degrees, the letters NSEW are not tilted.
  • Even the charging icon is strange, the "spark" is not inside the battery anymore (which probably makes the icon take more space than before as well). And the signal "bars" are not even bars anymore.

Some good things

  • The Clock app icon seems to show actual time (hopefully the "weather icon" and "stocks" do that too)

Some ideas

  • Have the Photos app (why not call it 'iPhoto' and use the same icon as on OSX?) show a sort of "small slideshow" of the photos actually on the "camera roll" instead of an icon.