Archive for JavaScript

Sweating the UI & UX details in Close.io: Emails & Email Addresses

My blog post on the Close.io blog was pretty popular (18,000 pageviews & lots of HN comments) so I wanted to cross-post it here.

Sweating the UI & UX details in Close.io: Emails & Email Addresses

We like to think of our sales software, Close.io, as having a lot of magic under the hood. When we do our jobs successfully, our users may not even notice, but their lives will be made a little easier. We try to make features just work without requiring users to think too much, even if that adds complexity in code.

Here are a few examples:

1) Entering contact details

Most CRM and address book software make you enter your contacts’ phone numbers, email addresses, and URLs in specifically chosen separate fields per data type.

We realized this sucked and now give you a contact form like this:

image

You shouldn’t have to make a choice for each phone number, email address, or URL you enter for a contact. We just give you one place to enter all their contact information and we figure out what type of data is what. (Then you can 1-click call or email this person).

Is taking a string and deciding if it’s either a phone number, email address, or URL particularly hard? No, but it’s “hard enough” that most CRMs and address books don’t do it, and we wanted to take the extra time to make our users’ lives easier, even if they don’t notice it.

2) Pasting contact email address

A recent iteration on the contact form was improving a fairly common scenario where you had email from somebody and wanted to save their email address onto a contact. Many email clients give you a string like: “John Smith” <john@example.com> when you copy the address. Originally if you tried to enter that as an email address in Close.io it would complain about it not being in the simple email format like john@example.com.

Now, when you paste that text into the email field we’ll automatically pull out the email address part and fill in the contact’s name field if it’s blank:

image

Again — not particularly difficult, but something most software doesn’t do. This is the type of magic that many users won’t even notice or think twice about, but helping users avoid validation error messages is as much of a benefit as any new feature you could make.

3) Zero configuration email sending

The first few times you try to send email in Close.io, it’s as simple as clicking the big “Email” button on a sales lead, typing a message or choosing a template, and clicking send. We already know your email address when you signed up, and we use our own Mailgun account to send email as/from you, so that it just works.

We do put a cap on the number of emails you can send without entering your own SMTP credentials (which will also give you better email deliverability), but for users just checking out Close.io, it’s one less configuration step in the beginning.

4) Magic email tracking from all your email clients

Forget having to BCC/Foward all emails with sales prospects to some random CRM email address. Plug your IMAP credentials once into Close.io and we automatically track your sent and received sales emails regardless of how/where you send them.

Much more to do…

We have a long list of other little UI/UX improvements we need to make, but hopefully this was enough to encourage you to think twice about the tools you’re using and discover opportunities for improvement.

And if you’re a software developer… be sure to sweat the details – it takes more time, but it makes for happier users!

We’d love to hear your reactions… follow @closeio and @philfreo

- Phil Freo

Add A Comment

End of 2012 Review

At the end of a year I like looking back and seeing what I’ve accomplished and what new technologies I started working with in the year. Here’s a little summary.

Read the rest of this entry »

Comments (2)

How to unit test AJAX Requests with QUnit and Sinon.JS

We write QUnit tests for Close.io, a big Backbone.js app, to help avoid introducing bugs. Pretty quickly when testing front-end JavaScript code you’ll have to deal with how to test asynchronous callbacks and especially code related to AJAX/XHR requests and how their responses are handled. Here are some basic examples of how to use Sinon.JS to handle this.
Read the rest of this entry »

Comments (3)

How to allow direct file uploads from JavaScript to Amazon S3 signed by Python

On Close.io we originally implemented Filepicker.io to allow for file uploads while sending emails. While it was a quick way to get started with file uploading initially, after several minutes of downtime of their API and then an unannounced change in their JSON response format, I was reminded once again that you shouldn’t to rely on small startups for critical parts of your tech infrastructure.

There’s nothing wrong with filepicker.io if you want to use a lot of their features, but in our case we just needed to allow simple uploading of files to our own AWS S3 bucket. Here’s how:
Read the rest of this entry »

Comments (11)

Uploading static assets (CSS/JS) to S3 for CloudFront CDN

For a new Backbone.js + Flask project I’m using grunt + grunt-contrib, RequireJS’s r.js, Flask-Assets / webassets for static file (LESS/CSS, JS) compilation. But I needed a good way to get my nicely optimized static files onto a CDN and serving proper HTTP headers.

Using the excellent s3cmd tool, here’s what I came up with.

This example will break for browsers/proxies that don’t support gzip, but this is fine for my needs. Any other solution would either require a custom origin web server or writing different filenames in HTML depending on the request coming in. But since I want to use S3 as my origin this is the easiest/simplest solution.

Since all assets are “built” with a md5 version number hash in the file name, I want far futures headers to cache permanently.

Comments off

Two Years at Quizlet

The last two years (2010-2011) I spent working at Quizlet were an incredible learning experience.

Like I did in Jan 2010, I wanted to reflect on some of the technologies I learned and things I did over the last 2 years…

Read the rest of this entry »

Comments off

Behind the scenes look at my work at Quizlet

I just wrote a pretty in-depth article on the Quizlet Blog: “How We Do Product Development at Quizlet: An Inside Look at the Making of Speller” which describes the process of how Andrew and I created “Speller”, the latest study mode on Quizlet.

…a behind the scenes look at how we created Speller, our engineering challenges and processes, and how we obsessed over the user experience and the educational experience.

Includes some technical details of how we programmed it (mostly JavaScript), the text-to-speech, development process and usability testing, and lots of screenshots of the different iterations we did in order to get the UI right.

It’s a little long, but hopefully worth the read!

Comments off

Book Review: “jQuery 1.3 with PHP”

I was given another book to review, called “jQuery 1.3 with PHP”, so here it is.  The book is aimed at beginners or intermediate developers wanting to learn how to “enhance your PHP applications by increasing their responsiveness through jQuery and its plugins“.

Read the rest of this entry »

Comments off

Greasemonkey script: Facebook Reorder Sidebar

Hate scrolling down to see birthdays on Facebook? I just wrote a quick user script to reorder the parts in the sidebar on Facebook’s homepage.

Before: Requests, Suggestions, Sponsored, Highlights, Events/Birthdays, Connect
After: Requests, Events/Birthdays, Suggestions, Highlights, Sponsored, Connect

Read the rest of this entry »

Comments off

Notes from Google I/O Keynote 2009, day 1

Google I/O Keynote

Wednesday 5/27/2009

San Francisco, CA #io2009

Read the rest of this entry »

Comments off

« Previous entries Next Page » Next Page »