Friday App Design Review – eHarmony
Every Friday I will post a detailed design review of an iOS app. If you’d like your app to be considered click here for more information. I am also available to consult privately on your projects.
About eHarmony
This week’s design review is of the eHarmony iPhone app, by the online dating service of the same name. From eHarmony’s description of itself:
Santa Monica-based eHarmony launched in the United States in 2000 and is now the #1 Trusted Relationship Services Provider in the USA. eHarmony’s patented Compatibility Matching System® allows eHarmony members to be matched with compatible persons with whom they are likely to enjoy a long-term relationship.
eHarmony faces fresh competition from companies like OK Cupid and Tinder. Tinder’s app in particular is much more casual and fun than the eHarmony app. But that doesn’t mean that Tinder’s dating recommendations are better. The typical eHarmony customer is looking for a potentially serious, long-term relationship. eHarmony has to figure out how to appeal to a younger crowd without undermining the personality questionnaire that is both a chore and the secret ingredient to eHarmony’s superior recommendations.
Chris Truman, an iOS engineer at eHarmony, bravely submitted their app for a Friday App Design Review. I like his attitude:
I think a high profile app like eHarmony would be a great example of how older companies can still have a clean and focused mobile product.
TL/DR
The eHarmony iPhone app is huge. It feels like three or four apps crammed into one. It was hard for me to decide where I should focus this review. If there’s a theme to my critique, it’s ruthlessly eliminate confusion. I have three general recommendations:
App Walkthrough
For those unfamiliar with the eHarmony app, what follows is a brief description of the way it works.
Upon first launch the user is guided through a lengthy questionnaire. There are dozens of questions, presented one at a time in a full-screen view:
Two of many question screens.
Questions are interspersed with section dividers that help break up the monotony of the questions and encourage the user to keep going:
Interstitial screen between sections.
The questionnaire is the mission-critical component of eHarmony’s recommendation engine. The more honestly and thoroughly a user answers these questions, the more compatible her suggested matches will be.
Imagine how difficult a design challenge this must be. In order for your customers to have a happy experience, you must first compel them to take a tedious and potentially embarrassing test. Their long-term satisfaction with your service depends upon the quality of their answers, so there’s a limit to how much sugar you can pile on that pill.
After the completion of the questionnaire, the user is shown what is the eHarmony app proper:
The app proper, with basement menu.
There are many screens in the app – My Profile, Activity, Matches, etc. – all accessible from a super-imposed basement menu that can only be invoked by tapping the hamburger button in the top left corner.
I. Reduce Visual Clutter
Unfortunately, I’m going to have to get a little harsh. In all of the screens of the app, there is simply too much visual activity. There are decorative views and calls-to-action all over the place. The basement menu alone has a banner, a button, a badge, a ribbon, and a progress indicator (see above).
All of these elements might be important, but they can’t be equally important. Some of them must be sacrificed for the sake of the greater good. Strip away at least half of the supplementary elements. It might be painful for the designer, but it will make the app easier for first-time users.
The visual language needs to be consolidated. The current aesthetic is what I call Tower of Babel Design. The app is equal parts flat colors, linen textures, and granite backgrounds. Notice the disorienting mix of iOS 7 and iOS 6 styles in the basement menu screenshot above. An app can’t have two masters. It’s gotta serve somebody, Ive or Forstall.
I think the blurred background of the basement menu is not helpful for either aesthetic. It unnecessarily increases the density of visual information in an area of the app that already has a dense population. I’d love to know what the rationale was for using it. As an unforgiving outsider, it looks like someone was groping for a shortcut to an iOS 7 redesign.
Pick a few constraints – a color palette, a font, a texture or a lack thereof – and enforce them ruthlessly. This has the added benefit of speeding up future design and development iterations. It’s hard to overstate how helpful constraints can be.
Aside from making the app more visually appealing, reducing visual clutter communicates an important message to the user: we care. A spotless, well-stocked bathroom makes you trust your favorite restaurant. In the same way, a tidy aesthetic creates confidence in an app’s capabilities.
II. ABO: Always Be On-Boarding.
When I finished the questionnaire, I felt like I emerged from a long tunnel only to be abandoned in the middle of a vast, complicated app. I was still a newcomer without any idea of where I should go next.
Take a cue from video games. Well-designed contemporary games weave tutorial content seamlessly into the progression of the story. Take a look at Portal 2 for an excellent example.
Portal 2.
Here’s a transcript of my favorite part (paraphrased):
Your character has been in suspended animation for very long time.
WHEATLEY
Let’s make sure you don’t have any brain damage. Now say “Apple.”
TUTORIAL
Press ‘A’ to Say ‘Apple’.
Your character jumps.
WHEATLEY
Umm… Let’s try that again.
TUTORIAL
Press ‘A’ to Say ‘Apple’.
Your character jumps again.
WHEATLEY
Okay, what you’re doing is jumping. You just jumped. Let’s just move on.
That scene elevates what would have been an otherwise frustrating moment of accidental discovery into a hilarious guided tour. The game progresses in a similar fashion, using ambient voice overs and character interactions to subtly teach the gamer basic skills. The next objective is always clear, and the gamer learns new skills without feeling lost or bored.
In eHarmony, when the questionnaire is over, the user lands on the Activity screen with the basement menu waiting in the wings. There are many competing calls-to-action without an obvious order or hierarchy. A better approach would continue to guide the user through the various features of the app. Limit the calls-to-action to just one at a time. Start with the easy stuff, and then get more complex.
One has to be careful when implementing in-app tutorials. It’s easy to over do it. For an example of what not to do, look at this mess that Apple shipped with iPhoto for iPad:
iPhoto for iPad, Version 1.
One of the reasons that iPhoto’s tutorial sucks is that the app launches with every available feature fully unlocked and exposed. It’s too much for the user to take in all at once. If only one or two key features were available at first, those seventeen(!) popovers could be reduced to a handful.
eHarmony has a similar amount of feature complexity. There are ten screens to choose from in the basement menu, and each screen has its own subcategories and sections. It’s difficult to figure out which, if any, is the main screen of the app.
Again, a solution could be to take a cue from video game design. Character abilities are rarely available all at once. They are unlocked as the gamer progresses through an in-game tutorial. New abilities are announced with little moments of fanfare, creating a sense of accomplishment and expertise.
eHarmony could stagger the unveiling of “new” features across multiple launches, perhaps even multiple days. Begin with only one or two essential features, like the Matches screen and the user’s profile. Guide the user through a combination of fun prompts and limited functionality. Even if the user ignores the prompts, she’ll have fewer corners to get lost in. First time users don’t need to see screens like Datebook or eH Advice.
Choose a layout that lends itself to this kind of staggered approach. A basement menu is just one possibility among others. However the app is laid out, bear in mind that newly-unlocked features might not be discoverable if they’re buried in an offscreen menu.
III. Make Messaging the Centerpiece
It should go without saying that a typical eHarmony user is looking for companionship. Whether he or she wants a serious or lighthearted relationship, eHarmony’s private messaging feature is the shortest path for the user to feel less alone when interacting with the app. This feature is difficult to find in the current version of the app.
I’ve had a test account1 for the last two weeks. A few days after I set it up, I received a private message from another (anonymous) user. I learned about this interaction via an automated email. But when I launched the eHarmony iPhone app to respond to the message, it took me several tries to find it. I finally found it buried at the bottom of a long list of generic Activity updates (so-and-so updated her profile, etc.).
Activity screen, way at the bottom.
Tapping the message summary at the bottom takes me to this screen:
Profile / Messaging Screen.
Can you spot where I’m supposed to tap to respond to her questions? I can tap either the tiny green bar that looks like a section header, or the green chat bubble in the toolbar.
The iconography in that toolbar needs work. Why are there two messaging icons? Is one public and one private? Why is the chat bubble green? Tapping the chat bubble shows another screen. The green highlight is a misuse of the visual language of a UITabBar. It has a selected appearance when it isn’t actually selectable. It’s a button. For several minutes I assumed that I was already viewing that tab, until I tried tapping one of the other items, triggering an unexpected push transition.
But let’s not get lost in the weeds of these minor quibbles. I have a more dramatic suggestion. I think the entire concept of this screen ought to be thrown out and replaced with something more intimate and familiar.
SMS Butterflies in my Stomach
I would style this screen to look like a generic SMS conversation. Visual associations are powerful. We can all remember the thrill of getting a text from a new crush. Build an interface that brings back memories of being a teenager with butterflies in one’s stomach. For some of us, those memories might be fairly recent.
I would consider going even further down this road. Perhaps the basement menu and all its screens should be tossed away. Reduce the app to two sections: private conversations, and a place for finding new matches. There’s no need for a custom calendar or an advice column. Make it easy for people to find a match, and their desire for conversation and companionship should take care of the rest.
Thoreau said it best:
No word is oftener on the lips of men than Friendship, and indeed no thought is more familiar to their aspirations. All men are dreaming of it, and its drama, which is always a tragedy, is enacted daily. It is the secret of the universe. You may thread the town, you may wander the country, and none shall ever speak of it, yet thought is everywhere busy about it, and the idea of what is possible in this respect affects our behavior toward all new men and women, and a great many old ones.
-
Sorry, ladies, I’m happily married. ↩
Giving Up On The iPad
I can’t find a way out of an uncomfortable conclusion. In order for the iPad to fulfill its supposed Post-PC destiny, it has to either become more like an iPhone or more like a Mac. But it can’t do either without losing its raison d’être.
Multiple Purposes, One or Two Uses
Although both the iPhone and the iPad are multi-purpose devices, it seems only the iPhone fills a multi-purpose need in customers’ lives. A typical1 customer’s iPhone is put to work in all its capacity, while her iPad is relegated to only one or two niche uses. An iPhone is a phone, a flashlight, a GPS navigator, a camera, etc. An iPad can be most of those things, but in practice it gets stuck being just one or two of them.
The two devices are nearly identical in their technical specifications. They’re constructed from similar materials. They have the same operating system, chips, and sensors. It seems they differ only in size. The canned rebuttal to this comparison is that the iPad is more than “just a big iPod”. It’s a “Post-PC” device, capable of both content creation and consumption, destined to usurp the PC as the essential tool for getting shit done.
iPad apologists are half right. The iPad isn’t a big iPod, but it isn’t more than that. In a way it’s less. Customers use it for only one or two of several niche purposes:
Private Reading – Books, magazines, and web sites.
Family Entertainment – TV, movies, and gaming.
Productivity – Notepad, calendar, sometimes not much more than a portable typewriter.
Professional Tools – Think of the myriad, mutually-exclusive uses portrayed in the Your Verse series of Apple ads. Unless you’re a tap-dancing molecular biologist filming your latest travel documentary, then your iPad is most likely a single-purpose professional tool.
Education – Substitute for textbooks and handouts.
Every iPad has the latent capacity for many uses, but individual customers don’t have a need for all of them. The iPad over-serves the needs of its typical owner. Elementary school students don’t need surgery guides. Videographers don’t need to play Clash of Clans on the way to Grandma’s.
iPhone vs iPad vs Mac
There are exceptions, areas in which the iPad under-serves customers’ needs. The problem for the iPad is that these are the same areas in which either the iPhone or the Mac are already better-suited to the task at hand.
A Mac is Better Than an iPad for…
Workplace Productivity – The Mac has an exposed file system, physical keyboard, a pixel-accurate pointing device, and multitasking applications, all of which contribute to more efficient workflows.
Power Computing – There are some professional tasks that require powerful processors, expansion ports, large storage devices, multiple displays, etc. These features are only available on a PC.
An iPhone is Better Than an iPad for…
Taking Pictures – The iPhone is more portable and more discreet, which means it takes more and better photographs. It usually has a better lens and sensor, too.
Messaging & Social Media – It’s easier to stay connected to family and friends on the iPhone. Because it’s smaller than the iPad, it’s much more likely to be in your pocket or purse. Because it’s sold with carrier subsidies, it’s far more likely to have a mobile data plan, which ensures you rarely miss an important message.
Way-Finding via GPS – An iPhone is better than an iPad at GPS navigation, for the same reasons as it’s better at messaging: portability and cellular data. This is true even in spite of having a smaller display.
So What’s the Point of the iPad?
The iPad can’t get better at these tasks without becoming either more like an iPhone or more like a Mac. For the iPad to become just as good as the iPhone, it would need to be smaller, equipped with a better camera, and sold with carrier subsidies and mobile data plans. But this would turn it into “just a big iPhone.” So this can’t be iPad’s future.
For the iPad to become just as good as the Mac, it would need to be larger, faster, equipped with expansion ports, and powered by software that supports legacy features like windowed applications and an exposed file system. But this would turn the iPad into a Macbook Pro with a touch screen and a detachable keyboard. This can’t be iPad’s future, either.
I think the future of the iPad is for it to disappear, absorbed at the low end by iPhones with large displays and at the high end by Macs running a more iOS-like flavor of OS X.
-
Anecdotal evidence abounds, but it would be nice if there was publicly-available data to back up my claim. ↩
Sloppy Swiping – How to Make An App Feel Comfortable
Josh Ginter has coined a memorable term for the kind of navigation used in apps like Unread or Facebook Paper:
I determined “sloppy swiping” as a way to go back a menu by swiping from the middle of the screen to the right rather than from off the screen to the right. This is probably not an accurate way of testing this, but stretching my thumb to the left-most edge of my iPhone to swipe back a menu is difficult.
Federico Viticci at MacStories agrees that sloppy swiping is easier (emphasis added):
I find that kind of gesture implementation comfortable, friendly, and natural.
Physical comfort is critical to a holistic approach to mobile app design. I’ve thought a lot about what makes an app feel physically comfortable, and I think it’s a combination of three things:
- A layout that respects the tangible size of the display.
- Realistic physical interactions.
- Encouraging muscle memory.
I. Think in Inches, Not Pixels
An iPhone has more pixels than my college laptop, but they’re scrunched into a device I can hold with one hand. It’s easy to forget this when pushing around 727,040 pixels in Photoshop. The temptation is to think of an app’s interface as a scaled-down OS X window. But a comfortable app is not a miniaturized desktop app.
It’s more helpful to think of an iPhone app as if it was a manufactured physical product. Picture it being shipped to your door in a little white box. Open a lid and retrieve a sliver of luminescent glass and metal.
Maybe I should pivot.
When you think of an app in this way, you’re more likely to make sound judgements about the size of buttons and controls. Large buttons with ample spacing are more comfortable to use than small cramped ones. Place common controls in areas where your thumbs are likely to come to rest, not in hard-to-reach corners.
II. Use Realistic Physical Interactions
Prior to iOS 7, it was easier to translate “thinking in inches” into an actual design. Buttons had realistic borders and gloss. Screens and views had natural-looking textures and shadows, as if they were made of real-world materials.
This design language is no longer appropriate on iOS 7, but it doesn’t mean your app should abandon all real-world metaphors. iOS 7 is flat, but it’s still driven by skin against glass. You should do everything you can to make your app responsive to the user’s touch.
Good iOS 7 design replaces realistic textures with realistic physical interactions. This is why sloppy swiping feels so comfortable. Far from being merely playful, it’s an effect that takes touch seriously. Another example is Tweetbot’s flick-to-dismiss image viewer, which just feels right.
“Natural Physics”
An important part of realistic physical interactions is maintaining realistic spacial relationships between the screens of your app. A comfortable app is not a flow chart. I like to picture my apps as a set of index cards laid out on a table. The main screen is here, the web browser is over there.
This is how I picture Unread.
Avoid impossible spacial relationships. An example of what not to do is the current New York Times iPhone app. It has a half-hearted implementation of sloppy swiping in which sliding from the screen edge goes back, whereas sliding from anywhere else jumps to an adjacent article.
Confusing back gestures.
Unless you’re making a Monument Valley clone, don’t disorient your user with impossible spaces.
III. Encourage Muscle Memory
Our brains are optimized for turning every common task into a muscle memory. It has a lot in common with the way a programmer refactors code to be more efficient and reusable. A muscle memory can be triggered just like a function in a program. It fires off in the background without interrupting the flow of conscious thought.
When incorporating gestures into your app, take advantage of your user’s biology. Encourage the use of muscle memory with gestures that are simple, consistent, and non-destructive. Don’t undermine it with poorly considered gestures.
Sloppy swiping is much more comfortable than screen-edge gestures, but that comfort comes with a hidden cost. Apps must avoid using competing pan gestures to trigger actions like swipe-to-delete.
Mixing gestures for navigation with gestures for actions is a recipe for discomfort. It forces the user to resist her natural inclination to rely on muscle memory. Before touching anything, she has to pause to consciously recall the appropriate gesture for the current screen.
It’s better to use non-competing taps and long-presses to trigger actions, and restrict panning gestures to interactions that drag screen content along with the user’s finger. Destructive gestures should especially be avoided.
App Story Podcast, Episode 4
I was a guest on Episode 4 of Vic Hudson’s App Story podcast. It was fun to delve into some nitty-gritty iOS development details on a podcast. So much of Unread was written in wordless concentration in my home office, I jump at any opportunity to talk shop with a colleague.
Unread Version 1.2 Available Now
The newest version of Unread is a big one. It adds support for Fever and NewsBlur. It has tons of new features, including a bad-ass image viewer and two unlocked (previously hidden) themes. I squashed a bunch of bugs, too. Now is the best time yet to try Unread.