How Important are Forms?

Very Important! Its necessary for your User to move through the form quickly and using the least amount of thought as possible.

Asking questions like “Would you like to deliver the package to your house?” can seem to be helpful, but unless they’re already ‘logged in’ it’s an irrelevant question. Since they need to type in the entire address anyway, whether its going to their own house or their friends house, its not going to change how the package is delivered.

Condensing legal terms and side notes into one paragraph, and placing them at the bottom or to the side of the page, gives the User the freedom to read it or complete the form without distraction.

Who Loves Mandatory Sign Ups?

Nobody, this is who. We discussed how Instant Gratification is a very important motivator, so make sure to provide a taste of your site before requiring a sign up. This article from Medium make this exact point. He also lists a couple of great apps that allow you to test the water before diving in, including an app helping you to set up your own A/B test.signup

Long Password Instructions

Providing guidance to the user is great and speed up form completion. However, when the instructions take 4 lines would you read them?

Screen Shot 2013-09-16 at 2.01.25 PM

I did not, and I was rewarded by a 6 lines error message.

Screen Shot 2013-09-16 at 1.57.56 PM

Was it really necessary? This frustrating experience happened I had to request a special pin in order to reset my password. Why did I simply got a temporary email link?

I am left wondering: why does it have to be so difficult to reset a password?

The Photojojo Experience

TL;DR: Photojojo is a wonderful example of UX done right.

I have found photojojo.com a while back: it is an interesting site for mobile camera fans with special tutorials, ideas and gear for the serious or occasional photographer using the camera on their mobile device. The site itself is nicely designed, but maybe nothing extraordinary. However, where photojojo.com excelled was in the shopping experience they provided.

Their shopping pages themselves are interactive: to discover more about the product you have a pull down a lever, labelled DO NOT PULL. A cartoon arm appears, it grabs the page and pulls it up, reveling the product’s details. Of course you can still scroll in a traditional way, but where is the fun in that? And who can resist the forbidden fruit?

lever

pullPage

pullpage2

Adding a product to the cart also present an animation, and the cart changes from a sad face to a smiling face. Once you proceed to the shopping cart, photojojo.com uses humor to make the dreadful process fun and enjoyable. Everything, from check-out form, to shopping cart icons, to confirmation, to shipping label, matched and created an unique and pleasant experience.

Their forms were well designed and clearly engineered for the faster completion. An example? They would infer the city and state from the zip code, while adding a touch of humor too. I wonder what they would say if I marked a different city…

photojojoForm

Registration was easy and painless, and the little robot made it more fun and personable. They also saved me time, by using allowing me to use billing info for shipping.

register2

Also, they streamlined and stripped down the whole check-out process, so it neatly fit in one page.

newPhoto

The fact they offered free two day shipping upgrade when Liking their page, made me way more likely to share the site. And I usually don’t post anything to Facebook. This is Rewards at work.

confirmation

The confirmation email was one of my favorite parts. How many time we glance over these boring emails, and put forget them? You can’t do that with Photojojo’s email.

(Click to see it full size)
photojojoConfEmail

Finally, when the product arrived — within 2 days as promised— the invoice reinforced the company’s branding.

invoiceAdj

So, will all these make me change a pre-exhisting negative impression about the company? Probably not. However, if given the choice between two similar sites, I may be more inclined to use Photojojo because of its memorable checkout process AND quality product.

Addendum

I never “unliked” them on Facebook, and on my birthday week I saw this post on my wall. This is good marketing, and persuasive design.

Screen Shot 2014-01-15 at 2.21.41 PM

 

Addendum 2

Photojojo does not disappoint! After the class demo, I received an email from them asking why I did not check out, and if anything went wrong. Another example of excellent customer service.

emailWhat great customer service! And after replying and explaining I simply used the site as a good UX example, they sent me (upon request) a coupon code for $5 off, followed  shortly by an offer of free shipping if I want to purchase the items in my cart. They even added a funny option for deleting the cart.

restore

 

Hamburger button on desktop sites

The hamburger button, as we have discussed, presents some challenges, mainly not universal recognition and behavior differences. An Apple User Experience Evangelist goes as far as asking you not to use it. Despite all these challenges, however, the icon is more popular than ever. It was originally created to represent collapsed menus in mobile devices, where real estate is at a premium. Now, it is appearing more and more on desktop sites. Evernote and Typeform are the latest web apps to use it for their desktop versions.

click on thumbnails to see bigger. Typeform menu is collapsed by default.
typeform2 evernote4 evernote3  

In my opinion this decreases the UX: why do I have to make an extra click just to navigate the site, or even worse to login?

What do YOU think? Do you like this new trend?

Good Confirmation Page

We talked about how is a good idea to use the confirmation page to reinforce the branding and to conclude the shopping experience on a high note. I think this confirmation page was another great example. It was also quite a surprise, as the site itself, and the checkout were not outstanding at all.

What Did They Do Right?
• all the necessary information was included, from order review, to billing address to shipping address, to confirmation number
• it offered the chance to print a receipt
• it specified that the card will be charged only when the item ships
• it showed the total charges how they will appear on my credit card bill
• it offered a customer service number
• and last but not least, the design was unique, original and a pleasant surprise

fatBrainToys_blur

User Onboarding

The sign up process is maybe one of the most critical interactions you can have with your audience, because it starts building the commitment you have been looking for. This process is called user onboarding.

User Onboarding is the process of increasing the likelihood that new users become successful when adopting your product. (useronboard.com).

Is your registration form supporting instant gratification and facilitation the process? Is your form so complex that it discourage users? And how are some popular web apps doing?

Find out in this rundown from useronboard.com

Implementation Model

Just on cue: just as we finished talking about implementation model, I tried to send email and got this message:

email error

Very useful, right? The problem turned out to be: no internet connection. As soon as it got back on, I searched for the error, and it turns out to be a “I/O Interrupt” error, basically a slow response from the server. However, most people are baffled by this, as you can see in many forums.

Wouldn’t be easier, once you know it is a error 007, to simply say something like: “I am sorry, the server is taking a long time to respond, so I can’t send your email right now. Please try again”. Or even better, how about asking me to check my internet connection? What do you think? Can you improve on this?