Sunday, April 27, 2014

Stop Wasting Users’ Time

Our users are precious about their time and we must stop wasting it. On each project ask two questions: “Am I saving myself time at the expense of the user?” and “How can I save the user time here?” What is the single most precious commodity in Western society? Money? Status? I would argue it is time.
We are protective of our time, and with good reason. There are so many demands on it. We have so much to do. So much pressure. People hate to have their time wasted, especially online. We spend so much of our time online these days, and every interaction demands a slice of our time. One minor inconvenience on a website might not be much, but, accumulated, it is death by a thousand cuts.
Steve Jobs claimed that improving the boot time on the Macintosh would save lives. A 10-second improvement added up to many lifetimes over the millions of users booting their computers multiple times a day.
Millions of people might not use your website, but millions do use the Web as a whole. Together, we are stealing people’s lives through badly designed interactions. When I work on a website, one question is front and center in my mind:
“Am I saving myself time at the expense of the user?”
That is the heart of the problem. In our desire to meet deadlines and stay on budget, we often save ourselves time by taking shortcuts via our users’ time. Let’s explore some examples of what I mean.

Taking Time To Improve Performance

The most obvious example of wasting users’ time is website performance. This is what Jobs was getting at with boot times. If our websites are slow, then we’ll waste our users’ valuable time and start to irritate them. One more cut, so to speak.
The problem is that improving performance is hard. We became lazy as broadband became widespread. We cut corners in image optimization, HTTP requests and JavaScript libraries. Now, users pay the price when they try to access our websites on slow mobile devices over cellular networks.
Making our websites faster takes time and effort, but why should users suffer for our problems? On the subject of making our problems the users’ problem, let’s take a moment to talk about CAPTCHA.

CAPTCHA: The Ultimate Time-Waster

CAPTCHA is the ultimate example of unloading our problems onto users. How many millions of hours have users wasted filling in CAPTCHA forms? Hours wasted because we haven’t addressed the problem of bots.
Just to be clear, I am not just talking about traditional CAPTCHA either. I am talking about any system that forces the user to prove they are human. Why should they have to prove anything? Once again, another inconvenience, another drain on their precious time.
We could solve this problem if we put the time into it. The honeytrap technique helps. There are also server-side solutions for filtering out automated requests. The problem is that throwing a CAPTCHA on a website is easier.
Not that CAPTCHA is the only way that we waste the user’s time when completing forms.

Don’t Make Users Correct “Their” Mistakes In Forms

Sometimes we even waste the user’s time when we are trying to help them. Take postal-code lookup. I have been on websites that try to save me time by asking me to enter my postal code so that it can auto-populate my address. A great idea to save me some time — great if it works, that is.
The problem is that some lookup scripts require the postal code to have no spaces. Instead of the developer configuring the script to remove any spaces, they just return an error, and the user has to correct “their” mistake. Why should the user have to enter the data in a particular way? Why waste their time by requiring them to re-enter their postal code? This doesn’t just apply to postal codes either. Telephone numbers and email addresses come with similar problems.
We also need to better help mobile users interact with forms. Forms are particularly painful on touchscreens, so we need to explore alternative form controls, such as sliders and the credit-card input system in Square’s mobile app.
Then, there are passwords.

Why Are Passwords So Complicated?

Why do we waste so much of the users’ time with creating passwords? Every website I visit these days seems to have ever more complex requirements for my password. Security is important, but can’t we come up with a better solution than an arcane mix of uppercase, numbers and symbols?
Why couldn’t we ask users to type in a long phrase instead of a single word? Why can’t my password be, “This is my password and I defy anyone to guess it”? The length would make it secure, and remembering and typing it would be much easier. If your system doesn’t like the spaces, strip them out. You could even provide an option for people to see what they’re typing.
If you can’t do that, at least provide instructions when the user tries to log in. Remind them of whether your website wants uppercase or a certain number of characters. That would at least help them remember their password for your website.
The important thing is to recognize that people have to log in all the time. The task demands extra attention so that it is as painless as possible.

Pay Special Attention To Repetitive Tasks

We should ask ourselves not only whether we are unloading our problems onto users, but also how we can save our users time.
Take those common tasks that users do on our websites time and again. How can we shave a quarter of a second off of those tasks? What about search? If the user enters a search term on your website, will hitting the “Return” key submit the query? They shouldn’t have to click the “Search” button.
Drop-down menus are another good example. Navigating country-pickers can be painful. Could we display countries differently, or make the most common countries faster to access? In fact, so much could be done to improve country-pickers if we just take the time.
For that matter, a more robust solution to “Remember me” functionality would be nice, so that users are, in fact, remembered!
I am aware that this post might sound like a rant against developers. It is not. It is a problem faced by all Web professionals. Designers need to pay close attention to the details of their designs. Web managers need to ensure that the budget exists to refine their user interfaces. And content creators need to optimize their content for fast consumption.

Help Users Process Our Content Faster

We waste so much of our users’ time with verbose, poorly written and dense copy, making it hard for them to find the piece of information they need. The real shame is that we could do so much to help. For a start, we could give the user a sense of approximately how long a page will take to read. I offer this functionality on my personal blog, and it is the feature most commented on. Users love knowing how much of their time a post will take up.
We can also make our content a lot more scannable, with better use of headings, pullout quotes and lists. Finally, we can take a leaf out of Jakob Nielsen’s website. At the beginning of each post, he provides a quick summary of the page.

The Tip Of The Iceberg

We could do so much more in all aspects of Web design to save users’ time. From information architecture to website analytics, we waste too much of it. Sometimes we even know we are doing it! We need to be forever vigilant and always ask ourselves:
“How can I save the user time in this situation?”
What are your thoughts on this topic? Please share your experiences and opinions with us, and join in the discussion in the comments section below.
(al, il)




Thursday, April 17, 2014

Involving Clients In Your Mobile Workflow

A lot of mobile-minded talented folks across the globe produce great work, but yet sometimes you still hear many of them complain about their relationships with their clients. They often mention feeling isolated and not truly understanding what the client really needed.
This lack of personal interaction often leads to misunderstanding, as well as less awareness of and appreciation for all your hard work. While involving clients in your mobile workflow can be challenging, really working together will make a big difference. In this article, I’ll share some important things I’ve learned about involving clients in my mobile workflow. Let’s dive into some tips and tricks that I use every day.

Work Out Your Manifesto

Projects don’t happen overnight. It usually takes a few meetings to get to know the client and to discuss collaboration. Your company’s business strategists and account managers invest a lot of time and energy in this process. While they will often seem to distance themselves from your daily work, speaking with them is a real window of opportunity. These “suits” are the first ones to meet potential clients, and they convey your company’s vision, portfolio and creative approach. They can be a great help in nurturing a more involved relationship.
A great way to approach this internal conversation is to work out a manifesto, a summary of your creative vision and beliefs. Get together with your team and discuss your existing workflow and how it could further support what you really stand for as a team. Ask the team lead to help you work it out and make the message tangible. Do this simply by making a presentation to your colleagues. But why stop there? You could design posters, flyers, even stickers for your team so that they can help you spread the word.
We were getting really frustrated with clients asking us to define or optimize their mobile experience, when in fact they just wanted us to make things “prettier.” The slide above helps our client service directors to detect how potential clients really think about design. If we see that they don’t value our vision or approach, then we respectfully decline to work with them. Involvement starts with finding clients who want you to work with them, instead of for them.

Don’t Miss The Kick-Off

A kick-off meeting is the perfect opportunity to raise awareness of and appreciation for your mobile workflow. Learn as much as possible about the client, and find out how they would like you to help their business. Do this simply by asking about their vision, strategy and goals. Also great is to ask what inspires them and to get insight into their competitive research and analysis. From the minute you show true interest in their business, you are changing the way they look at you. By immediately working with them, you become their partner, instead of just someone who designs and codes.
A kick-off meeting is also a great time to double-check that you are on the same page. Sometimes we forget that our creative jargon might confuse clients. Big Spaceship points this out in its inspiring manual (PDF):
“We act like humans, we talk like humans, and we think like humans. And we call out anyone who does the opposite.”
In the last two years, I’ve learned that clients find it very hip to focus on responsive design, even if they don’t clearly understand it. Too often, it leads to a discussion on size and dimensions, when the conversation should be conceptual and strategic. Reserve some time in your kick-off meeting to explain what “responsive” means and why you believe in its value. Educate the client and steer the conversation towards what is really needed to make the project better. And if you notice that a certain topic needs more time and attention, host a mini-workshop to talk it through.

Dealing With Isolation

I don’t understand why some account and project managers try to keep their team away from the client as much as possible. Granted, it makes perfect sense that they manage the client, oversee the scope, deadlines and budget, and handle the communication and next steps. But when the work is in progress, keeping the team isolated doesn’t add any value. If this happens to you, explain to the manager that getting direct feedback from the client will help you fine-tune the product better and more quickly — a win-win for everyone.
At Little Miss Robot, we try to hold half of our meetings in our studio. Clients find it inspiring to be in this creative environment — especially because it is where their own product is being developed. In long-term projects, we also ask the client to designate a space at their office for our team to work on the project. When developing Radio+, worked at the client’s headquarters twice a week. Anyone could hop in and out of the space and have informal conversations about the work. Not only did it create a great atmosphere, but we also received the most valuable feedback during these times. Highly recommended!

Seeing Things

A typical project starts by the team exploring or defining what they will create. A lot of teams rely on textual aids, such as functional requirements. While these documents contain a lot of detail, I always end up having to address misinterpretations. The worst part is that these “minor” misunderstandings always pop up during the production stage, resulting in increased time and expenses. Have you noticed on these occasions that the client says they “saw” things a bit differently? This is why I recommend using text documents to scope features and using visual resources to describe them. Mind maps, wireframes, storyboards and paper prototypes are my personal favorites.
I always encourage clients to get involved in generating these visual resources. Having them by your side during a brainstorm or a UX workshop is really helpful. While they wouldn’t consider themselves designers, I’m always challenged and inspired by their thinking and how they see things.

Feeling The Progress

Throughout the mobile development process, you will probably invite the client to several meetings to discuss the status of the project and to demo the product. Make sure you have something tangible to talk about. If a meeting is just about process, time or budget, then let the project manager handle it. Build momentum when meeting in person, and show your work in progress on real devices! Of course, you could print out the design or demo the application on a big screen, but the client should be able to feel the progress in their hands, too. Feeling a product grow in your hands is a much more powerful and engaging experience!
Some great tools exist to share designs across devices. We use AppTaster to share mockups, Dropbox to share designs and TestFlight to distribute apps to clients. If we are building a mobile website, then we just host it on the client’s servers internally, which allows them to view the latest version whenever they want.

Happy Ending

Involving clients in your mobile workflow is the key to better understanding their problems, goals and strategies. You’ll also raise more awareness of and appreciation for your work, thus reducing negative energy and making discussions more positive and constructive. However big or small your team or client, it all starts with a desire to be involved. These take-aways can help you with that:
  1. Create a manifesto that explains what your team stands for.
  2. Hold a kick-off meeting to ask the client about their vision, strategy and goals.
  3. Use both your and their offices to meet.
  4. Scope features in text documents, and describe them in visual documents.
  5. Take advantage of third-party tools to share your work in progress on real devices.
Last but not least, read on how to wrap up a project and follow up afterwards. This is critical to building and maintaining a long-term relationship. Most importantly, it will lead to future business because the client will already know and value your work.
Please feel free to share your experiences and thoughts in the comments below. I’m already looking forward to reading them.




Wednesday, April 16, 2014

A Guide To Validating Product Ideas With Quick And Simple Experiments

You probably know by now that you should speak with customers and test your idea before building a product. What you probably don’t know is that you might be making some of the most common mistakes when running your experiments.
Mistakes include testing the wrong aspect of your business, asking the wrong questions and neglecting to define a criterion for success. This article is your guide to designing quick, effective, low-cost experiments.

A Product With No Users After 180 Days

Four years ago, I had a great idea. What if there was a more visual way to learn about our world? Instead of typing search queries into a text field, what if we could share visual queries with our social network and get information about what we’re looking at? It could change the way people search! I went out, found my technical cofounder, and we started building a photo Q&A app. Being a designer, I naturally thought that the branding and user experience would make the product successful.
Six months later, after rigorous usability testing and refinement of the experience, we launched. Everyone flocked to the app and it blew up overnight. Just kidding. No one cared. It was that devastating moment after a great unveiling when all you hear are crickets chirping.
Confused and frustrated, I went back to the drawing board to determine why this was. My cofounder and I parted ways, and, left without technical expertise, I decided to step out and do some research by interviewing potential users of the app. After a few interviews, the root cause of the failed launched finally dawned on me. My beautifully designed solution did not solve a real human need. It took five days of interviews before I finally accepted this truth and slowly let go.
The good news for you is that you don’t need to go through the same pain and waste of time. I recently started working on another startup idea. This time, I followed a structured process to identify key risks and integrate customer feedback early on.

A Product With 16 Paying Customers After 24 Hours

I work with many entrepreneurs to help them build their companies, and they always ask me for feedback on the user experience of their Web and mobile apps. They express frustration with finding UX talent and want some quick advice on their products in the meantime. This happens so frequently that I decided to learn more about their difficulties and see what might solve their problems.
I specified what I was trying to learn by forming a hypothesis:
“Bootstrapped startup founders have trouble getting UX feedback because they have no reliable sources to turn to.”
To test this, I set a minimum criterion for what I would accept as validation to further explore this opportunity. I had enough confidence that this was a big problem to set a criterion as high as 6 out of 10. This means that 6 out of the 10 people I interviewed needed to indicate that this was a big enough problem in order for me to proceed.
By stating my beliefs up front, I held myself accountable to the results and reduced the influence of any retroactive biases. I knew that if these entrepreneurs already had reliable sources to turn to for UX feedback and that they were happy with them, then generating demand for an alternative solution would be much harder.

In three hours of interviews, I was able to validate the pain point and the need for a better alternative. (You can watch a video walkthrough of my findings.) My next step was to test the riskiest assumption related to the solution that would solve this problem. Would they pay for an online service to get feedback from UX designers?
Instead of building a functioning marketplace with designer portfolios and payment functionality, or even wireframing anything, I simply set up a landing page with a price tag in the call to action to test whether visitors were willing to pay. This is called a pitch experiment. You can use QuickMVP to set up this kind of test.

Behind the landing page, I attached a form to gather information on what they needed help with. Within a few hours, 10 people had paid for the service, asking for UX feedback on their websites. Having validated the demand, I needed to fulfill my promise by delivering the service to the people who had paid.

Because this market is two-sided — with entrepreneurs and designers — I tested the demand side first to see whether the solution provided enough value to elicit payment. Then, I tested the supply side to learn what kind of work designers were looking for and whether they were willing to consult virtually.

To my surprise, the UX designers I spoke with had established clientele and were very picky about new clients, let alone wanting to consult with random startups online. But they all mentioned that they had been eager to take on any work when they were first starting out and looking for clients. So, I switched my focus to UX designers who are not yet established and are open to honing their skills by giving feedback online.
Armed with these insights, I iterated on my landing page to accommodate both sides of the market and proceeded to fulfill the demands of the customers I had accumulated. No wireframes. No code. Just a landing page and two forms!


To simulate the back-end functionality, I emailed the requests to the UX designers, who would then respond with their feedback, which I would email back to the startup founders. Each transaction would take five minutes, and I did this over and over again with each customer until I could no longer handle the demand.
Do things that don’t scale in order to acquire your earliest customers and to identify business risks that you might overlook when implementing the technical aspects. This is called a concierge experiment. Once the manual labor has scaled to its limit, then write the code to open the bottleneck. Through this process, I was able to collect feedback on use cases, user expectations and ideas for improvements. This focused approach allowed for more informed iterations in a shorter span of time, without getting lost in wireframing much of the application up front.
Today, BetterUX.it is a service through which startup founders connect with UX designers for feedback on their websites and apps, and designers get paid for their expertise and feedback.

How To Create A Product That People Want

What did I do differently? The structured process of testing my assumptions saved me time and confirmed that each part of my work was actually creating value for end users. Below is a breakdown of the steps I took, so that you can do the same.

Should You Build Your Idea?

My first mistake with my first startup was assuming that others had the same problem that I experienced. This is a common assumption that many gloss over. Build products that scratch your own itch, right? But many entrepreneurs realize too late that the problems they’re trying to solve are not painful enough to sustain a business.
As product people, we often have many ideas bubbling in our heads. Before getting too excited, test them and decide which one is the most viable to pursue.

Design An Effective Experiment

To get started, break down your idea into testable elements. An effective experiment must clearly define these four elements:
  1. hypothesis,
  2. riskiest assumption,
  3. method,
  4. minimum criterion for success.
At Lean Startup Machine, they’ve created a tool called an Experiment Board, which enables us to easily turn crazy ideas into effective experiments in a few minutes. As you go along, use the board as a framework to design your experiment and track progress. Refer to the templates provided on the board to quickly formulate your hypothesis, riskiest assumption, method and success criterion.

Construct a Hypothesis

Every experiment starts with a hypothesis. Start by forming a customer-problem hypothesis. Once it is validated, you can go on to form a problem-solution hypothesis.
  1. Define your customer.
    Which customer segment experiences the most pain? They are your early adopters, and you should target them first. These are the people who have the problem you’re solving for, and they know they have the problem and are trying to solve it themselves and are dying for a better way! Most people have trouble identifying these customers. If you do, too, then just segment your potential customer base by level of pain and differentiating characteristics, such as lifestyle and environmental factors. Being specific will reduce the time it takes to run through experiment cycles; once you’ve tested against that one segment and found that the problem doesn’t resonate with them, you can quickly pivot to test another customer segment. In the long run, having a clear idea of who you’re building for will help you maintain a laser focus on what to prioritize and what to dismiss as noise.
  2. Define the problem.
    What problem do you believe you are solving for? Phrase it from your customer’s perspective. Too often, people phrase this from the perspective of their own lofty vision (“The Web needs to be more human”) or from a business point of view (“Customers don’t use our service enough”). Also, avoid being too broad (“People don’t recycle”). These mistakes will make your hypothesis hard to test with a specific customer, and you’ll find yourself testing for a sentiment or an opinion in interviews, rather than a solvable problem. If you have trouble, phrase the problem as if your friend was describing it you.
  3. Form a hypothesis.
    Brainstorm on a few customers and problems to consider all the possibilities. Then, combine the customer and problem that you want to focus on with this sentence: “I believe customer x has a problem achieving goal y.” You have just formed a testable hypothesis!

Identify Your Riskiest Assumption

Now that you have formed a customer-problem hypothesis, poke some holes and extract the riskiest assumption to be tested. Start by brainstorming on a few core assumptions. These are the assumptions that are central to the viability of your hypothesis or business. Think of an assumption as the behavior, mentality or action that needs to be true in order to validate the hypothesis.
Ask your team members, boss or friends to suggest any assumptions that you may have overlooked. After listing a few, identify the riskiest one. This is the core assumption that you are most uncertain about and have the least amount of data on. Testing the riskiest assumption first will speed up the experiment cycle. If the riskiest assumption is invalidated, then the hypothesis will be invalid, and you will have saved your company from going down the wrong path.

Choose a Method

After identifying the most critical aspect of your idea to test, determine how to test it. You could conduct three kinds of experiments before getting into wireframes. It’s best to start by gathering information firsthand through exploration. But you could choose a different method depending on your level of certainty and the data.
  1. Exploration
    Conduct qualitative interviews to verify and deepen your understanding of the problem. Even though you experience the problem yourself, you don’t know how big it is or who else has it. By conducting exploratory interviews first, you might realize that the opportunity isn’t as big as you had thought or that a bigger problem could be solved instead.
  2. Pitch
    Make sure the solution would actually provide value by selling the concept to customers before building the product. This will measure their level of determination to solve the problem for themselves. A potential customer not taking a certain action to use your service, like paying a small deposit or submitting an email address, indicates that the problem is not painful enough or that you haven’t found the right solution.
  3. Concierge
    Personally deliver the service to customers to test how satisfied they are with your solution. Did your value proposition meet their expectations? What was useful for them? What could have been done better? How likely are they to return or recommend the service to a friend? These are all insights you can discover in this step.

Set a Minimum Criterion for Success

Before running the experiment, decide up front what result will constitute success and what result will constitute failure. The minimum criterion for success is the weakest outcome you will accept to continue allocating resources and pursuing the solution. Factors like budget, opportunity cost, size of market, level of demand and business metrics all play into it.
The criterion is usually expressed as a fraction:
“I expect x number of people out of the y number of people in the experiment to exhibit behavior z.”
I like to set the criterion according to how big I think the problem is for that customer segment, and then determine how much revenue it would have to generate in order for me to keep working on it. At this point, statistical significance is not important; if your target customer segment is very specific, then testing with 10 of them is enough to start seeing a pattern.
Once you have validated the hypothesis with a small sample of the customer segment, then you can scale up the experiments to test with larger sample sizes or with other segments.

Run the Experiment

Once you have defined these elements, you are ready to run the experiment! Have team members look at your Experiment Board and confirm whether they agree with what you’re testing. This will hold you and the team accountable to the results, so that there are no subjective arguments afterwards.

Analyze the Results and Decide on Next Steps

After gathering data from your target customers, document the results and your learning on the Experiment Board. Did the results meet your criterion for success? If so, then your hypothesis was valid, and you can move forward to test the next risk with the product. If not, then you need to form a new hypothesis based on your learning to get closer to something that holds true. Track your progress over time on the Experiment Board to get a holistic picture of your validated learning and to continually make informed decisions.
Test and repeat. You’re on your way to creating a great product that people want!

Why You Should Get Excited About Emotional Branding

Globalization, low-cost technologies and saturated markets are making products and services interchangeable and barely distinguishable. As a result, today’s brands must go beyond face value and tap into consumers’ deepest subconscious emotions to win the marketplace.

The Role Of Brands Is Changing

In recent decades, the economic base has shifted from production to consumption, from needs to wants, from objective to subjective. We’re moving away from the functional and technical characteristics of the industrial era, into a time when consumers are making buying decisions based on how they feel about a company and its offer.
BusinessWeek captured the evolution of branding back in 2001:
“A strong brand acts as an ambassador when companies enter new markets or offer new products. It also shapes corporate strategy, helping to define which initiatives fit within the brand concept and which do not. That’s why the companies that once measured their worth strictly in terms of tangibles such as factories, inventory and cash have realized that a vibrant brand, with its implicit promise of quality, is an equally important asset.”
I’d take it a step further and suggest that the brand is not just an important part of the business — it is the business. As Dale Carnegie says:
“When dealing with people, let us remember we are not dealing with creatures of logic. We are dealing with creatures of emotion.”

It’s Time To Get Emotional

In a borderless world where people are increasingly doing their research and purchases online (75% of Americans admit to doing so while on the toilet), companies that don’t take their branding seriously face imminent demise.
Enter emotional branding. It’s a highly effective way to cause reaction, sentiments and moods, ultimately forming experience, connection and loyalty with a company or product on an irrational level. That’s the ironic part: Most people don’t believe they can be emotionally influenced by a brand. Why? Because that’s their rational mind at work. People make decisions emotionally and then rationalize them logically. Therefore, emotional branding affects people at a hidden, subconscious level. And that’s what makes it so incredibly powerful.
Neuroscientists have recently made great strides in understanding how the human mind works. In his book Emotional Design: Why We Love (or Hate) Everyday Things, cognitive scientist Donald Norman explains how emotions guide us:
“Emotions are inseparable from and a necessary part of cognition. Everything we do, everything we think is tinged with emotion, much of it subconscious. In turn, our emotions change the way we think, and serve as constant guides to appropriate behavior, steering us away from the bad, guiding us toward the good.”
Emotions help us to rapidly choose between good and bad and to navigate in a world filled with harsh noise and unlimited options. This concept has been reinforced by multiple studies, including ones conducted by neuroscientist Antonio Damasio, who examined people who are healthy in every way except for brain injuries that have impaired their emotional systems. Due to their lack of emotional senses, these subjects could not make basic decisions on where to live, what to eat and what products they need.
Emotions are a necessary part of life, affecting how you feel, how you behave and how you think. Therefore, brands that effectively engage consumers in a personal dialogue on their needs are able to evoke and influence persuasive feelings such as love, attachment and happiness.

Creativity Is Critical

What does that mean to marketers? Good ideas are increasingly vital to businesses. And that’s good news for creative professionals and agencies.
A Wall Street Journal article titled “So Long, Supply and Demand” reports:
“Creativity is overtaking capital as the principal elixir of growth. And creativity, although precious, shares few of the constraints that limit the range and availability of capital and physical goods. In this new business atmosphere, ideas are money. Ideas are, in fact, a new kind of currency altogether — one that is more powerful than money. One single idea — especially if it involves a great brand concept — can change a company’s entire future.”
As Napoleon Hill says:
“First comes thought; then organization of that thought, into ideas and plans; then transformation of those plans into reality. The beginning, as you will observe, is in your imagination.”

Emotional Branding In Action

Let’s look at some examples of branding and campaigns that go for the heart and, in some cases, hit the mark.

WestJet Christmas Miracle

WestJet Airlines pulled on heartstrings this past holiday season with a video of Santa distributing Christmas gifts to 250 unsuspecting passengers. The Canadian airline expected around 800,000 views but blew their competitors’ campaigns out of the air with more than 35 million views.

How the WestJetters helped Santa spread some Christmas magic to their guests. (Watch on Youtube)

Coca-Cola Security Cameras

While surveillance cameras are known for catching burglaries and brawls, a Coca-Cola ad released during the latest Super Bowl encourages us to look at life differently by sharing happy, moving moments captured on security cameras. You’ll witness people sneaking kisses, dancing and random acts of kindness.

All the small acts of kindness, bravery and love that take place around us, recorded by security cameras. (Watch on Youtube)

Homeless Veteran Time-Lapse Transformation

Degage Ministries, a charity that works with veterans, launched a video showing a homeless US Army veteran, Jim Wolf, getting a haircut and new clothes as part of an effort to transform his life. Degage Ministries told Webcopyplus that Wolf has completed rehab and is turning his life around, and that the video has so far raised more than $125,000, along with increased awareness of and compassion for veterans across the country.

A video of a homeless veteran named Jim, who volunteered to go through a physical transformation in September 2013. (Watch on Youtube)

Creating Emotional Connection

While neuroscientists have only recently made significant strides in understanding how we process information and make decisions, humans have been using a powerful communication tactic for thousands of years: storytelling. It’s a highly effective method to get messages to stick and to get people to care, act and buy.
The stories that truly engage and are shared across the Web are typically personal and contain some aspect of usefulness, sweetness, humor, inspiration or shock. Also, the brand has to be seen as authentic, not manufactured, or else credibility and loyalty will be damaged.
To get the most success in creating an emotional connection with people, stories should explore both brand mystique and brand experience, and the actual product or service should be integrated. A brilliant example is The Lego Movie, released by Warner Bros earlier this year. The Lego brand delivered a masterful story, using its products as the stars. The brand got families and kids around the globe to shovel out well over $200 million for what could be the ultimate toy commercial.
Designers, developers, copywriters and marketers in general should take a page from moviemakers, including the late writer, director and producer Sidney Lumet. He gave the following advice on making movies: “What is the movie about? What did you see? What was your intention? Ideally, if we do this well, what do you hope the audience will feel, think, sense? In what mood do you want them to leave the theater?” The same could be asked when you’re developing a brand story: What do you want the audience to feel?
Even product placement, where everything from sneakers to cars gets flashed on the screen, has evolved into “branded entertainment.” Now, products are worked into scripts, sometimes with actual roles. A well-known example is in the film Cast Away, in which Wilson, a volleyball named after the brand, serves as Tom Hanks’ personified friend and sole companion for four years on a deserted island. When Wilson gets swept away into the ocean and slowly disappears, sad music ensues, and many moviegoers shed tears over… well, a volleyball.

Making Brands Emotional

Connecting people to products and services is not an easy task. It takes careful consideration and planning. US marketing agency JB Chicago found success sparking an emotional connection for Vitalicious, its client in the pizza industry. Its VitaPizza product had fewer calories than any competitor’s, however, its message was getting lost among millions of other messages. Explains Steve Gaither, President of JB Chicago:
We needed to bring that differentiation front and center, letting the target audience, women 25-plus interested in healthy living, know they can eat the pizza they love and miss without consuming tons of calories.
A relationship concept was formed, and a campaign was soon launched with the following key messages: “You used to love pizza. And then the love affair ended. You’ve changed. And, thankfully, pizza has too! Now you and your pizza can be together again.” The agency then tested different ads, each centered on one of the following themes:
  • sweepstakes,
  • 190 calories,
  • gluten-free/natural,
  • “You and pizza. Reunited. Reunited and it tastes so good.”
The brand idea outperformed the other ads by a margin of three to one. Bringing a story into the equation resonated with the target audience.
Gaither also shared insight on a current story-building project for StudyStars, an online tutoring company whose brand wasn’t gaining traction. JB Chicago overhauled the brand and created a story to demonstrate that StudyStars is a skills-based tutoring system with a deep, fundamental approach to learning, one that ultimately delivers better outcomes.
“We needed to find and build camp at a place where skills-based tutoring intersects with the unmet needs of the buyer. We needed a powerful brand idea that enables us to claim and defend that space. And we needed to express that idea in a manner that is believable and differentiated.”
Seeking a concept that would look, feel, speak and behave differently, JB Chicago crafted the brand idea “Master the Fundamentals.” It suggests that learning is like anything else: You have to walk before you can run, or else you will fall. So, the agency is setting up a campaign, including a video, to show that students who fall behind in school due to weak learning of the fundamentals don’t just fall behind in the classroom — their struggles affect every other aspect of their lives.
Here’s a snippet of the drafted script:

Title: Pauline’s Story

We see a beautiful little girl in a classroom. Pauline. She is 8 years old. We can also see that she’s a little lost.
A quick shot of the teacher at the chalkboard, teaching simple multiplication, like 9 × 6. Back to Pauline. She’s not getting it.
We see Pauline again at age 12, again in class. She is looking at a math quiz. It’s been graded. She got a D.
There’s a sign hanging from her neck. The sign says “I never learned multiplication.”
We see Pauline again, now at 15. She is home. Her parents are screaming at each other about her poor academic performance. The sign around her neck is still there. “I never learned multiplication.”
We see a young waitress in a dreary coffee shop. It takes us a few seconds to realize that it’s Pauline, age 18. She is tallying a customer’s check.
A close shot of the check. Pauline is trying to calculate the tax. She can’t do it, so she consults a cheat sheet posted nearby. She’s still wearing the sign. “I never learned multiplication.”
She figures the tax out and brings the check over to an attractive collegiate-looking couple, who thank her and head for the door. She watches them leave.
Their life is everything hers is not. Their future is everything hers will never be. Slate (text) states StudyStars’ case, and the video ends with an invitation to visit studystars.com.
JB Chicago created a story that draws us in and links to emotions — possibly hope, fear, promise, hope, security and other feelings — according to the person’s mindset, experience, circumstance and other factors. The key is that it gets to our hearts.

Emotional Triggers

Different visitors connect to and invest in products and services for different reasons. To help you strike an emotional chord with your audience, veteran marketer Barry Feig has carved out 16 hot buttons in Hot Button Marketing: Push the Emotional Buttons That Get People to Buy:
  • Desire for control
  • I’m better than you
  • Excitement of discovery
  • Revaluing
  • Family values
  • Desire to belong
  • Fun is its own reward
  • Poverty of time
  • Desire to get the best
  • Self-achievement
  • Sex, love, romance
  • Nurturing response
  • Reinventing oneself
  • Make me smarter
  • Power, dominance and influence
  • Wish-fulfillment

How Does It Make You Feel?

As emotional aspects of brands increasingly become major drivers of choice, it would be wise for designers, content writers and other marketers to peel back customers’ deep emotional layers to identify and understand the motivations behind their behavior.
So, the next time you ask someone to review your design or content, maybe don’t ask, “What do you think?” Instead, the smarter question might be:
“How does it make you feel?”

Understanding CSS Timing Functions

People of the world, strap yourself in and hold on tight, for you are about to experience truly hair-raising excitement as you get to grips with the intricacies of the hugely interesting CSS timing function!
OK, so the subject matter of this article probably hasn’t sent your blood racing, but all jokes aside, the timing function is a bit of a hidden gem when it comes to CSS animation, and you could well be surprised by just how much you can do with it.
First of all, let’s set the scene and ensure we’re all familiar with the scenarios in which the timing function is relevant. As alluded to, the functionality becomes available when you’re working in the realm of CSS animation, which includes CSS transitions as well as keyframe-based animation. So, what exactly is it and what does it do?

The CSS Timing Function Explained

It’s one of the less obvious animation-based CSS properties, whereas most of its counterparts are rather self-explanatory. Nevertheless, the gist of it is that it enables you to control and vary the acceleration of an animation — that is, it defines where the animation speeds up and slows down over the specified duration.
While it does not affect the actual duration of an animation, it could have profound effects on how fast or slow the user perceives the animation to be. If you’re not sold having learned of its actual purpose, then stick with me here because the timing-function property gets a lot more interesting than the definition suggests.
Note: There is no actual property named “timing-function.” When I refer to this “property,” I am actually referring to both the transition-timing-function and the animation-timing-function properties.
Before moving on, let’s just familiarize ourselves with the syntax and where it fits into the whole process of defining an animation in CSS. To keep things simple, let’s use a CSS transition for this example. We’ll begin with the full array of transition properties:
div {
   transition-property: background;
   transition-duration: 1s;
   transition-delay: .5s;
   transition-timing-function: linear;
}

/* This could, of course, be shortened to: */
div {
   transition: background 1s .5s linear;
}
The shorthand for defining a transition is fairly lenient, the only requirement for the order being that the delay parameter must be stated after the duration value (but not necessarily immediately after). Furthermore, the transition-duration value is the only one that is actually required for the code to function; and because the default values of the other parameters are adequate most of the time, your transitions seldom need to be anything more than the following snippet:
div {
   transition: 1s;
}

/* This is the same as saying: */
div {
   transition: all 1s 0s ease;
}
But that’s a bit boring. While the defaults are often sufficient for standard hover events and such, if you’re working on something a little more substantial, then the timing function is a serious trick for fine-tuning an animation!
Anyway, you now have an idea of what the timing function does. Let’s look at how it does it.

Looking Under the Hood

Many of you probably don’t look past the available keywords for the timing-function property, of which there are five: ease (the default), ease-in, ease-out, ease-in-out and linear. However, these keywords are simply shorthands for defining the Bézier curve.
The what?!
You might not be familiar with the term, but I’d wager that you’ve actually seen a Bézier curve — heck, if you’ve used graphical editing software, then you’ve probably even created one! That’s right, when you use the Pen or Path tool to create a nice smooth curve, then you’re drawing a Bézier curve! Anyway, to get to the point of this section, the Bézier curve is the magic behind the timing function; it basically describes the acceleration pattern on a graph.
This Bézier curve translates to the ease keyword. If you’re anything like me the first time I saw a Bézier curve like this, then you might be wondering how on earth that curve could be formed from four points plotted on a graph! I couldn’t possibly tell you in words, but, fortunately, I have a particularly fantastic GIF to do the job for me, courtesy of Wikipedia.
A cubic Bézier curve being drawn (Image: Wikipedia) Because this curve is formed from four points, we refer to it as a “cubic” Bézier curve, as opposed to a “quadratic” curve (three points) or a “quartic” curve (five points).

Introducing The cubic-bezier() Function

Now then, this is where things get really exciting, as I reveal that you can actually get access to this curve through the cubic-bezier() function, which can simply be used in place of the keywords of the timing-function property value. I appreciate that you may need a moment to contain your excitement…
With the cubic-bezier() function, you can manipulate the Bézier curve whichever way you desire, creating completely custom acceleration patterns for your animation! So, let’s look at how this function works and how it enables you to create your very own Bézier curve.
First, we know that the curve is formed by four points, which are referred to as point 0, point 1, point 2 and point 3. The other important thing to note is that the first and last points (0 and 3) are already defined on the graph, with point 0 always sitting at 0,0 (bottom left) and point 3 always sitting at 1,1 (top right).
That leaves just point 1 and point 2 available for you to plot on the graph, which you can do using the cubic-bezier() function! The function takes four parameters, the first two being the x and y coordinates of point 1 and the latter two being the x and y coordinates of point 2.
transition-timing-function: cubic-bezier(x, y, x, y);
To get comfortable with the syntax, as well as with how it creates the curve and with its physical effect on the animation, I’ll take you through the five timing-function keywords, their equivalent cubic-bezier() values and the resulting effect on the animation.

ease-in-out

Let’s start with the ease-in-out keyword because the logic behind this curve and how it translates to the animation are probably the easiest to understand.
/* The cubic-bezier() equivalent of the ease-in-out keyword */
transition-timing-function: cubic-bezier(.42, 0, .58, 1); 
A perfectly symmetrical Bézier curve, which means that the animation will ease in to full speed and then ease out at exactly the same rate. You can see that point 1 is positioned at 0.42 along the x-axis and at 0 on the y-axis, whereas point 2 is positioned at 0.58 on the x-axis and 1 on the y-axis. The result is a perfectly symmetrical Bézier curve, which means that the animation will ease in to full speed and then ease out at exactly the same rate; hence, the name of this keyword.
If you look at the demo below, you will see the physical effect of the ease-in-out value, as well as how it compares to the other keyword values.

Ease

The ease keyword is the default value of the CSS timing-function property, and it is actually quite similar to the previous one, although it eases in at a faster rate before easing out much more gradually.
/* The ease keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(.25, .1, .25, 1);
The curve for the keyword ease, eases in at a faster pace before easing out much more gradually.
The curve for the keyword ease eases in at a faster pace before easing out much more gradually.
You can see a sharper incline in the curve initially, while the finish is more drawn out, which directly translates to the physical effect of this timing function on the animation. Don’t forget to refer to the earlier demo after reviewing each of these examples to compare the effects.

ease-in and ease-out

The ease-in and ease-out keywords are, unsurprisingly, exact opposites. The former eases in before maintaining full speed right through to the finish, while the latter hits full speed right off the bat before easing to a finish. The ease-in-out keyword that we looked at previously is, as logic would suggest, a perfect combination of these two Bézier curves.
/* The ease-in keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(.42, 0, 1, 1);

/* The ease-out keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(0, 0, .58, 1);
Bézier Curve for the ease-in keyword, left and the ease-out keyword, right.
Bézier curve for the ease-in keyword (left) and the ease-out keyword (right) (Large version)

Linear

The final keyword to address does not correspond to a curve at all. As the name implies, the linear timing-function value maintains the same speed throughout the animation, which means that the resulting Bézier curve (or lack of) would be just a straight line. There is simply no varying acceleration pattern to depict on the graph.
/* The linear keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(0, 0, 1, 1);
The linear
The linear timing-function value maintains the same speed throughout the animation.
If you refer back to the demo, you will probably notice that, despite all of the examples having the exact same duration values, some of the animations appear to be slower than the others. Why is that? Well, to take the ease-in-out keyword as an example, we know that it starts and finishes at a slower pace, which means that it has to cover the middle ground of the animation at a much faster pace. This effectively ensures that we perceive the actual animation to be both shorter and faster, while, say, the linear animation appears longer and more drawn out.
You might feel that this article is very slowly easing into its full pace (see what I did there?), so now it’s finally time to step things up a bit and look at how to use the cubic-bezier() function to create our own custom timing functions.

Creating Custom Acceleration Patterns With The cubic-bezier() Function

Now that we’ve seen how the keywords equate to the corresponding Bézier curves and seen their effect on the animation, let’s look at how to manipulate the curve to create custom acceleration patterns.
You should now be able to plot points 1 and 2 on the graph using the cubic-bezier() function and have a pretty solid idea of how this will affect the animation. However, considering that you’re plotting points on a graph that you typically can’t see, obviously this could get very tedious very quickly.
Fortunately, people like Lea Verou exist, who seemingly won’t rest until CSS development couldn’t be made any easier! Lea has developed the aptly named Cubic Bézier, which is basically a playground for creating completely custom Bézier curves and comparing them in action to the predefined keywords. What this means for you is that, instead of tediously editing the decimals in your cubic-bezier() functions, you can just visit Cubic Bezier and play around with the curve until you’ve achieved the desired effect. Much more convenient.
Lea Verou's superbly useful cubic-bezier.com
Lea Verou’s superbly useful Cubic Bézier (Large version)
The shorthand keywords give you great options for timing functions to start with, but the differences between them often appear minor. Only when you start to create custom Bézier curves will you realize the radical effect the timing function can have on an animation.
Just look at the following working examples to see the extreme differences between the animations, despite all of them having the exact same duration values.

Let’s take a closer look at the first of these examples and try to understand why it produces such a radically different effect.
/* cubic-bezier() values for first example from preceding demo page */
transition-timing-function: cubic-bezier(.1, .9, .9, .1);
Example for a custom Bézier curve.
Example of a custom Bézier curve
The main difference between this timing function and the default keywords is the sharp inclines of the Bézier curve against the “progression” scale (the y-axis). This means that the animation progresses in short bursts, with a long gradual pause in the middle (where the curve levels out). This pattern contrasts starkly with what we’ve become used to with the timing-function keywords, which take the opposite approach, with the easing periods coming at the beginning or the end of the animation, rather than in the middle.
With custom Bézier curves now in the bag, surely we have all but exhausted the capabilities of the cubic-bezier() function, right?! You’d think so, but this crafty beggar has got even more up its sleeve!

Getting Creative With Bézier Curves

Yep, it’s true: Bézier curves get even more exciting! Who’d have thought? The scope widens with the revelation that only the time scale (x-axis) is limited to the 0–1 range on the graph, whereas the progression scale (y-axis) can extend below and beyond the typical 0–1 range.
The progression scale is exactly what you’d think it is, with the bottom end (0) marking the beginning of the animation and the top end (1) marking the end of the animation. Typically, the cubic Bézier curve always travels north along this progression scale at varying intensities until it reaches the end point of the animation. However, the ability to plot points 1 and 2 outside of this 0–1 range allows the curve to meander back down the progression scale, which actually causes reverse motion in the animation! As ever, the best way to understand this is through visuals:
Custom Bézier curve using value outside the typical 0-1 range.
A custom Bézier curve using a value outside of the typical 0–1 range
You can see that point 2 is plotted outside of the typical 0–1 range at -0.5, which in turn pulls the curve downward. If you look at the following demo, you’ll see that this creates a bouncing effect in the middle of the animation.
Conversely, you could place this backward motion at the beginning of the animation and also make it temporarily run past its intended finishing point. Think of it like taking a couple of steps back to get a running start; then, at the end, your momentum carries you past your destination, causing you to take a couple of steps back to ensure that you arrive at the intended destination. Look at the working example to really understand what we’re talking about here. In addition, the Bézier curve that produces this effect can be seen below.
Custom Bézier curve using value outside the typical 0-1 range.
A custom Bézier curve using a value outside of the typical 0–1 range
You should now have a pretty good idea of how cubic-bezier() values outside of the typical 0–1 range can physically affect how an animation plays out. We can look at moving boxes all day long, but let’s finish this section with an example that clearly demonstrates this type of creative timing function.

That’s right: We’re animating a floating balloon! …What? Haven’t you always wanted to do that with CSS?
The brief for this animation is to “add helium” to the balloon on click so that it floats to the “ceiling,” where it will bounce slightly before sticking to the top, as it naturally would. Using a cubic-bezier() value outside of the 0–1 range allows us to create the bounce and ultimately helps to produce a realistic effect. The following snippet shows the coordinates used in the cubic-bezier() function, and the resulting Bézier curve appears below that.
/* The cubic-bezier() values for the bouncing balloon */
transition-timing-function: cubic-bezier(.65, 1.95, .03, .32);
Custom Bézier curve to emulate a bouncing balloon.
A custom Bézier curve to emulate a bouncing balloon
This example explains particularly well how the curve translates to the resulting animation because it reflects it almost perfectly. First, you can see that the curve travels from the beginning of the progression scale to the end in a straight line, indicating that the balloon travels from the start of the animation to the finish at a constant speed. Then, very similarly to the balloon, the curve bounces off the tip of the scale and goes into reverse before returning steadily and gradually to the top. All quite straightforward really!
Once you’ve mastered the curve and the art of manipulating it to do what you want, you’ve nailed it.

Timing Functions And Keyframe-Based CSS Animation

One final thing to note before moving on (yes, there is more to cover!) is how timing functions behave when applied to CSS keyframe animation. The concepts are all exactly the same as those in the transition examples we’ve been working with so far, but with one exception that is important to be aware of: When you apply a timing function to a set of keyframes, it is executed per keyframe, rather than for the animation as a whole.
To clarify, if you have four keyframes that move a box around four corners of a square, and you apply the “bouncing” timing function that we used in the earlier balloon example, then each of the four movements would experience the bounce, rather than the entire animation. Let’s see this in action and view the code.

@keyframes square {
   25% {
      top:200px;
      left:0;
   }

   50% {
      top:200px;
      left:400px;
   }

   75% {
      top:0;
      left:400px;
   }     
}

div {
   animation: square 8s infinite cubic-bezier(.65, 1.95, .03, .32);
   top: 0;
   left: 0;
   /* Other styles */
}
Note that if the 100% keyframe isn’t defined, then the element will simply return to its original style, which is the desired result in this case, so defining it is not necessary. It is clearly evident from the demo that the timing function is applied to each of the four keyframes because they each appear to bounce off the walls of the container.
If you need certain keyframes to take on a timing function that is different from the others, then go ahead and apply a separate timing-function value directly to the keyframe, as indicated in the following snippet.
@keyframes square { 
   50% {
      top: 200px;
      left: 400px;
      animation-timing-function: ease-in-out;
   }
}

Introducing The steps() Timing Function

Did you think we were done with timing functions? Ha, think again, pal! I told you that there’s a lot more to CSS timing functions than a few predefined easing functions!
For this section, we can swap our curves for straight lines as we explore the concept of “stepping functions,” which are achieved through the steps() timing function.
The steps() function is more of a niche tool, but it’s useful to have in the toolkit nonetheless. It enables you to break up an animation into steps, rather than the usual tweened motion that we’re used to. For example, if we wanted to animate a square moving 400 pixels to the right in four steps over 4 seconds, then the square would jump 100 pixels to the right every second, rather than animating in a continuous motion. Let’s examine the syntax that we’d need for this particular example, which should be an absolute breeze now that we’ve tackled the intricacies of the cubic-bezier() function!

div {
   transition: 4s steps(4);
}

div:target {
   left: 400px;
}
As you can see, it’s a simple matter of stating the number of steps to divide the animation into — but bear in mind that this number must be a positive integer, so no negatives or decimals. However, a second, optional parameter affords us slightly more control, the possible values for which are start and end, the latter being the default value.
transition-timing-function: steps(4, start);
transition-timing-function: steps(4, end);
A value of start would run the animation at the beginning of each step, whereas a value of end would run the animation at the end of each step. Using the previous “moving box” example, the following image does a far better job of explaining the difference between these values.
The difference between the start and end value in the steps() function.
The difference between the start and end values in the steps() function.
You can see that with a value of start, the animation begins as soon as it is triggered, whereas with a value of end, it begins at the end of the first step (in this case, one second after being triggered).
And just to ensure that this overview is truly comprehensive, there are also two predefined keywords for the steps() function: step-start and step-end. The former is equivalent to steps(1, start), and the latter is the same as steps(1, end).

Creative Use Cases For Stepping Functions

OK, so you probably don’t have much of a need to animate a moving box in steps very often, but there are plenty of other cool uses for the steps() function. For example, if you have all of the sprites for a basic cartoon, then you could use this technique to play it through frame by frame, using just a couple of CSS properties! Let’s look at a demo and the code that makes it function.

div {
   width: 125px;
   height: 150px;
   background: url(images/sprite.jpg) left;
   transition: 2s steps(16);
   /* The number of steps = the number of frames in the cartoon */
}

div:target {
   background-position: -2000px 0;
}
First, we have a small rectangular box (125 pixels wide), which has a background image (2000 pixels wide) containing 16 frames side by side. This background image is initially flush with the left edge of the box; so, all we need to do now is move the background image all the way to the left so that all 16 frames pass through the small rectangular window. With a normal animation, the frames would just slide in and out of view as the background image moves leftwards; however, with the steps() function, the background image can move to the left in 16 steps, ensuring that each of the 16 frames snaps in and out of view, as desired. And just like that, you are playing a basic cartoon using just a CSS transition!
This GIF demonstrates the concept of the background image passing through the window in steps
This GIF demonstrates the concept of the background image passing through the “window” in steps, so that each frame snaps in and out of view. (Large version)
Another creative use of the steps() function that I’ve found comes courtesy of Lea Verou (who else?), who has come up with a particularly clever typing animation, which I’ll break down for you now.

First, you need some text, and — unfortunately — you need to know exactly how many characters you’re working with because you’ll need to use this number in the CSS. Another requirement is that the font must be monospaced, so that all characters are exactly the same width.
<p>smashingmag</p>

.text {
   width: 6.6em;
   width: 11ch; /* Number of characters */
   border-right: .1em solid;
   font: 5em monospace;
}
The text we’re working with has 11 characters. With the help of the ch CSS unit, we can actually use this figure to define the width of the paragraph, although we should specify a fallback width for browsers that don’t support this unit. The paragraph is then given a solid black border on the right side, which will become the cursor. Now everything is in place; we just need to animate it, which is extremely simple.
Two separate animations are required: one for the cursor and one for the typing. To achieve the former, all we need to do is make the black border blink, which couldn’t be simpler.
@keyframes cursor {
   50% {
     border-color: transparent;
   }
}

.text {
   /* existing styles */
   animation: cursor 1s step-end infinite;
}
As intended, the black border simply switches between black and transparent and then loops continuously. This is where the steps() function is vital because, without it, the cursor would just fade in and out, rather than blink.
Finally, the typing animation is just as simple. All we need to do is reduce the width of the paragraph to zero, before animating it back to full width in 11 steps (the number of characters).
@keyframes typing {
   from {
      width: 0;
   }
}

.text {
   /* existing styles */
   animation: typing 8s steps(11), 
              cursor 1s step-end infinite;
}
With this single keyframe in place, the text will reveal itself one letter at a time over 8 seconds, while the black border-right (the cursor) will blink away continuously. The technique is very simple yet extremely effective.
Just to add to this excellent use of the steps() function by Lea Verou, reversing the effect and making the text appear to be deleted is also a cinch. To achieve this, just change the keyframe keyword so that it reads to rather than from, and then add an animation-fill-mode parameter of forwards to the set of animation rules. This will ensure that once the text “deletes” (i.e. when the animation has finished), the text will remain deleted. Look at the demo below to see this in action.

The downside to both of the examples featured in this section is that you must know the number of frames or characters beforehand in order to specify the right number of steps, and if this number changes at all, then you will need to alter the code as well. Still, the steps() function has shown its worth here and is another fantastic piece of functionality of the CSS timing function.

The Browser Support Situation

We’ve established that you can’t use a CSS timing function unless the browser supports CSS-based animation — namely, the CSS Transitions and CSS Animation (keyframe-based) modules. Fortunately, support is in pretty great shape these days.

Support for CSS Transitions

Browser Prefixed support Unprefixed support
Internet Explorer N/A 10+
Firefox 4+ (-moz-) 16+
Chrome 4+ (-webkit-) 26+
Safari 3.1+ (-webkit-) 6.1+
Opera 10.5+ (-o- prefix) 12.1+
Although all current browser versions have dropped the prefix for transitions (which is awesome), you’d be wise to still include the -webkit- prefix to cater to old mobile browsers. I think the need to include the -moz- and -o- prefixes, however, has passed, as long as you progressively enhance, which you should be doing anyway!

Support for CSS Animation

Browser Prefixed support Unprefixed support
Internet Explorer N/A 10+
Firefox 5+ (-moz-) 16+
Chrome 4+ (-webkit-) Not supported
Safari 4+ (-webkit-) Not Supported
Opera 12 (-o- prefix), 15+ (-webkit- prefix) 12.1 only (not supported since switch to WebKit)
Again, for keyframe animations, include only the -webkit- prefix alongside your unprefixed code.
Evidently, browser support for CSS-based animation is in excellent shape, but support is slightly more fragmented when it comes to the nuances of timing functions. The following table explains in more detail.

Support for CSS Timing Functions

Browser Basic support cubic-bezier() outside of 0-1 range steps()
Internet Explorer 10+ 10+ 10+
Firefox 4+ 4+ 4+
Chrome 4+ 16+ 8+
Safari 3.1+ 6+ 5.1+
Opera 10.5+ 12.1+ 12.1+
Again, although certain browsers have taken a little longer to support the full range of timing-function capabilities, you can see that support is now universal across current browser versions.

Summary

So, what have we learned about CSS timing functions? Time to recap.
  • They define where an animation accelerates and decelerates.
  • There is a great deal more to them than just the predefined keywords.
  • You can create bounce effects with cubic-bezier() values outside of the 0–1 range.
  • You can break an animation into any number of steps, rather than tweened motion.
  • Browser support is in fantastic shape and ever improving.
Finally, although these techniques are now supported across the board, this wouldn’t be an article about CSS3 techniques if I didn’t mention progressive enhancement. Always work from the bottom up; that is to say, ensure that your work is acceptable and accessible on devices and browsers that can’t deal with this functionality before enhancing for browsers that can cope with them.
Other than that, go wild! Happy curving and stepping!

Other Resources

  • “Cubic Bézier,” Lea Verou
    A playground for creating and comparing Bézier curves
  • Timing Functions,” Mozilla Developer Network
    A more technical overview of Bézier curves.
  • Bézier Curves,” Wikipedia
    More information
 

Monday, April 14, 2014

How to design for the multi-device future

Designing for the vast array of phones and tablets that have emerged over the last few years has proved challenging enough, but now there’s a new category of device to consider.
Over the last 18 months we’ve seen an explosion in the number and variety of connected devices, such as wearable technology like the Fitbit, which tracks physical activity, home control like the Nest thermostat and smoke alarm, and even toys that read messages from you to your children.
These new types of devices bring new design challenges that require fresh thinking, so the Global Society for Digital Marketing Innovators (SoDA) has arranged to get some of the best minds in the business together to discuss the opportunities that this new age of connectedness presents.

Audience participation

Confirmed speakers so far include Michael Lebowitz, Founder and CEO of Big Spaceship, Adobe Systems engineering manager Christian Cantrell and Harley Block of Rokkan. In a session that encourages audience participation and includes a panel discussion, the group will explore how these new technologies can be used to create meaningful experiences that will improve our lives.
The purpose of wearable technologies has so far been focussed mainly around the realm health and fitness, but there are other promising uses for these devices that will be discussed. The most recent SoDA report, which is one of the most widely read trend publications, will also be unveiled during the event
You can sign up for this SoDA session here. It takes place at the Art Directors Club in New York, starting at 9.30am on 24 April.

How to create an accurate estimate for your projects

When I started freelancing and was still quite new to the industry, I had very little idea of how long it took to build a website. This made quoting for projects difficult, so I'd often pick a number that sounded reasonable for the size of the site.
Those first few months were hectically busy. I was juggling several projects at a time. I felt like I was putting a huge amount of effort in and getting very little out. I began keeping a note, hour by hour, of how much time I spent on each project. I was devastated when I did the sums and realised for the hours I was putting in and the overall amount I was charging, I was charging less than minimum wage.
So what went wrong? First of all, I was basing my quotes on the size of the site rather than how long it would take me to build it. Having little knowledge of how long it takes to build a site led to poor estimates, and I didn't appreciate that a small site with just five pages can sometimes take just as long to build as a site with 50 pages.
Also, I wasn't taking into account time spent researching, having meetings, talking to potential clients, writing blog posts, doing bookkeeping and replying to emails. That's all part of running a business. Design and development time depends on a lot of things, from the number of templates and the level of testing required, to the type of client and how long it takes to get approvals.
When you're starting out, estimating how long things are going to take and basing a quote on that is incredibly difficult because you're unlikely to have prior experience. That's why it's so important to record your time as you go. Even if you're not working for yourself, it's still valuable to keep tabs on what you're doing and how long it's taking you. Any job requires time estimates, and if you're not keeping track, it's harder to do accurately.

Why time tracking is useful

  • The client is billed more accurately because there are no guesses at how long something has taken.
  • Accounting for every hour subconsciously helps improve productivity.
  • Regularly submitting a timesheet offers plenty of warning if a project starts creeping over budget.
  • It can help work out average billable hours a week.
  • Tracking individual tasks keeps a record that can be referred to when budgeting for future projects.

Track each task

Each project will have multiple tasks, so define these and track them individually. Just make sure you're being honest to yourself about how long something has actually taken you, including how long you've spent procrastinating. Further down the line, that's going to help you judge how long something similar will take to complete.
When it comes to unbillable tasks, either your rate should take into account the things you can't bill for, or you should consider adding an extra 20 per cent for unbillable tasks onto your overall time estimate (or however much seems appropriate). Here is a template set of tasks that works for most of my projects:

Billable project tasks

  • Pre-design research (interviews and user research)
  • Site design (includes IA, wireframing and prototyping)
  • Site development
  • CMS integration
  • Browser/device testing (some projects require more rigorous testing than others)
  • Training (such as CMS training)
  • Consultancy
  • Project management (emails and phonecalls)
  • Meetings
  • Site maintenance

Unbillable project tasks

  • Admin: writing proposals, contracts and invoicing
These tasks will be different for you depending the type of work you do, and the tasks you do and don't charge clients for. You could split the tasks up further, or track the time spent on individual features.

Estimating

Rather than giving clients a project estimate, I provide a breakdown of the number of days it will take me to complete the tasks and features they've asked for alongside my rate. It helps show what goes into building the site, and what they're getting for their money. If the figure I've given is too high, rather than reject a quote, they'll often say, "I guess we don't really need this feature." This means I can take features out to bring an estimate down rather than have to negotiate on my rate.

Invoicing and logging time

When I invoice a client, I list the tasks I worked on and how many days I spent on each one to show the client specifically what I've been doing in that time. Maybe add your Git commit messages for that period.
Don't just log client stuff. Log unbillable work related to running your business, such as bookkeeping, working on a side project, training, preparing a conference talk or writing a blog post. This keeps tabs on the true costs of running a business. I keep track of time spent writing and researching for talks so I can see how much it costs my business to do them in lost income. (I spend around 100 hours preparing a new talk, so it's quite expensive).

Beat the procrastination

If you find yourself procrastinating a lot, keep track of this time too. Seeing that number written down at the end of each day may work as a guilt-trip into making you more productive. Some apps like Concentrate will block certain sites and apps depending on what task you're doing. Others like BubbleTimer will show you how much time you're spending off-task. Seeing all that wasted time is a good way to kick you out of bad habits.

Time-tracking tools

It took me a while to find a decent way to log my hours. Initially I wrote everything down in a notebook, but it felt disjointed and not very accurate. If I had to take a call or send some emails, it was hard to accurately remember how long I'd spent doing that. I use an accounting app, Freeagent, which has built-in timesheeting, as do a few other accounting apps like Harvest. It lets me split projects up by task and decide whether each one is billable or unbillable. This helps me see how much time I've worked on a project and how profitable it is. Once I've filled out a timesheet, I can create an invoice out of it.
There are great time tracking apps you can get that can integrate with accounting apps too, such as Eon, Punch, Slips and Clockwork. One of the things I like about using these apps is having a little timer showing me how long I'm spending on a task. It's really easy to pause the timer and switch between tasks, and it's also a constant reminder that I'm on the clock, which helps me stay focused.