Jason Shah

Users of Buffer swear by it. It’s not everyday that a product grabs, and keeps, users’ affinity the way that Buffer has achieved so far.

And so, thanks to a tip from @sachagreif, I decided to take a deeper look at what can be learned from Buffer.

Here’s their home page, dissected.

Good - 

• Use Conventions For Navigation: the time to be risky is not when users are trying to find content - Standard black bar at top with easy navigation
• Unique colors help your brand stand out but be consistent with your choices and keep in mind the connotations of your colors: Consistent, unique color scheme (not yet another variation on Facebook/Linkedin/Tumblr blue)
• Keep sign up to as few fields as possible, and make the rest of the page point towards it: Simple sign up form, emphasized by the entire UI
• Big text draws attention: use wisely. Unusually large placeholder text in the text fields for sign up - catches my attention and the novelty alone almost makes me want to fill it out
• Use placeholder text to instruct the user on the actions they should take - “Choose a password” placeholder makes this feel more like a sign up form, than any other form that may ask for a password (e.g. Login forms). Just the novelty of that word choice also makes me smile a little bit for the sake of originality
• The top element that appears off-white has ‘noise’ (the effect that prevents a background or element from looking ‘too smooth’ and adds texture)
• Clear headline (‘Be awesome on Social Media’) with helpful, concrete detail immediately below that
• Row with 4 aspects of the Buffer value proposition; unique, non-overlapping elements: can work for anything; works on the go; integrated into Twitter; provides analytics - In my head, I’m thinking I’m sold.
• If you need to provide more info, try to still keep the user on the original page - When you hover over any of those 4 options, you see the ability to click; this opens a lightbox with more info on the feature Buffer is touting. Great. I’m glad they kept me on the page and used the lightbox to expand the visual without bouncing me around the site or choosing to leave out more info.
• The press logos are faded out; everyone should do this on their apps/pages (I’m a guilty violator). It distracts from the rest of the page and breaks the color scheme when the original logo colors are there, and users click on them, often sending them to a new site to check out the article..but then users may very well get distracted by the content on THAT site.
• The bottom customer service options (‘Get in Touch’ and ‘Submit an Idea’) are unique; Buffer opted out of using the common UserVoice or GetSatisfaction widgets, so their app stands out when I look at it, and again, the novelty intrigues me. I get interested in how their widget will operate.

Bad - 

• Choose your navigation options, and their order, very carefully - The 3 navigation options are “Blog”, “Sign In”, and “Sign Up” - by putting blog first, they direct traffic away from their main site, especially because it is not hyper-easy to get back to the main site from their blog (the logo on the blog links to the subdomain for the blog, not the main site — too many sites do this). Then using ‘Sign in’ and ‘Sign up’, adjacently, seems unwise. I would rather see ‘Login’ and ‘Sign Up’ — it separates the two more easily. Otherwise people may very well click to Sign in when they mean to sign up and vice versa
• If you highlight a page in navigation elements, it better be for the current page someone is one - Don’t highlight ‘Sign Up’ in green in the navigation: this sort of highlighting among navigation options seems to typically work to highlight which page of the options one is currently on. So, I got curious as any user may get, and I clicked on it, but that sent me to a DIFFERENT page (the sign up page, obviously). But I felt disrupted. Only highlight the current page if you highlight a navigation option.
• They don’t have on-page, AJAX error checking, so making a mistake during sign up kicked me to an angry sign up page from the home page
• While the press logos are rightly faded, they link to individual stories. I have seen where this actually ends up distracting the user as they visit the media outlet, and then click around there. Instead, linking the whole div of logos to a press page on YOUR site, where they can read snippets of the articles, may work better for retention and time on site.

Suppose I had clicked, of my own volition, on the ‘Sign Up’ link.

Among other things, notice how the text placeholder is different now - on the home page it was ‘email address’ and ‘choose a password’. Now it is ‘What’s your Email?’ and ‘Type a password’. Some people may like this variation; perhaps it has personality, shows that the site is human, etc. But for me, it makes the site feel unprofessional. Inconsistency makes me lost trust. (The same way a misspelling a word does. #irony)

—

OK so I enter my email and a password to sign up - nice touch to show progress via a progress GIF. Standard but good. Sort of like the ‘Creating…’ text after hitting ‘Sign up’ buttons.

I might take the chance to make the GIF more informative/personable, and instead have it say something like “We are making your account!” alongside or instead of the GIF, but to each his own. PayPal does a good job when you’re signing in saying something like ‘Now logging you into your secure account…’

From there (see below), Buffer rightly guides a new to signing up and pre-checks the option to Follow Buffer on Twitter. Would I otherwise follow them? Probably not. But they do this, and I think to myself “Well, OK. Cool. I’ll follow them ‘cause they asked (sort of).” Probably part of why they have more than 40K followers; non trivial for a pretty new tool. They also made sure that their Buffer account 1) opened a Buffer tooltip for learning more about them when I hovered 2) linked through to their Twitter account, to make it easier to check them out first if I wanted to.

Anyway - so I click to Connect Twitter (notice how they put that before Facebook, since the value with Buffer seems most obvious when connected to Twitter. Would be odd if FB Connect showed up first since people seem to send out more + need to schedule posts more on Twitter.)

So then after the authorization goes through as expected (so I am probably a fan of Buffer right now for not screwing anything up yet, but I haven’t yet seen value, either)…I see this - 

Zoomed In -

OK, so ‘Get Extra Features’. Nice word choice. As opposed to what others say when they want new users to share new membership on one’s social networks, ‘Get Extra Features’ is appealing in that I feel like I can unlock something with the push of a button. Alternatively, honest appeals such “It would mean a lot to us if you would share us..” also work well. Cheesy things and gimmicky word choice typically don’t work as well.

I’m already a social media maven (presumably), so sure, I’ll share. Notice the button value as ‘Share with Buffer’ - unique button value, makes sense here since ‘Share’ just would be too generic of a term for a social media app like this one. At the same time, word choice like ‘Share with Buffer’ confused me a bit: I am a sharing something with BUFFER, or sharing something WITH Buffer. In other words, will this button enable me to use the application to share something, or in some way would I be sharing content with the application (and not necessarily my followers, etc.).

Notice the small reminder “You can customize first” to let you know, and put you at ease, that the Tweet will not be published without your review. I am sure this helps drive up the number of people willing to share the message.

-

OK, so then what does my typical ‘dashboard’ look like?

The Good -

• Good of them to encourage me to use the Buffer Chrome extension; some services promote their add-ons and extensions when it doesn’t necessarily make sense. However, with Buffer, you WANT a Chrome extension. You don’t want to have to visit a destination site all of the time.
• Not only do they offer the extensions, but they know which browser I am using based on my user-agent, so customizing the message makes me feel like they care about how they communicate with me and are making me jump through the smallest number of hoops. Thanks for that, Buffer.
• When I hover over the extensions notification, the ‘Install Now’ button is animated. It moves around a little bit. That is cool. Small, novel things like that which require very little front end development work make people feel like you know what you are doing with your app, and it helps to instill trust by standing out.

The Bad - 

• [redacted: part relevant to toutapp, not buffer - thanks @tommoor for the pointer!]
• It’s sort of weird to have a ‘Welcome’ element BELOW the main element that will continue to be there in the future. ‘Welcome’ elements draw attention, so my eyes scan the page, and jump past the top element where I’ll presumably engage in the future. I’d like to see the welcome message somehow integrated with the main element. The importance of that is that you want to get a user used to what they’ll be doing on a regular basis as soon as possible; if the primary interaction is a user posting via Buffer, then the emphasis should be there.
• My Twitter handle is cut off. Granted, it’s long, but it’s a turn off to see only half of my username show in the tabs. The intention of showing that is to show that my account is indeed connected, and so posting in this box will cause an update in my feed. It should instill a sense of trust, as I am trusting Buffer to manage my Twitter communications. So if I see a small bug where my full username is visually cut off, it makes me lose a little bit of trust in this as an app that can get the small things right. Will my Tweets cut off? Will some not get delivered?…
• When I click on ‘Write your first Tweet’…nothing happens. Because I am supposed to go up to the typical Tweet entry field and set up a Buffered item there. But the lower box sort of looks like I can enter text in it, and even encourages me to do so. It would be wise to only ask for the information WHERE it can be entered, and style elements differently enough so as to not confuse the user.
• There are a couple of ‘+’ signs featured prominently, where one can add a new account. However, why such an emphasis on adding accounts? I don’t have the data, but I imagine many Buffer users just connect ONE account, and even if they want to connect many, why place such a major, redundant emphasis on having people add accounts as opposed to placing a link for it somewhere or allowing the change under settings? I misinterpreted the icon for ‘adding a tweet’ or ‘sending the tweet’ since that is what I figured would be so prominent — not adding an account. Take a cue from Tweetdeck - which plays in the same space as a social media manager of sorts -

Tweetdeck makes the cursor active in the compose element for a tweet, and just once places a ‘+’ with a silhouette of a person to indicate that you would be ‘adding a personality’. By doing this, they place the emphasis on the MAIN action (i.e. tweeting), but still make adding an account intuitive and easy. 

—

OK, so suppose I am ready to compose a message to be Buffered. I click on the text area to compose an item, the box expands like so:

So you options now, are the X at the top to (presumably) collapse the text area, and then the bottom panel: 1) a gift icon 2) ‘Inspire Me!’, 3) a link 4) Post Now 5) Add to Buffer.

So…I don’t know. This just feels like too much.

1) The Gift Icon - It’s actually a button for increasing the space you have on Buffer. So they want you to share a promotional message on FB/Twitter. The icon’s image is confusing IMHO. But beyond that, is this something people need to see EACH time they post? Probably not. Buffer can intelligently include this, or feature a notification about it, when people actually need the extra space (and arguably are more likely to fulfill the process of sending this message).

2) Inspire Me - It’s a cute little feature to insert witty messages with little effort, but it’s sort of unnecessary, and not in the way that really adds some great personality quirk to the service. It’s sort of like the ‘Random Quote Generators’ of the early days of the mainstream Internet. And whether that icon is needed on the element for posting a message through Buffer all the time is questionable. Maybe for someone who has never used Buffer, or a formerly inactive user, as this may lower the barrier to posting a message and help someone get in a groove or something.

3) The link - as it turns out, it’s not to turn text into hyperlinked text. Rather, it is for toggling whether or not auto shortening is on or off. And if you turn it off, they hit you with a notice that you will no longer get data on the clicks within your Tweet if you disable it (clearly, they want to own your links). I feel like this can either be in settings, or by backspacing certain text in your text area, it can be decided dynamically (i.e. if I start backspacing a shortened URL, it can default back to the original URL before letting me backspace through the rest of the URL).

Maybe it can stick around, too, but the bigger picture I am building here is that the element could be cleaner and with a bigger emphasis on the primary action.

4) Post Now - cool, this needs to exist along with ‘Add to Buffer’. Although, this could be combined with ‘Add to Buffer’ and it could function like Facebook posts and when one can choose from a slick dropdown to either ‘Post Now’ or ‘Post Later’ and then the Buffer options open up. But they have some nice error checking - when I hit Post Now on an empty message I got this -  ”Nice try, but you need to write something!”

5) Add to Buffer - great. sticks with the green that has been used to call attention to elements throughout Buffer’s UI. But how come when I click it, or before then, I don’t get to set the time when I want it set, or the number of hours/minutes from now that I want to pass before it gets posted. Instead, the post is added to my queue like this -

And so, those are some ways I would fix the way posts can be made on Buffer.

You’ll notice, I can click on the time to the left of the text of the upcoming message to modify it. But as it turns out, this sends me to a full settings page. I would encourage Buffer to allow more on-page edits than it does currently.

And if I eventually get sent to a page like this when clicking to edit my message, why not let me customize this sooner?

On one hand, it streamlines me jumping into sending messages. On the other hand, I may not have known I had this option. I would present this earlier in the flow, perhaps right after I was encouraged to ‘Share Buffer’.

So there, I have sent my first message on Buffer!

—

Quickly, let’s look at the Buffer extension, which arguably would be a more common use case then visiting Buffer.com for posting (see top right of screen) -

-

Buffer is the middle icon of 3 stacked items. So I click and get this - 

Then I click ‘Add to Buffer’ and get - 

Seamless experience. They overlay the page nicely. Extracted the page name and URL correctly. Updated the screen after the update was posted, and extracted itself so I was back on the page I intended to be on. Nice.

Now, I would make some small tweaks, like showing the time when it would be posted (as a reminder), and maybe somehow giving me access to other tweets that would be sent out before/after, so the context is something I can work with, but overall, not bad.

— 

Buffer gets a lot of the UX right - minimal sign up flow, encourages me along the way with the progress GIF and ease of sending my first message, etc. Little quirks like animation on hovering for the Chrome extension notification (although they kept showing this even after I installed it…), preventing me from sending a blank message, the ease of a preset schedule for my messages (although this could be more noticeable).

But there’s always room for improvement, so I’d encourage more fine tuning to really streamline the UX and encourage more frequent use of Buffer.

Hope you learned something. Let me know what you think here and on Hacker News!

Tweet Follow @jasonyogeshshah

Enter your email address:

Delivered by FeedBurner