Dear Stack Overflow, thank you for not allowing me to change my mind. How Orwellian of you.
iOS 7 has been around for a while now, so this complaint is nothing new, but instead of improving it in iOS 7.1, Apple has done an excellent job of making it significantly worse; so I finally decided to write (read: rant) about it.
Don’t get me wrong, for the most part I love the refreshingness of a completely “flat” UI, without all the pseudo-3d rendering that was so popular all through the 90′s and 2000′s. But religiously sticking with a new interface paradigm against better options can lead to folly.
Case in point: the iOS 7 shift button.
There is absolutely nothing intuitive about the styling of any of the states of this button. Looking at any one of them individually, you simply cannot determine what state it represents. The only way to figure out what the state of the button is is to compare it to its other states. This is horrible UI, and in my opinion is a perfect case where we should be using pseudo-3d to make the button look “pressed”. For the record, the states pictured above are, respectively: unpressed, caps lock, shift. The subtle (and I emphasize subtle) shading of the caps lock state is very easy to miss, and I am constantly mixing up the pressed an unpressed states of the shift button, because they both look unpressed to me.
To make matters even worse, there is exactly one other button on the keyboard that you can even compare the shift button to in order to figure out what state it is in, because the keyboard has three different stylings of button, and Apple is not even following any kind of common theme. Let’s examine them:
Most of the keys are clearly using dark text on a lighter background. In the above example, only the delete button has light text on a darker background. Looking at the keyboard above, then, one might presume that the shift button is in fact not selected, because it looks very much like the 123, microphone and return keys, differing only in that the symbol is a slightly lighter shade than the black foreground of the others. However, the shift button is in fact pressed in this picture. Unpressed, it looks like the backspace button. That’s right, only the foreground colour of the button is changing (“on” is dark, and “off” is bright). The actual “button”, which by the way is actually still using a thin pseudo-3d shadow to make it look physically like a button, doesn’t change in the slightest. This is the most two-faced, hypocritical design of a new UI I have seen in some time.
To make matters worse still, when you first see the keyboard, it most likely has the shift button pressed (because most text fields default to auto-capitalization), thus impressing in the user’s mind that this is the natural default state of the keyboard. Of course as soon as you start typing, that shift button lights up (which means it’s off, remember).
Can it possibly get any worse? Yes. Yes it can. The caps lock mode of the shift key (which is the second image in the top picture) is quite frankly barely discernable from the unpressed state. Worse, to activate the caps lock, as any iOS user will know, one has to double-tap the icon. What happens if you’re a little too slow in your double-tap? Well consider that the first tap simply selects the shift key and puts it into shift mode (image 3). This means that depending on whether your are successful or not in your double-tap, the result will be either image 1 or image 2. In other words, the two states that look almost identical to each other!
Quickly glancing at a keyboard that has its caps lock on, it is very hard to miss this fact unless you specifically compare the background shading of the shift button to the 123 button below it:
Tell me I’m crazy, but that is a subtle, subtle colour difference! Without those other buttons to compare it to, there would simply be no way at all to tell if caps lock was on or off. Even with the other buttons it’s not obvious.
Apple has taken a bad UI in iOS 7 and made it boatloads worse in 7.1. Do you agree or disagree?
Allow me to ramble a little if you will. Consider light switches. We’ve been used to them our whole lives, and even if we’re being generous, they haven’t changed much at all over that course of time. For someone who grew up in the 80s, that’s a pretty long time for such a commonplace interface to not have undergone major changes.
Perhaps the biggest change we’ve seen was the gradual switching (no pun intended) from those little stick switches that flipped up and down to the nowadays commonplace flat switches that push in at the top or bottom.
Seriously. That’s about it. That’s about the only interfacial change we’ve seen in the light switch in our generation. To me that means one of two things: either it’s such a good invention that it just hasn’t needed any change, or we haven’t been devoting it enough attention as designers.
Now don’t get me wrong, I think the light switch is a fabulous invention. However, I don’t think it’s perfect. One of the biggest complaints I have is the lack of any kind of obvious relationship between the switch and the device. A perfect example is my bathroom. I have three switches in a row on an unmarked panel on the wall. These control, in order, the main light, the shower light, and the fan.
If I were to design an interface for turning on devices in a bathroom, this is not how I would do it. If this were an app, the buttons would first of all be labeled with an icon at the very least. You would never see three completely blank and identical buttons in a row in a software interface. To this day I don’t think I’ve ever seen a single labeled light switch on a room. On appliances, yes, but not a room panel.
Secondly, I question the order. It seems to be implicitly grouped by switch type. For instance, the two switches that control the lights are first in the panel. There’s no other conceivable reason to order them this way, and yet the group is not indicated in any fashion (let alone, clearly) on the actual interface. I’m left to infer this and remember it until I can simply form a habit of which switch to press.
The order makes no sense to me. Why group the switches by type, unless the group were clearly indicated? The first button is obviously in the correct location, but it has nothing to do with its type. It has to do with the frequency of use of that button. It is the primary button because it controls the thing in the room that is used most frequently. So frequently, in fact, that if a room could have a default button, that would be it. So why don’t the other buttons on the panel follow this same frequency-of-use pattern? If it did, the fan button would surely come second because, if I’m being modest, it is used for more than just showering, unlike the shower light.
Which in fact, brings me to another point. The shower light and fan are almost always used together. In fact, I get angry when I forget to turn the fan on when I have a shower. A good user interface designer might take note of this and design the interface such turning on the shower light automatically turned on the fan. And heck, if we’re being creative, maybe turning off the shower light kept the fan on for a configurable amount of time.
Come on people, we’re pioneering the 21st century here, let’s start to design our living spaces in the same way we design our apps. Just think of the things we could achieve. And do you think we’d want to go back after that? Let’s just do it now.
So I was thinking about the UI problem where you want to show the most useful objects in a list first, for convenience (think the iOS home screen), based on some algorithm (or sort order, which could be considered a simple algorithm). The problem is there are different metrics that might all be useful, and it’s not entirely obvious where to draw that line. For example, we might show most recently used (MRU), most frequently used (MFU), newest, favorites, etc. Actually favorites is a good one to consider because it is the only point that involves direct user input (marking a favorite). If we analyze that notion a bit, we can see that what we’re really doing is allowing the user to (in a relatively simple manner) indicate via a boolean yes/no flag whether an object is considered “important” to them. Of course how the algorithm interprets that is up to itself.
The iOS home screen does little algorithmic ordering of any kind. Apple’s approach is to leave it up to the user to organize their icons. While this might be an ok solution for a small number of icons, it really becomes unwieldy when there are large numbers of objects to sift through, and I’ve never considered it a true solution to this rather unsolved UI.
However, I came up with an interesting idea that might help in its solution. It’s actually quite a simple idea: Add the notion of a single user-controllable separator to the home screen that represents a boundary between user-ordered objects and OS-ordered objects. Everything to the left of the border would behave exactly as it does now on the home screen, but everything to the right would be sorted either by one metric or a combination of metrics such as newest, MRU and MFU*. Thus, immediately we’d see things like: when you download an app, it now appears at the beginning of your automatic icons, as opposed to the very end of your pages of icons. The icons we care about are going to be right where we put them (this is an important and necessary feature, as anyone who’s worked in a restaurant or with POS’s before knows), but “the rest” get sorted based on what the system makes a reasonable guess as to what you’re likely to want.
If you want to add an icon to the ordered section, you’d of course just drag it in, and it would expand to include the new icon. The separator itself would also be draggable, so if you wanted to add the first five items in the automatic section to the manual section, you could just drag the separator five icons over.
The trick is in making it obvious what the meaning of the separator is.
Today while trying to access Apple’s iOS Developer Portal, I got a message that the service was temporarily down. Or at least that’s what I assumed the very terse message to mean:
That’s fine—I’m not complaining that the site is down; these things happen. The problem is how Apple handles this situation. In particular, rather than returning the message as the response for the requested url, Apple actually redirects you to a static error page (take a look at the url bar in the screenshot).
Now the problem here is that when I’m faced with a “service temporarily unavailable” message, my first instinct is to just keep the page open and occasionally hit the Refresh button to see if it’s up yet. But this won’t work here. As it stands, I’m going to see this static message no matter how many times I refresh the page because that’s actually the page I’m looking at! In fact, the only way for me to properly “try again” is to hit Back on the browser and re-click the link that took me to the error page in the first place, or open up my bookmark again, if I happen to have the page bookmarked. Now neither of these is outrageously more tedious than hitting Refresh, but the point is Refresh is still the simplest and most obvious course of action, and therefore is the more likely action users will take.
Furthermore, there’s no indication to the user (outside of the url) that this is the case. Granted, this is a developer site and its users are likely to be more observant of such things, but that’s not really an excuse to design things wrong in the first place, and I have a feeling if it’s done wrong here, it’s probably done wrong elsewhere as well, including Apple’s consumer-facing pages.
Is this a big deal? Am I going to lose sleep over it? No, of course not, but it is another example of poor UI. Thanks for listening.
Today, a very simple example of a horribly irritating UI that would be so simple to fix. This time, the iPhone “not enough storage” warning:
The problem is that it gives absolutely no indication of how big the app is you’re trying to download, like it’s something they don’t want you to know. The irony is they give you a nice handy link to your storage management settings so you can start deleting content right away, but don’t actually tell us what we need to know in order to do the job! So here we are faced with the task of clearing off data from our phone, but with no freaking clue as to how much we need to get rid of. How is this considered an acceptable user interface? So I got this warning, and I’m dying to try the latest update to Order and Chaos (with two new lands to explore!) and here I am deleting app after app from my phone, trying again, and continually getting this annoying message.
The thing is, I don’t even know if I’m close to enough free space. I’ve deleted pretty much every app that I’ve deemed I probably won’t need any time soon, and I still can’t install the damn update! So I’ve given up, because there’s nothing more I can easily trim from my phone, and here I am with about 5 or 6 apps gone and nothing to show for it. Had I known I still wouldn’t be able to fit the update after deleting 500 megs of apps, I probably would have opted to keep the 500 megs of apps!
And all this trouble just because Apple doesn’t want to tell me how big the file is it’s trying to download. No clue.
Last night I had the strangest dream. Normally I wouldn’t post my dreams to a blog about UI, but this was just so bizarre I had to share it.
It started with a mass exodus of humanity. Scientists had somehow discerned a great astronomical catastrophe was to occur on April 24th, 2013. As far as we could tell, they didn’t know what exactly would happen, except that it would be big, and many took it to mean the end of life on Earth. Humanity was divided among the hopeful and the despondent. There was rioting and looting and mass suicides. But there were a few people still holding on to the last few moments of their insignificant lives with either dignity or fear. These people (there were only about a hundred in our group) were making their way to trains that were already departing for the countdown was on. Where people were going I don’t know, presumably to some last hope shelter in case there was the slightest chance we might survive. But then things got weird.
The trains took us to the ruins of a large abandoned concrete complex, open to the sky and covered in graffiti. It would seem the plan was less to try to save ourselves than to escape the chaos of the city for a more peaceful and civilized oblivion among our friends and loved ones. My mother was there, drinking fresh water out of a spring flowing through a hole in a broken wall. There were many people there, filling cups and bottles full of this water, which was the purest coldest water I’d tasted.
It was night, and the sky was clear. I looked up through the ruins of the building around me to watch the final show.
The heavens ignited. Waves of light rippled across the sky. Strangely I thought to pull out my iPhone and snap a picture. People remarked on how beautiful it was. Then it faded and we were all still there. Things seemed somehow more peaceful and quiet. People were quietly talking among themselves, presumably wondering why they were still there, when I looked up and noticed that the heavens had completely rearranged themselves.
Get this. The stars in and around what had previously been the constellation Orion had completely rearranged themselves to spell, in English, the words “NO APR 24 THIS YEAR”. It was written in stars.
I pointed it out to people around me, who all of course rushed to get a better view and to try and make something of it. Someone had apparently brought a telescope with them and yelled out something like “there’s more.” I rushed over to take a look, along with everyone else, obviously keen to see. It appeared there was some kind of picture, beneath the writing (also in stars, of course) of a spiral staircase with a door opening at the top of it.
Things got even weirder at this point. Suddenly there was a giant spiral staircase in the room. Had it been there the whole time? I couldn’t recall. I vividly recall the staircase. It was very large, and made of solid wood painted a glossy white. It appeared very old, but not damaged at all. It was solid, in that there were no holes between the steps, and it spiraled up to what appeared to just be a wall at the top, also of white painted wood. I started to climb the staircase, with everyone else following behind me. When I got to the top, I half pushed, half banged on the wall at the top when suddenly it opened from the inside.
Inside stood a giant man (think the protohumans in Prometheus, but his features were human) crouched over with the door in his hand. He had short blond hair and was dressed in a white shirt and white shorts. In fact everything in the room was white and glowed with a bright light. His movements were slow, presumably because of his size, but were perfectly fluid and human. There was also a woman there, not hiding exactly, but around the corner, not wanting to interfere. The man said his name was David, and reached out his hand in greeting.
I shook his hand… and woke up.
Last night I was cooking some pasta on the stove. I usually set a timer on my microwave when I throw the pasta in so I have a rough idea for when to take it off the stove. I’ve done this many times before, but last night something went wrong… with UI! So how, you might be asking yourself, could I possible have screwed up setting a timer on my microwave? Did I accidentally forget to hit the timer button and end up nuking air for five minutes? No, no, nothing like that. Here’s what happened:
On my microwave, a Panasonic “Genius” (how ironic, just like my “Smart” TV), the Timer button has multiple functions. As in not just more than one, but at least four. That’s way too many functions for one button to start with, but allow me to illustrate what happened. I was aware going into things that the Timer button was also the Clock set button. If you press it once, you can set a timer. If you press it twice, you’re now setting the clock. What happened was I accidentally hit the button twice and put it in clock set mode. Realizing this, I wanted to get back to timer mode (quickly, after all, my pasta is cooking as we speak!) so I pressed the button again, thinking (like any sane UI) it would cycle back to the initial function. The problem is, and what I was unaware of at the time, was that the button is coded such that pressing it four times in succession activates DEMO MODE.
The problem is, when the thing is in demo mode nothing works. Because it’s the mode you set the microwave to when it’s on the store shelf. Trying to cook something just turns the light and fan on, but doesn’t actually radiate anything. Even worse, the timer goes at something like 4X actual speed, for whatever ridiculous reason (because people trying out a microwave in a store can’t just set the timer to 5 seconds to demo it I guess). It also turns out that it’s a bitch to get out of demo mode. I mean, that last part actually makes sense. If only it weren’t so easy to accidentally get it stuck in demo mode in the first place!
I actually had to resort to reading the manual in order to get my microwave functional again. Feel how you will, but I consider that any time I am forced to actually read a book in order to figure out how to use a product, that’s a UI fail.