Tuesday, October 17, 2017

3 Smart Ways to Engage Users with Animation

Animation was once thought of as just decoration. But as technology advances and internet connections accelerate, designers are embracing the practical benefits. In this article, we’ll focus on one particular benefits of animation—marketing animation or animations that sell. Despite the fact that such animation isn’t intended to improve usability, it can impress the user, and give them some context for the subject.

Designers can utilize this type of animation in following ways:

1. Demonstrate Craftsmanship

People do notice the details. Attention to animation can make the experience feel crafted. When apps/sites create a visually stimulating experience it brings a level of excitement to the user.

Load Screen Animation

Loading animation is one of the oldest uses of animation which is supposed to distract the user from loading times. But even this type of animation can demonstrate that your product is great. For example, when a user launches Uber app they immediately notice an animated drop that is turning into the pin on a map. This animation isn’t purely delightful, it also influences a user’s eyes and control where users should focus. This quick opening moment makes a clean first impression and entices the user to interact further.

Signature Animation

Some companies go even further and use animation as a distinctive feature of the brand. MailChimp is one of the companies that use animation in such way. The company fulfils a fairly technical niche, creating and sending email campaign, but using animation it transforms this dry task into an inviting experience. The service adds small and delightful surprises throughout the user journey and makes sending e-mails a lot more fun.

2. Better Deliver a Key Message

Animated effects help get your message across more clearly. Using animation you can take complex ideas or processes and make them easily digestible in a fun and graphic way.

Interactive Animation

Animation is able to highlight a product’s strengths. Bellroy is a company that sells wallets. They say that strive to create a slim design to reduce pocket bulk. In the example below, you can see how animation used in Bellroy clearly indicates a product’s behaviour and demonstrates its benefits.

Hover Animation

Hover animations are very practical for delivering additional information about your products. This type of animation makes the revelation less jarring and provides an opportunity to add some delightful character to your site.

Storytelling Animation

The storytelling potential of animations can add an emotional connection to an otherwise dull interface. Some common examples of story-telling are pages that will show off a new product by “assembling” it before your eyes. For example, the page dedicated to the Mac Pro on Apple’s website shows you exactly what’s under the hood as you scroll down:

Story-telling animations can also breathe life and fun into the long scroll. Instead of the parallax animations which is very common, opt for something subtler. Consider breaking up your site into scrollable “chunks.” Within each chunk, you can introduce the content through animations. Animations in the example below from Le Mugs website make the content “come alive” by animating simple art illustrations.

3. Engage users to take further steps

The use of animation will influence the eyes of your users, and it can control where they focus their attention on your page. A human eye is naturally attracted to motion and this makes animation the perfect tool for controlling your visual hierarchy.

Direct User Attention

Moving elements are a powerful tool to attract users’ attention. If the goal is to draw the user’s attention to a single element out of several or to alert the user to updated information then an animation will do the trick. As long as there are not many other competing elements on the screen, even the slightest bit of motion will grab attention. Seattle’s Space Needle site takes advantage of this subtlety. The site draws attention to the instructions with a minor—but effective—animation in the up arrows.

Encourage User Action

Fine animation and interactive effects encourage users to click. Look at the design used for the “Chekhov is Alive” site below. The design begs you to click to find your character.

Things To Consider

Animation is a double-edged sword. Incorrectly used, it can ruin user experience.

Avoid animation which distracts the user from their task. In the world of online sales and marketing, distraction can be death.

A very important aspect to consider when designing an animation is the frequency with which it would likely occur within a single user session. The animation might be nice the first time a user sees it, but after 100th attempt, it can get annoying, especially when it has no purpose other than being “fun”.

There are plenty of UI elements you could animate in both fun and down-to-business way. But remember one thing, if you want to create marketing animation you should set a goal of creating an animation which has both style and purpose.

170+ Photo-Realistic T-Shirt Mockups – only $17!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot http://ift.tt/2kU3Heh




from WordPress http://ift.tt/2kYYYZ5

Monday, October 16, 2017

Measure Twice, Cut Once: The Reason Why All Those Marketing Tactics Keep Failing

Tactics don’t necessarily fail because they’re bad.

They fail because of the context around them.

The customer segment was off. The timing was bad. Or the attempt was half-assed.

It all works. SEO works. Facebook ads work. Conversion optimization works.

But the degree to which they deliver depends wildly on other factors.

And the only way to ensure success is to get those things right, first, before jumping head-first into the tactics.

Here’s how to do the hard work, up-front, to make sure your next campaign goes off without a hitch.

Facebook ads “don’t work”

You can’t browse the interwebs without running into a new shiny hack. A brand new strategy or tactic to implement.

So you ditch the to-do list. You push off the important. You bend to the urgent. (Or at least, that which faintly resembles the urgent.)

You try the new hack. You invest hours that don’t exist and money that you don’t have.

You follow the “Launch Plan” from influencer XYZ to a T. Literally: Every. Single. Thing.

And then?

It falls flat. It works, but not enough. It produces, but not enough.

Seth Godin published Meatball Sundae in 2007. A decade ago.

Strange title, right? There’s a reason behind it:

“People treat the New Marketing like a kid with a twenty-dollar bill at an ice cream parlor. They keep wanting to add more stuff—more candy bits and sprinkles and cream and cherries. The dream is simple: ‘If we can just add enough of [today’s hot topping], everything will take care of itself.’”

Except, as you’re already all too familiar, that’s not how it works in the real world:

“Most of the time, despite all the hype, organizations fail when they try to use this scattershot approach. They fail to get buzz or traffic or noise or sales. Organizations don’t fail because the Web and the New Marketing don’t work. They fail because the Web and the New Marketing work only when applied to the right organization. New Media makes a promise to the consumer. If the organization is unable to keep that promise, then it fails.”

It’s the context, not the tactics.

We aren’t talking about 1960’s advertising. We can’t run ads in a vacuum and shape the public’s opinion.

There’s a lot of other things at stake. There’s a lot of other aspects to consider.

Facebook advertising is one of the best examples because it’s surprisingly complex and nuanced. You can’t just throw up a one-and-done campaign to see revenue pour in overnight.

That’s why it’s a waste of money according to popular opinion.

68 million people can’t be wrong… can they? (How many people voted last year again?)

Let’s click through a few of these to pull out the real gems:

“Facebook’s stock tanked after the IPO for one singular reason. Their advertising model does not work well. Most people who’ve advertised on Facebook, including myself, have been disappointed.”

Um. Ok.

“In that case, not only has Facebook and other digital technology killed ad creativity, it’s also killed ad effectiveness.”

I’m not even sure what that means.

Ok. Well, please, nobody tell Spearmint Love that Facebook ads don’t work. Because they just posted a 1,100% revenue increase last year using… Facebook ads.

Now, it wasn’t all rainbows, sunshine, and unicorns for them. They ran into problems, too.

It took six months for them to figure out one of the reasons their campaigns were stalling. It was simple and right in front of them the entire time.

Kids grow up.

Which means baby-related ads only work for so long with a particular cohort, before it’s time to refresh, update, and move along.

Again — the underlying issue was the market, the people, the life stage. Not the tactic.

They adapted. They went upstream. They followed customers as they naturally evolved.

So, no. “Boosting” posts endlessly doesn’t work. Buying likes doesn’t work, either. Not by themselves, obviously.

Likes, impressions, and fans don’t pay the bills. Leads and customers do.

That holds true regardless of which advertising medium we’re discussing: TV, radio, billboards, Google, Facebook, or otherwise.

You need a customer acquisition machine on Facebook. Simultaneous campaigns running in parallel. One building the attention and awareness for the next. Another nurturing those and presenting different enticing offers. Only after the foreplay can you get down to business.

Yet, that doesn’t happen. At least, not as often as it should. Which leads to… “It doesn’t work.”

This is far from the only scenario. This same issue pops up over and over again.

It even applies to the proposed Facebook solution you’re putting in place.

Custom audiences aren’t segmented

Facebook might not have the same level of user intent that AdWords does.

However, they do have custom audiences.

These dynamically-generated audiences can help you laser-target campaigns to skyrocket results. (Or, at least, push unprofitable ones past break-even.)

They allow you to run retargeting campaigns on steroids. You can overlay demographic and interest-based data with past user behavior, so you can accurately predict what someone wants next.

Custom audiences help increase your Relevancy Score, which in turn, lowers your Cost Per Click while also increasing your Click-Through Rate.

Image Source

Awesome, right?

So what could possibly be the problem?

Too often, your custom audiences aren’t custom enough.

Let’s talk about your business. How many products and services do you sell?

Now, how many of those do you sell to different customer segments or personas?

Imagine a simple matrix:

The possibilities might double or triple as you add each new variation. Exponentially.

It’s not my place to tell you that such a business model is too complicated. It is, however, to say that you’ve just made your ad campaigns infinitely more difficult.

Because this matrix doesn’t even take into account the funnel stage or intent level each audience has for each product. So we can add another layer of complexity here.

Let’s say you have a custom audience set up for past website visitors to your site. Fine.

However, in that one “custom audience” you’re lumping together all of these personas and products.

In other words, it’s segmented. Barely. A little bit. But not good enough.

The trick is to think through each possible variation and have your customers help you.

For example, the services page from Work the System segments you into two groups right off the bat:

Now, subsequent retargeting campaigns can use the right ad creative. The one that talks about the unique pain points of an online business (like remote workers) vs. that of the brick-and-mortar variety (like local hiring).

See? Everything is (or should be) different.

You can even do this on pricing pages.

For example, Credo names each plan for a different audience:

You segment product features based on personas. So why not your ad campaigns?

Agencies have more fixed expenses than freelancers. Therefore, their project minimums will be higher. Their goals are also in growing and managing a team vs. doing the work themselves.

They’re similar once again. But vastly different when you get down into the weeds.

MarketingExperiments.com worked with a medical company on a similar issue. Simply rewriting collateral pieces for a specific segment (as opposed to a nameless, faceless audience) increased CTR by 49.5%.

Image Source

Another trick you can try is including different ‘paths’ for each potential problem (and your service that lines up with it.)

So you send out a re-engagement email campaign with links to content pieces for each. Then you see who clicks what.

And then you sync your email data with custom audiences to add these people to the right destination.

Follow any of these recommendations (or better yet, use them together), and you’ll get custom audiences that are, in fact, custom.

It also means you’ll have about 3-4 times the number of custom audiences and campaigns running at any given time.

But it means you’ll have a better shot at success. And at getting Facebook ads to “work.”

All because you put in the proper work ahead of time.

Conversion tracking is off (or non-existent)

People think data is honest.

Unfortunately, it’s not. Data lies more than we care to admit.

Case in point: Conversions.

WTF is a “conversion” these days, anyway?

An email subscriber? A marketing-qualified lead? A sales-qualified lead? A one-off customer? A repeat customer? A high LTV customer?

Sometimes, it’s none of those things.

Years ago, I worked on a new client’s ad account.

The Conversion Rate column inside AdWords showed totals over 100%.

Now, obviously, I know that I’m dashing and brilliant and debonair. But not that much.

Because technically that’s impossible.

So we looked at it for only a few seconds to realize what was happening.

In almost every case, the Conversions total was equal to or more than the Clicks one.

That ain’t good. Here’s why.

Problem #1. It looks like we’re tracking clicks to the landing page as conversions.

Except, their goal wasn’t even a form fills opt-in. It was phone calls.

They anecdotally told me that phone numbers brought in better customers who also converted faster.

Ok, cool. Unfortunately, though, there was another issue.

Problem #2. No call tracking was set up, either.

So the phone rang. Constantly. Several times an hour. And yet PPC got no credit. Despite the fact that PPC probably drove an overwhelming number of the calls (based on the data we saw earlier.)

This client was primarily running classic bottom-of-the-funnel search ads. No display. So the peeps calling were converting. We just had no idea who was or why they were.

This creates a cascading effect of problems.

It meant that there was no historical conversion tracking data to use to draw insights. We literally had no idea which campaigns were converting the best or even which keywords outperformed others.

rabbit out of hat gif

But wait, because it’s about to get worse.

Problem #3. Aggregate numbers of leads to closed customers was being tracked in Excel.

In other words, X leads from Y campaign turned into customers this month.

Obviously, that’s not ideal. We couldn’t even track PPC leads accurately because of the issues above.

But from there, nobody could see that customer John Smith who converted on Wednesday spent $5,000 and came from Campaign XYZ.

Their “industry specialized CRM software” (read: sh!t) didn’t have an API.

A dude from the “industry-specific CRM” company gave me the following response: “We do not allow for any attempts to manipulate data in the database. Any attempts to do so would cause errors and result in data corruption.”

Which meant that even if we fixed all of these other problems, there was no way for us to pass data back and forth when PPC leads did, in fact, turn into paying customers.

So.

We’re blindly spending dizzying amounts of money. Daily.

And yet, somehow we’re supposed to come in and start driving new customers ASAP?

Without any idea of what’s currently happening, what happened previously, or even what we’re supposed to be optimizing in the first place?

via GIPHY

I’ll spare you the boring details. It involved months of going backward to fix various tracking problems (none of which we scoped or billed correctly beforehand #agencylife.)

We basically did everything imaginable.

Except our job.

We designed and created new landing pages so we could use form fields to track and painstakingly set up call tracking on every single landing page. Then we went so far as to create a process for their internal team to manually reconcile these data points each month and figure out how many customers were finally coming from PPC.

Then after we stopped working together, they undid all of the call tracking work we set up. Because: clients.

</end rant>

The point is, no tactic in the world can make up for this scenario.

Yes, SKAGs are good. Geo-targeting is good. Day-parting is fine, too.

But none of it matters if you can’t address the underlying issues. Otherwise, you’re just flying blind.

Not just a single goal inside Google Analytics. But many. Multiple. At different stages. For different personas. For different products/services.

Which always never happens.

First, create a good-old Google Analytics goal. You know, create a ‘thank you’ page, redirect opt-in users there, etc.

Image Source

More than one persona? Create more than one landing page and form. Message match from the last section helps you keep this all straight.

Then go back into AdWords and create new goals there, too.

The key is to set up the script properly on the new thank you page, and not the landing page. Otherwise, you’ll run into the issue we saw earlier (tracking clicks instead of opt-ins.)

Image Source

Last but not least, noindex and nofollow the thank you page. Because the last thing you can afford now is for people to find this page from Google, bypass your form, and distort your data.

But wait… what about the initial problem? Phone calls!

We can’t let those go untracked, either. Unfortunately, both Google Analytics and AdWords fail us here. (You can track them as Events, but you’ll still only get aggregate data at best.)

Unless… you hook up another tool like CallRail to swap out your web and landing page numbers. Then you can add a ‘swap target’ to destination phone numbers. It will give each visitor a new number so it can appropriately track all calls.

However… that means you’ll have to go back and append your AdWords and Analytics goals so that they pass the appropriate referral data.

You want to see which AdWords campaign, ad, and keyword delivered each lead.

Only then can you make tactical, day-to-day changes with any certainty.

This OCD-level tracking changes everything.

For example, if you know that a customer is worth $1,000/mo over 12 months and the cost per acquisition is only $200… you can afford to bid up the Cost Per Click aggressively.

Yes, you might pay more in the interim. But you’ll also make more in the long-run.

Context changes everything. But only if you see the entire picture.

Conclusion

All tactics work to one degree or another.

Some might be more appropriate for a particular company. LinkedIn ads, say, would be better for a recruiting company than a baby blog.

However, beyond the obvious, there are margins for error.

Those margins get worryingly large when you’re neglecting to take context into account.

Tactics are good, but they’re not miracle workers. What worked for one person on one site at one particular time will almost certainly not work the same for you.

That doesn’t mean it’s bad, you were wrong, or you suck.

It just means there were other factors you neglected to take into account. And it’s why copy/pasting tactical roadmaps or launch plans often falls flat.

The more time you spend doing the hard, boring stuff to get a better handle on your scenario, the better your probability of success gets.

And the more lucrative those changes can become.

About the Author: Brad Smith is the founder of Codeless, a B2B content creation company. Frequent contributor to Kissmetrics, Unbounce, WordStream, AdEspresso, Search Engine Journal, Autopilot, and more.

from The Kissmetrics Marketing Blog http://ift.tt/2yLRyhC




from WordPress http://ift.tt/2zdkHi7

What’s New for Designers, October 2017

This month’s collection is packed with tools that span the scope of website design projects. From icon packs to seasonal vectors to a few cool typefaces and some code snippets to make your life easier, we think you’ll find at least one element in this roundup that you use right away.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

Dropbox Design

Dropbox dropped a new design outline and branding this month and it is bold, colorful and packed with trendy concepts. What does this mean for you? When big brands launch new design patterns, they often end up as trends. It will be interesting to see if the bold, mod-style design concept starts trending among more websites.

Khroma

Khroma, which is still in beta, calls itself an “AI color tool for designers.” You start with a set of 50 colors that you pick and train an algorithm to generate colors you like and block ones that you don’t. The algorithm has learned from some of the most popular color palettes on the internet to produce great combinations; you can browse your colors by swatch, gradient, as a palette or in images or type.

Data Viz Project

How do you best visualize data? That’s a big design question. This project showcases plenty of ways to create charts and graphs with information for an easy to understand display. Click on any visualization type for information about how it works, function, shape and examples of live data.

Devices.css

Looking for pure CSS versions of the latest devices? Grab them from Devices.css, including the iPhone X and 8, Google Pixel, Galaxy S8, tablets and more.

URL to PDF

URL to PDF is a microservice for rendering receipts, invoices or any other web content into a PDF. The API converts HTML+CSS content to a PDF with headless Chrome using Puppeteer.

Bubbly Backgrounds

Create a cool animated background image with moving bubbles. The tiny bit of code is less than 1kB and always fills the width and height of the viewport, so it is a plug and play solution for a number of projects. The tool allows you to create a “bubbly” on your canvas as well for a custom look.

Draggable

Shopify has a cool little tool, Draggable, that is a modular drag and drop library. You can move elements, sort and watch everything snap into place with fast and responsive sorting. It works with click, touch, and force touch right out of the box. Plus, it is extendable – write a custom module for additional functionality and submit it to the Github repo for review.

Modulator

The spacing tool can help you make sense of your grid and design system. There are various inputs for units, spaces and widths, plus a type scale.

Nested Symbols and Auto-Updating Styleguides for Sketch

Sketch users will love this “smart” template that uses nested symbols. The template is a starting point so you don’t replicate some initial design phases with every new project and can dive straight into wireframing. The package includes buttons, inputs, dropdowns, notifications, paginations, tooltips, calendar, etc. all as a Sketch template. Just load and start dragging and dropping elements.

Flow.ai

Flow.ai is a tool to create conversations with chatbots using artificial intelligence. The drag and drop interface provides an easy way to create chatbots with advanced functionality.

Untitled Slider

Nathan Taylor’s Untitled Slider puts a fun new twist on the same old slider animation. The rotating, color changing slider is dramatic, interesting and attention-grabbing.

Sticky Sidebar

Sticky Sidebar is a pure JavaScript plugin for making smart and high-performance sidebars that’s integrated with a resize sensor to automatically determine dimensions when the size of the container is changed.

Wired Dots

Wired Dots is a collection of free Bootstrap themes, elements and components. The new site will keep adding freebies. 

Clockify

Clockify is a new (and free) time-tracking tool for agencies and freelancers. You can keep up with projects and hours worked for yourself or a team. Track by project or see how productive you are. Manual and automatic time-tracking options are included.

Moocha

Do you feel like it takes too long to find the right online course? Moocha searches all the online course sites so all you have to do is enter a topic – UX design, for example – and you can see everything out there from places such as edX, Coursera, Udacity and more.

Halloween Vector Toolkit

It’s a month of all things spooky and this little vector kit is packed with Halloween themed elements for websites and print designs. (They might be a little more whimsical than creepy.)

Happtizens Character Creator Set

This fun set of cute characters provides a starting point for creating vector creatures and personas. Each character almost looks like a finger puppet in a minimalistic style.

iOS 11 Glyphs

This big set of open source glyphs is in the new iOS 11 style with the new filled icon design. (Those old outline icons aren’t being used in the tab bar anymore.) The pack includes 200 icons that are consistent with Apple Guidelines.

Jam Icons

Jam Icons is a pack of 422 pixel-perfect line icons. There’s everything from web-based icons to directional to player icons to text icons and social media icons. You can use the icon set as a font with a CSS stylesheet or as independent SVG files. (And they are all free.)

TypeStrap

TypeStrap is a CSS-based type kit that uses a modular scale to help users control typography. It is built on Bootstrap 4.

Future Fonts

A group of type designers is working on a project that they are calling a “platform for designers who use type and those that create it.” Future Fonts will allow users to license typefaces while they are still in progress and provide input to help make them better and more useful. It’s like a beta site for type.

Archia

Archia is a simple typeface with mostly uniform strokes and tiny serifs. It includes six styles – only regular is part of the free download – and could work for display or smaller type applications. It supports multiple languages and comes with tabular figures (a major bonus if you are creating tables, pricing lists or financial reports).

Jullian Script

Jullian is a fun script that has a quirky and modern flair. The strokes have a watercolor feel and the typeface comes with a full upper- and lowercase character set, punctuation and numerals.

Mouron

Mouron is a beautiful, modern sans serif typeface in a full uppercase style. It would make a great poster or display typeface and includes numbers and a set of fun alternate characters.

Effortless, Real-Time CSS Editing with Stylizer Version 7 – only $29!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot http://ift.tt/2ynPEAI




from WordPress http://ift.tt/2yqYTSs