It’s easy to tell if an app sucks when there are issues with its basic functionality. If it crashes all the time, or causes the phone to freeze, or just doesn’t respond to certain functions, that’s a pretty obvious problem and we all know how to inform the developers of those issues in the app store reviews. However, there are lots of really poor design decisions that are common-place in today’s smartphone apps. For some reason, people don’t care as much about these obvious flaws that should be common sense, but have somehow become acceptable. Perhaps Paul Rand put it best:
“The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring.”
1. Button Placement
The best placement of interactive buttons for a smartphone would be the spot right under your thumb when you’re holding the phone with one hand. One handed usability is a very important part of mobile phones since when you’re mobile, your hands are often needed for multiple tasks. Don’t believe me? Try writing a text message or email while carrying a briefcase or some luggage at the airport. Oddly, most popular mobile app designers don’t understand this or choose to ignore it for some reason.
The lower part of your phone’s screen is the best place for buttons to live. The upper half of your smartphone’s screen is the best place for displaying information.
Think about it, if you have to reach for a button at the top of the screen, your hand is going to cover and block the visibility of almost everything else on your screen. Not to mention, stretching your hand such long distances is very cumbersome and significantly reduces efficiency and usability. It’s kind of obvious that placing buttons at the top of the screen is one of the worst things you can do when it comes to mobile app interface design.
Why does everyone do it then? My guess is that these UI developers are probably used to making interface designs for web pages or other desktop applications. You’re required to use a desktop PC to develop mobile applications after all and those do not have the same issues as smartphones. For example, you don’t have to hold your desktop with one hand while trying to press buttons on the screen with that same hand. Desktops have little arrow pointers on the screen that you move around with a completely separate little plastic thing that never blocks what you’re looking at and usually you want the most important functions at the top since that’s where your eye goes first. It’s too bad very few developers realize that mobile apps require a different approach if you want to increase one-handed usability.
2. Mystery meat navigation
Have you ever seen some food in a cafeteria or buffet line and had no idea what it was? What kind of meat is that? What’s in there? You have no idea! Are you going to buy it without reading even one or two words describing what it might be? Probably not. Yet, mobile app designers are always using mystery meat icons for buttons and navigation.
Do you have any idea what these buttons mean? There’s no way to figure it out in the apps they came from either (unless you know about holding your finger on a button to show the tooltip in Android).
As humans, we were able to solve this problem a long time ago. Instead of everyone just making up symbols that nobody understands, we have tried to standardize on a specific series of symbols called “letters”. Then when we arrange those letters into specific sequences, they form words that can be understood both visually and verbally. After we developed this method, we taught it to everybody at a very young age, so that communication would be much simpler.
If you’re going to use hieroglyphics that nobody can understand, label them with words that we do understand!
If you speak English, I bet you can understand everything on this screen. Even the “…” is an ellipsis; a standard English punctuation mark.
Windows Phone 7 was practically entirely designed with native human languages in mind. All of the buttons and functions were recognizable with words. Today, many Windows Phone 8.1 apps are degrading to a more-confusing, less-user-friendly, icon-based interface.
The other day, I had to explain to a friend that the button with three sperm swiming around in a circle was the “share” button.
3. Introductory Tutorials
Have you ever told a joke and nobody laughed so you tried to teach them about why the joke was funny? If so, that joke sucked. It’s the same thing when developers try to teach users what their badly designed interface buttons mean by pouring them into a tutorial.
If you have to explain vague icons and undiscoverable gestures, your app sucks.
4. Buttons that look like unicorns
Beware, the unicorn button!
If you really want to spit in the faces of your users, you can take the “mystery meat” buttons concept to the next level and create buttons that look like mythical creatures that have no relevance to your app whatsoever. This unicorn button is actually from the Swarm app’s “Check in” screen which says “What are you up to?” in the check-in field. Nowhere is there any indication of what the unicorn button does and it is surrounded by equally vague and irrelevant icons such as a flaming tear drop, coffee mug, and a Nintendo GameBoy from the 1980s.
What the button actually does is add a unicorn icon to your profile picture along with a little rainbow. I have no idea what this communicates or why anyone would want to do that. It makes no sense at all.
5. The same button doing different things in the same app at the same time.
Going back to the mystery meat analogy. Imagine there were two separate containers of some sort of food and they both looked exactly the same and sat right next to each other, but both tasted completely different. How would you know which is which?
That’s how I feel when I look at the Gmail app on Android. You’ve got two buttons with 3 vertical dots on them and sometimes they’re right next to each other, but this cryptic icon doesn’t mean anything in so far as my native language is concerned. How would anyone be able to understand which button does what and why do they both look the same?
In the cafeteria, the simple solution would be to label each tray of food with a couple of words describing it. That way people who understand words and language would be able to understand what that food is. So for example, we would label the tray on the left “Elephant poop” and the one on the right would be “Chocolate pudding”. Makes sense, right? Too bad Google doesn’t understand that.
6. Splash screens
Back when the internet was young around the turn of the century, web designers were really big on splash screens. These were basically big logos or icons that showed up when you first visited a site and then there was an “enter here” button that linked you to the website’s actual content or it automatically forwarded to the real site after a period of time. Everybody agreed that these were stupid and were just getting in the way of allowing users to get to the content they actually wanted.
Today, we see a resurgence of the useless splash screens in mobile apps. They seem to be most prevalent on Windows Phone and Windows 8 and generally don’t show anything other than a white icon on a solid color background. Windows Phone used to use an animation of content to show that a new app was loading. When you tapped the People hub tile on your start screen, a large “People” word would float into the screen followed by all of the other words and images that made up the app. That made sense. This cryptic icon on a solid red background makes no sense.
7. Resuming or Loading screens
Speaking of useless splash screens, let’s talk about “resuming” or “loading” screens. Ideally, all software systems would display the results of a command to a user instantly, however that’s not always possible. Any user interface designer worth his salt would know that the best way to deal with a command that’s going to take more than half a second to complete is to show the user how long it will take to complete. That sounds like something that should be common sense, right? Software has always had progress bars. They are very important for communicating that something is happening and it’s going to take this long to finish. Even DOS programs from 30 years ago do this. If I’ve waited for 1 minute and the progress bar says 50% finished, that means I probably have to wait for another minute. I can understand that!
Unfortunately, designers these days have started dropping this important aspect of human-computer-interaction. Progress is rarely communicated anymore. All you get now is a word that says “Loading” and then you just have to wait for an unspecified amount of time. That’s not user-friendly at all. Sure there are still some kind of progress animations that indicate something is happening, but none of the spinning balls or creeping dots actually tell me how long it will take. I’ve had a screen sitting on the “resuming” animation for so long that my phone’s screen timed-out and it shut off! *cough*Skype*cough*
8. Landscape mode
Does your app rotate to give you a wider view of the content in landscape mode? If not, your app sucks. It’s kind of silly that the support for landscape mode rotation in mobile apps these days is so terribly inconsistent. Back in 2005 when Windows Mobile added landscape support for smartphones with Qwerty side-slide-out keyboards, all of the apps worked right away with the new screen layout. Today, the majority of smartphone apps don’t adjust so easily. You’re lucky to get landscape support in text fields!
If Landscape mode is supported in any of your mobile apps, then it should be supported in ALL of them.
Turn your phone 90 degrees.
Conclusion
The principles of good application design having seemingly gone to the dogs when it comes to a good majority of the popular apps and mobile operating systems out there. Is smart efficiency, usability and intuitiveness no longer important to smartphone users? Or are we just conditioned to prefer bad design?