Chrome

Events With Google Analytics

GA icon for events

One of the useful features of Google Analytics is the ability to track specific events. It gives you insight into how users filled your forms or on which buttons they clicked inside the video player. You are getting into the world of measuring actions inside your pages and not just between them. In the demo below we will see how to track a ‘download’ button click event and how to track the form filling. It’s super useful when you wish to learn if users use the Autofill feature with your forms.
It’s an easy API that you should leverage, so let’s jump into it.

What?

Events (in our world of Google analytics) are user interactions with content that can be tracked independently from a web page or a screen load. Downloads, mobile ad clicks, gadgets, forms, embedded elements and video plays are all examples of actions you might want to track as Events.

Implementation

Event hits can be sent using the send command and specifying a hitType of an event.
The send command has the following signature for the event hit type:

ga('send', 'event', 
   [eventCategory], [eventAction], 
   [eventLabel], [eventValue], 
   [fieldsObject]);

You need to make sure to add the GA script tag to your page.
Something similar to: Continue reading

Standard
Chrome

Web Forms Checklist

web forms checklist

In our Udacity course “Building High Conversion Web Forms” we talk a lot on how to think on the friction that forms create and what to do in order to smooth it. One of the outcomes from our source was this checklist that you can use in order to make sure you are on the right path. In this post, I will cover the first 2 topics: form design and inputs types. In the future, I’ll cover validation and touch.

Continue reading

Standard
Business, Chrome

Make Money On The Web (CodeMotion 2015)

Optimize for Autofill

Today I had the pleasure to present at  codemotion TLV. It was a great opportunity to meet so many good friends that are pushing the web forward.

TL;DR

  • Mobile browser traffic is 2X bigger than app traffic and growing faster. So you better pay extra attention to your mobile website and make sure the friction on your forms is as low as possible.
  • On mobile, entertaining apps dominate time but websites capture the bulk of the transactions (=money!)
  • Optimize for Autofill! make sure you are using all the right autocomplete types in your form’s field. From Chrome usage data we learned that you will get 30% increase in form fill speed. It’s quite an amazing stats, no?

Continue reading

Standard
Chrome

Password Forms That Browsers Love

login form example

There are two types of common forms that you see every day on (almost) every website: Sign-up and Sign-in. If you want to improve your users experience and allow them to fill these forms quickly and efficiently, this post is for you.

You can help ensure that browsers’ password management functionality can understand your site’s sign-up, sign-in. All it take is a ‘touch’ of a change for your password forms by enriching your HTML with a bit of metadata.

Here are the rules to follow: Continue reading

Standard
Chrome

High Conversion Web Forms

Cam and Ido - web forms course lead image

Last week, my new course “Building High Conversion Web Forms” was launch on Udacity. I had the pleasure to work with Cameron Pittman on this course and I hope you are going to like the outcome.

Let’s take one (I promise not two) step back, and think about forms. If you think on any meaningful experience on the web today, you will find out that it comes with a form. It might be a shopping cart, registration form, survey or even every login form. If it’s valuable, most probably it got a box that wish someone will fill it with information. Whether it’s a form made of text boxes, toggles, buttons, checkboxes, or touchable widgets, web developers need to be purposeful about forms to make users happy and increase conversions.

In our course, you’ll learn best practices for modern forms. It’s not just ‘watching’ videos. You’ll practice your skills along the way with a few self-directed projects, including an e-commerce checkout and an event planner app! As a special bonus, you’ll also watch a series of interviews with Luke Wroblewski, Google Product Director.

Continue reading

Standard
Chrome

Web Forms Best Practices

The Tree

Here are some of the rules that will help you build better forms. As we know, it’s a mobile world, so we wish our forms to be responsive and mobile first by nature. Let’s see how to do it right.

Use big font size and provide easily touch buttons

Here it’s simple, when you have doubt, make things bigger and check. In other words, you wish your fonts to look great both on mobile and desktop. For mobile, a rule of at least 16px will be a good start. Why? because it’s big enough in most cases for mobile. Plus,  this minimum size will prevent all iPhones from zooming into the fields. For buttons and touch areas, start with at least a size of 32px for the input field height. This will ensure it’s not too small. However, check it both on mobile (few devices from 4″ to 6″) and on larger screens (=desktop or large tablets). Both Foundation and Bootstrap gives you a default size for such elements that is good for mobile.

Take advantage of Autofill

This will enable your users an easy way to complete forms with pre-populated data.  Look for opportunities to pre-fill information you already know (e.g. Geolocation to fill the zip code), or may anticipated to save the user from having to provide it. For example, pre-populate the shipping address with the last shipping address supplied by the user. See it in action at: greenido.github.io/form-example.html Continue reading

Standard