Mobile First & Declining Usability

Mobile App Design is Fashion

Mobile app design moves very quickly, and with “mobile-first” thinking becoming the mantra of designers of all kinds, it is a leading indicator for design of just about everything else. So, I think it’s important to take a step back and analyze how apps are designed today. In this I break down the most recent mobile app design trends that I believe are actually hurting us, and making our software worse.

The way mobile app designs is very much a fashion-of-the-week type of situation where the target changes on a nearly daily basis. What was cool a month ago is stale in comparison to today, I use the term “fashion” to generally describe this reality. Before we dig in to the specifics of modern app design, let’s talk a little about fashion itself.

Fashion is irrelevant

I recently found myself reading an essay by Milton Glaser, one of the world’s most celebrated designers. In the essay he talks about “The Bull” by Pablo Picasso. In the work, Picasso renders 11 different variations of a bull each in differing styles. The work ranges from the realistic rendering, to a cartoon rendering, then to a more abstract cubist rendering, and finally simple line art.

Picasso: The Bull

As Glaser puts it, “What is clear just from looking at this single print is that style is irrelevant. In every one of these cases, from extreme abstraction to acute naturalism they are extraordinary regardless of the style.” – Ten things I have learned, Milton Glaser

I thought this line of thinking was very interesting. Glaser makes the point that “Style is not to be trusted”. Or another way to think about that, is that style is fashion, and it comes and goes with the tide. In demonstrating that the style of the work is actually irrelevant to it’s quality, we could draw the conclusion that style in ap design (the aesthetic) is also irrelevant, except for one small problem…

Fashion is of utmost importance

Back in the early days of smartphones the designers at Apple had a clear design goal: Familiarize people with touchscreens. So the style was glossy buttons with shadows, and controls that seem like they want to be touched. If there was a real-world analogue that could be used to symbolically represent a 3D interactive object, they would use it. This is known as skeuomorphism in the design communities, and I won’t rehash why everyone decided they hate it in the past few years here. What I will say however is that there was value in those old ugly interfaces. What we were able to do with skeuomorphism is train users to use our apps with visual language. The best example I can think of from those days is the picker view (called a UIPickerViewController in programmer speak).

UIPickerViewController

Nothing about the design of the picker view makes much sense, really. The only thing it does well is it looks like a spinning wheel, which encourages you to spin it like a contestant on The Price is Right. It’s kind of fun, in fact. But, this interface actually kind of sucks to use. You can only see about 4 or 5 options at any given time, and selecting a specific option requires a fine-tuning sort of interaction where you slowly and carefully align a value with the center of the view. A much simpler approach would be to just put options in a big fullscreen list; which is actually what Apple ended up using more often in their own apps. (Also known as a UITableViewController.)

UITableViewController

While these types of interfaces have many drawbacks, I have to wonder if my elderly friends, or my infant nephews would have been able to use smart devices so readily where they not using these metaphors for reality. Would smartphones have become as successful as they are now without skeuomorphism?

It wasn’t just this picker either, skeuomorphism informed the iBooks interface, designed to look like an actual bookshelf:

iBooks

It inspired the Calendar interface, to look like an actual calendar:

Calendar

And just for fun: Designer Meng To posted this skeuomorphic version of Facebook that looks like an actual book. on dribble.com

Facebook by Meng To

2016

Fast-forwarding to 2016, we have completely abandoned the idea that people don’t know what to do with touchscreens. I think we actually have gone too far. Have you ever tried to use Snapchat? It’s like they have made it intentionally confusing to use. Everything is hidden using gestures and invisible buttons you are supposed to know to tap and hold, and weird things like that. Some of the apps most interesting features are completely hidden from view.

There was a lot of positive reactions to the app Clear from a few years ago. It was a huge hit because of it’s unique UI animations. But here’s my question: How many of those downloads translated in to regular users? I don’t want to sit here and hate on the Clear app because I think it was a brilliant design in terms of being unique and fashionable. What it was not however, is usable.

Clear

Okay, so I swipe to the right to finish a task… Oops wrong one, how do I undo that? Do I just re-add it? Wait, how do I add a task again? Oh, I take two fingers and separate two existing tasks, and that makes a new one appear in between my existing ones? That’s odd… what if I don’t have two tasks? Do I just sort of “unpinch” the negative space where my tasks would be if I had two?

Yep.

That’s exactly what you’re supposed to do, and that sucks…

To clear a task swipe to the left, to finish a task swipe to the right. Wait, what’s the difference? I’ve cleared some of my tasks, but deleted others. Either way they get removed from my list…

If you go look at the app store reviews for Clear, you’ll see a lot of people complaining about the same thing, and I can’t even fully explain it to you because I don’t understand it either. But apparently if you perform a swipe gesture up (or down?) it will delete the entire list. How’s that for a fun and wacky gesture! So fun! You just lost your entire task list, which is the entire point of the app! That dismiss animation was sick though, so the app must be great, right?

Clear Reviews

The tutorial for Clear says I should “Pinch together vertically” to collapse my current level and navigate up. So instead of tapping a back button to navigate up, I have to perform a two-handed unpinch gesture for that too? I thought that was the gesture for creating a new task? HOW DO I USE THIS APP I DONT UNDERSTAND!? ARGGGH!!

deletes app…

Fashion sucks

As disappointing as it is, this seems to be the new fashion in apps: I summarize it basically as intentionally terrible user experience. I was talking to a prospect recently about an iOS App we were planning to help them build. They showed me a mockup that involved quite a few hidden buttons and gestures to control the UI. I carefully explained that users were unlikely to find these gestures and that we should move these things in to buttons that are more obvious. As a compromise, we needed at least a quick tutorial to show them these features. The response I received was surprising, to say the least:

We want this to be a secret

If we were designing a video game level this would maybe make some sense. It’s typical to “hide” some areas of play so that it’s rewarding when they are discovered. This is basically what they were going for. But for a mobile app, this is just a poor UI decision that is going to leave people confused. This wasn’t some kind of special easter egg hidden feature. This was basic functionality for switching to a friends list in the app.

You want to hide the friends list from users? This kind of thinking is now fashionable. Whether we like it or not, fashion influences the way we write software. As someone who is going to spend hours of my life building out these features, I hate the idea that most users simply will never find them. That’s why I declined that particular project. I left money on the table, but saved myself from spending time on work I didn’t find meaningful.

It’s our responsibility to fix it

I could sit around critiquing popular app’s designs all day (and I might), but this post wouldn’t be much use to anyone if that was all I did. So, let’s talk solutions…

1. Recognize that you can fix things

First, I think it’s important to accept that application developers have the final say in what their work ends up producing. You may think the decisions are simply made by your client, your boss, your partner, or your dog. Blame who you want, but your apps are the output of your efforts. If you are being boxed in to a corner and being asked to do something that sucks, you should stand up against it. You should learn to say “no” more often. At the end of the day, if you deliver what you think is best to solve the problem at hand, and you do your best work, no-one can complain about that. If they do, then they’re probably not worth working with anyway.

2. Do hallway testing

Hallway testing is the kind of testing you do when you grab some random person “out of the hallway” to test your app. You may have NDAs or similar agreements that make this a challenge, which is why it’s important to make sure agreements like this permit hallway testing. You may not be able to place an ad and have dozens of testers come to your office, but you can at least get family member or friend to try things out.

There are two very important aspects to hallway testing that are required for it to work. The first is that you absolutely can not explain things to the user while testing. It will be your first reaction to want to explain away any rough edges, defend your work, or try to help move things along to avoid embarrassment. This no longer represents a real hallway test though, this represents what it would be like if every user of your app was accompanied by you with your explanation, which obviously is not happening.

The second thing you must do is take notes of any stumbles. If you watch a user struggle with a component of your app for several minutes, and then finally figure it out, you could very easily write it off and say “oh well, they eventually figured that out so it’s not a priority”. WRONG! Your testers will have infinitely more patience than real-world users. If a tester is struggling, you need to make a note of it. Make several notes in fact, you’re going to forget if you don’t, and then those issues won’t be addressed.

3. Don’t hide anything inside of non-obvious gestures

If you are making a feature that involves swiping, pinching, or any other gesture, you should make sure it actually is intuitive to do so. For example, panning on a map (like an Apple Map) is very intuitive… it’s obvious that you would want to scroll the view and it’s obvious how you would go about doing that.

You’ll have to use your judgement on this one, but one way to confirm that your gestures are clear is by doing hallway testing, as mentioned above. You can trust your instinct with this stuff, but you also need to confirm you were right. Often something that seems intuitive to you will not be obvious to your testers.

4. Don’t be clever

There’s a famous quote often cited in software development projects.

Everyone knows that debugging is twice as hard as writing a program in the first place.
So if you’re as clever as you can be when you write it, how will you ever debug it?
“The Elements of Programming Style”, 2nd edition, Chapter 2

The same thing applies to user interface design. If it was a really clever idea, you should always be wary. Often the dead-simple obvious solution is the best one. This is basically just Occam’s Razor restated, which is often quoted for a reason: it’s true.

5. You tell me

What are the other takeaways here? How do you make sure your apps are highly usable? Tell me in the comments or on Twitter.

P.S. As an interesting side note, “The Bull” is also reportedly the subject of Apple’s training materials on their design thinking, for entirely different reasons.


Sign up now and get a set of FREE video tutorials on writing iOS apps coming soon.

Subscribe via RSS

The next big thing is already available in your local toy aisle

I had this realization long ago that all new technologies seem to first surface as a lower-key version that exists mostly as a toy.
If you think about the great innovations of our recent history, you may think of things like the internet, computers, or smart phones. But, before you could buy an iPad, you could buy touchscreen toys made for kids. Sure, they were low resolution and didn’t have very sophisticated software, but it was still a portable computer with a touchscreen OS running various apps.

The personal computer itself was an innovation that sprung forth from the ashes of the Atari 2600 and Commodore 64, and those were just an evolution of pong. So in the beginning, the entire reason for the technology revolution, the modern personal computer, was born as a game.

I’m not saying that the invention of pong is what enabled the computer revolution to happen. I think it would’ve happened regardless. But what’s interesting is that this great technology we have today gave us a hint that it was coming with the growth of digital arcade games in the late 70s. Apple was releasing the first personal computers right around this time. Most people didn’t know what a computer was needed for. However, everyone seemed to know what the arcades were for. Gaming is fun! There was a ton of exposure to computer technology through digital arcades.

So when you’re sitting around thinking about what’s on the horizon in the technology field, consider looking at the new high-tech toys first. They may shed a shimmer of light on what someone else somewhere is using that same technology for.

Browsing amazon, I can quickly find a few toys that may be hinting at greater things to come:
Sifteo Cubes Intelligent Game System
Sphero iOS and Android controlled ball with 20+ Apps for gameplay

I leave you with this snippet from Paul Graham’s post about ideation:

“Just as trying to think up startup ideas tends to produce bad ones, working on things that could be dismissed as “toys” often produces good ones. When something is described as a toy, that means it has everything an idea needs except being important. It’s cool; users love it; it just doesn’t matter. But if you’re living in the future and you build something cool that users love, it may matter more than outsiders think. Microcomputers seemed like toys when Apple and Microsoft started working on them. I’m old enough to remember that era; the usual term for people with their own microcomputers was “hobbyists.” BackRub seemed like an inconsequential science project. The Facebook was just a way for undergrads to stalk one another.”
http://www.paulgraham.com/startupideas.html


Sign up now and get a set of FREE video tutorials on writing iOS apps coming soon.

Subscribe via RSS

Designing mobile apps for children

Mobile apps designed for children are becoming very popular as a result of the intuitive design of the iOS and Android touch screen operating systems. Never before has software been so accessible for pre schoolers, and elementary school students. However, there are some things that you should take careful consideration of when designing apps for this audience.

I want to share with you all a great resource put out by Sesame Street Workshop that details the best practices, and problems that crop in designing for children. You can find the original PDF by Sesame Street at the end of this post. I will summarize a few points here that I felt were important to discuss in the success of a children’s app.


Using Familiar Faces

The document points to using familiar faces to “guide” children to what it is they need to do. The guides are instructors, teaching the child to use the app in real time through audio narration. The use of familiar characters creates a stronger bond between the child and the app, and leads to increased comprehension of what to do.

It’s easy for Sesame Street to make use of familiar faces, they have a host of great characters to choose from. But, you don’t need to be a big company with lots of popular characters to present familiar faces to your audience. It’s not hard to find familiar faces in the world of public domain. Many of Disney’s best hits are based on public domain. Some examples include Aladdin, Beauty and the Beast, Snow White, and many other famous stories with characters we see time and again. It’s also very popular to hook in to famous cultural or mythological figures such as Hercules, Zeus, or even Saint Nicholas.

Experience Design

Start of with instructions from a voice over, and try to avoid text. Ultimately you want to assume that the child can not read, so make use of video and audio indicators of how to proceed in the app. If you are quizzing the user on some content, or presenting a game, you should be careful to not be too negative when wrong answer selections occur. You want to be motivating the child and give them hints as they continue to answer. Finally you want the app to proceed without a correct answer by simply instructing them exactly what they need to do.

It’s also important to children that they know they did the right thing. Go nuts with the rewards, maybe even as crazy as those guys over at Peggle. Seriously, these are some dramatic “Yeah! you did it!” effects and music here. There is nothing wrong with being extremely over the top with rewards in any app, and especially in a children’s app. Great in-game rewards is motivating and exciting.

Interactivity

The most intuitive input gesture for children is a simple tap. However, typically children rest their arms or hands on the edges of the screen. So, it is important to allow for taps to occur, even when they are touching other components of the screen. I would suggest creating “dead zones” where touches will be ignored around the bottom of the screen. Focus touch interactions for the top half of the iPad, and toward the center.

Children have trouble with most complicated gestures, such as “flicking” objects around the screen with momentum, using tilt or shake controls, double tapping, and anything involving multi-touch. Ideally you want to focus on the most intuitive input mechanisms, which is the tap, drawing, or dragging of objects around. Be careful with dragging though, children tend to lift their finger as they drag around the screen. For this reason it’s important to implement a dragging routine that allows for hiccups along the path where the user may lift their finger for a moment during a drag.

Visual Cues

It is important to provide visual clues for any goals in the app, at any given time. Touchable objects should be highlighted or glow, and actions should be delineated with a path or animation of what gestures to use. If a child should drag a character or object along a path, you could create an animation of the path while highlighting the object that needs to be moved to make it clear what they are to do.

Intentionality

Keep in mind that children will accidentally press on lower parts of the screen. So, when implementing features that make major changes to the state of the app, for example quitting, saving photos, and especially any social features, you want to take special care to make sure these actions can not be accidentally done by the child. Usually these interactions are going to be performed by a parents. This is a good opportunity to take advantage of the fact that children are not very good with certain types of gestures.

One way to do this is to have the parent’s controls be hidden away in a menu that requires a multi-touch gesture to open. For example, you could have a menu on the right side of the screen that can be dragged out on to the screen to be made visible, and then a ‘slide to unlock’ display could be used that times out if the gesture is not completed within a few seconds.

So there you have it, my thoughts on this great report by Sesame Street. I hope all of you out there working on children’s apps can make something a little better as a result of this information being available. If you need some help with your app, this kind of thing is right up my alley and I am available for hire, so get in touch!

Original PDF from Sesame Street:
Sesame Street – Best Practices: Designing Touch Tablet Experiences for Preschoolers

 


Sign up now and get a set of FREE video tutorials on writing iOS apps coming soon.

Subscribe via RSS