The sins of our UIs
If you can’t explain it to a 70-year-old, you‘ve got work to do.
There are a few things about UIs that I have come to appreciate (and strongly dislike) through various means.
The first is through my own experience in what I’ll call “visual dissonance” (the technical term may not directly apply here). Attention to detail is crucial, and when the visuals/actions I expect to see are not there, it really bothers me.
Second, have you ever tried to explain iOS to a pair of lovely 70-something grandparents? If you do, you’ll realize things that you never noticed before.
#1 — Spotify, and the lack of desktop to web to mobile symmetry
Preface: I’m happy to report that in the time between writing this and finally hitting publish, Spotify has rectified the main thing that disturbed me so much about using it. Well done, Spotify!
The primary thing that bothers me about Spotify is the lack of symmetry between the mobile app, web app, and desktop app. And it falls around one primary thing — the action menu is not the same between the three.
For whatever reason, this throws me for a loop. I seemed to have trouble grasping that the menu item would have the exact same action, because it didn’t look the same! You’ll see below that between the three platforms, the action to place a song to play next is not the same between the three.
On mobile, it says “Add to Up Next,” desktop says “Add to Queue,” and web says “Add to Play Queue.” Uh…
You can also see that other menu items that do the same thing read and appear differently (radio, add to playlist among them).
#2 — iOS, and the missing back button
Preface: My very talented mobile developer friend informs me that the reason this happens is because the new message is a pop up modal. I get that. It’s probably even technically proper to do that.
Do you think a 70-something gets that? Should they be forced to get that? Should any user have to remember a circumstance that breaks from the pattern of the remainder of their user experience? You decide.
Consistency to me is important, and critical when explaining something complex to someone unfamiliar with it. One of the trustworthy ones I relied upon was the top left as a back arrow, and top right as an action area.
Generally speaking, this is a rule that exists in a lot of place (browser, Facebook, email, Messages, not Music anymore (much to my chagrin), …). However, this breaks down in one critical area — new message composition.
In other user flows of what I’ll generically coin “creating objects,” such as email and contacts, when a user generates a new item, the word “Cancel” appears in the top left. By tapping, the user returns to the previous area they were.
However, what happens when creating a new message? The word “Cancel” appears in the top right instead! The user has to remember that in order to go back from creating a new message (and only a new message), they need to go to the top right to take the action, rather than the top left.
#3 — iOS, and the missing swipe to delete function
Again, let’s think about a user engaging with analogous situations, visual appearances and activities that look similar and in theory should behave the same. In this case, let’s compare Messages, email, and contacts.
In Messages and email, swiping to the left brings up a “Delete” option (note: In email this is customizable). However, what happens if we try to do the same in Contacts?
Answer: nothing. Nothing happens.
And as most of us probably know, the way to delete contacts is to (I can’t believe I’m about to say this, and I actually looked it up just now to make sure I wasn’t absolutely bonkers, good news, I’m not) open the contact, click “Edit” on the top right, scroll to the bottom, and then click “Delete Contact.”
I think this really bothers me because it is so different from the delete function elsewhere. Not only is it not straightforward, the other delete options usually do not prompt you to be sure you want to delete (the action happens on the first click), and this one does.
#4— Honorable mention for future exploration
- Spotify and their varying colors between web and desktop
- Evernote and their varying colors between web and desktop
- Spotify and their varied menu structure
- iOS Music/iTunes and their varied menu structure
- Apple ID setup and the phone number entry being broken up oddly (country, area code, and 7 digit number, if I recall correctly)
- iOS Music/iTunes and the missing three dots
