Jason Shah

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.

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?

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.”

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.

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.

Help people create the most interesting content possible

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

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.

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.

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.

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.

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.

and

—

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?

Tweet Follow @jasonyogeshshah
Vote on HN

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.”

[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

 

• 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  Mailbox 

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

• 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.

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

…drumroll, and Mailbox:

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

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.

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!

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.

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.

And I am in.

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

 

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)

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.

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.

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. 

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.

…And we’re in.

—

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 willfully a way to power through it anyway.

Combining a stellar new user experience like Mailbox’s with their crafty pending user experience can boost the likelihood 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.

@jasonyogeshshah Just read your post again. Wow. So incredibly thoughtful. Thank you for taking the time to dissect it. Means a lot to us!

February 9, 2013

@jasonyogeshshah Thanks for the thoughtful post!

February 9, 2013

—

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?

Tweet Follow @jasonyogeshshah
Vote on HN

I noticed something subtle about Foursquare’s language when you share a check in. 

I was not with 4 others. In fact, when they told me (in app) that 4 others were at Philz at the time, I clicked through and those were really just people that had checked in within the past few hours (and were no longer really there).

By…

1. extending the period of time that someone is considered “there” and checked in somewhere

2. broadcasting a check in as if I was “with” others in the sense that I was actually hanging out with those people (which I wasn’t; I was by myself when I checked in)

Foursquare made itself seem even more popular than it is, to me the user AND to the people to whom this update was broadcast.

If the time period to be “checked in” were only, say, 30 minutes, then I would not have seen the exciting “6 people are here” facepile.

Instead it would have looked more like this, if only 1 person were there that recently. 

Blank squares? Sad. Would have been even sadder if the element were hidden and there were no faces, as it is when there are no recent checkins at all.

—

Also, to people reading my update, it seems like I’m super social. So most Foursquare updates make it look like people are hanging out with others, and there’s some element of social proof. If it didn’t say “w/ 4 others”, it wouldn’t be a huge psychological loss. But seeing “w/ 4 others” helps convince others that this app is in heavy use and is fair to use in a real-life social context with other people IMHO.

Tweet Follow @jasonyogeshshah
Vote on HN

A lot of applications have downtime or otherwise fail at times. Twitter is certainly one of them, including the notorious Fail Whale.

But tonight I noticed them owning things.

I tried to share a tweet. It didn’t go through. Some people would show some variation of one of the below errors.

Instead, this is what Twitter did:

“Sorry! We did something wrong. Try sending your Tweet again in a minute.”    X

1. Apologize. Right away. Unequivocally. Cheerfully.

It’s the first thing said. They say it with an exclamation mark. Done.

2. “Mea Culpa” - It’s your fault. Don’t blame me (your users).

They clearly say: We did something wrong. They don’t twist words, giving the passive tense an even worse bad name with something like “Something went wrong.” or “There was an error (with something you did)”.

3. Clear instructions on what to do next.

They don’t waste time in saying what you should do next. Wait a minute and give it a go. They also underpromise and overdeliver because it almost always is working right after this error happens; not a minute or more, but just a sec.

Nice job, Twitter. Now just keep the fail whale in the water and off my screen, and we’re good to go. And let me Quote Tweets from the web and not just mobile, too.

Tweet Follow @jasonyogeshshah
Vote on HN

An OS that remembers wireless networks, even when you don’t expect it to (MiFi connections)

Google Chrome relaunching previously open tabs when you (accidentally) quit the application

iOS letting you double tap the home button to view currently open applications

Facebook navigating you where you last interacted when you click away to a story and then return to the feed

—

These aren’t the ones I am most thankful for, or the most innovative things. Just things that came to mind when I was pleasantly surprised that my MiFi network was remembered and my wireless connectivity “just worked”.

I am sure you have “better” ones. What are they?

Tweet Follow @jasonyogeshshah
Vote on HN

TED Talks are loved by many. They honed in on delivering highly valuable content in short, engaging videos, and nailed it. However, the user experience that TED delivers goes beyond the words said in a given video. What you see on each TED video page matters. How much they get you to love the full experience matters.

Here are three things that can be learned from what TED gets right and wrong in their UX:

1. A ‘Tweet’ and ‘Like’ button  virality. Hand shareable content to your user on a silver platter.

TED knows 1) you want to share awesome videos (helps your friends/followers, makes you look good, etc.) 2) you don’t want to put a lot of effort in.

One of TED videos’ best assets are the quotable statements. Some of the best TED quotes are:

“If you hire people just because they can do a job, they’ll work for your money. But if you hire people who believe what you believe, they’ll work for you with blood and sweat and tears.” — Simon Sinek

“There’s zero correlation between being the best talker and having the best ideas.” — Susan Cain

“If you’re not prepared to be wrong, you’ll never come up with anything original.” — Ken Robinson

Good stuff, right? TED was smart enough to take these quotes, package them, and let users quickly share these nuggets of wisdom.

The quotes element

—

The social share options when you click ‘Share Quotes’

—

Cropped version of the prepared Tweet when I hit that button

—

Overall, smooth job. I’d recommend that they somehow ensure their quotes are shorter than a given character length so that they don’t go over the 140 max by default, as it happened in this case.

They make it super simple to share insightful content. Score.

-

2. If good content is your competitive advantage, show it off!

Notice that TED virtually hides its related videos. They are below the fold, meaning you have to scroll down to know that they’re there.

Zoomed in - 

But look how YouTube does it  -

Always above the fold. Directly to the right of the video that is playing.

Now, let’s be real. Perhaps TED just wants a better, undistracted viewing experience. YouTube may be optimizing for number of views. Goals may be different. However, TED could experiment with displaying related videos on pause, having some links higher up to show good/related videos, or only show this side panel after a certain point in the video, when it’s likely you would actually want to engage with other content.
-

3. Do not violate the user’s model of where and how video controls work.

Bottom line: TED places the full screen option in the top right, which is an entirely foreign place for that control, as it normally appears with volume controls at the bottom of the video. This causes confusion. Adhere to industry standard ‘best practices’ for certain UI if you don’t have a use case rationale for disregarding those standards.

Users form models of how certain elements should work. With video, this includes hitting the space bar to toggle pause/play, clicking the volume icon to toggle mute/not muted, and hitting ESC to escape full screen view. Violating these commands or the standard location of controls can be confusing and frustrating to users. YouTube is the largest video site in the world, and the one that even TED talk viewers probably interact with the most. For better or worse, YouTube’s design choices end up dictating our expectations for other video players, be it Vimeo, Ustream, or the TED custom video player.

In particular, TED tries to be unique with its placement of the full screen control. To a lesser extent this is true of its ‘time stamp’ and volume control.

Zoomed in -

I can’t tell you the number of times I’ve wanted to full screen a video, moused to the bottom right, where “Share” and “Rate” are, and had to think twice about where in the UI I could actually achieve this.

Notice YouTube’s video controls for example -

I am not suggesting everyone just follow YouTube and allow the innovation of video players to die. However, there’s two things. 1) Other video players also follow certain conventions, so YouTube is not just the sole dictator of UX in the space

Hulu - 

Vimeo -

2) there’s no apparent strategic use case or rationale for moving the full screen icon to the top of the video player.

Consider the situation from first principles, as Elon Musk promotes. 

I come to a video; it’s playing. I want to change something about it: the volume, the size, whether or not it’s playing. Visually my eyes go to the video first. I look at it top down. Putting controls at the top would place them ‘ahead’ of the video itself, before my eyes have done a top-down scan. This would be illogical. Placing them right below the video places the controls in the very first place my eyes could go after ‘consuming’ the video visually. Moreover, placing the controls as an overlay on the video itself 1) makes the controls feel like ‘a part’ of the video 2) hides the controls when I am not hovering over the video, which saves space in the UI to prevent clutter.

Therefore, the typical use case, in addition to industry standards, does not support TED’s choice of button placement.

Tweet Follow @jasonyogeshshah
Vote on HN

TLDR; Greying out comments (especially those with long strings of replies) attracts, rather than limits, attention and therefore fails at preventing inflammatory statements from distracting and degrading the conversation. Lower placement, collapsing comments, and disabling replies are some rough ideas I have that may have been tried/failed before but may also succeed in HN’s intended purpose for modifying styling in the first place.

(Discuss here and of course, on Hacker News).

-

Disclaimer: I have been an official member of HN for under a year and do not have the context/history/understanding of what has led to the current approach. My sources were the HN Guidelines, this “Welcome to HN”/”Random Ideas for Improving HN”/”Who has Downvotes Privileges?” threads. My suggestion is meant to be constructive, not blindly or rudely critical. I use downvoted/flagging, but realize ‘downmodded’ may be more accurate, encompassing language.

-

I don’t have a full understanding of how comments/voting/flagging works on Hacker News. I have never seen the down arrow (I now realize that it supposedly takes 500+ karma to see this down arrow on comments), but I do see a link for flagging and I do know that I have seen a number of comments appearing in faded text sort of like this comment from user “suking”

Image -

Text -

slow change i’d say, and lots of discussion about it although i was probably the strongest champion.

reply

sequoia made them.

reply

not true at all.

reply

Here’s the broader thread for reference (this thread was about the recent sale of Loopt to Green Dot which sparked claims about “buddy exits” and “hating” on Sam Altman, username ‘sama’, and the Loopt team; full conversation here: http://news.ycombinator.com/item?id=3683994)

Why did you sell?

reply

We realized that to be really successful, we needed to be about finance and payments as well as location—I think the most interesting things will happen when those two come together. We talked to a number of companies and were most excited about the team and vision at Green Dot.

reply

When did you realize that? Was it a slow change, or was there an epiphany? And was it a company-wide realization, or was there a champion behind it?

reply

slow change i’d say, and lots of discussion about it although i was probably the strongest champion.

reply

sequoia made them.

reply

not true at all.

reply

* ready to sell business because it wasn’t going anywhere, sequoia knew greendot well and got them to get a return on the $ put in so it wasn’t a total buss. Hence the huge (relative to the sale) incentive for founders to stick around since they got nothing from the sale. is my guess.

reply

Not sure if you figured this out, but sama = Sam Altman = ceo of Loopt. I think sama’s words on this situation carry a little more weight than your guess.

reply

Oh - so he’s going to tell the truth then? I guarantee he has confidentiality agreements about all of that - so I don’t believe anything he says for a second. Loopt was a total bust for VC returns.

reply

if it was true, would you admit to it?

reply

Downvoted/flagged comments should not be merely styled with a different font color (specifically #e6e6e6).

Why? Unique styling attracts, rather than limits, attention to it.

-

For better or worse, many of us are voyeuristic. Seeing something downvoted or flagged means someone said something controversial; this is something we want to see. Just like a car accident attracts rubbernecking, or hearing someone shouting on the street causes us to stop and listen for a moment, this sort of aberration from the norm gets us interested in knowing more.

Every single time I see a slightly faded comment in an HN thread, my first action is to use select that text, so that it becomes visible to me. This is hardly different than slowing down to watch a pile up of cars on the side of the road or pausing in the middle of the street and looking over at loud voices shouting. I don’t like being morbidly fascinated or voyeuristic in these ways, but it’s real (and IMHO, common).

-

Of course, in recommending a different way of displaying something, I have to address why it might be different at all in the first place in order to confirm that this content should somehow be modified in the first place. My guess is that this content that gets downvoted/flagged is inflammatory/offensive, flat out wrong, or somehow otherwise justifies reducing the amount of visibility it has. The rationale would be that this sort of content isn’t “suitable” for the HN community. Given the democratic process of flagging content, if enough people deem this content as unsuitable, a ‘popular vote’ acts as a moderation tool and this content is ‘hidden’ from view via this unique font color that causes the text to blend into the background. 

On a basic level, it seems rational and beneficial to the community to give “bad” comments less exposure.

The purpose would be to discourage inflammatory comments and help keep conversations on track. That makes sense. But the current way in which it is being done does not achieve the intended purpose.

-

Some proposed alternatives for how to treat downvoted/flagged comments:

• Move such comments lower in the parent element/thread
  Comments that appear further down on the page likely get viewed less.
• Collapse those comments such that one has to deliberately click on an arrow/[+] icon or another inconspicuous element to expand/read that content
  Doing this in such a way that is subtle and therefore doesn’t make downvoted/flagged comments stand out may achieve the intended ‘hiding’ effect without full censorship 
• Disable replies to such comments
  What caught my attention, beyond the font styling, was a string of replies to the flagged comment. Not many comments get a ton of replies. So if this one did, I’m curious to read what kicked everything off and to give context to the string of replies. Disabling replies will ensure an inflammatory comment doesn’t inspire a firestorm. Given that it takes a certain number of flags before a comment would be deemed flagged, and replies may have already 

-

Any other thoughts? How has Reddit and other communities done it? What did I miss?

Discuss here and of course, on Hacker News.

Tweet Follow @jasonyogeshshah
Vote on HN

Like millions of other people this week, I found out about DollarShaveClub through its undeniably hilarious viral intro video, “Our Blades Are F****** Great”. I will leave it to someone else to pick apart how incredibly brilliant the video itself is (insofar as any form of advertising can be considered “brilliant”). 

But here’s what gets me: I signed up for a paid subscription service. On my absolutely, very, truly first visit. This is the holy grail of e-commerce UX.

I never sign up for subscription services. I have friends running subscription startups, and I am not a member of those. I never just buy things online without first checking what my older brother or my girlfriend think. Today I signed up without talking to ANYONE first. Today, UX made me throw my personal rules out the window. Before today, I never paid to subscribe to something on the first visit.

So, how did the Dollar Shave Club win me over and make me a subscriber without ever needing to retarget, track, or otherwise win me back on a return visit?

(See the Hacker News discussion for more)

—

1. Initiate a friendship. Sometimes people pay their friends; they never pay their enemies.  - Among other things that the video did, it made me want to be friends with the ever so affable Mike, the founder and also the video’s star. When your content makes someone start to think of you as a friend, it’s much easier to get them to sign up for your service.

2. Play video on-load, but only when your content is so damn good - The video hasn’t gotten old. It’s so dense with humor and good salesmanship that I have voluntary watched and rewatched it more times than I have my own sister’s wedding video I helped make. More than my own public speeches. Normally on-load plays are annoying. It’s not best practice. But by leading a consumer to consume some of your best content, you’re ushering them into liking you even more (See #1), which can’t be bad.

Zoomed in -

Consider the counter-situation: no default play. I rarely click to watch demo videos; I think I can get the info faster elsewhere. I click on tons of videos (like those shared via my Facebook feed). But I don’t click on demo videos, and I think a lot of people typically ignore demo videos because they have grown stale, just as infographics increasingly are growing stale, as well. People stopped innovating on demo videos - assuming they reached the pinnacle with sharp looking cartoons and animated writing. So if they don’t play it by default, many of us would have missed it, or not watched it again. But every time someone watches it, a smile comes to their face. The more they smile, they happier they are, the happier they are, the more likely they will feel like pulling out their wallets and giving you their digits.

3. Literally one action button - using language consistent with your brand. “Do It” is all they have. A strong, simple call to action that is consistent with this man-of-all-men image that the intro video creates and the wood-background, to-the-point UI reinforces. There’s no “Learn More”, no “Take the Tour”, or distracting options adjacent to the action button. Sure, you can click “Get Started”, “How it Works”, or “Our Blades” - but 2 of these take you to a page that enables the checkout process as efficiently as “Do It” does anyway by presenting you with the subscription options - and “How it Works” is focused on getting you to do the subscription, as well. Moreover, all 3 options are visually de-emphasized by color, size, and position relative to the “Do It” button.

Also note how the button points forward. It’s metaphorical, but plants a subconscious seed about moving forward with the process.

Observe how short and to the point “A great shave for a few bucks” is. They could have talked about delivery, price savings, etc. but in 7 words they let you see that …without ever having to say it themselves. Don’t rush to say things you’re worried a user won’t hear later; they won’t stay on the site just because you’re saying a lot of things.

4. Simple, alluring pricing - $1 is hard to argue with. They didn’t even lose me on the $2 shipping. They could have easily lost me there. “2x the price just for shipping? I’m out of here!” By getting me in with a $1/mo price, they have got me in the door and committed such that when I do realize the $3 price tag, I’m not going to walk away over $2/month. Why? They also have fundamentally excellent economics. I just paid $40+ for 12 new blades. Men realize how much they spend on razors and cartridges because in physical stores the cartridges are not cheap. They’re even locked up behind glass displays in CVS and Walgreens - buying new blades is one of the most memorable purchases for each run to the drug store. And given that a failure to buy new blades will likely result in a bloody outcome (dull blade -> more likely to cut yourself during shaving), the cost of not being on time with getting these blades is high. 

The UI makes the $1, $6, and $9 prices VERY clear and this breakdown is repeated throughout. Under $10 has its own allure. Allowing one to feel like he is buying luxury for $9/mo is a powerful UX capacity; that’s how much most customers of DSC probably spend on lunch (or part of it) in one day. 

5. Clear, visual difference between the plans - Most subscription products sold online with multiple different plans differentiate on quantity provided, or brand names sent in the box, or speed of shipping. The details are buried, or at the very least, not apparent.  Not here. You can literally SEE the difference. When you can see a difference, making a decision and moving forward is that much easier. And that’s all you need to know. Between the images they chose, the clear numeric difference in price, the color difference for the 2nd and 3rd razors, and even the positioning of the first blade (flat) vs. second/third blade (bent up) — all help differentiate the plans visually.

Zoomed in -

6. Put action buttons above the fold - When a user can SEE the next step they need to take as soon as the page loads, it significantly reduces the friction to moving forward. Imagine scrolling down, finding the button you need to hit, getting distracted by other content, etc. Not here.

7. More detail on demand - If you want the extra info, just scroll down. All the info you need is there in basic human language. # of cartridges, # of blades, a manly man’s funny description of the difference between the razors, and on-page linked details if you want them (but not shown by default, as that would add to clutter).

After clicking for details on the first product plan -

8. If you have to interrupt a checkout with sign up, do it tactfully and painlessly.

Note a few things - 

• Still says “Step X of 3” - so this feels like a step in the process, rather than an interruption of it
• The “WHO’S THE GENIUS?” text and “Clubhouse Rules” element makes me feel 1) smart (for saving, or shaving as they say, money) 2) cool, for being part of the club. This appeals to two qualities men can never feel enough of. And if they can buy it for less than 10 bucks a month, well, it’s compelling.
• The ‘Sign Up’ button is styled just like the other buttons for selecting a subscription plan, so this consistency makes it easy to see where to click once I enter my info.
• Placeholder text like “Your Email” and “Enter a Password” beat “Email Address” and “Password”. They just do. Why? Well, “your email” is natural. Today in 2012, how often do you say “What’s your email address?” vs. “What’s your email?” It is subtle, but it matters. Our language is increasingly casual in this respect. Same for “Enter your password” - it feels like I’m being given instructions - and on a page that could lead to bounces since it’s an extra step in the checkout process - holding your user’s hand in this way is important.
• Stick to just the basics - if they’re getting users to make an account, this form could have easily asked for 1) a password confirmation 2) detailed shipping info or any other info that a subscription business would want for its account holders. Instead they kept it to two fields: easier for a user to handle.

9. Make checkout fun for people - they’re spending their hard earned cash anyway: Note how this page is such an unusual (read: not drab) checkout page. Photo of the product - check. Inspirational man-laws that could be written on a tombstone: check. Strong, uniquely styled text fields that make you excited to enter your info - check. 

Dissected -

Somehow by even just bringing the red asterisk for required fields INSIDE the text fields, positioning it cushily inside the field, and making it look ‘sexy’ DSC has taken one of my most despised UI elements (that fire truck red asterisk) and made it look cool.

10. Leverage social sharing - especially after purchases people are excited to tell their friends about. And always let people see their order statuses! I want to help my friends save money. Not actively (I don’t think often “How can I lower my friends’ monthly bills?”), but if you are an application that will improve my friends’ quality of life, then I want to share you. DSC does this right away and enables me to virally get the word out there (and get rewarded with a discount, if the social benefit weren’t enough).

Zoomed in -

Had I not clicked right on the overlay to share DSC, they continue to incentivize me by suggesting that WHAT I JUST PAID FOR could be free next time around if I just tell some buddies about it. Easy enough.

By doing this just after check out and offering the benefit in the terms that a user is paying in (i.e. monthly cost), users can wrap their heads around what they will get in ways that offering discounts in email will never do. Email is too far away to the payments/checkout/subscription process for marketing.

If I buy something on your site, update me as soon as you can on the order status. Black holes are the worst. - As soon as the order goes through, I see this notification below. I know my order went through - nice. Peace of mind. You must ALWAYS give your users peace of mind after e-commerce check out. Imagine if you were Disneyland, your guests loved their day/all the rides/etc., but then they sit in the parking lot for 3 hours with no updates, food, water, or humor. Pretty bad way to end things right? Make sure you make the end of checkout smooth.

Zoomed in - 

—

I really hope DollarShaveClub takes off. It will be proof of how important humor and UX are in e-commerce - not just price and convenience.

Any other thoughts on how DSC has earned your business? How did you hear about them and do you think they have a real UX advantage?

Discuss here and on Hacker News.

Tweet Follow @jasonyogeshshah
Vote on HN

People have a lot of thoughts when reading books.

So annotations and folded page corners were born.

Well, it’s 2012 and e-books can make it super simple for readers to share gems on social networks with just a click.

Check this out from “The Entrepreneur’s Guide to Customer Development” written by Brant Cooper and Patrick Vlatskovits that builds on Steve Blank’s “customer development” methodology, recommended to me by Hiten Shah. I hope they don’t mind me posting this screenshot; happy to remove immediately if so.

I decided to send a tweet; it automatically looked like this:

The tweet links directly to http://custdev.com/quotes-from-the-entrepreneurs-guide-to-customer-development/the-second-most-desired-outcome/ - a custom landing page for that quote that sells the book to the visitor.

-

This is a valuable instance of smart social sharing. I have written before that if you can create social capital for the person doing the sharing, they are likely to share your content. Enabling me to quickly share a quote from your e-book (which consumers presumably voted for by purchasing it) without: 1) me not doing it b/c it is too much work 2) me copy/pasting/editing the quote and then presumably not linking anywhere, is a huge win.

What other ways can other e-books encourage sharing? How can other forms of downloaded content tap into virality?

Tweet Follow @jasonyogeshshah
Vote on HN

Gilt Groupe is one of the new darlings (and giants) of e-commerce. They provide products in more verticals than I can keep track of. So any misstep in their checkout process is likely worth millions of dollars in lost revenue.

Here are 3 UX tactics that I question about their checkout process, along with ways you can improve your own e-commerce site’s user experience.

—

TL;DR:

• Never confuse the consumer about what is or is not in their cart.
• Flexibility to modify carts at inflection points beats making a user feel desperate by locking them in.
• Design your page and action buttons logically, so that confirming checkout feels natural.

Discuss here or on Hacker News.

——

1. Once checkout has begun, always show a customer exactly how much they are paying and why (the item/tax/shipping breakdown). Prices for e-commerce sites don’t work like fancy restaurants that don’t list their prices. If you sit down to eat at a nice restaurant, you’re not going to leave. You will pay your bill. The restaurant could probably charge $100 for water and the awkwardness of explaining you didn’t realize how much it costs alone may be enough to get you to stay put. Especially since you’ll be with other people when eating out.

E-commerce doesn’t work that way. Customers have the freedom to bounce whenever. They’re probably alone while shopping (so there will be no embarrassment for “leaving”) . The potential of a customer with something in their cart bouncing is one of the biggest, constant, and most expensive threats e-commerce sites face.

I was disappointed to see that after clicking “Check Out” on Gilt Groupe I arrived here - 

Zoomed in -

It was as if I didn’t order anything at all! 

This was no accident because when I went from “Ship To” to “Payment” in the checkout flow, the price all of a sudden appeared. Also each time I added items, the price did in fact show. But this is what happens when you just check out with one item. I imagine Gilt has a ton of one-item orders to worry about, so this is nontrivial.

Eventually, on the next step, they get the price in there -

Zoomed in -

If a user is expecting to check out, and you show them a subtotal of “$0.00” they WILL think something is wrong. And that’s the last thing you want on a page when you’re asking someone to fill out a painful form like this one asking for shipping information. If they’re already “in pain”, and then you give them ANY doubt their order may not even be going through, I don’t see why they would stay.

—

2. Let users modify their orders. Locking them in will only increase anxiety and the likelihood they will be nothing at all.

On Gilt, once I have entered the checkout process, I all of sudden lose agency to edit the things I was going to buy. They have a link for ‘Continue Shopping’ but not one that brings up this really excellent overlay (2nd img below) where I could manipulate my order.

This is what I see. 

But I should be able to click a link and see this. Until the last step of check out, I cannot see this.

Zoomed in - 

Instead, Gilt takes the approach that says “You had your chance to modify your cart. We’re now going to try to keep you hyper focused on the check out process.” The problem here is that we’re not talking small impulse buys. If I am buying what I consider “luxury” clothes and items, you bet I’m going to take out items I decide I don’t need. By making this difficult, I lose trust in the brand and feel like the UX is inferior to what it would otherwise be.

Eventually they have an option to X out items, but they limit the ability to go back and learn more about the product on the original page (probably to keep you in the check out process).

Either way, if I realize I don’t want something during checkout, I want to be able fix my cart before the very last step.

—

3. Place action buttons logically below or horizontally adjacent to the info that makes an action possible and makes a user want to take that action. Imagine if a sign up button was literally ABOVE an email address and password field during registration. It wouldn’t make any sense. It would be a backwards UX to have to me fill out information and then mouse backwards (up) to complete the action. It is unnatural.

This is what we see on Gilt’s order summary.

Perhaps there is some business decision behind Gilt’s decision here, but I don’t see it. I expected for the button to “come down” by checkout time, but clearly that did not happen:

One could make the case that it being higher and displayed more prominently may motivate someone to click on it, or click sooner. But it’s not even clickable until the final stage of check out, and even if it were lower, it would still be visible and just as “clickable”(just in a more logical place).

—

Gilt gets a lot of things right - be it how they display items for sale, to how they entice people to share Gilt to get credit with Gilt, to their curation of items, to how they manage so many verticals without considerably compromising any individual vertical.

However, their checkout flow has some key flaws that, if fixed, could perhaps increase successful checkouts and even average value per checkout.

-

Discuss here or on Hacker News.

Tweet Follow @jasonyogeshshah
Vote on HN