Monthly Archives: June 2017

5 Inspiring Design Documentary

Design Is FutureDocumentaries have a profound effect in terms of their ability to both teach and inspire. As designers, we are one of the primary creative industries and always looking to find and use inspiration, whether it be from images, art, products, or even music.

Below I have compiled a list of six inspiring design documentaries that should help serve as excellent resources to help you learn something new, however advanced you are as a designer. They have all taught me something new about design and design thinking, as well as inspiring me with new styles and ways of working.

All of the following six design documentaries are available watch freely with only one requiring a Netflix trial or subscription.

1. Design Is Future

This is an inspiring documentary that is exceptionally well put together. ‘Design Is Future’, which is held at Disseny Hub Barcelona during Barcelona Design Week, explores ideas for the future of design and talks about its rise to prominence over the last decade or two.

It explores some interesting thoughts about the role of design, design thinking, and poses questions to some of the most forward thinking design professionals around today. There is particularly excellent insight into design as a tool to help with innovation and sustainability for people, businesses, and society as a whole.

2. Design & Thinking

Design & Thinking conducts interviews with prominent individuals from companies such as Autodesk and Coca-Cola, looking at the process of design thinking and design’s ability to make a significant impact on real-world problems.

It discusses how strategic and well-thought out design decisions can have a positive effect on every problem, from everyday life, to solving world hunger and other humanitarian issues.

3. The Modern Russian Design

Sergey Shanovich’s documentary ‘The Modern Russian Design’ provides a unique insight into one of the most interesting regions of the world and its design industry, and individuals who are trying to make an impact across multiple areas of design. It covers the past 20 years of progress within the Russian design field and documents the designers who have helped contribute to a part of this progress. The documentary covers multiple areas of design including fashion, industrial, multimedia, web, and graphic design.

4. Connecting – Trends in UI, Interaction, & Experience Design

‘Connecting’ is a short but interesting documentary which shows just how far we have come in the last 3 to 5 years. It helps take a step back from the constant innovation and progress, and look at interaction and UX design from a new perspective.

Specifically exploring the future of interaction and user experience design, ‘Connecting’ looks to document the impact technology is having on the lives of everyday people, how that may develop into the future, and the ramifications of such developments.

5. Jeffrey Zeldman 20 years of Web Design and Community

An inspiring figure in web design, this documentary has Jeffrey Zeldman discuss a variety of topics about the past, present, and future of web design.

Owner of ‘A List Apart’, Jeffrey has some great tips for designers and developers alike, specifically around topics such as building a mailing list, and looking towards to future of web design. It is well worth a watch to learn from someone who has been working in the industry since the very earliest beginnings.

Attract People’s Attention Through the Color of Web Design

Working with color can be so much fun. Color can set the mood and tone of a design. Color can make a design appear clean or messy. Another thing we can use color for is to draw attention to a desired piece of content or element.

In this post, we’ll go over the various way in which color can be manipulated to draw attention to something. Some of the examples will talk about repetitiveness, some about photography and others about how a lack of color can be a strategic thing too.

Let’s get started in analyzing how to draw attention through color.

Nursing bras, photography, and attention

There are a plenty of website designs out there that make use color in a strategic way. Color is so versatile and comes in all different shapes and forms. For instance, when I speak about color in design most people assume about things like text or buttons. We’ll get to that. For now, I want to talk about the less obvious way we color effects a design, through photos.

Storq is clothing store for pregnant women. Overall, the website doesn’t feature too many colors. However, on the product pages, the photos command attention. Part of it has to do with the fact the photos are large. The other part has a lot to do with the fact that the photos are the only elements on the page that have color in it.

The photos feature darker shades and similar shades too. Storq uses photography that fits right in with the overall design. They don’t use dramatic or stark colors in the photos to draw attention; that would be too much and unnecessary.

Neon or contrasting colors are not the only ones that can draw attention when thought through with the context of the design.

Colorful texts can draw attention too

Let’s talk about changing the color of text such as headings or large pieces of copy. I have found two amazing examples of how text colors can leverage a visitor’s attention too.

The first example is that of The Nature Conservancy in California. The website is a great example for two reasons.

First, the design leverages color but also a hierarchy. Hierarchy is a fantastic design tool in pinpointing what is the most important to the least. It’s clear at a first glance, what is important to look at first in the above screenshot. “Our approach” is the darkest piece of text in that whole section.

The rest of the text is the same color but what is more important is determined by size. In this example, color is a unifying factor, except for the heading off course. At the same time, color is used to draw attention away from more trivial elements like the numbers on the left-hand side of the headings.

It’s nice to know the order of the sections but, more or less, the numbers are irrelevant to the experience. Therefore, they are lighter in color.

Additionally, we have an example of Founders. By the time you make it halfway down the home page, you’d have seen at least three different font colors.

When you first take a look at the green hero text, it grabs your attention because of its front and center. But the second you realize it’s actually a dark green color, it gets to keep your attention for a little longer. Here the green is a little unexpected so it keeps a visitor a little curious.

At the very least, if the green headline go unnoticed, it’s hard not notice the change of color in the text within the middle section again.

The headlines are a dark blue while the supporting content is gray in color. The contrast of the light gray against the blue heading gives a lot more prominence to the headlines themselves. The gray makes the headlines stand out a whole lot more. I love that such seemingly irrelevant but highly effective manipulation can be done with just color.

Using colorful decorations to create a focal point

In this and the next section, we’ll talk about how to leverage shapes, patterns and color to your advantage. For now, we’ll discuss the decorative aspect of shapes. Unfortunately, decoration have a bad name in web design which is just a shame. You can easily use decorations to create a focal point within a design or a specific section without adding visual jargon to a design.

That’s exactly what Perspective did. They are a creative agency with a fantastic and simple website. If you take a look at the bottom of their homepage, you’ll see there is one section that will fit perfectly as a great example for this point. It’s the same section as the screenshot above.

As you can see, the section is made up of two different elements. First, there are the hands holding up the two smartphones.Behind it, you’ll notice the decorative, rounded shapes.

The section looks completely different without the colors behind it. And, the experience of the web page changes completely now. Without that burst of color, the section doesn’t have the necessary visual focus when you’re idly scrolling down.

So although, yes, those blue and pink bubbles are seemingly irrelevant, they have an important job to do. Especially, if you notice that the section lacks significant color without them and therefore becomes significantly less interesting too.

Shapes, color, and repetitiveness make up visual languages

A visual language is a system of communication using visual elements such as colors, shapes, headings, and so on. Often times, designers will develop a style guide but a visual language goes a whole lot beyond that.

A visual language has detailed relationships between each kind of element. It specifies what you can and cannot do. It explains how elements are to be used with one another to best represent the visual style. A visual language build a whole library of visual components and details how they are to be used.

Color, naturally, is a big part of any visual language the same way it is a big part of any style guide. If you’re looking for an example of a fantastic, thorough and public visual language look into the Material Design Documentations.

This is not about Material Design, however. It’s about the visual language of Wyre, online bank transfer service. The company’s branding heavily relies on the repetitive leaf-like shape that makes up the logo. You can see this shape in use all over their website from the home page to the about page all the way through to the signup page. Another thing that’s repetitive on the website’s design is the use of various blues.

Oftentimes, the use of the shape is combined with a use of a specific color such as the common CTA on the homepage to get started. On the home page, the blue shape is used as the CTA button multiple times. It’s actually used exclusively as the signup CTA. That’s a great  stepping stone in developing a fantastic visual language. Each time a user sees the leaf-like shape with text over it, without even reading what it says, the user can easily take a hint it’s the main and only CTA on the website after having used it for a quick while.

Such a correlation wouldn’t have been possible without the redundancy in both shape and color.

Lack of color variation can be a good thing

Not every design calls for the most colorful color schemes. The first example in this post, Storq, did just fine in drawing attention with their color-limited color scheme. Let’s take a look at two examples that draw attention to selected elements by removing color as the focal point.

The first example is the landing page for Dona, an AI-powered do-to app. Here is the thing, though, this design doesn’t lack color completely.

There are some pieces of blue on the landing page. Additionally, the screenshot in the iPhone has tiny bits of other colors as well. The idea here isn’t to remove color but to use its absence to an advantage.

The second example is a portfolio for the Logo Shop. The website is made up of a washed out pink background and everything else is a dark gray color. Now, both of these design don’t utilize color in the traditional sense. At the same time, neither one of them is truly grayscale. What both of these design do is level the playing field for the emphasis on the colors.

Because there isn’t a single color that stands out the most, the visual emphasis then relies on the amount of color used or the size of the elements. In the case of the Logo Shop, the header is the biggest element above the fold. It’s obviously the most important element there, visually speaking. This wouldn’t have been so easy to distinguish if the texts used different colors to create a visual hierarchy.

As you can see, lack of color diversity is a good thing. On Dona’s landing page, the emphasis easily goes to the animated screenshot in the iPhone. If the heading or the email capture were a bright color, the focus would have been taken away from the .

Highlighting bits and pieces

Sometimes using color to draw attention to something is as simple as using it as a highlight. Highlighting is the whole idea behind accent colors anyways. Accent colors are to give attention to less significant information compared to what the main colors are supposed to represent.. So, how can one use color to highlight?

On Highlight’s website, the yellow is used as an accent in two ways. First, to highlight information in each individual section. Second, to highlight the most important section of them all. That’s a nice way to utilize color in a smart manner.

Actually, on Highlight’s landing page, the yellow is the only color besides black, white and some grays. The yellow color isn’t used that often either. It’s used sporadically, in strategic places to highlight important pieces of information in any given section. This way, the visitors know exactly what is of visual significance and what should be looked at first, subconsciously of course.

The yellow highlight is used in a limited fashion in all but one section. The very last section of the landing page is the exact opposite as far as color use goes. The background is yellow with a yellow pattern over it. It denotes the most important section of them all. It’s the only section where a user can take an action by providing an email address.

Something similar is happening on Yummygum’s homepage too. This digital agency uses the color blue to make its highlighting. On the top section of its homepage, it uses the color blue to underline and highlight a link. Visually, it’s the most important link in that specific section. As you scroll down the home page, different sections use blue differently. But, they still use the color blue to highlight a single, most important element of that given section, such as a heading or the contact button.

Yummygum’s home page is filled with small highlights. All of those are possible thanks to limited and thought through use of color on the part of the website’s design.

Conclusion

Color is such a fantastic design tool. It helps keep order or invokes chaos – whichever one you need to achieve. In this post, we went over a few various way in which color can be used strategically in order to drive attention to something specific. This post was meant to shed light on how to think about using color in design in a strategic and mindful way.

New Settings for Scrolling in Web Design

What was once taboo in website design has made a complete resurgence as one of the most popular techniques in recent years as users are finding a new love and appreciation for sites where scrolling is a necessity. Shedding its old stigmas, scrolling is reinventing itself as a core interaction design element – that also means designers need to learn the new rules.

In this piece, we’ll explore the rebirth of scrolling, discuss some pros and cons, and list out some quick tips for the technique.

Why Scrolling is Reborn

The simple answer is mobile devices.

Ever since mobile users have surpassed desktop users, UI designers everywhere have adjusted accordingly. And with so many users on smaller screens, scrolling is becoming more of a necessity: the smaller the screen, the longer the scroll.

But there are other factors. Access to high speed internet is available in more places, making the scroll a quicker way to access information than clicking from page to page. The growing strength of social media sites also feeds the technique: scrolling naturally accommodates their wealth of user-generated content.

As explained in the guide Web Design Trends 2015 & 2016, long scroll evolved right alongside card-based design. When combined, the techniques let you provide users an endless stream of bite-sized content (which is perfect for web and especially mobile experiences).

Plus, the above-the-fold doctrine that was holding scrolling back is now being recognized as the myth it really is. The truth, according to actual studies, is that users really don’t mind scrolling. The practice of jamming everything above the fold is losing out to spacing everything out along a even and smooth scroll.

Part of the reason the myth became popular, of course, was that scrolling was only seriously considered as an intentional design pattern after advances in Javascript and CSS. Before that, it was much more difficult to make scrolling “sexy” through visual storytelling. As you might imagine, a long page full of text (interrupted by occasional images) isn’t a very engaging UI layout.

But once you start approaching the long scroll as a canvas for illustrating a beginning, middle, and end (through graphics, animations, icons, etc.), then you start to see it’s film-like power in capturing user attention.

In fact, some hybrid patterns are emerging as the latest trend in scrolling. For example, the “fixed-in-place scroll” that we use on our own UXPin tour page creates the same interactive experience of a traditional long-scroll site without stretching the site vertically.

Is Scrolling Right for You?

With every design technique and tool, there are those who love the concept and those who hate it. In most cases, neither side is intrinsically right or wrong; that’s why it’s important to weigh all considerations before tackling such a project.

Advantages of Scrolling:

  • Encourages interaction – With the ever constant stimulation of changing element, it can be an interesting storytelling method that encourages user interaction – especially with tastefully-executed parallax scrolling.
  • Faster – Long scrolling is faster than clicking through a complex navigation path and does not slow down or limit the user experience. As described inInteraction Design Best Practices, the perception of time is often more important than the actual passing of time.
  • Entices users – The ease of use promotes interactivity and increase time on site. This is especially true for infinite scrolling sites, where you can help users discover relevant content that they may not have even thought of.
  • Responsive design – Page designing can get complicated across devices with different screen sizes and capabilities, but scrolling helps simplify the differences.
  • Gesture controls – Scrolling seems organically linked with touch, since swiping downwards is much easier than repeated taps on different areas of the screen. Users (especially mobile) are commonly accepting this as a way to display information.
  • Delightful design – Few clicks can result in quicker interactions for a more app- or game-like user experience.

Disadvantages of Scrolling:

  • Stubborn users – Nevermind why, some users always resist change. Nonetheless, the technique is so widespread now (especially during mobile experiences) that it’s probably safe to say that the majority of users are accustomed to the technique.
  • SEO drawbacks – Having only one page may have a negative effect on the site’s SEO. (To learn how to minimize these SEO downsides, check out this Moz piece for parallax scroll and this Quicksprout piece for infinite scroll.)
  • Disorienting – The disconnection between scrolling and content may leave users confused or disjointed.
  • Navigational difficulties – It can be awkward to “go back” to previous content on the page. To counter this, you could create a persistent top navigation where each item is anchored to a page section
  • Site Speed – Large pieces of content such as video or image galleries may slow down the site speed, especially for parallax-scrolling sites, which rely upon Javascript and jQuery (check out this tutorial to learn how to create parallax sites without slow site speed).
  • No footers – With infinite-scrolling sites, we’d recommend a lean “sticky” footer so you don’t sacrifice navigability. Otherwise, users may be confused by a lack of further navigation at the bottom of the page.

Advantages and disadvantages aside, the long scroll is a technique that suits some types of sites more than others. Longer scrolling websites and best suited for content and design plans that…

  • … are going to include a significant portion of mobile traffic (most users)
  • … include frequent updates or new content (such as a blog)
  • … have a lot of information presented in a singular way for comprehension (such as an infographic)
  • … do not contain rich media because of the drain this can cause in terms of load times

Social media sites, with constant and extensive user-generated content, do well with long scrolling (in fact, Facebook and Twitter helped popularize the technique years ago). On the other hand, goal-oriented sites like e-commerce – which require coherent navigation – tend more towards conservative page lengths.

The middle ground would be a site like Etsy, an online store for user-generated products, which uses a hybrid solution: several pages of so-called “infinite” scrolling, ending with a call-to-action of “Show Me More.”

Like all web design trends, don’t use longer scrolls just because you’ve seen other sites follow the pattern. Make sure your website fits the criteria we’ve discussed, otherwise you might actually experience worse performance.

Scrolling Best Practices

Long scrolling, parallax effects and similar mechanisms are still relatively new to the realm of design (~4 years) , but still some rudimentary trial-and-error has produced some fundamental best practices.

Summarized from Web Design Trends 2015 & 2016, here are some everyday tips for successfully implementing long scrolling.

  1. Don’t be afraid to alternate long with short scroll. Let the content dictate the scroll length, not the other way around. It’s totally fine (and quite popular) to use a short-scroll homepage and long-scroll landing pages (like Products, Tour, etc.).
  1. Consider sticky navigation, such as that used by Free Range Designs, so that users can always “get back” quickly or bounce from element to element in the scroll.
  1. Suggest scrolling with design elements or tools so that every user can quickly see how the site works. Arrows, animated buttons or similar user interface tools are fun and easy ways to help the user determine what to do next. Some sites even include a small button with instructions like “Scroll for More” or “Get Started” to help navigate a site with unconventional techniques.
  1. Make clear distinctions between scrolling clicks or taps and other calls-to-action so that your website gets the desired interaction.
  1. Do some research and look at how users are interacting with the scroll. In Google Analytics, for example, you can open the “In Page Analytics” tab to see how many people click below the fold. Based on the data, you can then tweak the design as necessary.
  1. Don’t go overboard. Long scrolling does not mean 500 pages of continuous content – a long scroll can also be simple. Tell your story and then stop. Don’t force it. Deca, below, uses a scroll that is only a few pages long.
  1. Focus on your user goals and accept that even infinite scrolling sites are not truly endless. When creating longer-scrolling sites, understand that users still require a sense of orientation (their current location) and navigation (other possible paths).
  1. Include visual cues that help orient users in the scroll, such as the helmet icons used in the left hand side for “The Seven Types of Motorcycle Rider” site below.

Scrolling can be a double-edged sword, so stick to its recommended usage to avoid it doing more harm than good.

Pageless Designs of the Future

Long scrolling sites are not going anywhere. While we’ve seen ebbs and flows (or increases and decreases) in the sizes of screens on popular devices, small is here for the foreseeable future. And small screens require more scrolling.

Actually, the transition from long-scrolling to “pageless” design has already started, and some designers (like those at Digital Telepathy) even believe it is the future of the web. As websites continue to shed some of the constraints of how users think about and consume information, designers must think more radically about the best ways to create content in different environments.

Interaction design is the foundation of long scrolling website design. If users like the interface and find it intuitive and fun to use, then they won’t really mind the length of the scroll (as long as it’s not atrociously long).

You don’t always need to shorten the line – you could just make the wait far more entertaining.

If you found this post helpful, check out the free e-book Web Design Trends 2015 & 2016. In addition to best practices for long-scrolling, you’ll also get tips for 9 other successful web design trends. The techniques are illustrated with 160+ analyzed examples from some of the best sites available.

Ultimate UX Design

A typical sign-up form contains a couple of form fields (it seems like the most popular number nowadays is 3: e-mail, password and a peculiar “repeat password”) and a button. Is there anything to design in this minimalistic structure? Isn’t it too simple to focus on?

Unfortunately, many non-designers and some designers think exactly this way. If it’s visually simple (and tiny!), it shouldn’t be designed, as it would be a waste of time, right? Completely wrong.

I once tried to explain it to a stubborn design layman, who just couldn’t believe that if somebody visited a website and clicked on a huge button on the homepage which said “Sign Up”, they would suddenly leave the simple form without registering. “How come?” – he asked, “They’ve already decided to sign up… it’s just impossible they will be scared by three inputs”.

Well… pretty often they are. I showed him our data from Google Analytics. At that time 23% of people who clicked the huge button on the homepage were leaving the form, with three fields, without registering. 23% is a lot. Almost a quarter of the people were getting scared of the form.

I ran a quick study to grasp the reasons that cause people to leave my sign-up form. 70 people were nice enough to fill in a short questionnaire with open-ended questions. To my surprise, 33% of them pointed out “the fear of being spammed” as the main reason they always think twice before typing in their e-mail address anywhere. The complexity of the form (often considered unnecessary) and reluctance to waste time came in strong second place with 21%.

Studying dozens of sign-up forms made me realize that a lot of them fail due to these unfortunate errors. They’re far from being bullet-proof.

Let’s learn how to create a perfect sign-up form! We’ll go through a couple of examples and best practices, then by simply focusing on: safety, clear explanation, minimal form and engaging copy, we’ll create our own perfect pattern.

Safety

Let’s consider, in the first place, what the reasons are for using a sign-up form. I’d say they are as follows:

  • Keeping the sensitive data of users safe (e.g. Mint.com, UXPin.com…)
  • Recognizing users as owners of certain data (e.g. Facebook)
  • Limiting access to a certain part of your service (e.g. any intranet)
  • Gathering user data for marketing reasons

Bearing this in mind, consider how a user might feel when confronted by a sign-up form. Most of the reasons behind a sign-up form might be really unclear for the average Internet user. What we don’t understand automatically scares us; no wonder then that many people leave our forms full of doubt and fear of fraud.

In most scenarios, you’re the one benefiting from the presence of the form, so the responsibility of spreading the feeling of safety among your users is definitely yours.

Strangely enough, most sign-up forms just fail to address this problem. Not indicating that typing in your e-mail address is a safe step, might force your users-to-be to reconsider the whole registration process. Would you risk it?

One of the rare good examples of sign-up form design is Mint’s form.

Mint uses visual stimulation (a lock icon) to indicate that the whole process is safe. Norton’s and TRUSTe’s badges add an additional feeling of security to the form.

Mind that Mint also repeats the benefits that you’ll get by signing up. The usage of emotional language (“Why you’ll love Mint.com”) creates a feeling of intimacy and emotional attachment. That’s exactly what’s needed to destroy any doubts people can have about the service at this step in the process.

Another interesting example of reinforcing the feeling of safety might be observed in Songkick’s sign-up form. Songkick uses a very popular pattern of a social sign-in accompanying the classic sign-up form.

A social sign-in, if done right, is an extremely powerful idea. It saves time and trouble. However, it can also beef up the feeling of danger. In the case of social services, spam won’t only hurt users e-mail inboxes but also their friends. That’s nasty. The indication of safety is an absolutely crucial thing in this type of registration process.

Songkick did a tiny, but powerful thing. They clearly stated that they “won’t post on Facebook without asking”. Of course they ask their users for a great deal of trust since it’s just a statement, but still, at least they address the fear in their customers’ minds and have a decent, soothing, answer for it.

If something might scare your customers – don’t hide, stand up and fight.

Explain

Following the pattern of “safety-enhancing” content, let’s consider another underestimated, but vastly important trick when it comes to increasing the conversion and user-friendliness of a sign-up form.

Explanation.

The whole concept of signing up is somehow artificial. It hardly has its equivalent in “the offline world”, therefore it’s not self-explanatory. We ask people to provide data in a format that we find convenient or safe and pretty often we don’t explain the reason behind it, or we don’t even inform about what format we expect.

How many times did you see forms that let you know that your password was too short, or didn’t contain any numbers? Too often. Information about the format of the password should be stated upfront.

Take a look at Github’s sign-up form.

The form isn’t a star. It’s rather OK (though I don’t get why they use labels inside form fields and a “pick a username” field in this part of the process). The thing that’s really great is the tip about the password: “tip: use at least one number and at least 7 characters”. This can really save time and trouble for users. Most services put this kind of information inside the error message when the password typed in is too short or doesn’t contain a number – that’s not a user-friendly solution.

Facebook follows the same pattern of explanation when it comes to the untypical form field of date of birth. They know most of their users will find it a strange question about their date of birth right on the sign-up form, so they decided to write a short explanation under the link “Why do I need to provide my date of birth?” Great move.

Take a close look at Facebook’s labels in the form. Can you see the label “New Password”? That’s a great example of taking care for safety in an unobtrusive way. Facebook suggest that you should make up a new password, not use the same pattern you used in dozens of other places. That’s a clever design.

Do it for them

When you’re designing a sign-up form, you need to:

  • Eliminate the fear of spam
  • Make the form easy to comprehend
  • Eliminate unnecessary complexity

The efficiency of your form lies pretty close to its overall simplicity. You don’t want to force your users-to-be to spend/waste 10 minutes gazing at your sign-up form. You want them to type in some data and register in a couple of seconds.

That’s why the best sign-up forms I know do a lot of things for their users.

Take a look at Hunch’s form. They encourage you to sign in using your Facebook or Twitter account (“Why be old-fashioned?”) to save you some time and effort. Direct informal language builds a friendly situation.

If you confused the Sign-Up and Sign-In form and you already have your account (that’s often the case!) – Hunch provide you with a visible option to go to the right form. That’s an excellent pattern.

One of my favorite sign-up forms was designed by an amazing team at Podio. Podio have two sign-up forms that are an exemplification of their mastery of the art of doing things for their users.

The first form used on the homepage is a shortcut. One field, four icons (with a suitable explanation). Nothing to be scared of. A visually appealing form that looks as easy as 1, 2, 3.

This Sign-Up form certainly cannot be taken as a pure waste of time. Typing in your e-mail or choosing a suitable social sign-in option can’t take more than 10 seconds. That’s an impressive concept.

The larger version of the form is even better. Simplicity intertwined with clarity and persuasive techniques shows the extensive knowledge of Podio’s designers.

It’s still just one field, but the social sign-in options are more straightforward. Mind that they didn’t go with the Facebook/Twitter standard, but rather tried to address the needs of their professional targets (GoToMeeting!)

The micro-copy of the form is just great. The “Good decision” headline builds a positive frame around the whole registration process. I simply love it. Podio also uses a social proof with a strong visual incentive. You can see that there are people who use Podio. If it works for them, it’ll probably also work for you, right?

The only thing that keeps Podio from perfection is the classic omission of the “asterisk”.

First of all, if there’s only one field, it has to be required. Secondly, if we’re putting an asterisk next to a form label, it should be explained.

Copy counts

From the example of Podio’s sign-up form we could see how much great copy helps in the process of designing a sign-up form. The dangers of the registration process might be eliminated by smart, emotional, copy that continues the process of selling the product during the registration process.

Basecamp mastered this technique by using a social proof technique (“Last week 7087 companies signed up for Basecamp to manage their project. Today it’s your turn”) visualized with a picture of their real customer. That’s a powerful solution.

They also indicate strongly that the sign-up process is simple and quick “You’ll be up and running in less than a minute,” and they make sure that if you have an account, you won’t be bothered by the form (“Log in here”).

This is by far the most persuasive form I’ve ever seen.

Great copy should go all the way down to the tiniest details. A call-to-action might be a small thing, but it matters a lot. To my surprise, most of the forms go with a standard “Start your free trial”, “Sign up for free”. A great example of a context-aware call-to-action is represented by Tumblr’s sign-up form.

Tumblr’s call-to-action simply says “Start posting!” It’s highly encouraging and way more accurate than standard options.

However, a call-to-action is a sensitive element of any form. It should be thoroughly a/b tested.

Step-by-Step Tutorial

Let’s use the knowledge that we’ve gathered above and go through the process of designing a perfect Sign-Up Form, shall we?

I’m using UXPin – The UX Design App to quickly create this user interface, but to recreate each step you can use your own weapon of choice.

1. Basic Structure

I’m setting up a canvas for myself. Since I already have some idea about the whole interface, I know that my content will probably be locked in 3 boxes, each representing important information.

2. Headline and mine division

I’m adding a headline, trying to build a positive emotional frame around the whole process. That’s somehow addressing the idea of Podio’s form. I’m also setting up a subheadline with a link to a log-in form.

The whole form will be divided into two important steps, which are separated from each other by the line.

3. The form

I’m adding a simple social sign-in and a two-field standard sign-up form. My call-to-action is rather generic, but if it was a sign-up form of a real service, I’d try to come up with something context-aware (like in the Tumblr example mentioned above).

I’m continuing to form a rather relaxed micro-copy. To encourage people to sign in with Facebook or Twitter, I’m stating that it can save time spent typing.

4. Safety

To increase the feeling of safety during the registration process, I’m informing users about our policies and rules:

  • We don’t spam our users’ e-mails
  • We don’t publish anything on our users’ Facebook and Twitter profiles without permission
  • We suggest adding a long password for safety reasons
  • The account can be canceled without any problems

These types of statement ensure users about our good intentions and general honesty.

5. Check password

I’m a huge fan of the “check password” pattern. I think the “repeat password” field went way too far. Initially provided to ensure that people won’t make a mistake in their password, it can be easily replaced by a checkbox “check password”.

Why force people to type in their password twice when we can simply give them the option to check the password with one click.

6. Social proof

Finally, I’m adding a social proof. I treat it as a safety belt. In case of any doubts of additional proof that this service is safe, popular and well received by thousands of people.