Posts About Sparks sticker Sparks
Sparks sticker
Posts About Sparks

Stories Not Screens

Daniel wrote this on March 26, 2015 in . It has 215 reactions

paper to pixel

It's no secret that web design has its roots in print. In the early days of the web, the influence of print on web design was pretty inescapable. Websites were essentially virtual brochures, static pages with little or no interactivity. Designers were still learning the potential of this new medium and the technology had to mature. Slowly but surely, the differences between print design and web design became evident. But many designers are still thinking of their designs in terms of screens and images.

At one of our recent Soapbox events, Braden Kowitz, Design Partner at Google Ventures summed it up perfectly:

When you look at how people use products, they don't look at the screen, they don't look at the feature. They take this pathway through all your screens and features' So what you really need to design is that experience and that story.

Thinking of themselves as storytellers might be a new concept for many designers, but it's a fitting analogy. Unlike print designs, which serve a singular purpose and are meant to be viewed, design work on the web is entirely interactive. Users take various pathways through websites and apps as they try to accomplish a variety of things. Designers gently guide their users around obstacles, shepherding them to desired outcomes.

Put Yourself in Your User's Shoes

In order to become a successful storyteller, designers need to develop empathy. Empathy is the ability to understand and share the feelings of others, to put yourself in their shoes. Designers need to know their users. They need to understand exactly what the user is trying to accomplish and care about their experience through the entire process. Even with the best planning, there will always be problems you didn't think of, interactions you didn't anticipate or things you didn't take into consideration. The only way to discover these issues is by trying a design yourself.

Braden and his team do this through sketches, a process he calls "story-centered design." He describes these mockups and their purpose like this:

Designers present every sentence the customer reads, every action they take, and every screen that system generates in response. The designs follow a customer from an initial trigger all the way through completing a goal, and they show how the design supports every step in that flow.

Like any good author, designers need to know exactly how their stories end so they can guide their users most effectively, knowing exactly which routes are available and designing the most pleasant experience.

Storytelling is in Our Blood

At ZURB, we've always thought of product design as storytelling, and we've been using Progressive Design to sharpen our storytelling skills and create amazing experiences. Our process has many steps that ensure we keep the user in mind at all times, because we design for people.

sketching

As with most anything at ZURB, it all starts with sketching. Like Braden and his team, we sketch out each screen and map out every workflow. Even at this very lo-fi level, we begin to define the paths users will take to achieve their goals. The next step is scanning these sketch sheets into clickable prototypes using Solidify. This tool in the Notable Platform helps us to interact with our designs as close to how the end user will as possible, exposing anything we left out and helping us refine our work.

The Progressive Design process involves constant iteration and feedback. We share our work with the rest of the team, inviting them to respond with any questions or concerns. If we're working with a client for our Studios business, we walk them through each workflow, using user personas to explain how different customers will interact with the product or website. If anything isn't working along the way, we step back, ideate more solutions, and test again. At times we use surveys to gather information about how real people interact with our work. This data helps us improve our stories.

Only when the workflows and paths within our products are complete do we focus on on polishing our visuals and refining our interactions. This user-centered approach helps us to eliminate problems early, prioritize the workflows and help our users accomplish their goals.

A Shared Story

It was great to hear how Braden and his team agree that designers need to be storytellers, a sentiment that many of our Soapbox guests have touched on as well. We'd like to thank Braden for taking time out and sharing his insights with us and our audience.

We're looking forward to our next event with Geoff Koops and Mike Towber of Rdio, amazing designers who have been telling some engaging stories with their users. We hope you can join us at the next Soapbox!

Don't Miss Out on Our Next Soapbox

Shoppers Don't Want Your M-Dot Site

Ryan wrote this on February 25, 2015 in . It has 127 reactions

ecommerce mobile

Imagine for a sec that you're an ecommerce retailer. It's Black Friday, the day after Thanksgiving in the United States and the cornerstone sales day of brick-and-mortar stores. But you get a huge spike of traffic and someone snags a $25,000 clutch from a mobile device. Which is exactly what happened one Black Friday for One King's Lane.

That one incident pushed One King's Lane to focus on perfecting their mobile shopping experience. As Doug Mack, then-CEO of One King's Lane, said:

Your business model either leans on mobile or it doesn't.

At the time, 30% of One King's Lane traffic came from a mobile device, most of that from a tablet. Sales from mobile make up one-third of One King's Lane sales. So the retailer worked furiously on releasing a universal iOS app, but haven't done a responsive site. Instead, they have a server-side adaptive site. A lot of brick-and-mortar retailers have followed similar paths, jumping on mobile but not going responsive.

87% of Retailers Aren't Responsive ... Say What?

RWD vs. Mdot

Traffic for online shopping is huge, many retailers split their traffic roughly 50/50 between mobile and desktop, such as Amazon and Target. Yet, surprisingly, 87% of the top 100 retailers aren't responsive, shuffling shoppers to an m-dot site which can be a nightmare for shoppers.

Why's that? Show me the numbers, Mrs. Landingham.

Not everything is available on an m-dot site and the shopping experience is, well ' less. M-dots take longer to load — more than 4.8 seconds and 40% of shoppers will bolt or throw their phones in frustration if it takes more than three seconds to load. And nearly six times as many mobile shoppers would rather ditch the m-dot site for the full-blown site even if it's a horrid mobile experience.

When it comes to performance, responsive web sites are in a dead heat with m-dots and, in some cases, can slightly edge out their m-dot cousins.

Too Many Codes to Maintain When a Single Codebase Will Do

M-dots have another disadvantage. It means having an entire other codebase to maintain. Twice the work and twice the team to manage those separate code bases or using a server-side solution — one that takes your existing site and serves up another, entirely separate mobile site for the shoppers on the go.

responsive ecommerce

Responsive sites allow retailers to have a single codebase that can be maintained by a single team. It also helps retailers find life beyond the app store. With more and more tools, such as Foundation for Apps, there isn't any real reason for ecommerce to turn to m-dots rather than a responsive site. And there are certainly code blocks — such as responsive pricing tables, masonry grids and product listings — to help retailers make the leap easier.

M-Dots Are the Way of the Dinosaur

If most mobile shopper prefer the full site, then they obviously want parity when it comes to the buying things from their phones or tablets. And they bounce right out of an m-dot, so why are retailers still clinging to it? Having one codebase, one site can allow them more parity and give their shoppers everything they're looking for.


Mesmerize Users With Something Unexpected

Daniel wrote this on February 19, 2015 in . It has 142 reactions

surprise!

You're out on the town with friends and you decide to find a place to eat. Whipping out your cell phone, you launch the Yelp app and scroll through nearby restaurants. Suddenly, you see it peeking at you from behind the menu — a hamster. You begin pulling the menu down to set it free only to watch the hamster jump into a rocket and blast off!

Did this funny easter egg help you accomplish your task? No. But did it bring a little joy or excitement to the experience? Definitely.

This kind of unexpected detail is an example of "Surprise and Delight," a design trigger that can make any experience more exciting and keep users engaged. Two talented designers recently came through ZURB HQ to get on their Soapboxes with different perspectives about surprise and delight and the role it plays in their designs.

Marissa Louie, of Yahoo, brought up the word "enchantment" again and again when describing her designs. Her goal as a designer is not just to provide a solid, usable interface, but to create an experience that connects with users emotionally. To accomplish this, she employs surprise and delight to create "sticky experiences" that keep users engaged and coming back for more.

On the other hand, Wesley Yun of Lytro was hesitant about devoting too much attention to unnecessary visual details. For Wesley, a designer's main focus should be making sure the product accomplishes its purpose. He warned that too much attention on extra details can actually harm the design, rendering it less effective.

So when should designers use this trigger, and how can they use it effectively?

Surprise and Delight Right

Surprise and delight increases satisfaction and makes experiences more exciting, but as with any tool, it needs to be used properly to be effective. Here are a few things to keep in mind:

Visuals Will Only Take You So Far

No amount of visual appeal can make up for a product that doesn't work right. That's why sketching is so important to us here at ZURB. Before we even write one line of code or draw one graphic, we focus on creating solid, useable and useful designs with Sharpies and paper. If something isn't working or doesn't feel right, we scrap the idea and move on.

If something is really working at that lo-fi level, we know it will be amazing once we add all the visual polish. It's only at that point where we start thinking of embellishing the designs with some surprise and delight.

Keep in Mind the Context

Meaningful surprises can make user experiences more engaging, fostering brand loyalty and encouraging customers to dig deeper into a site. But if you're not careful, surprises can disrupt the normal flow of activity, irritating users rather than delighting them.

Mint, a personal finance website and app, does a good job of employing surprise and delight at just the right moments. It's typically a disheartening experience stumbling across a 404 page, but Mint softens the blow with this unique and humorous image:

mint 404

Introducing some surprising element while a user was connecting their bank account or entering some important financial information would probably not be a welcome addition and have undesirable consequences.

The product itself may determine if it's appropriate to include surprise and delight, and to what degree. The customers that Wesley is designing for are in many cases using the Lytro cameras for work and have an expectation of reliability. For photographers, nothing can get in the way of capturing the perfect moment. Wesley called this the "can't fail" moment. In this application, a user would definitely not want any surprises. Distractions would be detrimental to the product accomplishing its purpose.

Marissa uses surprise and delight in Yahoo News Digest, an app designed to inform and entertain users. In this context, there is greater freedom to surprise users with unexpected details that turn an otherwise predictable experience into an exciting one.

Find the Right Frequency

Surprises by their definition do not occur at regular or predictable intervals. If the unexpected is expected, it loses its meaning and effectiveness. Experiment with the amount of surprises you include to determine what the right balance is. Sometimes less is more.

One site that breaks this rule is Flickr. Every time you log in you'll be greeted in a different language. While the greeting is expected, it's always delightful seeing it in a new language. Bonjour, Flickr!

flickr

It's Not All Visual

The amount of appropriate surprise and delight will vary according to the product and so will the format. Sometimes something as small as some playful copy or unexpected interaction element can come as a surprise.

Normally, website footers are straightforward and stale, but Campaign Monitor catches us off guard with a bit of humor in their heading:

campaignmonitorfooter

Surprise and delight doesn't have to be aggressive or blatant to be effective, subtle touches can be just as compelling.

As Always, Go With Your Gut

Ultimately, there are no hard and fast rules and it's up to designers to use their good judgement. The amount and kind of surprise and delight that will be effective largely depends on the product, the user and the goals of the project.

We want to extend a special thank you to Marissa Louie and Wesley Yun for sharing their insights with us at their Soapboxes. We're looking forward to our next guest, Braden Kowitz, Design Partner at Google Ventures, tomorrow at noon. We hope you can join us for what is sure to be another exciting Soapbox!

Don't Miss Out on Our Next Soapbox

Design Collaboration is Lonely

Ryan wrote this on January 22, 2014 in . It has 108 reactions

A designer works alone on sketches.

When it comes to collaboration, you need two or more to tango. You can't collaborate all by your lonesome. Well, you could, but then you'd be Edward Norton in "Fight Club" conspiring with Tyler Durden. But to get the most out of a collaboration you have to do design work upfront. And that can be a lonely effort, even in an open-office environment that encourages collaboration.

Let's define design collaboration first. It's Design Thinking in action. When you have a creative team with fantastic ideas, sometimes things can get a bit fuzzy. After doing work, you need a second opinion because you're too close to your ideas. Collaboration allows you to get feedback on those ideas. You might find new sparks in that collaboration, or you might find that your ideas aren't quite cooked. It's easier to collaborate when you don't have a physical barrier between you and another designer.

Check out any startup and you'll find an open floor plan. A German team conceived of an office not shackled with walls and room in the 1950s. (An aside: Frank Lloyd Wright considered an enclosed office to be fascist.) Offices without walls have been around for quite some time as newsrooms everywhere before they were all the rage in Silicon Valley. Steelcase, the office furniture company that once bought design firm IDEO, is a big proponent of an open office. Why the appeal? Because an open-floor plan removes the barriers, literally, and encourages collaboration. Which is why our office at ZURB HQ is open.

The Cost of an Open Office?

The startup world assumes that open floors are great for ideas, and they are. Sparks fly quickly around ZURB. But there's also a cost associated with having an open office space. There is a barrage of distractions that could increase your blood-pressure and stress. Not everyone is a fan of them. 37 Signals imposes "library rules" to keep things pretty quiet in their open office.

Jason Fried, 37 Signals co-founder, is big into remote working, saying the office is the worst place to get work done. However, presence is crucial in collaboration. You can't balance collecting feedback and presenting those ideas if you're not in the office. Working remotely, you're siloed. Collaboration can't happen in a vacuum.

Doing Your Homework

Design is collaborative by nature. And working jointly is a handshake with your team, customers and potential customers that you're out for the best answer, not just an answer. And it gets you through the Design Feedback Loop, where you do work, present it, get feedback and iterate on it.

Our Design Feedback Loop at ZURB.

But the vast majority of the time is spent doing work, and that's what designers think is more valuable. Why does it take a long time? Design work takes long periods of time executing by yourself. Because if you're going to seek feedback, you have to be iterative and think through problems on your own first — from hypothesis to sketching to wireframing to layout. And it's hard to collaborate when you're doing work because the tools are often solitary. You have to commit to your ideas with homework before you collaborate. That's where most companies go wrong, wanting to get consensus before committing to any work. It's a one to 10 ratio when it comes to collaboration to doing work alone. The valuable part often is the collaboration, where you can get feedback.

Let's look at how many hours one of our designer logged on a recent client project. He worked 148 hours out of the 180 total project hours. That roughly breaks down to 21 hour per week. Out of those 21 hours, two hours were on calls with the client. An even smaller amount of time, another hour or so, was spent getting feedback from the project's lead. Doing rough math, the designer worked 17 hours on his own before collaborating. When there was collaboration, either with the lead and copywriter (me) on the project, the designer was able to get feedback so he could iterate. What was really valuable, however, was spending that time with his other teammates after a client call. The lead was able to help decipher their clients feedback, which gave the designer the confidence to push forward. The smaller amount of time ended up creating greater impact on his work.

But you can't just get feedback without putting in the work. And that sort of collaboration can't happen if you're miles away from the office.


What's Ahead in 2014 for Responsive Web Design?

Jonathan wrote this on December 31, 2013 in . It has 199 reactions

carnac

2013 was a big year for responsive design. In fact, if you read around the Web a bit you might hear that 2013 was the "Year of Responsive Design". That might be true — around the turn of last year, there were major sites coming out with responsive designs, like Time Magazine or Mashable (and frankly, thousands of others). If nothing else, 2013 was the year of responsive design going mainstream, even becoming something designers and consumers just expect to see. That's pretty hot.

2013 was also a big year for responsive tools: Foundation 4 came out in February, Bootstrap 3 came out in August and Foundation 5 came out just a few weeks ago. Yahoo! got in the game in May with the release of Pure, and the team at Thoughtbot has continued to push Bourbon Neat. There were new plugins, polyfills and practices that became popular in 2013. In general, building responsive sites has never been easier or had more powerful tools.

So let's prognosticate a bit: what should we expect to see in 2014 in responsive Web design?

Smarter Responsive Design

2014 will be a year full of a much better and deeper understanding about how we build and optimize sites for any device. Responsive sites have always suffered from varying degrees of optimization issues, but we're getting a bit better about the tools now, and best practices are starting to emerge and standardize. Things like the now ubiquitous "hamburger" nav icon and off-canvas panels are becoming relatively common and genuinely work well responsively.

Device capability detection, selective loading of assets and media, better optimization for device speed and hardware. These are all going to be better explained and much easier to implement with new tools and plugins.

Greater Device Agnosticism

Device classes have always been hard to pin down, but the stereotypical mobile-tablet-desktop paradigm is going to completely fall apart in 2014. We already have devices that fall neatly between what we commonly consider to be a phone and a tablet, or tablet and desktop. But now we also have wearable computing (watches, heads up displays ... who knows, maybe we'll see the long-rumored Apple watch). There's also smart TVs and other home media appliances that are Web-enabled.

We'll see responsive design move even further into truly device-agnostic design. That means we can plan for devices that don't exist yet more cleanly, as well as take better advantage of specific capabilities and constraints.

Fancier Frameworks

It would hardly be us if we didn't talk about what's to come for frameworks, like Foundation. The area we see with lots of opportunity in 2014 are complex tools with many components and means of input, as well as trickier data models to display. So far responsive design has been used in large part for marketing or content sites, not complex apps. To get the ball rolling, we're rebuilding all of our Product Design Apps to be responsive and built on Foundation. Our plans include placing a number of Web-app centric components and plugins in Foundation. That will make building a complex app as straight-forward as creating a marketing site or simple content page.

2014 is going to be a big year in responsive design. So with that, we want to welcome you to the New Year!


Like Ninjas, Great Ideas Aren't Always Visible at First Glance

Alina wrote this on December 13, 2013 in . It has 26 reactions

Conventions tend to turn invisible. Like ninjas, they blend into the background. We blithely accept that privacy policies, for example, are long blocks of indecipherable, dull, gray text. They don't encourage people to understand what tapping that "I agree" button actually commits them to. As a result, few people read fine print thoroughly.

But privacy advocate Michelle Dennedy wanted to make her company's policy more engaging. Doing so would explain how would make privacy policy more than just an obligatory legal form. As she put it in a ZURB Soapbox:

Not just write policies, but to build fabric, and build culture and build passion, and build architecture and engineering behind human rights."

Don't be Afraid to Suggest Outlandishly Creative Ideas

Michelle said most agencies took the traditional route to learn project scope, asking questions about format and branding requirements. They talked about typography for pages of text, and gave professional — though standard — presentations about making the policy more digestible for people. We took a different approach.

"Pirates or ninjas?" Our first question to Michelle set the tone for our relationship and, as we learned, helped define the project.

Our design process always begins with opening up problems, exploring opportunities, and focusing on the concepts that stick before closing down on solutions. Long before we touch code or Adobe products, we reach for sharpies and paper. So we explored many ideas that we could pitch to Michelle. Such as:

  • What if we presented the policy as a video?
  • What if we offered "legal" and "human" modes?
  • What if we arranged the policy in Q&A format?
  • What if we formatted the policy as a storybook?

screenshot of the storybook format with helpful explanations

Screenshot of the storybook format with helpful explanations

Half-jokingly, we threw a ninja into the presentation. "A comic ninja who explains the legalese — wouldn't that be hilarious?" Maybe it would be too flippant. McAfee was a serious company, after all, and privacy isn't a trivial subject. But the ninja stayed. Why not?

To our surprise (and her delight), Michelle loved the ninja idea most.

New Ideas Need Extra Development

This format was the first of its kind, and by risking something new, we had to discover new conventions. So we took an extra week to second-guess the ideas and test assumptions. Several iterations later we settled on a storybook-like format. It was easy for users to learn and — most importantly — approachable.

The more we riffed on the concept of a fictional privacy ninja, the more unusual — yet plausible — our ideas became. The project became more than a single document. We explored:

  • A "build your own ninja" tool
  • The option for users to choose a character to defend their rights — super hero, ninja, or security guard
  • Using the ninja as content, not decoration. More infographic, less clip art in the margin.

Examples of the ninja art evolution. First, a pencil sketch with a face-concealing mask. Second, a red-suited ninja with a simple eye mask. Third, a refined version with stylish hair.

We went through a few iterations before finalizing on the ninja illustration.

Versions of the ninja became less cartoony, more realistic. But in the end we opted for our original simple cartoon that almost didn't make it into the presentation.

Unusual Ideas Need Support Before and During Iteration

While Michelle loved the unorthodox idea, we wondered how to propose it to others. How would they take it? Once again, we found that wondering about rejection was needless worry.

When Michelle presented the ninja idea to her boss, she was careful to explain that the "cartoons" were a means of communication, not a means of making the policy seem childish.

Illustration of a browser cookie explained with a chocolate chip cookie. There's also a cartoon ninja eating cookies, used elsewhere in the policy.

More than extras on the side, cartoons illustrated important concepts to users.

She also took the idea to the Federal Trade Commission. She said companies preemptively telling the FTC, "I"m taking a risk," was unusual. In this case, it worked. The FTC had never seen anything so creative in a policy — and they liked what they saw.

Michelle returned to McAfee with outside acceptance. The risk of a cartoon ninja — an afterthought and half-serious cartoon — was paying off.

Risks Pay Off in Unexpected Ways

Originally, we agreed that concepts and mockups would be our final deliverables. But later McAfee asked us to build out a working prototype storybook. Over two weeks we created a single-page microsite with animated, jQuery-based "pages." At the time, no one else had created reliable animation for the particular look we wanted, so the project's lead engineer took a risk and wrote his own.

Part of taking risks in design is knowing when they're appropriate. Storybook or not, the policy was a legally binding document. The legal team was adamant on certain phrasing. But while the legal text remained essentially the same, our new format organized it into easily digestible chunks. Graphics showed what text meant. And the ninja illustrations made the document approachable.

It pays to question assumptions. Even if the ninja hadn't panned out, it got us thinking. By suggesting "crazy"'ideas, we were able to open up the problem, break away from convention, and deliver something unique. You never know when a bad idea will lead to a great one. Like ninjas, great ideas don't appear unless you're willing to risk looking for them.


What Comes After Flat?

Ben wrote this on September 30, 2013 in . It has 252 reactions

The impact that Apple had — and continues to make — on modern design is hard to miss. The idea of “flat” colors instead of textures in iOS7 wasn’t a surprise. But whether their September upgrade influenced design trends today or they’re following a shift brewing over the past few years, everywhere we look we see flat, geometric, texture-free interfaces.

It’s said that anyone can predict today. What about tomorrow? While we can’t make promises, here are a few things we expect in the coming years.

example of a single datum in an interface

Simple and single numbers. Specialized interfaces will feature a single datum and rely on users’ memories to fill in the gaps. For example, when you launch your favorite weather app and see a giant “72” on a cool blue background, you can infer it means “72 degrees Fahrenheit.”

Dabbling with black and white. What’s flatter than flat color? No color. Sapping away hues for a grayscale interface isn’t always practical — let alone practical — but we may see a brief comeback before users are drawn back to candy-colored competitors.

example of geometric shapes among icons

Geometry, but more of it. When we recently redesigned our free icon set, our designers maintained consistency with each other by using the same circles, squares and triangles. We think designers in general will keep using fundamental building blocks to build complex shapes rather than using fewer shapes with complex curves.

Gestures replace buttons. Sometimes. Swipes, pinches, zooms will become more common than single or double taps — but mostly in the operating system, not within websites or web apps.

Voice interfaces. Swipes might not stand a chance. Touch UI will start to look dated as people find convenience in Siri, Android 4.3 Voice Search, Dragon, Skyvi, or other apps that interpret the human voice.

Apps with personality. But while you may spend more time talking to your phone instead of on it, anything interactive will seem to be an entity, not a mere tool. But this may fade alongside black-and-white design. Especially when combined with voice UIs, users may not appreciate apps that talk back.

Virtual keyboards. All-glass devices were the first step away from physical keyboards. The next step will be virtual representations of real buttons. We’ve seen prototypes before. They’ll be customized with your favorite shortcuts, and even sized properly for your fingers.

Interfaces meant to be worn. A swath of new devices will weave their ways into our shirts, hats, shoes, cars… Design for these devices will follow suit. Watch out for:

  • One-handed UIs for wristwatch (wrist-top?) devices.
  • Single-purpose interfaces for specialized functions like calories burned.
  • Shirts that warn you if they clash with your pants. Well, maybe not, but we wouldn’t put it past a Kickstarter campaign to try that on.

A wise man once said that the universe isn’t stranger than we imagine; it’s stranger than we can imagine. The device on which you’re reading this is the stuff of yesteryear’s science fiction. Maybe few — or none — of our predictions will come true. That’s fine if, in five years, we look back at this blog post and think, “keyboards — how quaint.”


Eight Human Behaviors to Validate Your Product Design

Alina wrote this on August 26, 2013 in . It has 217 reactions

For a product designer, an interface is not just a collection of words and pixels. Everything we design is a potential study in human behavior. Understanding human behaviors and motivations can help designers create interfaces that people truly connect with. But being able to defend your thinking in a stakeholder presentation is another story.

Stakeholders may (wrongly) see our work as designer's whimsy, and it's our job to defend our designs with as much passion as went into producing them. What they need to hear is some solid proof that whatever we're proposing is going to have a BIG impact on the business.

Over the years we have learned many design patterns that help us streamline our process. And every pattern has its own purpose, rooted in natural human behavior. Lucky for us, human behaviors have been studied for millennia. There are hundreds of years of psychological research that, when used with purpose, help designers make deliberate design choices and provides solid proof to back them up.

We've been investigating in earnest these behaviors, identifying some 76, so that we could better use them in our work. Let's take a look at eight behaviors that you can wield in the next feedback session.

1. Attention

Your interface has a specific task — say book a flight or a hotel room — that you want users to accomplish. And while you may have other elements present, your users won't notice. They'll remain focused on the task at hand.

screen shot of Google search results

Google anticipates what the user is most interested in and serves up some extra info along with the search results.

How to Use It

When designing a goal-specific workflow, keep the peripheral content to a minimum and present only very relevant info. Otherwise, a user may get distracted and not follow through on the task. Articulate how you've considered what a user's most relevant need or interest is in your design. Highlight how the relevant information and certain functions aide a user in accomplishing a given task.

2. Achievement

Behavior can be reinforced through rewards, kind of a Pavlov's Dog situation. If a user's achievements are acknowledged, she'll be more likely to engage in activities. American psychologist Henry Murray was the first person to use the term in the late 1930s after recognizing achievement as an important source of human motivation.

screen shot of Treehouse's badge collection
Treehouse gives its students a badge for every single course, letting students stack up their achievements quickly.

How to Use It

A common incarnation of Achievement is to use rankings, badges or status in your design. It's important to set goals that are specific and challenging, but achievable and meaningful at the same time. Don't present someone with a reward that's unachievable or a long way off — it will create low motivation in your users. By setting small goals, you can increase confidence in your user quickly and keep them coming back for the next carrot. Incidentally, using Achievement also helps the business gauge user engagement, an easy metric on which to follow up.

3. Bandwagon

Word of mouth is very powerful. Economists have known for years that people base their decisions on what they hear from friends or strangers. Same with digital products. Users who are on the fence can be easily swayed if they see other people enjoying a product. Angry Birds, anyone?

screen shot of products at fab.com
Fab.com prominently shows top selling products, urging users to check them out.

How to Use It

Showing potential users how many people are using your service or product and how much they like it could encourage your audience to follow the 'trend.' Social proof, which can be considered a motivator on its own, is another version of Bandwagon. Showing testimonials, number of followers can convince a cautious user that your product holds water.

4. Familiarity

When given a choice, people will always flock toward the familiar over the unfamiliar. How many of us immediately chose an unfamiliar, new product over one that we know is reliable and gets the job done? Or think of it this way: if you're a Coke drinker, when was the last time you said, "um — let me give Pepsi a try."

Skype gives users a free trial, banking on them falling in love with the service in the process and becoming a paid customer.

How to Use It

Give users a taste of your product to persuade them to buy. Getting in front of your customers — through advertisements, giveaways, free trials — will make your product seem more familiar to them. However, don't repeat your ads too much or you'll become background noise to your potential users. You can also connect to users who are already onboard with your product. The more you foster those connections, the stronger the trust you build with your audience.

5. Relative Value

People have a hard time gauging absolute value. It's also human nature to make comparisons. Users often compare products against alternative ones, using either on-hand information or other references they trust to help them assess the product's relevance.

screen shot of Mazda car comparisons

Mazda shows a comparison of their direct competitors to help sway potential buyers.

How to Use It

Give your customer a comparison, any comparison. Comparing your products to competition will often make yours more appealing. Illustrate the different options to communicate how your product is a better value.

For pricing, provide premium and budget versions alongside regularly-priced products. This will likely steer their attention to the most desirable price point. You can also show the original price and savings when a product is on sale to give the customer a sense of value they're getting.

6. Recognition Over Recall

People have two types of memory: recognition and recall. But when it comes to your users, it's easier for them to recognize what they've previously seen or experiences rather than recall them from memory.

Multiple-choice or one-click options are easier ways to help users find what they are looking for on a site.

screen shot of a Bilner questionnaire
Biliner doesn't make the user think too hard during onboarding, while collecting a ton of useful information.

How to Use It

When trying to get more information about a user, don't ask them to write what they like. Instead, present a list of items that represents a certain category of data. Users recall much more simply clicking on data. It'll also help you collect a much broader pool of data whilst providing a fun challenge for the user.

7. Peak-End Rule

What do you remember from your last vacation? Likely some key moments. That's because people mostly judge past experiences by their highlights, either pleasant or unpleasant, and how those experiences ended.

screen shot of an about page

Unexpected hover effect on About Team page from Arc90 creates a memorable peak in the experience.

How to Use It

Create peaks and endpoints for users. Peaks can be the core values you provide or an Easter Egg that'll surprise your user. Endpoints can be obvious, such as completing an order, or subtle, like a friendly or funny registration confirmation page. In either case, give your user something memorable to latch onto during, or at the end of, their workflow.

8. Scarcity

The fastest way to get someone to desire something is to make it scarce. They'll want it more if they think it's in danger of vanishing for good — say a short supply or only available for a limited time.

screen shot of a timer at Groupon

Time countdown on a Groupon deal makes the user more likely to act.

How to Use It

Scarcity could be time- or quantity-based. Highlight the amount of products still left or how it's only available for a certain period of time. Users will then perceive the products more worthwhile.

Get Into People's Heads

By using natural human behaviors in our work, we can get into people's heads with words and pixels. Solid proof can turn, what at a glance looks like, a trendy layout into an ingenious solution that can hold up against even the toughest critics. That, by the way, is Authority at its finest — a human nature of being more likely to act if we are presented with reliable evidence.

Digital product design plays on all the emotional and cognitive strings that offline products and marketing has been practicing since the beginning of products and marketing. Do you have a Buy-9-Get-10th-Free card to your local ice-cream shop, or have you ever fallen victim to a closeout sale? Then you've participated in Achievement and Scarcity in your own human experience. Wield these principals and you'll be able to better defend your design decisions in that next client meeting.


With 817 Mobile Devices Accessing Our Site, Responsive Design Isn't a Choice

Ryan wrote this on July 30, 2013 in . It has 26 reactions

We recently noticed something astonishing. 817 different mobile devices accessed ZURB.com in the past 30 days. That's amazing! Having a flood of smartphones and tablets access our site proves that responsive design isn't a choice anymore.

The number has grown by leaps and bounds in the past couple of years. We recorded 142 mobile devices coming to our site when we release Foundation in 2011. Now it's 817 — a 475% increase in just two years.

These aren't users who casually check out the site and leave after a few seconds. The broad base of them are sticking around for a minute and 55 seconds. Sure, it's lower than the four-and-a-half minutes of the average desktop users, but mobile users are snackers.

It's only going to continue to grow. Consider this: 38% of mobile usage in the last six months came from 3,430 different devices and operating systems. Tablet use has shot up 10% in that time as well. Which goes to prove that responsive design is crucial to meeting the needs of customers across a variety of smartphones and tablets.

It's impossible to design for every specific device. Responsive design is the only way to ensure our products do reach as many people and as many different devices as we can. It's the only practical solution that allows companies to serve up content to a growing mobile audience.


Want a Glass-Ready Site? Foundation's Got You Covered

Jonathan wrote this on July 19, 2013 in . It has 146 reactions

Alright, they make you look more than a little like a cyborg. Wearing them out in person is awkward and makes you weirdly self-conscious. But you can't deny that 'Glass' from Google is fascinating technology. And Foundation works pretty well on it.

We were lucky enough to secure a pair through the #ifihadglass Explorers program, and we've been playing around with them all week. While people have written ad nauseam about the experience of wearing Glass, we had a more specific thing we wanted to play with: exploring the web through them. Amazingly enough, it's not a terrible experience.

Accessing the Web

Almost everything on Glass is voice-cued, so to reach a Website at all you need to tell the device to Google something, for example "Product Design Company in Campbell." After showing you the Google results you can elect to View Website, an action made available in the last Glass update.

Glass does render arbitrary pages, and does a … pretty good job. Performance-wise Glass is about on par with a 2-year-old Android device. Pages render somewhat slowly and anything that requires significant hardware like CSS transitions (with a decent frame rate) is going to suffer quite a bit. That being said it is a modified version of Chrome and it renders pages correctly in most cases.

Using a Page

When it comes to using a page, the controls are intriguing and pretty cleverly done. Using the touchpad on the side of the device you can easily scroll up and down by sliding your finger along it. Sliding along with two fingers zooms in and out (a very choppy affair). Where it gets cool is when you hold down with two fingers and just … look around.

As you move your head, the built-in accelerometer translates your head's movement into both a means of panning around the page, as well as the means of targeting a link to select. A reticle in the center of the screen shows your target, and tapping on the touchpad gives you an option to select and follow the targeted link. It's a crafty way of using a natural action like looking around and mapping it to the Web. It works really well, even if you look like an aimless idiot to anyone watching you.

Foundation + Glass

Once we learned how it worked and what it displayed we were pretty confident Foundation 4 would have no issues on Glass. The pages it shows are presented as mobile screens which makes sense; Glass reports a resolution of 640x360. Foundation 4 being mobile first, pages are rendered as small screen pages using the small device grid.

We found one issue with Clearing which has some trouble with how Glass handles the canvas panning, and of course some things like Joyride can be a bit tedious to pan around and deal with, but by and large Foundation 4 has you covered for Web sites being shown on Glass. We'll do some more testing and verify this but we were pretty happy that our thesis for Foundation, being ready for devices that don't exist yet, is holding up. Foundation 4 was ready for Glass. Pretty neat.



Get a job, nerd!

via Job Board from ZURB