Why Are Analytics Important?

So much about making things in the business world is that we need to solve problems for people by providing them value. In turn, we need to make some money—we need to profit, in fact. Not in a horrible greedy attitude, but in a practical way so that we can continue to solve interesting, real-world problems for people.

Analytics help us measure how people use our app—not overall but the moment-to-moment interactions that make up workflows. Analytics let us validate the little things that make up the big things like entirely new features. Big things provide value to our customers and provide return on our investment. Breaking down the big things in your app as a flow of little things makes it easier to make decisions based on facts. Fact-based decision making carries more authority when you go to convince your stakeholders and tech team that you need their time and talent. If your organization has made decisions based on gut instinct and tradition, consider analytics as a new tool to help validate your choices.

Getting good feedback is tough. Once you make a product design decision, how do you know you made it correctly? What if a change went wrong? How would your users tell you? Maybe they blast you on Twitter or give you a one-star rating but do not list specifically what mistakes were made. Getting out of the office and meeting random people at coffee shops is a good way to get feedback because you can hear what they say, and better yet, watch what they do.

Jeff Gothelf recommends this as a starting point for educating your team:

There are lots of good reasons to be inspired by his suggestion. It’s surely worth trying to see if it becomes a part of your toolbox.

My challenge with that plan is wondering if it scales over time. Scheduling team outings into the field to accumulate user responses for frequent changes is time consuming. I’m also stuck visiting people only in my general region. I dream of one day having hundreds of thousands and possibly millions of users, and talking to a statistically significant number of them will be impossible.

Instead, I’ll be better informed if I have a system through which I can sample all my users—no matter how many there are. Then I can truly learn what they like and don’t like about my app more quickly and confidently. That’s why anonymous analytics are crucial to my plan for building remarkable user experiences.

As soon as changes are made and deployed into the field, we start seeing waves of users telling us if we made good choices. Analytics let us know if things are clicked, pushed, tapped, and swiped more often or less. Looking at the data over hours, days, and weeks lets you know if changes were well received or poorly understood or simply didn’t matter. From there, you can decide to take more actions. Engineers tasked with turning slow code into fast code know the first rule of Code Club is: Measure. If an engineer can’t measure how slow a chunk of logic is, they’re wasting their time making code changes because they won’t know if things become better (faster) or worse (slower). Learning from that, we can say that changing user interfaces, experiences, contents, layouts, and responsive design ought to be tested.

Embrace change. So much of the startup culture is based around pivoting, A/B testing, optimizing signup conversion, and seeking market acceptance. Attributes for a modern company’s new hire are surely based around these evocative, change-related subjects.

People can be skeptical of change because they’re fearful of what they think it means. People can want assurance that an investment will pay off and demand all the answers before choosing to begin. People can have an attitude that they want to finish something and be done with it. Rarely is this level of control available to us, and that level of control is an illusion.

Are your changes to a mobile site better enabling your users to use your technology? While making design changes, ask yourself:

• Are call-to-action buttons more often hit when you make changes to your CSS breaking points specially made for a phone?
• Does turning a row of buttons into a drop-down menu for tablet form factors make users touch the options more readily?
• Does making images fluid to better scale down with smaller screens help or hurt your product sales pitch?

Turn to analytics to come up with answers to your questions. This might sound more like science than art to you, and I’ll assure you there’s nothing wrong with that.

If all of this sounds like too much math or is pushing you uncomfortably toward science, I encourage you to stay strong and see how you can internalize analytics to empower your creative process. Establishing a loop in which you keenly observe, propose educated guesses about how things are used, create a test in which you put changes into public action, and then measure the outcome sounds very much like the scientific method. It is, and that’s perfectly fine. This describes the core loop of our modern scientific process, and it’s well worth taking it for your own needs. I’m worried there’s a split in our culture that pits art and science at opposite ends of a spectrum. What’s worse to me is that they are characterized as being opposed to one another. It’s a shame to me, wrong headed, and worst yet, not helpful. Scientists must dream, too, after all, and I think artists and designers will do well to postulate and evaluate.

For all creative leaders reading this book, I advise you to help your team merge some of these principles into their daily work. It will raise their level of quality by pushing their efforts past intuition and reference to what has worked in the past. These are helpful ways to start a collaborative conversation, but reality check that work with analytics. Measure how well solutions perform and either improve them or cut them, but try to remove the guesswork whenever possible.

In this chapter, I’ve chosen Google Analytics as the tool I want to show you how to use. It’s one of the most popular systems because it has a complete set of features, it works on both websites and native apps, and it has a free tier that makes it easily within your reach right now.

Adding Google Analytics to Your Site

I will introduce you to analytics by using Google’s product. It’s easily accessed and feature rich, and signing up for even the free tier gives you access to great capabilities. Later in this chapter, you’ll read about alternative solutions, but for now, let’s work on using this one.

Visit Google’s product website and sign up:

Their website guides you through the sign-up process as well as the first steps. Initially you’ll want to:

1. Create an account representing your project, or company
2. Create a property representing an aspect of that account, such as a website
3. Planning ahead, you should create two different properties: development and production. The development version is for your team to use while building and testing. The production version is the final one your customers will use. You don’t want your test data to get mixed with your real production data. Just remember to switch the analytics account code from development to production when you go live.
4. Copy the snippet of source code from the Google Analytics property page under a menu called “.JS Tracking Code.” It’s about 10 lines of JavaScript put on each page on your website that you want Google to know about and measure with analytics. This might be on the single index.html of an incredibly simple one-page website. For a multipage site, it must be put on every.html file you’re building.

Once you’ve added this JavaScript to your web pages, they’ll start reporting analytics data to Google.

Reading the Google Analytics Default Dashboard

Once you have your website or web app reporting analytics through the Google SDK (software development kit) libraries, you’ll start seeing data. A limited amount of data is reported in real time, but the bulk of it is accumulated in temporary storage and processed once a day, reducing the burden of crunching events into numbers. All the numbers are available, and you can crack open the data and peek around. Looking into the default dashboard is intimidating for more than a few hardy souls.

When I look at the dashboard with new teammates, there’s no other way to describe the feeling. My friends and colleagues see all of the dozens of pages of reports, and they feel like a flood of big data is hosing them down. Can a person really drown in numbers? Mentally, you can. Historical collections in aggregate are reassuring, but for daily reference, we need to simplify our reporting process by dialing into what’s necessary.

Necessary to whom? Self-interest dictates one person or a team is only interested in what they’re interested in. Enjoying a highly targeted stream of analytics data is much better than trying to cope with a flood of big data.

Is there a way to limit data collections to only what we need? No, that would be a mistake, because sometime in the future, we might have new business needs and want to draw conclusions on historical data for new insights. The first rule of big data is saving our data, and if it’s not there, we’re stuck at a dead end. Instead we want filtered reporting, and Google Analytics has a fantastic way to do that. You can create a custom dashboard that dials in to the specific views you want to track and learn from. Custom dashboards are easily shared with your team-mates who have access to the same projects you do. Hard work invested in handcrafting a custom dashboard is only done once for a team, because it’s only a few clicks away from the entire group.

Crafting a Custom Reporting Dashboard

In the previous section, a list of 11 stats was highlighted as especially valuable for hammering responsive web design into shape. Let’s work through building a custom-made reporting dashboard that looks like this:

Here’s how we create a custom reporting dashboard fine-tuned for your needs:

1. Log into Google Analytics
2. Choose your website’s property name from your account’s list. For example, on mine, I click on my blog website, which is enabled with analytics.
3. You’ll land on a default view of your site’s information that probably shows an audience overview report. Click on the “Dashboards” option on the left-hand list to open it up and show its actions.
4. Select the menu option called “+ New Dashboard”
5. A dialog box will pop up titled “Create dashboard” with “Blank Canvas” selected by default, which is what we want. Here is a chance to name your dashboard. You might want to call it “Responsive Analytics Reporting.” Press “Create Dashboard” when you’re ready.
   

6. A dialog box will pop up titled “Add a Widget,” prompting you to add the first reporting element. Let’s create the first one on our list.
   • Title it “Total Session Visits”
   • Select the “2.1 Metric” option under the Standard group
   • Under the “show the following metric” option, click on the “Add a metric” input to search for the “Sessions” entry on the drop-down list
   • Press the Save button, and you’re done with your first reporting widget
   • You’ll look to it to learn how many users have viewed your site.
   

7. Click the toolbar option called “+ Add Widget” to show the same dialog box you just used, and we’ll add another reporting widget.
   • Title it “Visits by Device Category”
   • Select the “Table” option under the standard group
   • Under the “Display the following columns” section, click “Add a dimension” and choose “Device Category”
   • Click “Add a metric” and choose “Sessions” from the list
   • Press the “Save” button and you’re done
   • You’ll look to this list to see what category of device users viewed your web-site with. This includes desktop, mobile, and tablet.
   

8. Click “Add a Widget” to show the dialog box for adding another reporting widget.
   • Title it “Screen Resolutions”
   • Select the “Table” option under the standard group
   • Under the “Display the following columns” section, click on “Add a dimension” and choose “Screen Resolution”
   • Click on “Add a metric” and choose “Sessions” from the list
   • Press the Save button and you’re done
   • You’ll look to this list to view the top 10 screen resolutions that view your website. Desktop and handheld are combined here.
   

9. Click “Add a Widget” to show the dialog box for adding another reporting widget.
   • Title it “Mobile Screen Resolutions”
   • Select the “Table” option under the standard group
   • Under the “Display the following columns” section, click on “Add a dimension” and choose “Screen Resolution”
   • Click “Add a metric” and choose “Sessions” from the list
   • Under “Filter this data,” click on “Add a filter”
   • The first item defaults to “Only show”; change it to “Don’t show”
   • Click on “Add a dimension” and set it to “Device Category” from the drop-down list
   • The second item on this row defaults to “Containing”—leave that, but type “desktop” into the adjacent input field.
   • Press the “Save” button and you’re done
   • You’ll look to this list to see the top 10 screen resolutions that view your website that are only from mobile and tablet, because desktop answers are excluded
   

10. Click on “Add a Widget” to show the dialog box for adding another reporting widget.
    • Title it “Mobile Device Branding”
    • Select the “Table” option under the standard group
    • Under the “Display the following columns” section, click on “Add a dimension” and choose “Mobile Device Branding”
    • Click “Add a metric” and choose “Sessions” from the list
    • Under “Filter this data,”click on “Add a filter”
    • The first item defaults to “Only show”; change it to “Don’t show”
    • Click on “Add a dimension”and set it to “Device Category”from the dropdown list
    • The second item on this row defaults to “Containing”—leave that, but type “desktop”into the adjacent input field.
    • Press the “Save” button and you’re done
    • You’ll look to this list to view the top company names that make mobile devices popular for viewing your website.
    

11. Click on “Add a Widget” to show the dialog box for adding another reporting widget.
    • Title it “Mobile Device Model”
    • Select the “Table” option under the standard group
    • Under the “Display the following columns” section, click on “Add a dimension” and choose “Mobile Device Model”
    • Click on “Add a metric” and choose “Sessions” from the list
    • Press the “Save” button and you’re done
    • You’ll look to this list to see the top company names that make mobile devices popular for viewing your website.
    

12. Click on “Add a Widget” to show the dialog box for adding another reporting widget.
    • Title it “Visits by Country”
    • Select the “Table” option under the standard group
    • Under the “Display the following columns” section, click on “Add a dimension” and choose “Country/Territory”
    • Click on “Add a metric” and choose “Sessions” from the list
    • Press the “Save” button and you’re done
    • You’ll look to this list to find the top countries visiting your website.
    

13. Click on “Add a Widget” to show the dialog box for adding another reporting widget.
    • Title it “Browser Popularity”
    • Select the “Table” option under the standard group
    • Under the “Display the following columns” section, click on “Add a dimension” and choose “Browser”
    • Click “Add a metric” and choose “Sessions” from the list
    • Press the “Save” button and you’re done
    • You’ll look to this list to see the most popular browsers that your customers use to view your website.
    

14. Click on “Add a Widget” to show the dialog box for adding another reporting widget.
    • Title it “O/S Platform”
    • Select the “Table” option under the standard group
    • Under the “Display the following columns” section, click on “Add a dimension” and choose “Operating System”
    • Click “Add a metric” and choose “Sessions” from the list
    • Press the “Save” button and you’re done
    • You’ll look to this list to see the most popular operating systems that run devices viewing your website. Desktop and handheld are combined here.
    

15. Click on “Add a Widget” to show the dialog box for adding another reporting widget.
    • Title it “iOS Version”
    • Select the “Table” option under the standard group
    • Under the “Display the following columns” section, click on “Add a dimension” and choose “Operating System Version”
    • Click on “Add a metric” and choose “Sessions” from the list
    • Under “Filter this data,” click on “Add a filter”
    • The first item defaults to “Only show”—leave it at that
    • Click on “Add a dimension” and set it to “Operating System” from the drop-down list
    • The second item on this row defaults to “Containing”—leave it at that and type “iOS” in the adjacent input field
    • Press the “Save” button and you’re done
    • You’ll look to this list to see the specific versions of the iOS operating system running Apple-made handhelds.
    

16. Click on “Add a Widget” to show the dialog box for adding another reporting widget.
    • Title it “Android Version”
    • Select the “Table” option under the standard group
    • Under the “Display the following columns” section, click on “Add a dimension” and choose “Operating System Version”
    • Click “Add a metric” and choose “Sessions” from the list
    • Under “Filter this data,” click on “Add a filter”
    • The first item defaults to “Only show”—leave it at that
    • Click on “Add a dimension” and set it to “Operating System” from the drop-down list
    • The second item on this row defaults to “Containing”—leave it at that and type “Android” in the adjacent input field
    • Press the “Save” button and you’re done
    • You’ll look to this list to see the specific versions of the Android operating system running on its handhelds.
    

17. Now that you’ve established your reporting widgets, take a few moments to marvel at your creation. It gives a nice, high-level overview of how your website is serving your customers. Finalize a few dashboard-level settings. For example, click on the toolbar option “Customize Dashboard” and choose your preferred layout. I suggest a four-column mode to allow all of the widgets a chance to display at once. You’ll also notice that you can drag and drop reporting widgets around the dashboard space to group them in ways that make the most sense to you.

    Your dashboard will look something like this.

    

It’s time to pause and celebrate. This is next-level stuff.

Exploring Advanced Topics

What we have reviewed here is just an introduction to analytics. You’ll want to invest weeks understanding them. As you gain more experience and confidence using analytics to measure your mobile viewers, you’ll start wanting more advanced features. Consider adding one of these to your workflow where it makes sense.

Alternatives

It’s always important to constantly judge our tools. When a real-world hammer cracks or a metal chisel bends, it’s easy to loosely hold it in your hand and casually say, “It’s all busted—let’s go get a new one.” Digital tools aren’t so easily judged, are they? They’ll never break so obviously, but they will show wear and age. Then we need to make a choice. Sometimes we replace them with the newer model and upgrade. Sometimes we need to research alternatives. We must pick them up and test them out in real-world situations. Then we really know if the tool is fit for the purpose. Here is a brief list of noticeable alternatives to Google Analytics: Kissmetrics, Piwik, ChartBeat, Mint, Clicky, MixPanel, and gaug.es. This is a relatively crowded market, with many alternatives for every budget and need. Check it all out and make your final choices.

Fact-Based Decisions for Effective Design

Most people are attracted to or at least curious about the big-data phenomenon. It seems like something that’s only in the domain of different teams at other companies. Journalists writing on the subject herald big data as the next wave of computer science that will help every industry imaginable, but without concrete examples of what it means, does, or amounts to. This phrase appears weekly in the industry press in one form or another. For me, analytics strikes at the heart of big data. It’s your website being measured, collected, and reported in the context of your users viewing it and applying it to their lives. Facts about your website are accumulated daily and without pause as blocks of numbers.

When looking at analytics, I don’t simply see numbers anymore. A while back, I realized the truth—that these numbers are our users’ voices. We must listen to them as they communicate with us through analytics.

The lean startup and user experience (UX) movement proclaims that designers must get out of the office and venture out into the real world to show apps and sites to real people. Encouraging normal people to use work in progress is the only way to find out if assumptions about user interface are correctly producing positive experiences. While I surely believe this as a maker, I doubt its long-term validity as an engineer.

We engineers think of our software running on one server but then two, four, and more. As the business gains customers and success, we consider how our services can rise to meet the demand. This is “scaling.” We ask ourselves if we build software that scales up over time reliably, sometimes routinely, occasionally rapidly, without drama to meet increasing demand. Given that point of view, I think the idea of getting out of the office to meet our customers and seek their approval is a tactic that helps validate and build confidence early but does not scale over time. As our software is loaded up on the public Internet, we cannot possibly go out to meet new users across the world and cannot possibly understand who all of them are. Analytics help us do that as a proxy that meets our users where they are. No matter who they are, what devices they use, which time zones they operate in, or where they live, analytics tirelessly listen to them, record their actions, and let us graph figures from those statistics.

As you take recorded events and report on them, you’ll draw out factual understanding from your users’ raw data. Comparing reports from quarterly data ranges, weekly, even daily, you’ll see trends emerge. Although various industries warn against the volatile nature of predicting the future, the accepted practice is that past trends indicate future actions. Anticipate what your customers need and move toward them letting them better use your work.

• Are screens getting smaller or larger?
• Are operating systems fading away or growing in popularity?
• Are new geographical regions showing up?
• Are marketing and product investments paying off by acquiring new customers and adding revenue?
• Are people engaging with your content when they arrive and sticking around as long as you want them to?
• Are new users finding your site and are legacy ones returning?
• Are buttons and UI options easily understood and valuable enough to use?

Getting out of the office and directly asking some of your prospective users if new designs make sense is crucial for early critiques. Mixing in analytics will help you gain understanding of how sites in production perform at a large scale. Believe me, I’m not trying to take the fun out of the creative workflow by adding in so many numbers. Analytics are tools like any other, and they have their place. It’s a new enough field, however, that I must hold it up to the light and let you have a good look at it. Intuition is always a valid jumping-off point for creative endeavors, but if we want to support a business through making money, please take time to investigate how measuring and reporting will support your professional efforts.