Google Panda in Plain English (Infographic) - Single Grain

Google Panda in Plain English (Infographic) - Single Grain

In February of 2011, the Google Panda algorithm changed the SEO world forever. After a year of ripping through what Google deems as “spammy” sites, how has Panda affected you? There has been non-stop chatter between Internet marketers and SEOs about how to protect your site from Panda, but with all of the updates and revisions to this algorithm change, things can get confusing quickly. So here it is; Google Panda in Plain English.

Stop Designing Pages And Start Designing Flows - Smashing UX Design | Smashing UX Design

Stop Designing Pages And Start Designing Flows - Smashing UX Design | Smashing UX Design

For designers, it’s easy to jump right into the design phase of a website before giving the user experience the consideration it deserves. Too often, we prematurely turn our focus to page design and information architecture, when we should focus on the user flows that need to be supported by our designs. It’s time to make the user flows a bigger priority in our design process.

Design flows that are tied to clear objectives allow us to create a positive user experience and a valuable one for the business we’re working for. In this article, we’ll show you how spending more time up front designing user flows leads to better results for both the user and business. Then we’ll look in depth at a common flow for e-commerce websites (the customer acquisition funnel), as well as provide tips on optimizing it to create a complete customer experience.

[Editor's note: Have you already got your copy of the Smashing Book #2? The book shares valuable practical insight into design, usability and coding. Have a look at the contents.]

Start With The User

When starting a new Web design project, we’re often handed a design brief, branding standards, high-level project goals, as well as feature and functionality requirements. Unfortunately, these documents typically amount to little more than the technical specifications of the project, with almost no thought given to how exactly the website will fulfill the multiple user objectives that lead to successful interactions.

Two examples of popular user flows for e-commerce and subscription websites.

If you start with a detailed look at the objectives of the user and the business, you would be able to sketch out the various flows that need to be designed in order to achieve both parties’ goals. User objectives could range from finding a fact to replacing a product to learning a new skill to buying a gift for someone. Business objectives could be getting a lead, a like, a subscriber, a buyer, a download or a phone call. Identifying each user and business objective is the first step to creating design flows that meet all of them.

Map User Flows Into Conversion Funnels

Not all website visitors are created equal. Users come from different sources, with varying levels of knowledge and engagement, and with different goals. It’s up to you as a user experience designer to map those in-bound user flows to conversion funnels that provide value to the user as well as the business.

You should prioritize the flows and focus your effort on the few that will impact the most users and have the greatest gain. Custom flows allow you to architect experiences according to traffic source or visitor type and enable you to set the experiential pace, build user confidence and get buy-in on the way to the ultimate conversion.

TYPICAL USER FLOWS

Some typical user flows are:

• Paid advertising
  A user coming from a banner or Google AdWord ad.
• Social media
  A user coming from a friend’s post on a social network.
• Email
  A user coming from an email newsletter or referral invitation.
• Organic search
  A user coming from a deep link that was surfaced by a search.
• Press or news item
  A user coming from a mention in the news or a blog post.

Each of these visitors has their own needs, expectations and level of knowledge, and they need to be treated accordingly.

Diving Into Funnels: A Closer Look At Customer Acquisition

E-commerce websites typically have many different conversion funnels.

Let’s look at a critical flow for many websites — paid online customer acquisition — and break down its various elements. For this example, we’ll examine the experience flow from new visitor to email subscriber to purchaser.

Consider a company that uses display advertising to generate new customers for its business.

DISPLAY MEDIA

With display advertising, it all starts with the banner. The design of the banner needs to achieve one precious goal: get a click from the right person. Here are some key questions to answer when designing the ads that represent the very front of your user flow:

• What type of user am I targeting?
• Are they actively seeking a solution to a problem, or are they casually browsing?
• What problem are they trying to solve?
• How can I best capture the user’s attention?
• How do I relate to the user?
• Is there a message that will resonate with the user?
• Is there a pain point that my product or website alleviates for the user?
• How can I articulate this solution clearly and quickly?
• What compelling calls to action will get our target user to click?

Your ads should address these main motivations and provide a compelling hook to get that all-important click. Up-front research and real-world testing will help to optimize the experience. Using this model, ReTargeter improved its banner click-through rate by four times. Its blog postlays out exactly how it achieved this success.

THE LANDING PAGE

The point when the user hits the landing page is when the user flow work really begins. Because these users are coming from a low-information source (such as a banner, as opposed to an in-depth blog post), you must design a flow that fills in the gaps of information by providing the user with the data that they need to be converted.

In our example, the user will hopefully be converted to an email subscriber; but depending on the business, the conversion could be to create an account, download a white paper or make a purchase. Whatever the conversion goal for the business, the key is to give the user a reason to keep moving through the flow, down the funnel.

Use the following methods to keep the user moving down the funnel:

• Build user confidence by clearly articulating key benefits, backed by easy-to-digest proof points.
• Streamline the content and design to focus on a clear call to action (in this example, to sign up for an email newsletter).
• Remove friction at every step. Ask for the minimum amount of information, and reduce the number of fields, extra clicks and page-loading time.
• Create an enticing hook, an itch that can only be scratched by completing the registration step.

KISSmetrics’ “Anatomy of a Perfect Landing Page” details the design, UI and copy elements that can help you meet your users’ need and drive conversions for your business.

Stacking Flows For A Complete User Experience Life Cycle

While viewing a funnel as something like Click on banner ad → Land on Web page → Register email is easy, designing and building stacked flows that drive the business’ ultimate objectives takes a bit more thought. In our example, we’ve successfully gained an email subscriber from the banner ad campaign, but the real business objective is to generate revenue through new purchases.

Treating the email subscriber flow and the e-commerce purchasing flow as two separate conversion funnels is an easy trap. In reality, the experiences are connected, and by looking at them as stacked flows, we can create a more cohesive interaction, one that drives optimal results for the business.

In our example, this stack is made up of the customer acquisition funnel and the customer relationship management (CRM) flow.

Stacking funnels creates a cohesive user experience life cycle.

When designing this flow, you need to consider what the biggest levers are for converting the subscriber into a buyer. Many of the earlier principles apply, but this time you have more touch points to consider and leverage.

In this flow, you need to look at all elements of your CRM strategy and the purchase flow of your website, including:

• Email communication back to the subscriber,
• Pages that the subscriber lands on when returning to the website,
• The flow from internal content pages to check-out.

Here are a few key considerations when designing the flow from subscriber to purchaser:

• Tell a visual story that the subscriber can identify with and wants to be a part of.
• Ensure that your emails reinforce the story, and give proof points to remind users why they subscribed.
• Include compelling calls to action to give the subscriber an opportunity to relate to and be a part of the story.
• Include prominent calls to action and easy, direct paths to the check-out process from the website’s internal content pages and blog posts. These validate the user’s hope about their role in the story.
• Make the check-out process as frictionless as possible, and reinforce confidence along the way to help the buyer commit to being a part of it.

By considering how the two flows interact, you can create a seamless experience that builds confidence and deepens the user’s connection to your website, leading to the ultimate purchase conversion. Equally important, this flow also increases customer satisfaction because the stacked funnels keep the user experience smooth and on track to meeting their needs, with little confusion or ambiguity.

Putting Flow Design To Work For You

Whether you’re mapping out a brand new website or looking to optimize an existing user experience, flow design will keep you out of the trap of designing individual pages and interactions and instead focus you on fulfilling users’ needs. By prioritizing your user flows and focusing on the ones that drive the most value to the most users and to the business, you can make the greatest impact with your initial flow design.

When considering user flows, think past the first conversion, and design for the ultimate conversion, which might lie a few steps behind. This is particularly important with any type of commerce-driven business, for which the first conversion is often just a prelude to the primary revenue event. By stacking these complementary funnels, you create a more cohesive user experience that drives better results for both the user and your business.

So, the next time you’re asked to create a new design, step back and ask yourself and your team what user flows you are trying to create through the website, and let that insight drive the design process.

New High-Quality Free Fonts (2012 Edition) - Smashing Magazine | Smashing Magazine

New High-Quality Free Fonts (2012 Edition) - Smashing Magazine | Smashing Magazine

Every now and then, we look around, select fresh free high-quality fontsand present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don’t have to.

In this selection, we’re pleased to present Homestead, Bree Serif, Levanderia, Valencia, Nomed Font, Carton and other quality fonts. Please note that while most fonts are available for commercial projects, some are for personal use only and are clearly marked as such in their descriptions. Also, please read the licensing agreements carefully before using the fonts; they may change from time to time.

[Editor's note: Have you already got your copy of the Smashing Book #2? The book shares valuable practical insight into design, usability and coding. Have a look at the contents.]

Free Fonts

Homestead
Homestead is a very distinctive Slab Serif typeface that leaves a lasting impression with its geometric forms and a modern, progressive look. The family is available in 6 weights: Regular, Inline Display, One, Two and Three. Released by the Lost Type foundry with the “name-your-price” pricing scheme. Homestead can be used freely for any personal or commercial use.

Bree Serif Regular
This typeface is the serif cousin of the playful, charming and versatile type family Bree which was designed by Veronika Burian and José Scaglione back in 2008. Actually, Bree is also the typeface used in the Smashing Cartoons. An italic font weight of Bree Serif should be available very soon. Released under the liberal OFL license (via Typografie.info).

Lavanderia
Lavanderia is a script font based on lettering found on Laundromat windows of San Francisco’s Mission District. It features numerous OpenType features such as swashes, titling alternates, figures, stylistic alternates, ligatures. It is available in three weights, with Uppercase, Lowercase, Numerals and Punctuation sets. Designed by the talented type designer James T. Edmondson and released by the Lost Type Co-Op foundry. Free for personal and commercial use.

RBNo2
This new gothic sans serif font was inspired by the late 19th century industrial fonts that contained german roots regarding straightness and geometry. Combined with other sans serifs, slab serifs and serif fonts, it catches the eye when used in headlines and short copy texts. Alternate versions turn the font into a perfect partner for modern, technical and contemporary impressions as well as high-quality, luxury and timeless environments. Free to use in commercial and non-commercial projects. Designed by Rene Bieder.

Cassannet
Cassannet is a geometrical art deco typeface available in Regular, Bold and Outline weights, based on lettering seen on Cassandre posters. This typeface contains ligatures, capitals, numbers, small capitals and also titling alternates. You can pay a random amount of money or alternatively send out a tweet or a Facebook post to download the fonts for free.

Valencia
Valencia is a condensed, art-deco inspired typeface that includes five weights, ranging from hairline to black, with matching obliques for each weight. The typeface has a nice corporate vintage look which makes it a great fit for large headlines and prints as well as any collateral or stationery. Valencia’s distinctive appearance stems from its low horizontal crossbars and its full-circle curves. Released by the Lost-Type Co-Op foundry with the “name-your-price” pricing scheme and hence freely available for personal and commercial use.

Jura
Jura is an elegant serif typeface with narrow proportions and distinguishing details. The rounded, wedge-shaped serifs offer a contemporary feel and also achieve to maintain legibility even with its range of small sizes. This typeface is available in four weights: Regular, Italic, Bold and Bold Italic and is available for free download and use.

Nomed Font
Nomed Font is a free typeface that can help you achieve a modern and sophisticated look in your designs. The triangular geometric shapes may be a bit hard to read but that’s exactly the highlight of this particular style, and it makes the typography unique and original.

Carton
This typeface, designed by Nick McCosker, is a strong yet sensitive slab-serif inspired by letterpress. Its sturdy appearance makes it a perfect fit for posters, headings and taglines, in both classic and contemporary contexts. Released by the Lost Type Co-Op under the “name-your-price” pricing scheme.

Novecento (Registration on MyFonts is required!)
This typeface is an uppercase-only font family with some pretty impressive geometric forms that have been inspired by historical European typographic tendencies. It was designed to be used mostly for headlines, visual identities or short sentences — both in big and small sizes. The family contains 471 glyphs and 32 font weights whereas six of the font weights of the wide-version (Light, Book, Normal, Medium, Demibold and Bold) are available for free download and use.

Fjord
Fjord is serif typeface that has specifically been designed for book publications. It is intended to be used in long texts and in relatively small print size. Fjord features sturdy construction, prominent serifs, low-contrast modulation and long elegant ascenders as well as descenders relative to the ‘x’ height. Fjord performs well in sizes starting from 12px and higher; nevertheless, it can also be a distinctive font choice for larger text headlines and in corporate design. This serif typeface include Cyrillic and Greek characters and is available at Google Web Fonts. It has been released under the SIL Open Font License, 1.1. Feel free to take a look at the designer’s free font Armata as well.

Hero
Hero is a crisp geometrical typeface applicable for any type of use: print, Web, logos, posters, booklets. This typeface contains 162 characters and is free for personal and commercial use. Available in the OpenType format for PC and Mac.

Otama e.p.
Here’s a quite confident typeface to use for expensive and fashionable designs. Strong steams and thin serifs shows similarities to the well-known traditional Didot typeface. This typeface is free for personal and commercial use.

Ribbon
This typeface is a geometric display face which includes OpenType features for an alternate alphabet. The family contains sets for Uppercase, Numerals and Punctuation. Released by the Lost Type Co-Op under the “name-your-price” pricing scheme and designed by Dan Gneiding. If you decide to buy the font for $30 or more, you will get a beautiful Ribbon Specimen Book as well.

Movavi
Movavi is a sans serif font that is available only in the font weights Black and Black Italic. Obviously, the typeface wouldn’t work for body copy, but it might work nicely in short headings or “groovy” art works. Available for free download and use on PC and Mac.

Satellite
Satellite is a geometric sans serif font designed by Matt Yow. The typeface can be a great fit for short headlines, short body copy or slogans. Released under the SIL Open Font License.

Open Sans
Open Sans is a very clean font family by Ascender Fonts. It includes ten styles (Light, Regular, Italic, Semibold, Bold, Bold Italic, Extrabold) and each one consists of more than 900 glyphs: Latin, Greek, Cyrillic, many of the regular diacrytic letters as well as “hanging” numbers. Also available at Google Web Fonts and released under the Apache License version 2.

Mosaic Leaf
The glyphs of this expressive typeface are built out of leaves of different sizes. Mosaic Leaf also contains numbers, punctuation and currency symbols. The .zip-package contains PDF, OTF and TTF files; the fonts support Western and Central European encoding, and also Baltic, Nordic and Turkish. The typeface is free to use in commercial and non-commercial projects. Designed and prepared by Lukasz Kulakowski and Zbyszek Czapnik.

Amaranth
Amaranth is a sans serif font family of four basic styles (regular, italic, bold, bold italic) with individually shaped letter forms that makes typeface more playful. Suitable for both Web and print, longer texts and headings. Available at Google Web Fonts and licensed under the SIT OpenType License. Image credit and source: dersven.

Siruca Pictograms
A pictogram open source font made as a part of Siruca signage system designed by Fabrizio Schiavi. The font contains many picograms related to sport, signage, home, social meetings, free time activities and business.

Erler Dingbats
For the first time in the entire history of Unicode standard, the full encoding range for dingbats is now covered by a complete, contemporary quality font. FF Dingbats 2.0 features more than 800 glyphs and is mainly a tool for professional designers and has been created for everyday communication purposes. It includes a wide range of popular symbols and pictograms such as arrows, pens, phones, stars, crosses and checkmarks, plus three sets of cameo figures on round backgrounds. Free of charge. (via fontblog)

FURTHER FREE FONTS

SD Sansimillia
SD Sansimillia is a playful, yet elegant typeface suitable for many different applications. Originally cut for a local advertising brand, SD Sansimillia is inspired by the Antenna Family built by Cyrus Highsmith in 2007 as well as Erik Spiekermann’s FF Din Family cut in 1994. It is issued in regular, bold and black weights.

Mimic Roman
Mimic Roman is a modern sans serif face with evenly balanced strokes and a counter on a slight angle, giving it a 1950s retro look.

Roboto
Roboto Family is a linear sans serif font, available in 8 different styles of which each includes more than 900 glyphs — Greek and Cyrillic, too. This font was designed by Google for Andorid and is licensed under the Google Android License.

Mate
An elegant serif font designed by Eduardo Tunni. This typeface was primarily designed to be used in longer body copies in printed material. It is simple in structure and has sharp as well as generous counter-shapes which create a medium texture that calls for page color. It can also be used as display typography and is available at Google Web Fonts.

Last Click

Shape Type
If you are passionate about typography and have fun experimenting with glyphs, then you will certainly like the rather unusual type-design game created by the interaction designer Mark MacKay. The idea of this JavaScript-based letter-shaping game is simple: you get 10 modified letters from various classic typefaces, and you have to try to make them right by dragging curves along their axes. It’s an engaging way to explore what makes or breaks a glyph.

Font-Bot Project
It is time for your favorite font to stand its ground. The idea is to build robots out of a type face, showcase them and hope others put together a potential opponent. Once there are two font-bots ready to compete against each other, only thing left would be to “let the battle begin!” Participating is not hard, the rules are clear: all robots must be built of type alone (letters A to Z). Let’s see if your font has what it takes to defend its corner. Fight!

FURTHER RESOURCES

• Lost Type Co-Op
  The Lost Type Co-Op is a Pay-What-You-Want Type foundry. Users have the opportunity to pay whatever they like for a font; you can type in ‘$0′ for a free download. 100% of all funds from these sales go directly to the designers of the fonts themselves, respectively.
• The League of Moveable Type
  The open-source type movement for bringing high-quality tyepfaces to the Web. The creators of the project keep releasing quality fonts every now and then so be sure to stay tuned!
• Google Web Fonts
  A growing directory of hundreds of free, open-source fonts optimized for the Web. Google also provides ready-to-use snippets for integrating the fonts to your website.
• Typography and Free Fonts on Smashing Magazine
  An overview of typography-related articles and free font round-ups on Smashing Magazine.

We sincerely appreciate the time and effort of all type designers featured in this post. Please keep in mind that type design is a time-consuming craft which truly deserves reward and support. Please consider supporting type designers who create and release amazing typefaces for all of us to use.