Jason Shah

Posts tagged with "ux"

The Placement of Your Fields and Buttons Should Make Sense

Notice how “Sign In” is adjacent to the Online ID field. But the Account Location dropdown is below and separate. Yet it is required!

This flow makes the user enter their online ID and hit Sign In, but ignore the Account Location field because it does not appear to be required given its positioning.

And then people get this error…womp womp.

The ordering, labeling, and existence of your fields and buttons should make sense. No wonder they need a help/options link in the very same box.

Quartz UX Teardown: How to Design and Create Engaging Email Newsletter User Experiences

I have been reading Quartz daily emails for a couple of months now. That is amazing. I can’t remember the last email newsletter that kept me that engaged (I read the whole email daily) for that long (2 months+). Normally I would unsubscribe or set up a filter by now. But I haven’t unsubscribed from Quartz yet. And I rarely delete their emails without reading.

image

So what is Quartz doing right?

Easy and Useful UX + Consistent Delivery of that Experience = My Continued Engagement with Quartz

If you can delight people with an easy-to-use service that provides value, this will make them want to use your service again. If, upon return, that person enjoys a similarly valuable experience without experiencing much pain, it follows that that person will still want to use your service again. Follow that pattern enough times, and that person will habitually use your product until you screw it up.

Easy and Useful UX

Let’s pick apart the nuances of what works in the Quartz UX. Remember, this is an email newsletter. The Quartz UX is limited by email clients (Gmail, Outlook, etc.). But despite constraints, Quartz makes a number of smart user experience decisions.

1. Timing

I receive the Quartz email in the middle of the night (shown here at 3:02am) each day [1]. This is smart but risky timing. Consider the context.


imageimage

Assume people read their email more or less first thing in the morning. On one hand, some people are in the mode of clearing out their inboxes to start the day fresh. The Quartz email, which is non-critical, would be the first to get deleted in this mode. That is the risk of sending the email overnight. It’s easy to give up on that half-hearted resolution “I’m going to be a more informed world citizen” when you’re half-asleep in the morning and stressed out by the rest of your inbox. That is the risk.

On the other hand, the morning can be a time for catching up on missed information, and Quartz helps you do just this. And in fact, no other time of day is better for this content because 1) there are opportunities to engage vs. in the busy middle of the day 2) the content becomes less valuable over time.

Opportunities to Engage

Mornings have a number of moments that one can read the news - in bed half-asleep, sitting at the dining table drinking coffee, during the morning commute, or any number of moments. The email as a medium is especially good for commuters because if its content is downloaded beforehand, people can read even when they lose Internet connectivity (e.g. in an underground subway). But conceivably, afternoons and evenings also have downtime (e.g. lunch breaks or evening commutes), too, right?

Information Decay

However, information suffers from decay theory, which suggests that some information (like the news) is less valuable with the more time that passes. So the morning time is uniquely a good time for sending a newsletter with world news given optimal relevance. Moreover, even if you did assume that people wait until the middle of the day to check their email, then it’s likely the Quartz email has gotten buried. People will only get engaged with Quartz if a person 1) somehow still sees the email 2) is so bored / available in the middle of a work day. Those are bad odds.

2. Email Subject Line Anchoring

At this time of day (first thing in the morning), the email would also probably be showing adjacent to a bunch of spammy offers and other unwanted things dropped into your inbox overnight. While many of us do have coworkers sending emails through the night, it’s more common for marketing emails to be the source of morning clutter. For me, a number of other automated emails happen to show up overnight. So relative to the other emails, this Quartz email stands out as high quality and worth opening. Note that this anchoring is something Quartz may not be able to control, but that doesn’t mean they can’t predict and exploit it.


image

Which email do you think I’ll read out of all of these?


Email subject line anchoring isn’t all that different from price anchoring, which helps people sell expensive items that simply seem relatively inexpensive when placed next to an even more expensive item (i.e. an $8 beer seems cheap relative to the $14 mixed drinks at the bar). On the other hand, if the Quartz email showed up around 11am or 2pm, I’m likely getting emails from my boss, close friends, and other highly relevant and/or important people. In that anchoring scenario, the Quartz email would seem trivial and either not get read or get deleted.

3. Compelling Subject Line (Before it Gets Cut Off)image

Quartz squeezes in major news about Iran, the UN, and what I guess might be China. I’m compelled to check it out.

Every day the subject line is different enough to entice me, but similar enough for me to identify it with a quick glance. Also, it manages to do all of this within the display character limit.


image

The full subject line

People who build products sometimes get caught up in our own feature sets, rather than the benefits delivered to end users. This leads to subject lines like “<My Company> Releases New Syncing Features!”. Or we simply are not thoughtful during this product development moment and construct subject lines such as “<My Company> Report for 01/01/2015 18:30 GMT” when the easy, lazy thing to do is just rely on simple and systematic subject lines.


If you already have a strong relationship with users or have a user base who really wants zero personality from your product (sadly, some enterprise buyers prefer this), then fine, this style of a subject line may still manage to command decent open and click-through rates. For me, this is the case for Google Calendar daily agenda emails.


image

However, Quartz is a relatively new service (lacks the existing engagement Google Calendar has). Knowing today’s news frankly is less critical than knowing your daily agenda. Missing a meeting with your boss is more immediately painful than missing news about the latest war overseas. All of this despite how important that war is to world peace, and your meeting is just about you. So, punchy and meaningful subject lines are essential to keeping open rates, and subsequently click-through and engagement rates, high.

4. Personality

Even with a generic grouping into ‘Quartz Readers’, I am glad that at least Quartz took the time to say “Good morning.” Even though I hear and say “Good morning” countless times to peers and coworkers throughout my day, it’s nice to read it first thing in the morning from what could otherwise easily be a robotic feeling newsletter. Feeling like someone is on the other side of the message makes me almost feel like someone real is curating my news for me.


image

Good morning to you, too, Quartz!


Quartz could just end the email. But Quartz takes time to say goodbye to me and wish me bon voyage for the day.


image

Quartz closing strong with a nice, personal touch at the end of the email


In closing the email, Quartz wishes me a productive day. You know what? “Productive” is a key way in which I measure my day. So now I feel like Quartz gets me.


While not everyone prioritizes “Productivity”, mostly everyone will react positively to this wish (accomplishments = good) and it is far more original than “Have a great day!” And originality begets a memorable experience.


And this closing is different everyday. Notice the tidbit about “Chinese Winnebagos”. It relates to this story here earlier in the newsletter.


image

When I really dive into my subconscious, I think I get a little chuckle out of this little closing every day. So I feel motivated to make it to the end of the newsletter.


5. Laundry Lists are Lazy; Hold My Hand and Show Me Why I Should Care


Quartz has a problem. There are dozens of valuable stories to share every day. One single list of article after article is hard to parse and hard to scan when necessary.


Remember what Yahoo looked way back when?image


Instead, Quartz breaks out articles with logical and consistent categories. The categories have personality (vs. “Category 1”, “Category 2”, “Category 3”) without losing clear meaning.


Notice how easy it is to take how Quartz labels the article groups and make sense of them.


image
image

“Chunking” is a classic psychological concept that aids memory. But is also extends to processing an email newsletter’s contents. Indeed, “Input chunks reflect the limitation of working memory during the encoding of new information.”


Focus My Attention on the Right Things

As we mentioned, Quartz is limited by the presentation of information in an email client. The newsletter avoids images with stories, perhaps because it would often not show up with those that have images turned off, the mobile rendering would be challenging, and scanning would be harder.


So with just text, and basically bolding and hyperlinking, at its disposal, how does Quartz manage to focus readers on the most important content?


  • Consistent, bold lead-ins for each story. This lets me scan easily and is an obvious tactic. As obvious as it is, a lot of blog posts have no structural consistency to what is bolded and what is not - it’s a subjective reflection of what the creator deems interesting.image


  • Strategic hyperlinking. Notice in the first story how one scan and catch “discuss the resolution”, “will meet his Iranian counterpart”, and “hailed a ‘new era’ on nuclear talks.” While perhaps a little superficial, scanning gets us pretty far and we’re guided by what Quartz chose to bold and hyperlink.

6. Facilitate Further Action Without Forcing It / Have My Back

It may be common practice by now, but the simple practice of accurately linking to parts of statements that need more evidence or support makes me trust Quartz. If I want to read more about the specific resolution John Kerry and the Iranian counterpart were going to discuss, I can dig into it. But Quartz by no means forces me to consume that content if I’m not interested. As a result, I don’t feel like Quartz is trying to persuade me of anything, but rather present facts and let me pursue further information if I’d like to do so.

Do you know email newsletters that are well-designed? How do they achieve a delightful UX?

[1] I did not find a setting that lets one determine when they receive the email. While some users may complain about a lack of control, not having this setting reduces engineering and UX complexity for Quartz. Notably, the timing for weekend emails is 4:02am, so Quartz must be trying to be, at least for subscribers to its Americas Edition, hitting people around 6am ET during the week and 7am ET during the weekend.

 

Yelp UX Teardown: Driving More Reviews By Slaying Friction and Leveraging Familiarity

image

I rarely write Yelp reviews. But this morning, I did. And I didn’t have an extremely good or bad experience. Rather, Yelp made an extremely smart product move and generally solid implementation. Here’s what happened.

image

1. “Reduced Friction” - Yelp finally made it easy to leave a review by placing the review form smack on the front page with the copy “Your Next Review Awaits”.

But reducing “discovery friction” wouldn’t be enough to get me to leave a review if the interaction was clunky. The “interaction friction” was also low. One click and I can give it 4 or 5 stars, or whatever I choose. And there’s just one text field. That’s not intimidating (note that the review UI begins as a small text field and expands to a larger text area to avoid scaring you with a big commitment). It would be “reasonable” to have multiple fields (ask separately about service, food, ambiance, etc.). For example, the full review page is more intimidating even though it fundamentally just wants to collect the same basic review info. But yet Yelp used a very focused version of its review submission interface to increase the rate at which people begin to fill out the form and decrease mid-review abandonment.

imageHomepage Review Element

vs.

image

The normal review page

2. “Leveraged a Sense of Familiarity / Context” - I had dinner with my girlfriend last week at Contigo. Like many of our meals out, we mentioned it to friends we saw at a party after dinner, and it’s come up once or twice since then between the two us. We formed a positive association with the restaurant through natural, non-commercialized and largely non-digital social interactions. So when I saw the name “Contigo” again when I fired up Yelp, I got a brief warm/fuzzy of familiarity. And then I imagined myself there again, and the people we interacted with during our dinner (hostess, waitress, the nice man who poured the water, and our nearby diners). All of a sudden, I honestly felt an obligation to credit them.

image

The photo from the venue adjacent to the review box pulls even more at my heartstrings, even as just a thumbnail sized photo

image

Everything from the website, to the postcard attached to our bill (to send to someone out of town, perhaps), to the name ‘Contigo’ (Spanish for “with you”) all contributed to this positive association

3. “High Signal to Noise Ratio” - Yelp leverages OpenTable reservations as a signal that I actually went to the restaurant (whereas my visiting a review page alone is a much weaker signal). So it’s very likely I actually *did* eat at the restaurant. Also, Yelp shows my most recently reserved reservation (Contigo) first as opposed to the place I went previously (Campanula) - that one shows up after the first, most recent restaurant. Smart - I’m more likely to remember and feel compelled to write something about the place I went last week vs. 2 months ago. Separately, if Yelp had a deep integration with OpenTable, which can tell whether or not I *actually* went to the restaurant and used my reservation, Yelp could further improve the signal to noise ratio, i.e. don’t show me the option to review restaurants I made a reservation at but didn’t go to. One day when Yelp owns the reservation system, too, this will be easier for them. 

Additionally, Yelp reminds me of this reservation vs. just hoping I recognize the restaurant.

image

But here are 2 UX mistakes Yelp made with this flow…

1. Took me out of context after the first review After I leave my first review, I was really hoping they would keep me on the same page, in-context, letting me mow down my unreviewed places.

Instead I got dropped here…

image

You *can* find where to go to continue the reviews, but it’s not as simple and snappy as just keeping me on the homepage, show a success message in that box (maybe with an option to click to the review or restaurant page in a new tab), and move me to the next restaurant.

Generally speaking move me from A to B…

image

to

image

On the other hand, Linkedin keeps you on the same page when you’re on the ‘People You May Know’ and I’ve heard it’s wildly successful at the ‘Connecting’ process, which could otherwise be scary and awkward.

image

2. Visually and behaviorally disconnected social sharing after the posting of a review 

image

People take time and care to post Yelp reviews. Why is there such a separation here? It breaks context. It’s ironic if you look at the name of the page. image

Normally a site will really push people to share to Facebook or Twitter right after. For example, this is what Eventbrite does after you register for an event.

image

Now I’m going to finally go leave that review I originally intended to post before I got distracted by the Yelp UX…

[Discuss and upvote on Hacker News]

Some design thinkers and concepts

Edward Tufte

The Visual Display of Quantitative Information

"Cross-Disciplinary Exchanges" Interview

Ideas: Information Density, Supporting Cognitive Tasks

Donald Norman

The Design of Everyday Things PDF Book Summary of Principles

Ideas: Mapping, Affordance (an attribute of an object that allows people to know how to use it)

Jakob Nielsen 

10 Usability Heuristics

How to Conduct a Heuristic Evaluation

Heuristic Evaluation

Ideas: User control and freedom, Flexibility and efficiency of use

Some Present-Day Design Thinkers to Follow: Luke W., Sacha Greif, Jared Spool, Ryan Singer

Know others to add to this list? I will update this list as I can. Aspiring designers and PMs always ask me how I learned to do UX teardowns and what I think about in design critiques - the ideas these folks put forth have helped shape how I think about things.

3 UX Ideas from Potluck

Potluck is a new “link-sharing service for lurkers” (according to TechCrunch). There is a lot of debate about the unique value proposition. But the same happened with Facebook, Twitter, Pinterest, and many others. So let’s suspend that disbelief for a moment to focus on the UX.


image

1. Reduce context-switching to maximize sign up conversion rates: put signup forms in lightboxes or on the same page as where a user clicks to sign up

When a user clicks “Sign Up” on the Potluck homepage, it would be reasonable for a user to be taken to a brand new page that is all about sign up. That is standard.

However, wouldn’t it be better to reduce the amount of a time a user waits around? Isn’t it better to make signing up an integrated part of the Potluck experience they’re already having vs. a standalone activity that a separate page feels like?


Unable to display content. Adobe Flash is required. image


image


Potluck places a user at the signup form on the same homepage that the user was already exploring. It jumps right to the form the user wanted - no waiting as the browser loads the new page and no whitespace while that loading happens or after it happens that makes a user forget why they wanted to sign up in the first place.

A nice little touch is that if you instead want to login, the same interaction happens and Potluck replaces the signup form with the login form seamlessly.


Unable to display content. Adobe Flash is required.



2. More “views” does not necessarily mean more friction, when those views would otherwise just be multiple steps jammed into a single view

 

When people post links on Potluck, there are two key steps: share content and include other people. After all, it’s a link sharing social network (oversimplification of the vision, yes).

When you have these two steps (share content and include other people), you can either make users do everything in one motion or guide them through the process.

For example, Yammer’s publisher lets you enter the content, then add people, and then hit “Update” without requiring one before the other or anything like that.

image


On the other hand, Potluck first focuses the user on sharing the content. Then they have the user focus in on sharing that content with other people. Such laser focus on the user activity may help content get shared more often. However, breaking up the user activity into multiple steps may also feel like a slower process for some users. Think about your product goals and which approach is more suitable for your user base.

Unable to display content. Adobe Flash is required.



3. CTAs in multiple action areas generates cognitive overhead and may reduce usage of all actions

You will have to choose where to place your buttons, text fields, and every other form of user input. Chances are you will have more than one call-to-action. Personally when I view a page, such as this article about Microsoft, in Potluck I’m wondering what action needs to be taken here. However, the more actions, and the more locations in which they are placed will expand cognitive overhead and erode product simplicity.

Can you spot them all?


image

Possible Actions

Primary: Heart this post. Share this post. Comment on this post.

Secondary:  Read the rest of the article

Tertiary: View Jason’s, Aaron’s, or Christina’s profile.

Now, imagine the user path here (if they don’t bounce sooner): View the Heart CTA. Read the headline. Begin reading the article. See the Skype logo. Consider clicking through the article link. Consider sharing. View the metadata about who shared what. Consider commenting.image


To be fair, I am not suggesting putting the comment box up at the top. And I do think there’s something valuable about the Heart at the top (to keep it above the fold and easy to quickly access). But I can’t help wonder why the heart is so far up, then Share is so deeply contextual that it’s separate from the Heart, and the commenting section is so core to link-sharing but yet so deprecated and conventional. Why not marry the Heart, the Share, the Comments?

My hypothesis is that placing actions all in one logical place will reduce cognitive overhead and may even spur more of other actions by putting them near each other to reduce transaction costs.

Summing Up

1) Reduce friction to signing up / logging in - kill page loads and maintain context

2) Don’t think more views = more friction. Friction can arise from poor copy, overloaded views, etc. Empathize with the user.

3) Consider whether actions are better off grouped together or contextualized deep into the app

On edge cases (and not obsessing)

Edge cases. When to solve for them. When to not solve for them.

This post is about major sites and apps that are proof that you don’t need to obsess over every last detail - no major how much I advocate for beautiful user experience. As a PM or founder, there *will* be constraints.


image

Amazon, Spotify, Facebook - here are some edge cases they are OK with not worrying about. 

Amazon


image

I return to my Kindle after a few minutes, and notice it’s turned off and is showing me the ad instead of the page I left on. Slight mental grumble, turn it on, OK we’re rolling. Would have been nice (oh, how guilty a phrase is that in product management…) if they knew I was returning and didn’t turn off.


image

Spotify

imageimage

I want to Star songs from the Growl Notifications that Spotify gives me in the top right of the page. I can’t. I hover, but I can just make the Growl Notification go away - no rich actions or anything. Woe me, I have to open the Spotify app and then Star the song there.


image

Facebook


image

A friend updates their profile photo multiple times in rapid sequence. All of these get shown to me and take up my feed instead of just showing me the final one and then other content I care more about, or some other more elegant solution. Again, woe me.


image

What’s the common thread here? Most people don’t care about the edge case I’m whining about.

As much as I advocate for beautiful user experiences, I also don’t live in a bubble where engineering talent is infinite or the 1% of 1% of 1% problems matter.

Tradeoffs exist. Accept them. None of these major tech products were meaningfully hindered by not shipping an MVP that accounted for these things. In fact, they probably benefitted by not obsessing and worrying about more important things.

On boredom and product design

I attended Nir Eyal’s “Hooked” workshop yesterday. He shared an extremely valuable framework that provides people with a way to think about building habits and products.

One subject we touched on was “triggers”. Why does someone think of and come back to your product? One trigger is “boredom”. This is often the reason for visiting Facebook.

Indeed, my workshop partner shared an amusing yet frightening anecdote: “Sometimes I’m on Facebook, and I get so bored, that I open up another tab to go check Facebook.”

Read More

Jun 6

3 Ways to Build Relevance Into Your Product

People expect relevance when using products. If your product is a useless ghost town or a noisy waste of time, people have less motivation to use and evangelize your product. Obviously.

Without relevance in a social product, the news feed would probably be noisy, and you would engage less. Take Pinterest. For them, this would mean you come back to the product less often, you’re less likely to refer Pinterest to your friends and family, and you are less likely to purchase items via Pinterest. Activation, Retention, Revenue, and Referral — 4 of the 5 AARRR engagement metrics Dave McClure promotes — all take a hit. And ultimately, since referrals will be down, Acquisition (the first A and the last metric of the 5) will also weaken. Notice how something like relevance, which is not obviously tied to metrics like acquisition or revenue, has a widespread influence.

Read More

Vine UX: How Vine Wraps Up New Users

Vine has an amazing new user experience. Other app developers should take note of what they have done. Leveraging Vine’s UX tactics, others can improve their own apps where it makes sense. Doing so can greatly improve new user retention and engagement, which are fundamental growth drivers.

-

Discuss on Hacker News - would love your thoughts.

-

Beautiful, elegant App Store presence
Any app in the App Store follows a conversion funnel. At the top of the funnel is the user’s entrance, which is via app store search in my case. Seizing that moment is essential to getting a user to register for your service. To do this, some apps provide a clear CTA (call-to-action); others make you feel something. Others fall flat with confusing or uninspiring experiences. Vine made me feel something.

Vine creates an aura
with its result through various tactics. The powerfully applied and very unique green color is eye-catching. The typography is elegant. The screenshot is both informative and alluring (what a combination). 4 star-rating ensures social proof and is above the bar for any person using app quality as a factor in deciding whether to install. “Vine” is repeated 3 times in this single view. Vine as a concept enveloped me and made me excited to try the app.

image



Inject words into images used in the app gallery to drive points home
Be resourceful despite platform constraints. Vine, as powerful an aura it may be, is a hard concept to convey. The App Store confines Twitter (the maker of Vine) to very limited copy (the name of the app) and a screenshot. How does one communicate the concept of looping video with virtually no text and a flat image?

image



But nowhere does Apple require the screenshot to *only* be a screenshot. Twitter cleverly has uploaded an image that includes descriptive text: “See & share beautiful looping videos” in addition to the screenshot. One could argue that the copy is distracting, or the image should be strong enough to render copy unnecessary. That’s fair, but for me, the copy helped.

When you ask for permission, focus on how it makes their experience better — not the data you’re asking them for

The words: “<This Application> Would Like to Use Your Current Location” have appeared to frequent app installers countless times. Those words get glossed over because of how many times they have been displayed to a user. We are numb to them the way we are to “Checking this box indicates your agreement to our Terms of Service.”

image



So the words immediately after that headline *do* matter. Vine has said: “This allows you to view and tag posts with locations around you.” Admittedly, I don’t know how much control Vine has over this or the headline copy. I also don’t know whether this would have worked on me in 2007 when the iPhone first came out and location services were nascent. Location was still creepy.

But notice how Vine has used words like “allows you” and “view and tag posts”. It’s about what *you* will be able to do. It’s about experiences like viewing and tagging posts. Your posts. Don’t you want to be able to do everything possible with your posts?

Also notice how “OK” is default. It’s the more emphasized button. “OK” as a term is passive vs. “Yes”. OK says, “OK I’m all right with it.” That’s easier to get someone to commit to than “Yes, I want this.”

I don’t love that an alert like this is basically the first thing I get when I open the app. But I also realize that if they don’t get my consent for location now, they are much less likely to get it later. And location is clearly important to them for various reasons - be it a more engaging user experience or for advertising functionality at a later date. Lastly, these permissions alerts are becoming so standard, that it’s not nearly the same as it was to throw a popup ad at someone’s face in the year 2000.


Hold your new user’s hand, so they don’t let go (if they let go, that’s anti-retention, or losing a user)

If you just downloaded the app, it’s almost certain that you don’t know how to use the app. They could just launch you into the feed, or perhaps better, the publisher (it works well for Snapchat). Instead, Vine has blended their publisher with a guide.

image

Vine wants you to take an action. Assuredly, users who make a post during their initial use of the app are meaningfully more likely to both return to the app and be highly engaged users of the app. While that may be correlational in many cases, I’d imagine that Vine can also increase future behavior by facilitating it here and now.

Notice the words used here, too. “We can walk you through how to make your first post.” It’s friendly. It’s not forceful (“We can…but we won’t make you do anything you don’t want.”).

Also, take note of how they have enabled the camera in the background. So, the guide is integrated with the action you will take. It helps make the guide feel more engaging and reduces the likelihood I just close the app and move on. A guide by itself is boring. Imagine reading a plain text recipe in an email. Now imagine crafting a delicious meal, working off of a rich media recipe on an iPad in the middle of a kitchen counter full of all the right ingredients.

Inevitably I will at least slightly move my hand, so the camera moves and the guide feels responsive. This creates a loop, where I want to do more things and get interface feedback from the app. When something reacts in a novel way to our conventional action, it sparks intrigue and gets us to want more.

image


Help people create the most interesting content possible

image


If this were 10 seconds of the same view of a park, it would be pretty boring. If it’s 3 seconds of one cool thing, then something totally different, and then yet again something totally different — with rapid transitions and fluid camera movement — it’s a different story.

Vine pushes users to select a few different scenes when you capture the moment. The video stops after a few seconds and a new message appears. You would have to deliberately disobey the app to be boring, and record more time of the same event. Plus, they even say “Next, find something different”. Through both the mechanics of the app and in-your-face copywriting, Vine gets you to record short snippets of as-interesting-as-possible content.

By doing so, they’re improving the engagement loop. When someone else views your video, they’re far more likely to watch it, and continue watching it, if it is as engaging as possible. I believe these segmented videos make more engaging content because you record things that are *different*. It would be lower friction to just let people record a single video. But not only would that not provide enough differentiation from existing camera functionality, but it probably would produce less engaging content.

If your app requires focus or lends itself to interruption, do what you can to encourage people to hang in there

image


Imagine the behavior that a person is doing. They are probably spending time with friends. Vine is an interruption to “real life”, frankly. Sure, it’s helping preserve the moment. But it is by definition an interruption. So, them holding their phone and rotating in the middle of a park is sort of a lot to ask of someone. A simple nudge like “Keep holding!” can be just what one needs to hang on for 5 seconds until the video is done when their friends are trying to pull them away back to real life. Sad, I know - but think about how often push notifications and other phone alerts pull us away from our loved ones.

Push people to share content immediately after creation; delaying distribution vastly reduces the likelihood of that content ever leaving that phone

As soon as the video is complete, Vine automatically pushes you to their Share screen. There are other alternatives to doing this. The most obvious would be to just end the video and allow the user to review, edit, or otherwise interact with the video just created. But Vine is not Instagram. The value of the content is the content itself — not what you do to it (i.e. filters). If an Instagram photo is not filtered, for example, it doesn’t feel right.

image


But with Vine, it’s more about the brief moments that are being shared than any sort of post-production editing someone is going to do to the video on their mobile device. So, not only does pushing someone straight to Share help you get them to distribute the video, you’re not upsetting them by taking them away from an editing screen they would otherwise expect.

Eliminate all friction to making the first post, which may include default text and pre-selecting where to share the content

Notice how Vine provides the words for your first post: “My #firstpost on Vine”. They also use language that, if seen by someone else, is enticing and makes one interested in trying out Vine. It is generic text but comes off as fairly authentic. The thing about these default posts is that they begin to appear multiple times in the feeds of early adopters’ friends and friends of friends. Once you see the same thing enough times, with consistent messaging, you can’t help but notice.

image



Once you have made your first post, this copy changes to “Add a caption” - enough to motivate you to provide some additional color to the post, but not so heavy that it feels required or discourages you to post.

Remind people how valuable their content is if they’re on the fence about posting
There is ample opportunity to abandon posting this Vine. The Share Screen shows a thumbnail of the video, keeping the moment in view even after the video has been recorded. If it looked like some blank or unpersonalized share screen, it would be easy to not feel a connection to the content anymore. Out of sight out of mind. In sight, and they shall share.

image


If you want to bring people into an invite funnel inside of the product, can you make inviting FUN?
I’m not suggesting you trick users. But the reality is that there’s something dirty around words like “Import Your Address Book” or even “Invite”. It reminds users that they’re putting social capital at risk. It also reminds people of all of the privacy fiascos that have happened with web apps through the years.

image



But Vine takes a very different approach. “Want to see more? Find people to follow” and colorful skies and air ballons. None of that screams “Invite”. Yet once you click through there are very clear instructions on what to do. The warm and fuzzies may not work so well once you need people to take very specific, technical steps. But if you’re optimizing for the top of the invite funnel this light and fun call to action seems like a smart approach.

image

and

image

I like what Vine has done here. And I imagine that new user retention supports the impact of a well-designed new user experience.

What do you think of Vine? What other new user experiences are well done, on mobile or otherwise?

Feb 9

Mailbox UX: How Mailbox Builds User Love

Mailbox pushes the envelope (get it?) for apps aiming to make email sane. It is a brand new email client based on mobile gestures aiming to make email suck less and help you get to Inbox Zero. Mailbox has been called “the best email management app you’ll ever use.”

image

[Discuss on Hacker News]

But in the past couple of days, the way that Mailbox has handled new users has overtaken the app itself in the press. With a now-common “request and wait” signup model during their closed beta and enormous hype in the tech community, Mailbox is an exciting case study of user anticipation (broadly what I’m calling “the pending user experience”, related to “new user experience”) and new user education.

Let’s pull back the Mailbox door and sort through its beauty.

A peaceful, familiar, and straightforward opening view

 

image

  • The logo is undeniably similar to Gmail’s. This invokes familiarity, but because it’s a slicker version of Gmail’s logo, it feels like a more modern Gmail. Why is it slicker? Visually thinner and the indescribable vibe it gives off, frankly.

Gmail image Mailbox image

This is how Mailbox themselves see (or perhaps, created) it:

image

  • The color scheme is calming. Offwhite and an ocean blue. This is pretty objectively clear, the same way red is a color of urgency.
  • "Put Email In Its Place" - this is brilliant copy. It makes the new user feel as though you (the app) understand. And if you understand the user’s frustration, then they’re more likely to want to follow your app’s direction, which in this case is registering for the app. Almost nobody likes their email, I speculate, especially the target user of Mailbox. It’s an overworked, ambitious person who would rather “do real work” but can’t unchain themselves from the email protocol. So they’re looking for anything that can make things better, and Mailbox presents itself as the solution with this sort of empathetic and empowering language.
  • Easy vertical scanning of the calls to action (CTAs). Mobile devices offer little screen real-estate and can expect little physical stability from a *mobile* user. So being able to quickly process and take action on available options is key. One way to do this is keep a person’s eyes moving in one consistent direction without a UI that would prompt someone’s eyes to have to jump around. 

Here’s how to get that last point on easy vertical scanning wrong.

Hotmail (MS Live’s mobile login page). Notice how taxing it is to look at all their various links, let alone the actual input fields. Your eyes have to dart back and forth.

image

On the other hand, notice how Gmail does it. Straight flow.

image

…drumroll, and Mailbox:

image

Large touch targets. One clear call to action for all of the many new people who need to be pointed where to go. One secondary CTA for the folks who were such early adopters to have signed up before and savvy enough to tap “I Have a Reservation”. Note the “reservation” language as well - very classy. The “My Mailbox” language - giving the user ownership and focusing on their problems (not “Sign up for Mailbox and make us millions!”).

Single tap registration

As soon as you hit ‘Reserve My Mailbox’, you are spared some ungodly form asking you for every detail about your life. Rather you find this

image

More anticipation. A large figure telling you exactly how much more you have to go. Imagine being on the treadmill watching a decreasing counter as you get closer to a ten mile goal. 9.9mi. 5.0mi. 1.0mi. 0.2mi. Finished! As you approach zero, you feel like hanging on just a tad tighter.

But also notice the secondary count of everyone behind you. Chances are that your large blue number is much higher than 168. You need more reason to feel good about yourself. Schadenfreude. People derive pleasure out of the “pain” of others. Knowing you’re ahead of others helps make the wait feel that much better.

Lastly, notice how Mailbox doesn’t stonewall you. They give you 3 alluring options on this screen, assuming you will do more. You went through the trouble of downloading their app and ‘making a reservation’. Of course you’re going to click on a cute lightning bolt or a pretty bird. (Small detail - but ‘Discuss’ brings up all the talk, i.e. hype, about Mailbox that confirms how awesome the app is.).

A pleasant pretty ping when your Mailbox has arrived

'Nuff said. It felt like Christmas morning after all of that wait. Never have I received a push notification for when I was (finally) allowed to use an app. Most sites that have used this tactic send some boring email weeks later once one has forgotten about what the site does. And most mobile apps are ready to go and open as soon as you want to use them. It was a novel, pleasant experience. Unique engagement events like these create memorable experiences, which is the heart of long term user retention.

image

Whitespace can give focus to primary CTAs. Keep mobile CTAs near the bottom, far left and far right of the screen where the thumbs are nearby - they’re easiest to reach - the center is actually the hardest to reach!

image

Keep the person in your app even if they have to authenticate through a 3rd party - it’s elegant and builds comfort with your app

This would have been far less elegant if I had been kicked to Safari and then kicked back to Mailbox for the auth - instead it was all in the same branded container of the Mailbox experience. The need to get a user account setup right away and the need to keep a user in your app to build familiarity with the app can be at odds when integrated with 3rd parties - be it Google, Facebook, or a much smaller player.

But just appreciate the elegance here, except for the Gmail form which is maybe doing the best it can.

image

image

After all of that, all I needed to do was hit “Done”.

Also, note the slick takeover of the black top status bar for things like “Syncing…” and when new messages arrive.

image

And I am in.

If your app is visual, quickly build an association between actions and how you represent those actions.

 image

Mallbox can be complex if you don’t know or properly understand the 5 main areas in which you can categorize your mail, or the interactions that allow you to move items into those areas. In one glance on this welome screen, and by using intuitive icons for lists, saved for later, inbox, archived, and deleted items, Mailbox has given you an instant schooling. (Admittedly the green checkbox for ‘Archived’ could be a little confusing).

Your tutorial should promote one clear action at a time (but keep the other things in the background for gradual, non-cluttered learning)

image

Notice how Mailbox focuses in on ‘Archive’ first and keeps the other actions in the background. And then clear and plain they say “Swipe Right to Archive”.

So, OK, I’ll swipe right to archive, is what I’m thinking. And I did.

image

Make your tutorial interactive - so don’t just tell them what to do, but also guide them through actually doing it

Mailbox has married the instructions with the execution of the instructions. By doing so, when it’s the big show and you are actually in the app, you will know precisely what to do. Practice is over then. But much better than a user stumbling through your UI, this is a chance to warm up. Mailbox has done that beautifully here when they have you swipe on the mockups of the app to experience what you will soon do on your own, real emails.

image

Encourage your user at each little milestone and address any fears they might have

A simple “Great Job!” goes a long way and make it all that much more likely that I’ll go ahead and tap ‘Next’ as the app requests.

But also note the words meant to calm me down: “You can quickly access your archive from…” As soon as you archive something for the first time, and it disappears, panic would otherwise ensue. So Mailbox sees this coming and guides you. Smart. A trust-building UX tactic is to anticipate user concern and address it before they have to ask or wander over to your likely god-awful help or FAQ page. 

image

Stay consistent with tutorial steps with just enough flash to keep people’s attention and make them feel loved

This flow continues through each of the actions with a clear pattern but enough differentiation to effectively learn how to use each different piece of the app.

image

image

…And we’re in.

image

Mailbox built so much anticipation before its launch and has a carefully crafted new user experience.

Indeed, the experience before I was a new user suggests a growing new practice around a “Pending User Experience” — the time before a user is actually a user. They masterfully created so much anticipation that even if the signup flow were a bit broken, many users may have found a way to power through it anyway.

Combining a stellar new user experience like Mailbox’s with their crafty pending user experience can boost new user retention in your app. Indeed, the next challenge for Mailbox appears to be creating the best in-product user experience. Are their gestures intuitive, and the right answer to email overload? Maybe. Is it enough to provide a better interface but not solve the root problems with the email protocol? Time will tell.

Really fun to see the reaction to this post.

In the meantime, what did you think of Mailbox’s pending user experience and new user experience? If you are still on the wait list, what effect has that had on your impression of the app?