Is a Landing Page or Microsite Better for Customer Engagement?

So you’re developing a new website, or you’re thinking about launching a new product or service on your current website, and you’ve been strategizing the best possible way to make sure customers actually notice what you’re doing. You’ve done your research, and now you’re facing the same question many developers and designers encounter: should you use a landing page or microsite to promote your stuff?

It’s a difficult question, to be sure. Both are similar in nature, but does one offer more benefit when it comes to customer engagement? Possibly. It all depends on what you’ve got to offer. Let’s take a look at both options to see which one comes out on top.

The Case for Landing Pages

Landing pages are normally the go-to option, but what are they, exactly? And more importantly, are they really the better choice for engagement?

landing-page-form-encapsulation

 

A landing page is simply a page of content within a larger site that users “land on” when visiting your site. Most of the time when someone says “landing page” they probably mean home page, or “About Us” page — something that communicates essential information about something. But landing pages can be used for much more than that.

The best landing pages are about a specific call-to-action (CTA): they’re not just giving information, they’re expecting the visitor to do something, whether it’s purchasing a product, downloading a resource, or requesting additional information. Basically, landing pages are all about conversions — they’re designed to give users what they want (information and resources) in exchange for something you want (e.g. clicks, follows, or subscriptions).

Good landing pages are focused on getting visitors to take immediate action without ever leaving the page. This is called “closing the loop”: the goal is to keep visitors from leaving before they fulfill the CTA. If done right, good landing pages can seriously convert.

But what happens if they’re not done right? Well, let’s take a look at the pros and cons of using a landing page to engage customers.

Pros

They’re easier to measure. Landing pages are designed to make measuring their effectiveness easy. Basically, you would only need to know “out of X visitors, Y took action.” This means if you’re looking for a specific number of conversions to show the boss, landing sites are the perfect option because they provide instant results.

They cost less (than microsites). Since landing pages are single page additions to already developed sites, they don’t need a lot of fuss to get up and running. Using the style elements of the existing site also saves time that would otherwise be spent on creating CSS or HTML from scratch. Additionally, microsites often need separate domains (which cost money to host), while you can have a near infinite number of landing pages on an already-hosted site.

They’re CTA focused. While you could technically consider a microsite one giant CTA, oftentimes action steps in a microsite can be easily overlooked (we’ll get to that later). Landing pages, on the other hand, are only about the CTA, and they’re hard to miss. If you’re needing your customers to take an immediate action step, using a landing page may be the better bet.

They’re easier to A/B test. Because landing pages are often single pages, they can be easily updated and changed to test the effectiveness of different elements. Don’t like the button style? Just change it! You won’t have to mess with coding across an entire site just to see if one layout works better than another.

They’re easier to brand. Since landing pages are technically already part of a branded site, your customers will have no problem knowing that your business is the one behind the content. Microsites often include separate branding to make them stand out, which can make it harder to implement an integrated marketing strategy. If you want to avoid the question, “Will customers know this is us?”, then landing pages are the way to go.

Cons

They’re maybe a little too focused. While narrowing down your content and focusing on a CTA is a great way to engage certain customers, it may not always be what you want. Landing pages are designed to encourage visitors to respond to a specific service or product, and can often miss visitors who may want something else from you (or your site). This means that landing pages may actually miss a large chunk of your potential market if you’re not careful.

They’re not always compelling. In order to engage customers, landing pages need to include a lot of important information without being too long, while still being compelling enough to get reactions and responses to the CTA. Writing content that is impactful, brief, and equally fascinating can be difficult, and not all landing pages succeed in their attempt to impress.

They’re distracting (if not designed well). If it’s true that a well designed landing page is great at converting, it’s equally true that a poorly designed landing page is a disaster for customer engagement. If the page is distracting — offering too much content with no context, mixed messages, or too much media — it can actually send visitors away.

They can fail at converting (if there is “leakage”). As mentioned earlier, landing pages are designed to keep visitors on the page, but a poorly designed landing page (which are more common than you think) will mistakenly send visitors to outside sites, like Facebook or Twitter, without realizing that the more often you send someone away from your site, the less likely they are to come back to it.

They might be really, really boring. Having a unified brand is great for marketing, but if you’re launching a new product that needs to stand out, having the restrictions of a landing page’s one-size-fits-all design may be limiting.

Who is a landing page good for?

Landing pages are transactional in nature — for example, visitors give their information (credit card, email, etc.) in exchange for a product, resource, or service — which makes them great for businesses that need immediate results that can be measured by transactions. If your goal is to get your customers to take an action (and/or complete a simple task), and you don’t want to do a lot of extra work when it comes to design and branding, then landing pages are the perfect choice.

The Case for Using Microsites

Microsites are less well known than landing pages, but depending on how they’re used, they can make a powerful impact on engagement. But what is a microsite, exactly?

screen-shot-2013-05-09-at-10-01-44-am

A microsite is like a mini-website made up of several pages or sections (3-5, typically). Unlike regular websites, however, a microsite is focused on one campaign or promotion. They’re designed to let the customer know about one thing, and one thing only.

Most microsites are built to hold more information than can be contained on a single landing page. They’re created for bigger, more complex marketing campaigns of a particular product or service. But they’re not for everyone. Certain industries seem to thrive with microsites more than others.

A great microsite will convert customers through different tactics than a typical landing page. While landing pages focus on the immediate action, microsites will focus on informing now and creating action later (think: “Call us for more information” instead of “click here for more information”). A good microsite will create curiosity that sticks with a customer, and it will use “leakage” into social sites to create buzz that brings customers back repeatedly.

Of course, this means microsites are a bit riskier when it comes to engagement, but could they possibly be more effective? Let’s take a look at the pros and cons of using microsites.

Pros

They’re better for relationships. Because landing pages are designed to create action, they don’t always give your customer a real look into who you are as a company. Microsites, on the other hand, offer in-depth information about you (and what you’re promoting). Since most microsites are made up of several pages, they give visitors a chance to spend a significant amount of time learning about the benefits of working with you. Their “soft-sell” nature creates a sense of awareness that can boost your brand and public relations.

They’re more flexible (than landing pages). Microsites offer much greater flexibility than landing pages in both design, content, and function. While landing pages try to squeeze as much content into a single page as possible, microsites let you take your time with your story; allowing you to show what you want, when you want, and where you want. You can also come up with some really clever ideas for site designs that wouldn’t work on normal landing pages.

They can include multiple engagement points. Because microsites encompass several pages, you can include several different CTAs, which means that visitors have multiple chances to engage with your company. This is especially beneficial if you think about the narrowness of landing pages (which, as mentioned, may miss certain customer demographics). If your microsite doesn’t entice someone on the first page, they may be enticed on a different page.

They’re perfect for certain industries. Due to their flexibility, microsites can be a great advantage depending on the industry you’re in. A great example of an industry that uses microsites to their advantage is the auto industry. Companies like Ford often build microsites for specific vehicles or contents and giveaways. If your industry often rolls out large campaigns or products, microsites are a great choice.

They work with leakage. While having “leakage” — a place where visitors can click away from your site (e.g. to Facebook) — on a landing page is bad for business, leakage on a microsite is no problem at all. In fact, microsites are the perfect choice if your desired method of conversion requires earned trust (brand awareness, relationships built through networking and blogs, etc.). If you’re okay with a “sales cycle” approach to engagement, then microsites may be for you.

Cons

They cost more (than landing pages). Because microsites are technically separate (albeit smaller) sites, they require separate hosting fees and URLs, which can cost more than just adding a landing page to an existing site. If you’re being creative with your microsite (or even if you’re not) you’ll still need to pay a designer to design the site for you, which can eat up time and money.

They don’t always measure well. When it comes to conversions, landing pages are easy to measure, but microsites can take time to see the same amount of engagement. Visitors will generally linger longer, which means they may be more likely to activate a CTA, but it also means they’re more likely to click away from the site all together. You’ll have to find alternate ways of measure engagement to make sure you’re getting the figures you want.

They require dedicated content. Creating a content and marketing strategy for a microsite can be more time consuming, as well. Because their focus is to tell a story more than share information, you’ll need to create more content to fill the pages and make sure that all of it is equally engaging. If only one page of your site is interesting, you could risk turning away visitors faster than a landing page.

They could dilute brand identity. If your goal is to use your microsite for creativity and you don’t mind people confusing your business for something else, then microsites are great. But if you’re concerned about that confusion, you might be better off with a landing page (or at the very least a less creative microsite).

They mean a little more work. When it comes to changing a landing page, a few clicks usually does the job. With microsites, however, you’ll need to login to an additional site to make changes, and if your company has more than one person monitoring sites, this can make things a little more challenging. Microsites also mean more work if you’re constantly A/B testing, too, as it takes more effort to rework an entire site than it does a single page.

Who is a microsite good for?

Microsites are relational in nature — for example, visitors spend time getting to know your brand and researching your campaign — which makes them great for businesses that want to create a personal touchpoint with their customers. If your goal is to create engagement through multiple channels and you don’t mind getting a little creative, microsites are the perfect option.

So, which should you choose?

When it comes to choosing between a landing page and a microsite, it all comes down to a few things: your industry and business goals, your preferred conversion style, your time commitment, and your flexibility with branding. Basically, the right option comes down to who you are and what you’re trying to accomplish.

If you’re a business that wants to build brand reputation, you have time and money and love being creative, and you really don’t need customers to fulfill an immediate CTA when they visit your site, then microsites are probably the best choice.

If you’re a business that wants to measure conversions on a daily basis, you want customers to know you but you’re more interested in getting your product or service to them as quickly as possible, and you want your brand to be unified so that people know you by sight, then landing pages are the way to go.

The biggest dilemma will be for businesses who see themselves as a mixture of both. You might be a business that wants to be able to measure your engagement rates, but you might also want people to trust your brand (and you don’t mind when they “click away” every so often because you know they’ll be back). If that’s you, then the choice becomes a little less clear. You’ll have to rely on conversion styles to make your choice.

Essentially, both landing pages and microsites are great for customer engagement, but they go about it in different ways. If you want fast, easy conversions, use a landing page; if you don’t mind a slow sales cycle approach, go with a microsite.

But ultimately, the choice is yours and yours alone.

How Tweaking Your Microcopy Can Instantly Double Your Conversion Rates

There’s no denying that words have power, but how often are you thinking about words when trying to improve your website’s conversion rates? Chances are, not as often as you should.

Words – in this case, copy – can have a significant impact on what happens (or doesn’t happen) on your site. (If you’re still not convinced, this video by Andrea Gardner might change your mind). But what words are the most important when it comes to generating leads?

As it turns out, it’s not about big, bold headlines or catchy CTAs. It’s all about microcopy.

What is microcopy?

Microcopy is the copy that shows up in less obvious (but heavily trafficked) areas around a site – like the instructional text on forms or applications (“Please write your full name”), the words on a CTA button (“Subscribe Now!”), or the label on a form field (“Credit Card Number”). It’s often unnoticed, but it’s extremely essential to user experience.

Mark Boulton, author of the book Designing for the Web, gives the perfect example of using microcopy to alleviate customer concerns. After running into issues with people trying to purchase his book, he added a small piece of microcopy to his purchasing instructions, which solved the problem. After the original copy (“Transactions are handled through PayPal”) he added, “but you don’t need a PayPal account to buy this book“. As it turns out, people weren’t buying through his site because they thought they needed to create a PayPal account. By changing his microcopy, he instantly changed his sales numbers.

markboulton-microcopy

Tumblr is another great example of a company that used microcopy to improve their sign-up experience. When users are about to submit their information, they’re asked to choose a sub-domain name for their site. The microcopy next to the form field assures them that they can “change it at any time.” Who wouldn’t breath a sigh of relief knowing that whatever they enter now won’t be held against them later?

tumbler-microcopy

But it doesn’t stop there. Microcopy not only has the ability to improve user experience, it also has the power to make or break conversions.

How does it affect conversions?

When it comes to getting users to subscribe, little words and phrases can significantly impact whether or not people click that button.

Take Veeam, for example. They noticed on their quote request form that visitors were continually asking for a price (which couldn’t be displayed due to a privacy policy) before submitting their information. Veeam decided to change the microcopy on their submission button from “request a quote” to “request pricing” and saw a staggering 161.66% increase in clicks. 

Likewise, ContentVerve saw an 83.75% increase in newsletter subscriptions simply by adding three bullet-points of microcopy under their form headline that briefly explained the benefits that visitors would receive after form submission.

contentverve-image

So what does this all mean? Basically, good microcopy significantly improves conversions.

It should be noted, however, that bad microcopy can also negatively affect conversions. For example, student website WriteWork noticed that after changing their CTA button from the original text (“Read Full Essay Now”) to “Get Instant Access Now”, conversions actually fell by 39%. It turns out that context is just as important as the words themselves.

But the fact remains, having good microcopy on your site can help alleviate user concerns and generate more leads. But what exactly makes “good” microcopy?

How to tell the good from the bad

At its core, good microcopy is something personal – it lets users know that there are real humans behind the screen. Good microcopy uses natural language to communicate important messages.

Take this prompt text from Social Inbox as an example:

social-inbox-microcopy

Instead of simply saying that the “tweet text goes here,” it gives a much warmer set of instructions by asking, “What do you want to say to your beloved followers?”

Good microcopy also gives a sense of personality and helps users relate to your brand – it makes them feel special, like your business really knows them. Bad microcopy, on the other hand, makes people feel like they’re just another number.

Meanwhile, good microcopy helps alleviate customer concerns. Like the examples listed before, good microcopy answers questions users don’t even know they have, like whether or not they can change something later. Bad microcopy, on the other hand, means customers will have to find another way to get questions answered, which usually means you’ll be wasting time frequently answering the same questions. (You might not have to create a FAQs page, though. Simply ask yourself: “Is there somewhere I can use microcopy to answer these questions instead?”)

Bad microcopy will also demand an action (“Subscribe!”) without offering anything in return (which, let’s face it, nobody likes). Good microcopy, however, lets customers know about the benefits they can receive. If you really want people to fill out your forms, tell them what’s in it for them. While most websites use landing pages to go into more detail about the perks that come along with subscribing, you can reinforce the idea by using microcopy in important places like headlines and buttons to assure customers they’re getting the most bang for their buck.

Where to tweak your microcopy

Even though microcopy is subtle by nature, it tends to be most effective in high-traffic areas. While there are plenty of places that microcopy can be (and often is) utilized, here are a few of the most essential places on your website you should check for microcopy adjustments.

Form headlines

Headlines can include the headline on the form itself (the title that lets people know what they’re signing-up for) or the headlines on the landing page associated with the form.

Form headlines are all about conveying value and relevance to the customer – they should answer the “what’s in it for me” question. Adjusting specific aspects of the headline (like saying “Get FREE Marketing Tips!” instead of “Subscribe”) can help encourage subscribers.

CTA buttons

CTA buttons – like the “Subscribe” buttons at the end of a form – are the perfect spots to use microcopy, especially if you’re looking to double your conversion rates. A great example of this is the $300 million dollar button story, which details how one company tweaked the copy of their “Register” button and increased conversions by 45% (the company made an extra $300 million the following year).

Form fields (Instructions)

Form fields are an important part of gathering information that you need from customers, but they’re also a great place to take advantage of the power of microcopy. You can easily quell customer concerns by adding instructions that let users know what they should do.

One site owner noticed that customers were entering their addresses wrong (or so he thought) because he kept getting credit card fail messages. It turns out that customers were entering their shipping addresses, but not their billing addresses, which caused the transaction to be declined. As a quick fix, he added some microcopy: “Be sure to enter the billing address associated with your Credit Card.” Problem solved.

Final thoughts

While general copy is always important to a site’s user experience, nothing quite compares to microcopy when it comes to improving conversion rates. If you’re spending hours on your site and you’re still not seeing the subscription number you’d like, try tweaking various aspects of your microcopy, tracking your changes as you go. Test out different areas like headlines, buttons, and form fields to see if you can add text that would benefit customers and generate more leads.

Progressive Enhancement: Start Using CSS Without Breaking Older Browsers

Once upon a time (okay, the late 90’s and early 00’s) most websites were developed using Graceful Degradation (GD) – a web design strategy that attempted to standardize the way users viewed websites from different browsers (which was a reaction to the great Browser Wars, of course).

As browser development progressed, GD allowed users with updated browsers to experience the best and brightest design elements available, while users with older browsers had a slightly “degraded” (though still functional) experience. The aim was to encourage users to continually update their browsers as newer versions came out, or to switch to more popular browsers that supported more design elements. This strategy worked well in the early days of the web, as most browsers were still relatively new and needed fewer updates to be considered “modern.”

Flash-forward a few decades, however, and things are a bit different. Most browsers go through several updates annually, and some have ceased to be updated at all (Netscape, anyone?). What this means for web developers and designers is that sites created using GD are no longer functional with today’s modern browsers.

So, why not just force everyone to use modern browsers? Not everyone who uses the Internet is able to (or even wants to) update, which means that no matter how much developers want users to be on the latest version of their site, people will continue viewing web pages without proper support. So how should developers approach web design knowing that not everyone who visits their site will be using a modern browser? They should build their sites using Progressive Enhancement.

What is Progressive Enhancement?

Progressive Enhancement (PE) is an alternate design strategy that offsets any issues caused by older browsers. Unlike GD, which is optimized for modern versions and degrades with older versions, PE starts with the old – sites are built with basic HTML elements supported by older browsers – and adds the latest bells and whistles on top of it for modern browsers. PE builds sites basic enough that any browser can handle them, but complex enough to meet contemporary design demands.

PE works by using layers of code, with the first layer being HTML. CSS is then added on top of the HTML to alter the visual and design elements as needed. Then JavaScript is added to the final layer for modern usability (the “flashy” features of Web 2.0). The layers can be adjusted to create any look and feel, while the simplistic foundation makes it viewable from any browser without major complications.

PE-Friendly CSS Tools

The best way for developers to take full advantage of PE is to use CSS tools like flexbox (flexible box layouts), filters, and blend modes in their web designs to create sites that can be viewed on any browser.

Flexbox

One of the best ways to use CSS with PE is to create layouts with flexible box, or flexbox, instead of the standard grid layout. The boxes expand items to fill any free space, making sites adaptable to a variety of display and screen sizes. This is not only extremely helpful for older browsers, but for modern portable and mobile devices.

wp-blendmodes-1024x546

Flexbox adds to the four basic CSS layout modes: block layout, inline layout, table layout, and positioned layout. It’s intended for laying out more complicated pages, as it allows for the position and size of certain elements to remain consistent.

With flexbox you can also create fluid layouts, specify how excess space is used, control the direction of certain elements (left-to-right, top-to-bottom, etc.) and reorder any element as needed.

It does have a few drawbacks, however. While it’s technically supported across all browsers, it does require slightly different syntax for older browsers. For example, Google Chrome still requires a “webkit” prefix, and Firefox and Safari will still need to use older syntaxes to run properly. But despite these caveats, flexbox is a great way to give websites a modern feel (think mobile-friendly) without breaking older browsers in the process.

Filters

Another great way to use CSS without causing browser issues is to use filters to add graphic effects like blurring, sharpening, or color shifting to different elements. Filters can also be used to adjust the rendering of an image, background, or border.

cssfilters

Why is this important? Filters can be used through CSS to add graphical changes to a site without affecting the HTML. Any browser that has a basic Scalable Vector Graphic (SVG) specification will show filters (which include almost all browsers, regardless of version). Developers at Mozilla were the first to discover how useful filters and CSS styling could be. They combined CSS and SVG working groups to make filters available for HTML as well, making it a universal tool for adding graphic effects.

Filters work best as a post-processing step after page content has been laid out. Basically, when browsers load a page, they first apply styles, then layouts, and then render the page. Filters are the final step before the page is copied to the screen. They take a snapshot of the rendered page as a bitmap image, and create pixelated graphics over the top, which gives the page a “filtered” effect (like looking through a camera with a filtered lens). Any number of filters can be used to create effects without impacting the original HTML.

Of course, there are some limitations. Filters can potentially impact loading speeds (though very minimally), and while they work across all browsers, Internet Explorer has the most trouble when it comes to applying them. IE can only apply filters to images and text, not chunks of HTML, which could cause some rendering issues with older versions. But for most browsers, filters are a great choice for adding effects without compromising the site’s structural integrity.

Blend Modes

Though technically considered “experimental,” blend modes are another great way to add dynamic effects to a website without causing too much trouble for browsers (though it should be noted right off the bat that they do work better with newer browsers). How do blend modes work?

flexbox

Blend modes – like multiply, screen, overlay, and soft light – take layered pixels and combine them in different ways to produce a new effect (think of one picture on top of another picture, then blended together). Normally blend modes are created using Adobe Photoshop and implemented on static sites, but they can also be utilized on dynamic sites with CSS.

The most common way to do implement blend modes is with CSS Compositing and Blending, including background-blend-mode (which allows blending between background layers), mix-blend-mode (which blends elements with their backdrop), and isolation (which stops elements from blending with their backdrop). Using these modes, images can be manipulated without taxing the site’s HTML.

Getting blend modes to render smoothly across browsers is still a bit of a challenge, however, as they tend to be better supported by newer browsers. But they can still function in older browsers by using vendor prefixes or by activating experimental features. Similar to filters, IE has the least amount of support when it comes to blending modes (As of 2014, IE has them listed as “under consideration” for further support) but for the most part they can be used without too much drama across multiple browsers.

Final Thoughts

It can be a hassle to create websites that are viewable on old and new browsers alike. The best way to overcome browser issues when designing a site is to use Progressive Enhancement to layer HTML, CSS, and JavaScript to overcome any issues. By taking advantage of CSS tools like flexbox, filters, and blend modes, you can make the most of CSS without crashing older browsers. And while some tools may work better than others when it comes to browser support, they all have some advantage when creating dynamic sites that need to look good on any browser.

5 Creative Ways to Use Forms to Improve Your UX

Thousands of people use web forms every day. In fact, forms play such a key role in almost every online transaction – from newsletter sign-ups to surveys, checkout processes, event registration, quote requests, and even logins to social media sites – that you’d be hard-pressed to find a website that doesn’t include a form. Even typing a question into Google is considered filling out a form, and no matter where you go online, you’re bound to run across some little text field requiring your personal information. Don’t expect that to change anytime soon.

Top research company Gartner Tech predicts that the popularity of online forms will continue to increase as the years go on, stating that by 2020 online users “will manage 85% of [transactions] without ever talking to a human.”

With the popularity of online forms comes the increasing need to stand out in the crowd, however. The more that forms are used, the more users will expect something new and different to hold their attention. The best way to get your form to stand out from the thousands of other similar forms is to create a unique user experience (UX).

A good UX is one that makes forms fun, easy, and fast to use, while also including memorable features. With that in mind, here are a few creative ways you can design your forms with an interface that will never be forgotten.

Focus on visual elements

Most forms consist of a few basic elements: title, form fields, text input fields, and submit buttons. While these elements are standard (and necessary) for collecting information, they don’t necessarily make your form stand out from the crowd. The best way to get your form noticed is to make it as visually appealing as possible.

Creating animated transitions (also known as text input effects) is a great way to pump up the visual elements of your forms and make them both fun and functional. The best way to do this is using CSS transitions and pseudo-classes. The folks over at Codrops give a few inspirational ideas for adding animated transitions to your forms.

Bart-Nederveen-Sign-Up-Form

If you don’t want to go the animated route, you can always use additional visual cues to improve UX without all the fancy CSS. Using simple elements like lines, arrows, and photos (especially photos that use eyelines to lead the user’s gaze to where you want them to look) will help draw attention to your form. Other design focus points like contrast, complementary colors, and the use of blank space will help your form get noticed in all the right ways.

Think like a mobile phone

When it comes to being visually appealing (and super UX-friendly), mobile forms can’t be beat; they’re easier to use, cleaner in design, and faster than their online counterparts. In many ways the mobile form is preferable to fill out, but that doesn’t mean you should ignore your web form. In fact, you could use the same design features that make mobile forms so great to boost your web forms.

For example, try designing your web form to align vertically, like it would appear on a mobile screen (or eliminate the use of above-field labels all together and put your labels in the text fields). You don’t even need to design two forms: simply use the same number of form fields and headers you would put in your mobile form in your web form, too. The benefit of this is not only a seamless integration when it comes to branding, but it also improves your UX by making the transition from web to mobile a lot smoother.

Card_scan

Use single-fields for a unique UX

As Shakespeare says, “Brevity is the soul of wit.” This sentiment is also true when it comes to building forms: the simpler the better. While most contact forms are already fairly simple, you can’t get much simpler than the single-field form interface (also called the minimal form interface).

The concept is pretty straightforward: a form interface that only shows one text input field at a time, and reveals the next input field with a subtle transition. The idea is to eliminate clutter and distraction by using only elements that are helpful for the information needing to be filled in.

Single-Field-Form-Interface

This form style is probably most useful for short forms, questionnaires, or contact forms, as they require much less work than longer, more complicated forms (like registration forms). Of course, simple-field forms have their disadvantages (you can’t go back and change your answers, for example), but the sheer simplicity makes it a great option as a creative alternative to the traditional form.

Try focusing attention with fullscreen

Similar to the single-field concept, the fullscreen form is another great, minimalistic option if you’re looking to experiment with your forms. Fullscreen forms aim to provide a completely distraction-free experience for users by making your form the focus of the whole page.

Fullscreen forms usually come with a few basic elements, including standard form fields, navigation dots (or numbers) that show form progress and steps, and a continue (or “next”) button that moves the form forward. The fullscreen really only displays one field (or grouping of similar fields) at a time, creating a focused experience where users can carefully review the information they’re inputting.

fullscreen-form

Fullscreen forms are especially beneficial when you require slightly more information from the user but don’t want to over-complicate your fields. The focused UX provides a visually appealing option that allows for more information while giving you all the simplicity of a single-field or traditional form.

Go “Mad Libs” with form function

Perhaps one of the more innovative ideas when it comes to forms, the natural language user interface (NLUI) – a “Mad Libs” style form generated from pre-selected sentences and dropdown menus – is a creative deviation from tradition.

These forms take a very human approach to submitting information. Instead of the standard label-plus-input-field, they use common phrases or fill-in-the-blank style language prompts to encourage specific user input. For example, if you were attempting to find out where you users liked to vacation, you would have them complete the sentence “I feel like travelling to…” instead of answering a question like “Where do you go on vacation?”

Natural-Language-Form

The personalized sentence feels more relatable – like talking to a friend or trusted colleague – and less like you’re answering questions at a mandatory deposition. The benefit to UX with natural language forms is that they humanize your brand while also letting users feel excited about providing their personal information.

In terms of numbers, NLUI forms have also been shown to increase conversions. In 2014, GoodUI.org tested natural language forms on one of their sites and found that signups had increased by up to 29% compared to their standard forms. While the “Mad Libs” style NLUI form is still relatively new, it’s nevertheless an extremely creative and potentially lucrative option when it comes to changing up your form type.

Final Thoughts

Good UX relies on quickness and ease of use while also providing creative elements that make the experience fun. By incorporating features that both simplify and beautify your form, you can hold user attention and get people to actually want to fill them in. Using CSS for animation, developing humanized questions with your text fields, or eliminating text fields all together and switching to a mobile-friendly design will help move your forms from ordinary to extraordinary.

Not Sure Which Static Site Generator to Pick?

Static Site Generators (SSGs) are a great option for many web developers and bloggers looking to build fast websites that can handle a lot of content without relying on bulky servers or databases. But there are dozens of different generators on the market, with each one declaring itself to be the “simplest and fastest” SSG on the market. So which one should you choose?

If you’re a newbie blogger who wants to get into coding, then you’ll need something a little more user friendly. If you’re a programming-savvy developer, on the other hand, you could tackle something a little more intense. Here we’ll compare a few of the most popular SSGs to help you decide which direction is the best for your site.

Jekyll

Website: jekyllrb.com

Language: Ruby

Templates: Liquid

License: MIT

Similar: Octopress. Serif, Enfield, JAQ

jekyll-1024x516

Jekyll markets itself as “a simple, blog-aware, static site generator” and it’s one of the most popular choices when it comes to SSGs, especially for first-time users. Jekyll allows you to blog straight from your desktop, giving you more control over every aspect of your blog without having to deal with heavy databases and bloated frameworks. In terms of speed, the performance is nearly unbeatable. But does that mean Jekyll is the right option for you? Let’s take a look at some of its best (and worst) features.

Best Features

User friendly. Jekyll is built on Liquid, a templating engine that originated with Shopify, which means that it includes ready-made templates that are fairly straightforward to use. If you’re a developer that doesn’t want to spend hours creating your templates from scratch, then Jekyll is the easiest choice by far.

Built for blogging. Jekyll is almost ready-made for blogging, as its pages are automatically organized by post. It also lets you import existing blogs from Joomla, Drupal, WordPress, or almost any other dynamic blog engine with relative ease, so if you’re transitioning from a current blog to Jekyll, you won’t have to go through the tedious setup process.

A large support community. Because Jekyll is so popular, it has a great community support system if you ever need to troubleshoot an issue. This is especially good news if you’re hosting your site through GitHub, the equally popular public webhosting service most commonly linked to Jekyll. If you ever have questions you can’t answer, the solutions are only a few clicks away.

Worst Features

Less customization. While the Liquid templates are great if you just need something basic to get started, they don’t offer much in the way of customization. Because its engine is primarily designed to support Shopify, it doesn’t allow for any custom code whatsoever, which isn’t helpful for developers wanting to give their sites a unique look and feel. If you want to do something more customized, you’ll need to develop your own Liquid helpers, which can be time consuming.

Poor support for Windows users. If you’re running your website from Windows, you might be at a disadvantage. Jekyll doesn’t officially support the Windows platform, so setup requires a lot more time, effort, and maneuvering to work properly if you’re not already on OSX.

Who should use Jekyll?

If you’re a first-time SSG user or blogger, Jekyll is the perfect choice. Because Jekyll doesn’t require advanced knowledge of web development, it’s extremely user friendly and still includes powerful features for those with more experience. If you like building your own templates in Liquid, you’ll also do great with Jekyll.

But if you’re not familiar with Ruby (or you don’t like it), or you feel limited by the templates supported by Liquid and don’t want to spend time building your own from scratch, you might want to go with a different SSG.

Pelican

Website: blog.getpelican.com/

Language: Python

Templates: Jinja2

License: AGPL

Similar: Urubu, Lektor, Hyde, Nikola, Acrylamid

pelican-1024x516

Pelican is another popular SSG built using Python. It incorporates templates from Jinja, a Python-based template engine, which gives it added flexibility when customizing themes and templates. Pelican also supports WordPress and Tumblr and includes its own RSS feed, making it a good choice for bloggers looking to make the move from dynamic to static. Let’s review a few features that make Pelican stand out from the crowd.

Best Features

Flexible options. Pelican features multi-language content posting and can use multiple formats, such as reStructuredText, Markdown, or ASCiiDoc. It also allows for code (syntax) highlighting and has a variety of plugin options, making it a good choice for developers who want to use styles that are familiar and friendly.

Great for full websites. Because it supports Jinja templates, Pelican can cater to a variety of unique templates that go far beyond basic blogging. The themes and templates coming from Jinja are also extremely easy to use, which means less time for developers when it comes to customizing and coding.

Import friendly. If you’re looking to move your dynamic site to a static site but don’t want to spend more time than is absolutely needed, Pelican is the perfect choice. It supports import from a variety of different blogging sites, making it one of the easiest to use in terms of moving existing sites over to a static platform.

Worst Features

Requires knowledge of Python. When it comes to coding, Python is a higher-level programming language and takes a fair amount of experience to use. For those who are familiar with Python, using Pelican shouldn’t be a problem, but if you’re more familiar with JavaScript or Ruby, then you might run into more problems than using Jekyll or another Java or Ruby based SSG.

Trouble with org-mode integration. If you’re one of the few developers using org-mode for Emacs to write your blog posts, you’ll have trouble using Pelican. While there’s a plugin to read org files (org_reader), it isn’t as well supported as other SSGs and often crashes. If org-mode is something essential for you, then Pelican isn’t the right choice.

Who should use Pelican?

Developers familiar with Python who want flexibility when it comes to coding will naturally gravitate towards Pelican. Those looking to build a website that goes beyond blogging, or who want to import existing WordPress blogs to a static site, will also love Pelican.

But if you’re a developer who is more comfortable using Ruby or JavaScript, then Pelican isn’t for you. And if you’re an avid org-mode user, you can probably find another SSG more suited to your needs.

Metalsmith

Website: metalsmith.io/

Language: JavaScript

Templates: HBS/Any JS

License: MIT

Similar: Brunch, Docpad, Cabin, Wainwright

metalsmith-1024x516

Metalsmith is perhaps slightly less well known than Jekyll or Pelican, but it is by far the most flexible. Branding itself a “pluggable” site generator, it boasts an impressive library of plugins that gives your site any feature it needs, making it useful as more than just an SSG. Metalsmith’s website showcases it used for everything from generating eBooks to creating technical documents in addition to building blogs. Let’s take a look at a few of Metalsmith’s unique qualities.

Best Features

Built for developers. Metalsmith utilizes a very simple core and the rest is managed through plugins, making it very flexible and easy to use (that is, if you know what you’re doing). You simply give the site a source directory and then tell it which plugins to use. If you’re a developer that has used Gulp and you’re very familiar with Node.js (or any .js), you’ll love Metalsmith.

Not just for blogging. While it will handle all the basics of a blog, it can also be used for a variety of other projects, like converting markdowns to ePub files or creating project scaffolds. You could also use it to generate PDFs for your blog posts, making it a super flexible option for anyone wanting to add interesting projects alongside their static site.

Supports chained API. Maybe the most programmer-friendly feature, Metalsmith uses consistent and simple chained API, providing significantly reduced processing time. It also allows for things like unlimited linking, reduced client/server coding, and ID security. If these are features you need in your site, then Metalsmith should be your go-to SSG.

Worst Features

Less user friendly. Even though Metalsmith is designed for easy use, it takes a fair amount of programming knowledge to get it working to its full potential. This is definitely an SSG for developers who know what they’re doing, so if you’re a newbie, keep looking.

Small community. Unlike larger SSGs like Jekyll, Metalsmith has much less support when it comes to troubleshooting. A lack of resources and experienced users means less help when you run into tricky problems, though they do have a Slack group to help developers ask and answer questions.

Who should use Metalsmith?

If you’re an intermediate or advanced developer looking for more flexibility and control over your content, you’ll love Metalsmith. It’s also great for those wanting to do more than just blog, and if you’ve got a good understanding of JavaScript and don’t mind spending a little extra time developing your site, this is a great option.

But if you’re a newbie developer or someone unfamiliar with JavaScript, or you just want a good support system if you run into trouble, this SSG is not for you.

7 Quick Wins to Improve Your Website’s Loading Speed

You could have the most visually appealing website with absolutely mind-blowing content, but if your site takes too long to load, your users won’t stick around long enough to experience it. Slow websites drive away potential business and prevent your site from being found on search engines like Google and Bing.

Slow speeds can also affect customer satisfaction. As one study conducted by the Aberdeen Group shows, even a one-second delay in page loading speed can decrease customer satisfaction by 16 percent and reduce conversion rates by 7 percent. Basically, speed sells, and slower speeds mean less return on your investment.

With that in mind, here are 7 quick wins – the easiest, most inexpensive, and quickest implementations – to improve your website’s loading speed.

1. Upgrade your hosting plan

The most obvious solution for speeding up your site is to have the most bandwidth available to you. Choosing a hosting plan with sufficient bandwidth is one of the most important decisions you will make when building your site, and choosing the wrong plan can have major consequences.

Many new site owners choose to host through a shared plan because shared plans are cheaper, but what they save you financially in the beginning will end up costing you down the road in slow speeds during high traffic periods. By investing in proper hosting from the beginning of your site’s development (or by upgrading your current shared hosting plan), you’ll eliminate the risk that your site will crash or stall when people need it the most.

For WordPress users, WPBeginner has a list of the top web hosting services that support high speeds.

2. Choose a responsive theme

When it comes to loading time, a basic responsive site will almost always outweigh a complicated, flash-based site. According to Yahoo, 80% of your site’s loading time will be spent downloading components like images, stylesheets, and scripts. These elements take a lot of time to load, so the more components there are on a page, the slower it will be. Basically, the simpler the site, the faster it will be.

The simplicity of your site’s theme also has a huge impact on loading speeds. If you’re using WordPress, it can be tempting to choose the fanciest flash theme to draw attention to your business, but bulky frameworks and heavy coding can slow down loading speeds for your users. The quickest way to overcome this obstacle is by choosing a responsive or mobile-friendly theme – a theme that responds to each individual user’s screen size.

Responsive designs cut down on unnecessary components and coding allowing for faster loading times. If you’re using WordPress, here’s a compiled list of 100+ responsive website themes that are both beautiful and fast.

3. Streamline your home page

Your homepage is the first impression you’ll make on any visitor. While it can be tempting to go “all out” and inundate them with as many widgets and graphics as possible, having an overwrought homepage can backfire on your site’s performance. By focusing more on content and limiting widgets, graphics, and extra features that may weigh your site down, you’ll not only reduce load times but improve your SEO and give visitors a chance to trust your expertise without the use of over-the-top gimmicks. A simple homepage is a win-win for you and your customers.

A few ways to improve your home page (or any high-traffic landing page) include:

  • Showing excerpts instead of full posts for blogs or news sections
  • Removing unnecessary widgets or sharing features and putting them on shareable content or on relevant landing pages
  • Minimizing flash features like rotating images or videos

4. Enable caching

Enabling caching lets you temporarily store data on a user’s computer so they don’t have to wait for each page to load as they click around the site. Most browsers will save anything from basic images to stylesheets, JavaScript, or even entire landing pages.

Be aware that most caches have a shelf life, however. Static elements like images can be cached up to a week, but third-party elements like ads or widgets can be cached for only a day or so. Optimizing your site with more static elements will help improve caching, which will in turn improve speed.

WordPress sites can use integrated plugins to handle caching for you, such as WP Total Cache or WP Super Cache. There are a few ways you can add caching without using a plugin, but if you’re looking to improve your WordPress site quickly, plugins are the easiest way to go.

5. Use Content Delivery Networks (CDNs)

Similar to caching, using a Content Delivery Network, or CDN, can reduce download times and improve your sites performance. CDNs take your static files (images, JavaScript, CSS, etc.) and host them on servers in geographic locations near your users, giving their computers quicker access. This system provides faster download speeds and can greatly improve your site’s traffic capabilities, as most CDNs also protect against large surges.

For WordPress users, using a content delivery network like MaxCDN will help reduce costs while providing easy-to-use integration with your current site.

6. Optimize your images

They say pictures are worth a thousand words, but pictures that are too big for your site are also worth thousands of lost conversions from slow load times. It’s common practice for many web developers to upload large images and then scale them down using CSS, but the problem with this method is that browsers still load the images at full size even if they appear smaller on the site.

The solution is to scale your images before loading them so you minimize the impact. As a note for designers and developers, make sure you’re using the correct file types, as they can make a big difference on loading speed. Using JPEG and PNG files instead of BMP or TIFF will help increase speeds and reduce download times.

If you have a WordPress site and you need a cheap and easy way to upload optimized photos without bothering your graphic designer, try using integrated plugins like WP-SmushIt or Lazy Load to simplify the process.

7. Delete unused plugins

One of the biggest changes you can make to improve your site’s performance is disabling unused plugins or widgets. It’s important to delete plugins you don’t plan to use – simply deactivating a plugin won’t stop it from taking up space.

It should also be noted that the number of plugins you have active doesn’t always affect loading speeds, and that well-coded and up-to-date plugins will not usually affect your site as much as poorly supported plugins. It’s important to keep track of which plugins you use on a consistent basis and eliminate the ones that don’t add value to your site, while keeping valuable plugins updated to the latest versions.

For WordPress users it’s important to find plugins that are WordPress optimized and have great support from their respective developers.

Final Thoughts

Improving your site’s loading speed can be overwhelming and often involves many different components of your site, but the main thing to remember is that simplicity is key. Focusing on strong content, simple design, optimized elements, and plugins that benefit your pages will all work toward improving speeds. If you’re unsure about your site speed, you can always start by doing a speed test. Below are a few tools to help you determine your site’s current speed.

How To Make Users Want to Fill In Your Forms

Online forms are a digital marketing gateway. They’re the filter between the people who are merely interested in your content, product, or service, and the people who will become paying customers. But when it comes to your forms, do your potential customers actually want to fill them in?

Forms can either ease the transition between “merely interested” to “paying customer,” or they can frighten away potential business. Here are a few ways you can optimize your online forms so that users will actually want to fill them in.

Entice users with great content

You can spend hours designing beautiful forms for your website, but if potential customers don’t believe that the form will lead to something significant, they won’t bother filling them in.

After all, there’s no point in using forms to generate leads if those leads don’t turn into paid business.

Unless your content adds value, your form is essentially worthless.

The best way to ensure that users will fill in your forms is to give them something worthwhile on the other side. By optimizing your content, you can entice potential customers to click “submit.”

Offer valuable content

Whether you’re trying to acquire sales leads by gathering basic contact information, capture a customer’s feedback, or simply attempting to get more subscribers to your newsletter, you’ll need to grab their attention with your content first.

One of the best ways to garner form submissions is by having information on an optimized landing page alongside your form that includes details about what’s in it for the customer.

monetate-th

Including things like attention-grabbing headlines, bullet points that highlight benefits, content previews, and calls-to-action will create curiosity and make potential customers want to know more. You can also include text in your forms that mimics the language in the landing page, helping to create a natural flow between reading and submitting.

Another great way to gather submissions is to include a short call-to-action at the end of your content preview with a promise of more (and equally beneficial) content. This technique works especially well if your content or service is intriguing and fills a knowledge gap or need from the customer’s perspective.

It should be noted, however, that this only works if your content is meaningful to the customer. If what you have to offer isn’t worth the time it takes to submit the form, having forms may actually turn away further business. By ensuring that your content is genuinely beneficial, you can eliminate any hesitations and capture customer data.

Utilize your microcopy

Another important and often overlooked feature of any successful form is the language that’s used to guide people while they’re filling it in. Microcopy, or the small bits of text that instruct users or address concerns, plays a crucial role not only in getting users to fill in the form, but helping prevent errors that slow down the process.

Joshua Porter, co-founder of the product design Rocket Insights, blogged about his experience using microcopy to minimize errors on his forms (you can check out the whole article here). After receiving multiple error notifications on one of his forms, he realized that his microcopy wasn’t giving clear enough instructions.

“I remember the first time I realized how much even the smallest copy can matter in an interface,” Porter says. “It turns out that the transactions were failing because the address people were entering [on the forms] didn’t match the one on their credit card.”

Form-Microcopy-1

Porter quickly changed the microcopy on his form to notify users to enter the address information associated with their credit card (instead of a general address) and the errors stopped. In light of this lesson, he encourages designers to add microcopy to all areas of their forms, including notifying customers that they can unsubscribe from a newsletter at any time, or that their email won’t be spammed when they sign up.

It can also help to add more natural language styles throughout your forms and in your call-to-action buttons that promote the benefits of your content. Using copy such as, “Sign me up for this free service” or “No, I don’t like free stuff” can humanize the process and guide users through the form by minimizing confusion. The less room there is for misinterpretation of complex jargon, the smoother the process will be.

Don’t miss: 5 Unique Forms that Make Users Want to Fill Them In

Make your forms easy to use

The best way to get users to want to fill in your forms is to make them as quick and easy to use as possible.  Here are a few ways to make sure your form experience is painless:

Use a mobile-friendly design. Whether you hand-code your forms or use a design service like FormKeep, having your forms accessible on mobile phones and tablets will broaden the range of people able to use them at any given time. The more available your forms are to users, the more likely they will be filled in, especially if they are busy or travelling.

Enable autofill features.  Enabling features like autofill can help shorten the time it takes to fill in your forms. Google Chrome offers its own autofill feature, and by optimizing your forms to use browsers like Chrome (or by adding microcopy that indicates that this feature is available) you can help users move through your form effortlessly.

Use a clean, condensed, and easy-to-read design. Not only does a clean design save layout space, it saves the user time and effort jumping or scrolling around the page. Having a simple, clean form also prevents form fields from being missed, and gives the user less work for the same results.

Make sure the user has a quick escape option. No one likes being forced to fill in a form, so if you’re using pop-up forms, make sure you include a big ‘X’ in the corner or a noticeable “No Thanks” button at the bottom.

Make the form as short as possible. Only capture the information you absolutely need to use. You can always follow up in an email notification asking for additional concerns or questions.

Change your form types to help lazy users. Try using radio buttons instead of form fields to create a “one-click” form submission experience for passive users. The less work the person filling in the form has to do, the more likely they are to do it.  

landing-page-forms-radio-buttons

A/B test for the best results

Of course, the best way to ensure that your forms are optimized for user experience is to test them regularly. Like Joshua Porter realized during his microcopy experiment, sometimes updating and testing the smallest parts of your form can have huge impacts on conversions.

A/B testing, sometimes called split testing, will help you compare and contrast which versions of your forms and landing pages are producing more conversions.

Testing things like form placement (above the fold or after the fold?), form labels (do your form fields go next to instructions or below them?), personalized microcopy and call-to-action buttons (should you say “Sign Up” or “Join”?), and even testing your design and color schemes can help clarify areas of your form that slow users down or prevent people from filling them in.

kissmetricsimage

While there are no set rules when it comes to making your forms more appealing, by having great content, clean design, personalized microcopy, and frequent testing, you can ensure the best user experience possible and turn interested site visitors into actual customers.

Why Agency-Client Communication is a Bigger Problem Than You Think

Agency-client relationships are all about partnership. The relationship between an agency and client needs to be strong and healthy to survive the constant onslaught of project deadlines, meetings, and creative differences that arise throughout the working relationship. The stronger the relationship, the better the results.

According to a 2015 study by the Association of National Advertisers (ANA), seventy-four percent of clients who work with creative agencies believe agencies play an important role in driving their own success, and rely on long-term agency relationships to further their business goals.

For many agencies, these long-term client relationships are equally as important to success. Agencies often spend thousands of dollars each year developing and maintaining client relationships. Yet with all the effort spent on hiring experts, developing marketing strategies, hiring the right teams, and providing excellence service, developing a plan for good agency-client communication is often overlooked.

A good communication plan is essential to maintaining any successful business relationship. Cycles of poor communication can lead to dissatisfaction, failed projects, financial losses, and worse yet, loss of reputation in the industry. But because many agency-client interactions are more collaborative than other business – especially in the creative fields – effective communication is even more important, since communication often goes through multiple channels to multiple sources before projects are completed.

Many agencies run into issues of over or under-communicating with their clients – either communicating too little, leaving clients confused or worried about project deadlines, or communicating too much (or about the wrong things), overwhelming clients with too many details.

Reversely, clients often have a difficult time expressing their needs to agencies through the proper channels, leaving many agencies struggling to meet the demands placed on them.

While these breakdowns in communication can come across as merely annoying or “just part of the job,” they can be detrimental to the bottom line if not properly addressed.

The most common types of communication breakdowns


One of the biggest communication failures between agencies and clients is a lack of communication. This problem can also include a lack of useful information being processed between parties. If the agency forgets to respond to emails, leaves out critical information, or is too vague about project demands, for example, it can cause clients to feel they’re being ignored.

Clients will sometimes overcompensate for this perceived lack of communication by providing massive quantities of (often useless) information, which is not always helpful for the agency, as much of it will not be necessary to the task at hand. Agencies may respond to this information overload by ignoring pieces of information, which may cause clients to feel misheard or misrepresented. This vicious cycle leaves agencies feeling overwhelmed and clients feeling devalued.

On the reverse side, if agencies over-communicate, clients may feel overwhelmed and overworked and assume the agency is too incompetent to manage the project on their own. One example of communication overload is agencies placing a heavy reliance on email communication over more personal styles such as meetings or phone calls.

Phil Simon, author of Message Not Received, says that the average person receives 120 to 150 emails per day, making it extremely common for clients to misplace, delete, or forget to read their emails. When too much information comes across a digital platform, overload is more likely to happen, which can cause clients to disengage.

In worst cases, this disengagement can lead to entire projects being stalled. While constant communication is important for any development project, over-communication or communication about issues that aren’t essential to the needs of the moment can leave many clients feeling confused or overworked.

Having a strong communication plan in place is important to combatting these communication issues. Knowing when, where, how often, and to whom communications should be sent can alleviate the burden on clients and allow agencies to manage projects more competently.

Of course, communication plans only work when the relationship between an agency and client is already established. If there are breakdowns within the relationship, poor communication will only cause further problems. Some experts warn that poor communication within an agency-client relationship is actually a symptom of something far worse.

Poor communication is often a sign of deeper problems

In 2014, RPA and USA Today conducted an anonymous online survey of more than 140 agencies to better understand what makes successful agency-client relationships. In their report, The Naked Truth, they discovered that ninety-eight percent of agencies and clients agreed that trust was a major factor in maintaining relationships, but that poor communication was a major factor when there was a lack of trust.

Poor communication can be a sign of underlying trust issues between agencies and clients, and can play a major role in the dissolution of otherwise successful business relationships. If an agency struggles to connect with clients on a consistent basis, for example, it can create uncomfortable distance in the working relationship, resulting in unnecessary overreactions when smaller issues arise. agency-clientcommunication03

If the client feels like the agency isn’t listening to their needs or has trouble getting those needs met on a consistent basis, they may either react with a desire for more communication (which the agency may not be able to fulfill) or they will slowly withdraw and look for alternative solutions.agency-clientcommunication02

Without first establishing the kind of trust that leads to healthy agency-client communication, tensions can build over time until one or both parties walk away from the relationship all together, resulting in financial and networking losses for both.

The good news is that trust can be built and protected by intentionally stewarding good communication patterns.

Three ways to promote trust through great communication

Since communication is a skill, it can be learned and improved through intentional practice. Strong communication skills may need to be relearned during the course of a relationship, especially if there have been patterns of poor communication in the past or a history of mistrust. Here are a few ways agencies can ensure they are maintaining healthy communication with their clients (and vice-versa).

Be consistent and reply quickly

If an agency has issues with slow or inconsistent communication, it can hinder workflow and create communication barriers. Replying to emails and phone calls as quickly as possible – or sending additional emails notifying clients when they can expect a reply – can go a long way in boosting confidence. Setting a 24-hour rule to responses (or faster if it’s an emergency) and sticking to it will help foster trust.

Adapt your communication styles

Misunderstandings are one of the most common communication problems for both agencies and clients. When a client has trouble interpreting the intentions of an agency, it can cause confusion and slow down the workflow, since additional messages are required for clarification. Making sure communications are well written, clear, and concise before sending will help eliminate that confusion. It can also be helpful to restate the main concerns at the end of an email, phone call, or meeting to ensure everything was properly communicated.

Be open and honest (but don’t overreact)

Being open and honest (but respectful) with clients can help build strong relationships and promote good communication. Being courteous and sincere but honest about perceived complications will create a safe environment for both parties when problems arise. When complications do occur, address them quickly and confidently without assigning blame. If the relationship is already shaky, overreaction can cause non-issues to escalate into impossibilities. Asking “Why,” “Why not,” and “What” questions will help clarify and refocus the discussion while calming fears that clients aren’t being heard.

Getting Creative With Contact Forms

Contact forms are the bread and butter of any business’ website. They’re how you gather new leads, convert prospects into real customers, and support your existing ones. They should be one of the places you focus on most when designing your website: A/B testing different solutions, getting creative with layouts, and optimizing conversion rate.

Unfortunately, most contact forms are the last priority when designing a website. They not only end up looking rushed or out of place within the context of the site’s design, but identical to every other site. The contact form is the end of the user’s journey through your website, and should be one of the key areas that differentiates you from your competition. It can be a real waste when your website uses beautiful fonts, colors and graphics like this:form-1And then your contact form looks like this:form-2

It can be difficult to come up with ways to get creative with your contact form. Most contact forms only need three pieces of information: the user’s name, a way to contact them, and a short message. The easiest way to do that is by simply using three text fields and a submit button. But getting creative with your contact form can improve the quality of your leads, increase your conversion rate, and bolster your brand’s reputation for good design.

Provide Options

The default contact form is great, but not always the most suitable. They’re not great for receiving immediate help, or for complicated requests. By providing different options at this point, users can pick what suits them best. Here, Chargebee offers not only the default contact form, but also a call back request. Placing links to the company’s social networks here would also be a good idea (Twitter and Facebook are great ways for getting in touch with a company).form-3

Fit the Design

A beautifully-designed website will impress visitors and sell your business. But since your website is essentially a path leading towards your contact form, having this final point in the journey be comparatively disappointing will tell visitors that you don’t pay attention to details. If you can’t get such an important aspect of your own site right, how can they entrust you with their site?

You don’t have to go to extreme lengths to create an entirely new contact experience – simply taking the time to design the form around the rest of your site is a great first step. Saus, a creative communications studio, has styled their contact form based on a physical postcard. At its base, it’s still just a couple of text input fields and a submit button, but it fits perfectly into the context of the website.form-4

Give Context

One way to improve Saus’ form would be to give the user some expectation of when they might receive an answer. If they call immediately, will there be someone to answer? If they email, will it be minutes, hours or days until they receive a response? Huge does this well by appending the current time to each of their offices. Now the user can tell whether or not it’s currently business hours, and can get a rough estimation of how long a response might take. If it’s currently 2 AM, you won’t be getting a response until later in the morning. But if it’s 2 PM, you can probably expect one within the hour.

form-5

 

Give a Head Start

One big discouraging influence in many contact forms is the blank text field. Name and email address are no problem – the user already knows those, it’s just a matter of being willing to share the information. But a big blank text field saying “Message” is daunting. The user needs to figure out exactly what needs to be shared, and worry about what they might have forgotten to include. A great solution to this problem is a mad-libs style contact form, like the one below  from Andrew Haglund.form-6

Eliminate The Blank Page

Even if you don’t want to go full mad-libs style, there are still ways to avoid the blank page syndrome. Prime users with multiple choice questions, then use placeholder text to further guide their answers.

Break It Up

Some contact forms won’t fit into the simple name-email-message structure, and will need to request a bit more information from the user. Placing a lot of text fields on screen at once is a sure way to scare users off, especially those with limited time. By breaking up long contact forms into sections, the form appears smaller and gives the illusion of taking a shorter time to fill out. Creative Digital Agency Harbr breaks their contact form into three steps. The final step is still a freeform text input field, but by this point the main questions have been answered, and this field is more of a support, rather than the critical piece.form-7

Get Graphical

Most form elements are pretty boring by default. Typeform spices up their designs by using simple illustrations instead of radio buttons. The illustrations remove the reliance on detailed copy, and allow users to skim the form. The less reading involved in your form, the faster users can fill it out, and the higher your conversion rate will be.form-8

Be Analytical

Whenever you’re making changes to your contact forms, make sure you track and analyze how the form performs before and after. If the changes you make reduce interaction rates, that’s not necessarily a bad thing! You might be reducing the rate of users asking questions that your website already answers. Keep track of how many useful conversions you get, and use the data to guide your design decisions.

Bridge the Gap Between Tech and Non-Tech

In the software industry, project managers and marketers want to get things done quickly, without the complications of bureaucracy. They want the business to grow, money to pour in and more and more new things to be implemented and revolutionize their company. Some of them want to become rich and famous, well – at least in their well-delimited sphere of marketers and managing staff.

Developers on the other hand want to focus on one task at a time, write amazing code that changes the web and servers, be challenged and tackle some of the most difficult computer science issues and solve them, and especially – not get constantly interrupted and distracted by endless trivial requests. “Programming is best done “in the zone” — a (pleasant) state of mind where your focus on the task is absolute and everything seems easy. This is probably much like “the zone” for musicians and athletes.” says Morgan Johansson who calls himself a “professional software tinkerer”, senior.  

A while ago on Quora someone asked programmers what they thought when hearing the phrase “I just need a tech co-founder.” A lot of rage almost instantly started pouring on from there as more and more techies joined the thread. “The[se non-tech founders] just care about equity,” commented cynically one developer. A couple of comments down, a CEO calls programmers “arrogant”, to which comes the response that non-techies should stop being so defensive, and everybody has ideas, let’s see how we put them into practice or rather, who puts them into practice for us.

Soft Skills Aren’t Lesser Skills

As newer startups have commenced building more diversified teams with an increasing overlap in capabilities, there still remains a sense of mistrust between tech and non-tech, a confusion about how to assess a person’s “soft skills,” attributes that enable them to interact effectively and harmoniously with other people, the widespread assumption that these skills are inferior to “hard skills” – specific, teachable abilities required occupationally.

If programmers are able to understand “soft skills” as competencies, they may be more likely to appreciate their value and the potential of having a non-tech person on their team. Capabilities of this sort may be the ability to make difficult connections, among ideas and concepts that are at least apparently unrelated, an understanding of one’s place in the world, the ability to critically assess how systems work (and fail), an openness to learning, a “mental playfulness” as Bill Watterson calls it that allows one to “wander into new territories” even if unsure of what they may find.

Many in the tech-world undervalue soft skills: this is most evident in the belief that artificial intelligence (extremely capable at hard skills, but not so much at soft skills) will be the solution to all mankind’s problems. Google’s Director of Engineering Damon Horowitz, who studied artificial intelligence with a specialization in natural language processing, said that it was while studying philosophy that he came to realize that no matter how much he improved upon it, the AI system itself had its limitations and the changes would not be incremental. He says his focus then shifted from assuming that machines could resolve all of our problems to looking at how they could “facilitate human problem solving” instead.

One can argue that this expansion of the mind is also connected to the ability to have a broader or “macro” view of things. For instance, Reid Hoffman, founder of LinkedIn, said that through studying philosophy at Oxford, he wanted to “strengthen public intellectual culture.” Caterina Fake, founder of Findery, knew she wanted to create something around the idea of community and the sharing of stories through art. The acknowledgement of different kinds of capabilities is a necessary first step to bridge the trust gap between tech and non-tech.

What Do you Wish Your Boss Knew?

Most likely the director of your company is a non-tech figure. The manager who’s the people’s person / with people’s skills – or so you’d hope at least – and who’s really good at marketing the product and getting it out there, in the eye of the storm. But you, the dev, have your ideas and contributions too, to the management of the business – at least internally. Some of the best contributions a developer could bring to the non-techies’ team and managers to bridge the gap would be:

Empowering the non-techies to do technical work by teaching them or encouraging them to learn tools that are easy for anyone to learn. From how to use Photoshop and Illustrator Essentials down to using tools such as FormKeep to generate forms or bringing minimal edits to the stylesheets, these situations are win-win. Win for the developer which won’t have to come back on editing and re-editing or correcting typos that can be identified and fixed in a second by the non-tech, win for the non-tech in terms of adding hard skills to his trade. It might seem such a tiny thing, a change of size of the typeface, color, or other tweaks that may seem irrelevant and yet save you from having to dig through miles of code, while someone from the non-tech team that has stumbled upon the discovery while doing the QA testing could edit it there and then.

Helping them understand that perceived output is not the same as actual output. A poor developer will write unsustainable code, and then jump around from one bug to the next, spending nights and weekends in the office and impressing their superior’s. A good developer will spend time thinking about the problem (which from an outside perspective can look like daydreaming). They’ll write clean, stable code, clock out at 5pm, and appear lazy in comparison to the first developer. Yet the latter developer is infinitely more valuable to the company than the former. Unfortunately, this can be very difficult to perceive from the outside, especially for those not already tech-oriented. Engaging in discussions with developers about these issues can help to understand what it is developers do all day, and help form a good instinct for evaluating employees.

Problem pattern matching. Getting your boss to learn coding is a big ask, and takes away from more important things they could be doing. Getting your boss to learn how to think like a coder, on the other hand, is beneficial to everyone. Thinking like a coder is more often than not a simple game of matching problems with known solutions, and knowing when to apply which solution. With enough involvement in project details, your boss will eventually come to know the most common solutions.

Assist with the interviewing. This one is really a direct corollary of the contribution right above. Your developers might just be the right figures to help you select new personnel, especially when it comes to positions that can be difficult to understand from the outside. Although developers and designers, for example, can often be at odds with each other, a good developer can identify a designer they’ll get along with, and vice versa. Involving the developers can ensure you’ll have the right questions to ask to figure whether the interviewee is a good fit or not.

Recognize merits. Recognize when non-tech makes efforts to learn about the tech world. A little bit of gratefulness goes a long way, and it’s important to positively reinforce any behavior you want more of. If your manager is learning HTML, or the marketers are learning Photoshop, that helps communication between you and balances the workload. If they have trouble, help them out in a way that lets them learn for next time – don’t just speed through the job while their eyes gloss over.

Learning to Think – An Independent Task

If you are a non-techie, odds are you might have more initiative towards taking tasks that push you out of your zone of comfort. Therefore perhaps the approach of Caterina Fake, oil painter and linguist turned techie entrepreneur, doesn’t seem so alien after all. She wanted to “translate” her training as an artist onto the web, and in the end programming languages, apart from being logical and mathematical are, precisely how their name goes, languages. More than learning to code, the long term goal for non-techies is learning how to think like a coder.

Developing a sense of logic in fact is not only mathematical – a science logics was a part of the human sciences for thousands of years, a branch of philosophy. It teaches and involves the use of precise and formal methods of thinking, such as abstractions, boolean logic, number and set theories so you can solve problems in an air-tight manner. One of the best ways to understand the human mind is to try to replicate it. Topics like AI, machine learning, natural language processing are not just part of computer science but also biology, psychology, philosophy, and mathematics. Damon Horowitz, Director of Engineering at Google, suggests that most of the evil in the world comes not from bad intentions but from “not thinking.”

What developers want most of all – to solve problems – could be the key to solving this gap. Creative problem solving is a skill considered both “hard” and “soft”. As such, it’s a key part of the lives of both tech and non-tech. Understanding that both camps are using the same skills in different ways can help the communication across the gap. The big difference is that while tech uses creative problem solving to solve technical problems, non-tech uses it to solve human problems.

That said, the best programmers are those who use creative problem solving to solve both technical and human problems at the same time. They’ve realized that the software that they’re writing is for people, even if it’s just the back end of a complicated system or a protocol that no one but other developers will ever use. They write documentation because it’s important. They help people use their code. They’re willing to go the extra mile and deal with a bit more complexity to give the people using their software the right solution. This is the point where techies’ and non-techies’ best intentions should converge, in the People First Axiom, because this is the goal that can ultimately bridge the gap.