Sites

Exploring Online Shopping Behavior: How website characteristics affect likelihood of purchase and basket value on ecommerce sites

Traditionally, brick-and-mortar stores have displayed their products in their windows, enticing passers-by to come in and learn more, perhaps meet and talk with the owner and other shoppers, and, ultimately, fill their shopping baskets and purchase the goods.

Today’s digital stores (ecommerce websites) are striving to achieve the same goals as their brick-and-mortar counterpbrick-and-mortararts, with varying scopes of products ranging from unprecedented breadth (e.g., Amazon) to narrow specialization (e.g., your local cupcake bakery).

Though ecommerce stores come in a myriad of types, and specific factors influence how customers shop at different websites, they all share one thing in common: Store owners are always on the outlook for some generalizable principles and ideas to test in their specific conditions in hopes of maximizing revenue.

Which website characteristics increase the likelihood that a visitor will make a purchase? And, since shipping costs are a considerable expense, how do you increase the likelihood that a customer will spend more money per shopping session?

Let’s look at a recent study exploring the effects of website characteristics on online shopping behavior and basket value, and how those effects depend on product characteristics.

 

The study

In March 2016, professors Girish Mallapragada of Indiana University, Sandeep R. Chandukala of Singapore Management University and Qing Liu of University of Wisconsin published the results of a study exploring the effects of product and website characteristics on customer shopping behavior and basket value.

The authors analyzed the shopping behaviors of 2,000 consumers over one year, collected from the ComScore Web Behavior Panel. The data encompassed 773,262 browsing sessions and 9,662 purchase transactions at 385 online retailers across 43 product categories.

 

Method

The researchers scored all websites on product variety offered and on two types of functionality: navigation and communication.

Navigation functionality captured the extent to which a website facilitated browsing through content, site maps, layout and updates.

Communication functionality captured the extent to which a website offered communication features such as email, chat rooms and message boards.

They also scored the products on their hedonic and utilitarian characteristics using a previously developed scale.

Hedonic products (e.g., jewelry) would be rated highly on items like “fun,” “exciting” and “delightful.”

Utilitarian products (e.g., office supplies) would be rated highly on characteristics like “effective,” “functional” and “necessary.”

 

Results

Which factors predict likelihood of purchase?

In the browsing stage, the researchers found that the following factors are significantly related to purchase:

  • Previous purchase (previous customers are more likely to buy again)
  • Session duration and page views (more engagement leads to increased likelihood to purchase)
  • Broad scope of products (more variety leads to increased likelihood to purchase)
  • Communication functionality (more communication features lead to decreased likelihood to purchase)

 

Which factors predict higher basket value?

Among the customers who made a purchase, the researchers found that the following factors are significantly related to basket value:

  • Page views (more page views were associated with higher basket value)
  • Session duration (longer sessions were associated with lower basket value)
  • Broad scope of products (more variety associated with higher basket value)
  • Communication functionality (more features associated with lower basket value)
  • Navigational functionality (more features associated with higher basket value)

 

However, the effects of navigational and communication functionality depended on the characteristics of the products consumers were shopping for. Namely:

 

  • Communication functionality lowered basket value for utilitarian products, but not for hedonic products
  • Navigational functionality lowered basket value for hedonic products, but increased basket value for utilitarian products

 

The authors suggest that people buying utilitarian products might be looking for relevant information about the product on the page instead of communication functions, which might be perceived as clutter and add to friction. On the other hand, people buying hedonic products might be looking for self-affirmation through engaging in a dialogue with others and find communication features helpful.

 

Key takeaway

If you are selling utilitarian products, your page might benefit from rich navigational functionality, while if you are selling hedonic products, your page might benefit from rich communication functionality.

In both cases, you want to entice your customers to engage with your pages and check back often, which would ultimately lead to more purchases and higher basket value. Having a variety of products to choose from, and earning the loyalty of returning customers also helps increase the likelihood of purchase and basket value.

 

You might also like

Exploring the Effects of “What” (Product) and “Where” (Website) Characteristics on Online Shopping Behavior [Executive summary from the Journal of Marketing]

Ecommerce Chart: How a low conversion rate can be a good thing [From MarketingSherpa Chart]

B2B Marketing: Customer-focused site design for book ecommerce drives order volume up 211% in three years [From MarketingSherpa Case Study]

Ecommerce Marketing: Time spent on site boosted by 50% with transition from flash sale to retail for fashion site [From MarketingSherpa Case Study]

 


MarketingExperiments Blog: Research-driven optimization, testing, and marketing ideas

How to Leverage Q&A Sites to Generate Traffic

quora

There are many types of sites with which you can generate traffic.

But there’s one in particular that is great for small, and even some medium, sized sites:

question and answer sites (Q&A).

These sites consist solely of users asking questions and other users answering those questions.

Because they are “natural” questions, they contain long tail keywords in most cases.

Because of that, these sites quickly amass search engine traffic in addition to their regular user base traffic.

There are hundreds of Q&A sites out there, but for this post, I’m going to focus on two of the biggest: Quora and Stack Exchange

Yahoo Answers is also large, but it’s not friendly to marketers (links often get deleted), and I find that the quality of the questions and answers is low.

You’ve probably at least heard of or seen Quora by now. It’s about the 140th biggest site in the world:

image09

It covers just about every topic imaginable.

Stack Exchange, on the other hand, has separate mini-Q&A sites for many different topics (mainly related to technology and education).

Like with every traffic generation method, you need a strategy when using these sites.

That’s what I’ll be giving you here: a step-by-step plan to capitalizing on these question and answer sites.

While I’m going to focus on those two here, this strategy will work for just about any Q&A site. So, if you can find a niche-specific Q&A site, you’re set.

Which businesses should drive traffic from Q&A sites? Before we get started, you need to figure out whether these types of sites can work for you.

While you can drive a significant amount of traffic to your website (thousands a month), you’ll be hard-pressed to ever generate truly huge amounts of traffic.

That means that this strategy is best for sites that only get a few thousand visitors a month. To them, this new traffic source will make a big difference.

If that sounds like you, let’s get started.

Step 1: Identify topics, categories, and search phrases

First, know that you won’t be answering the first questions you see—that would be a waste of your time.

Everything you do on these Q&A sites should be to maximize your visitors/time spent ratio.

If you’re answering questions no one cares about, you won’t get many visitors, and that ratio is going to suck.

The ideal questions to answer have a few common factors:

  • They’re not very old – on Quora, the best questions aren’t more than a few hours old. The older the question is, the more other answers you will be competing against.
  • They have a relatively high number of views – if they get more views than other questions, many people must be interested.
  • They have a low number of other answers – the more answers there are, the more likely your answer will get buried at the bottom.

There’s one attribute that ties the 2nd and 3rd factors together.

If many people are interested in a question, why aren’t there many answers?

Because the question is difficult to answer.

It’s important to understand this because you will be tempted to dodge these questions, thinking it’s easier to do a quick answer to a simple question.

But simple questions get tons of answers.

Expect to put some serious work into your answers to these difficult questions. It might take you 15-30 minutes sometimes to answer them, but if you get a few hundred visitors (or thousand), it can be worth it.

I’ll walk you through the steps of finding these questions on both sites.

Finding great questions on Quora: To start, go to your profile. There will be a section called “knows about,” where you can describe your areas of expertise.

In the text area, start typing major keywords (e.g., “marketing”, “SEO”, “jewelry”, etc.) that reflect your niche.

image07

Quora will suggest relevant and popular topics. Choose them, and press “add.”

The more topics you add, the more potential questions there will be to answer, but keep the topics relevant.

Once you’ve done that, click the “Answer” link on the top toolbar.

image03

That generates a list of questions that fit the topics you just chose.

The annoying part about Quora is that you can’t sort the questions.

By default (the only option), the questions are sorted based on an algorithm that considers the posting date and the number of other comments and views.

image02

Your only real option is to scroll through them.

Take a look at the above picture to see what information is available for each question.

As you can see, it’s not perfect, but it’s a good start. For each question, we can determine:

  • the number of answers
  • when the question was asked
  • the number of people following

You can find more useful data inside each question. If you click on any of those titles to go to the question page (with all the answers), you’ll see a “Question Stats” box in the right sidebar.

image14

That box will show you the most important stat we’re looking for: views.

Typically, the views will correspond to the number of followers, but not always, so you should check both.

Now that you know what we’re looking for and where to find it, you just need an efficient process to identify which questions are good.

Here’s a good start:

  • screen out questions that were asked over a day ago
  • screen out questions that have zero followers or fewer than 100 views (this does not apply to very recent questions, of course)
  • screen out questions that already have over 10 answers (you could go lower)

This will leave you with a few good questions to answer. These questions will:

  • be recent
  • have a good amount of interest
  • have little competition (more on this later)

Most Q&A sites are similar: Some Q&A sites, like Stack Exchange, are easier to use for this purpose.

Like I said before, Stack Exchange consists of a ton of mini-Q&A sites divided by topic.

You can find one that’s relevant to your niche using the dropdown menu at the top:

image12

All sites on Stack Exchange can be sorted by tags.

image05

If you click on a tag, you’ll get a list of questions that have been marked with that tag.

That’s not very different from the process we used above. However, you now have the ability to sort these questions by a few different filters:

image10

You can see the filters on the top menu above.

Additionally, Stack Exchange sites show you the number of views right on this page.

You should mainly use the “votes,” “newest,” and “unanswered” filters.

image08

The “votes” filter will sort all posts with your tags according to the number of votes those posts received (indicating interest).

If you see a post with thousands of views but very few answers, you may want to add one. Even if a post is old, it’s likely still getting views from search traffic if it’s this popular.

You’ll want to spend most of your time sorting by “newest.”

You can either jump on questions with no answers yet that you think might get more popular or stick to questions that are a few hours old that already have a good number of views.

It depends on how much time you have available to answer questions.

Step 2: Here’s how to structure answers for maximum effectiveness

Now that you know how to find good questions to answer, the hard work begins.

On most Q&A sites, including Quora and Stack Exchange, answers are ordered by the number of “upvotes” you get.

In theory, the best answer should rise to the top.

This means that your answers have to be the best.

However, you also want to be able to drive traffic to your website.

There are three main methods to do this, but they all hinge on one key criterion of question selection:

Only answer questions related to content you’ve already written about.

Otherwise, there won’t be a natural way to drive traffic back to your site.

Method 1 – A brief answer with a link to a post: Once in awhile, you’ll get lucky and come across a question that you’ve addressed almost perfectly in a past post.

For example, when someone on Quora asked whether content marketing was effective and whether it was worth spending time on over SEO, I had to answer it.

I already had a post that answered this question exactly.

image01

That made my answer simple but credible.

I did provide a brief answer, but I was able to point the person asking the question to a more detailed answer.

In cases like these, your link will fit the situation perfectly, and it won’t seem like you’re trying to jam it in there.

Method 2 – Reference posts in your answer: Most of the time, questions will be on related to your past content issues.

In this case, you’ll have to provide a detailed answer on Quora itself.

It takes a lot more work, but if it gets you a few thousand views, it’s worth it.

As far as the linking goes, just put in 1-3 links to your closely related content whenever it makes sense. You won’t get an amazing click-through rate, but you’ll still drive a good amount of traffic.

Here’s an example of an answer by Eli Rubel, where he cleverly slipped in a link to a blog post about measuring results:

image04

Method 3 – Recommend your product directly: You need to be careful not to spam these sites with promotional links and answers, but if you sell a product, you’ll occasionally get the chance to recommend it directly.

The key is to do it in a transparent and authentic way.

Start with a disclaimer saying who you are. Here’s an example answer:

image00

The key thing to keep in mind is that your answer still has to be valuable if you want it to get upvoted.

So, if someone asks for a product that lets them do “x, y, z,” make sure you explain in great detail all the ways your product helps them accomplish those tasks.

Point out honestly where your product is strong as well as where it’s weak because readers will appreciate it.

While these questions don’t typically get as many views as others, they can lead directly to sales, which makes them much more valuable.

Step 3: Track and modify your approach

The final thing you need to do is track your results to determine whether answering questions is worth your time.

Overall, this is a simple 2-step process.

Fair warning: your first 5-10 answers probably won’t do very well. You’ll quickly learn what does and doesn’t work on the Q&A site you chose to start with.

Track (1) the time you spend on each answer and (2) the number of visitors you get from that time (even better—conversions).

You can track views directly on the Q&A site, but views to your actual website are more important.

In Google Analytics, go to “Acquisition > Overview > All Traffic > Referrals” in the left side bar:

image06

You’ll get a list of all the different sites that referred visitors to your site, hopefully including your Q&A site:

image13

Next, you can click on that site in particular, and you’ll see a list of the pages that it sent traffic to:

image11

Give each post at least a week to see what kind of traffic it is driving (both immediately and on a consistent basis).

Once you have a sample size of at least 20-30 questions, you have enough information to determine whether using Q&A sites is an effective traffic generation strategy for your business.

It usually will be if you’re good at picking questions and getting top answers, but in some industries it will be harder than others. That’s why you need to measure and evaluate your results.

Conclusion

Q&A sites present a huge opportunity for marketers looking to grow smaller sites—even if using them isn’t scalable.

I’ve shown you a simple but effective 3-step process that works on almost any Q&A site.

If you’re still with me at this point, chances are that one (or more) Q&A site might be a great traffic driver for your business.

Start by using this process to answer at least 20 questions, and adjust the process from there if needed.

If you still have questions about how to drive traffic using Q&A sites, now is the time to ask. Leave your questions below in a comment, and I’ll try to answer them.


Quick Sprout

The 10 Premium Design Resource Sites You Need To Know About

There’s nothing that can make a designer happier than a good deal on graphic design resources. Despite the wide spectrum of excellent freebies out there, there’s a certain joy of purchasing your little own crisp texture or spending your last pocket money on a fresh icon set. Creating a quality design is all about being stylish and preserving a unique layout while following the client’s guidelines. Keeping up with the latest design trends is hardly achievable when relying on a small range of free resources. There is a large amount of beautiful graphics collections around the web which are offered for both personal and commercial use in return of a humble mention. Yet, uniqueness is not among the prime qualities of free design resources. This is why more and more creatives have started relying on premium graphic resources for their design projects.

Premium Design Resource List

Those, who have embarked in the endless journey of finding quality graphic resources can agree with us that spotting a quality resource for premium designs can be a rather difficult task. This is why we scooped the internet to present you the web’s best guide to premium graphic design resources.

ZippyPixels

Source: ZippyPixels

ZippyPixels

This lovely website offers a wide spectrum of graphic design resources which go from pixel-perfect freebies to top-class premium graphics. In ZippyPixels, you can find everything from print, to mockups, Web, and mobile design.

 

PixelBuddah

Source: PixelBuddah

PixelBuddah

PixelBuddah is one of designers’ most loved graphic resource hub for its wide array of free resources and an excellent selection of premium graphic resources. The site offers everything from crisp icon sets to beautiful UI templates and even web design tool-kits.

 

MediaLoot

Source: MediaLoot

MediaLoot

Ridiculously cheap and yet marvelously well-designed, the graphic products offered at MediaLoot should not be missed by anyone who considers himself a design resource know-it-all. As an addition to its shop, the site offers lots of free design resources from mock-ups to textures, which can be used in personal projects, however, a purchase is mandatory if the graphic is intended to be used as a part of a commercial graphic project.

 

GraphicsRiver

Source: GraphicsRiver

GraphicsRiver

Needless to mention, graphics river is the one-stop-shop for all things raster and vector graphics. This Envato-owned graphic marketplace has made it to the top of many resource list and has been recognized numerous amounts of times as a leader in the design resource industry.

 

LetterHeadSource: LetterHead

LetterheadFonts

If you want to make an impact with a bold font, this vintage-inspired letterhead resource blog can offer you everything you need. LetterheadFonts has a wide selection of sophisticated font styles. Each typeface is promised to give your design a touch of whimsical beauty.

 

IconFinder

Source: IconFinder

IconFinder

Despite the wide variety of free icons offered over websites such as Flaticon, IconFinder brings a great alternative to the icons market. Choose among some of the best icon sets, offered on the web, and filter your findings by type, license, and style.

 

AlienValley

Source: AlienValley

AlienValley

If you want to get an awesome graphics bundle for half the original price of the items, AlienValley is the place to go. The team offers a vast amount of graphics resources to suit every designer’s needs. Everything, from fonts to logo sets and watercolor elements, can be found on over AlienValley.

 

Arsenal

Source: GoMedia Arsenal

Arsenal GoMedia

Offering one of the broadest collections of graphic design resources, Arsenal GoMedia can amaze you with a set of design materials you’d hardly find anywhere over the web. Get excellent textures, rendered images, text styles and many more and pay a visit to GoMedia today.

 

WebDesignDepot

Source: WebDesignDepot

WebDesignDepot

Get ready for another set of premium quality design resources. WebDesignDepot is among the prime competitors for the top 10 premium design resource websites and it’s there for a reason. The site offers a great amount of special deals and tasty discounts which are truly hard to resist.

 

GraphicsBurger

Source: GraphicsBurger

GraphicsBurger

Preceded by Feepik, it’s safe to say that GraphicsBurger is probably the world’s most popular design freebie website. It offers an enormous amount of design resources to suit every need and style choice and its Deals section features the best of the best in web and print design.

 

The post The 10 Premium Design Resource Sites You Need To Know About appeared first on SpyreStudios.


SpyreStudios

Move Along…. Inspirational Horizontal Scrolling Sites

The majority of sites we encounter are vertical scrolling, so coming across a horizontal scrolling site can be like a breath of fresh air – if they work well. Horizontal scrolling has never really been in trend, but since the first such sites a few years ago, they have not really gone out of trend either. Horizontal scrolling sites are a good way of displaying galleries, and also of using your site to tell a story – but as you will see from this collection, all types of sites can effectively use horizontal scrolling.

Horizontal Scrolling in Web Design

Pretty Production

This site is fairly content-heavy, but still manages to appear quite minimal. Using a gray background and splashes of bright colors in the illustrations. Navigation across the site is either by the slider at the bottom of the page, or the category menu at the top.

Pretty Production

SectionSeven

This design and development agency uses a card-style layout for its horizonal site. Navigation is achieved simply by moving the mouse to the right or left of the screen. Hovering over any category makes it enlarge slightly, so looking like it has moved forward from the others.

SectionSeven

Samuel Esteves

Scrolling across this site reveals the gallery of this photographer. Navigation is achieved by either scrolling down with the mouse wheel, or dragging the slider on the right of the screen.

Samuel Esteves

Gudang Damansara

This site showcases the work of a group of individuals with a passion for design and craftsmanship. Navigation is either via the right and left arrows at either side of the screen, or my the navigation menu at the bottom of the page.

Gudang Damansara

Lorenzo Bocchi

The portfolio site of designer Lorenzo Bocchi uses a card style horizontal layout with a heavy black transparency over the images. Hovering the cursor over any ‘card’ brings it into full color with a link to ‘view the project’. Clicking on the hamburger menu button in the top left corner makes the menu slide out from the left. Navigation is either by scrolling the mouse wheel or using the slider at the bottom of the page.

Lorenzo Bocchi

Costume National Scents

This eCommerce site sells a variety of fragrances. Scrolling across the site brings each scent bottle into focus with an abstract splash of watercolor paint effect behind it. Navigation is achieved either by scrolling with the mouse wheel or clicking on the navigation dots at the bottom of the page.

Costume National Scents

Guillaume Juvenet

Another portfolio site – this time the showcase of a young developer. This site opens with the outline illustration being ‘drawn’. A small section of ‘code’ on each page shows information and links – on the ‘Skills’ page, you are asked to type ‘/list’ if you wish to view the list of skills.

Guillaume Juvenet

James Joyce

James Joyce is a British artist and designer. This site is a showcase of some of his works, and if you look at his profile you will see some of the very big names he has worked for. Hovering the mouse over any image will give details about the design/art. Navigation across this gallery is via the slider at the bottom of the page.

James Joyce

C.L. Holloway

This artist has covered every angle of navigation on his gallery site. You can view the gallery by hovering the mouse over the right and left arrows towards the bottom of the screen – although the page moves very quickly using this method, you can use the slider at the bottom of the page, or you can use the links in the navigation menu at the top of the page.

C. L. Holloway

WWF Earth Hour 2012

Although this WWF event is way past, the site is still available and the information still relevant. This is all about the food we eat. Navigation is via the Start button, then the Next and Back buttons on subsequent pages.

WWF Earth Hour 2012

Hot Dot

This web development agency uses a very dark background of a geometric pattern, and as you scroll across the site images float across the background. Navigation on this site is by scrolling the mouse wheel.

Hot Dot

This Year in Hashtags

This site looks at some of the popular hashtags of 2014 that have been visualized by various artists. You can navigate this site by scrolling the wheel on the mouse, but it is very slow. Dragging the diamond shape towards the bottom of the screen is a better method.

This Year in Hashtags

The Bright Future of Car Sharing

This site has been around for a long time. It is almost an infographic about the advantages of car sharing in the US, with lots of facts and figures. Navigation is achieved via the slider at the bottom of the page.

The Bright Future of Car Sharing

Dean Oakley

This designer and developer uses true parallax scrolling on this site, but unusually, it is horizontal. The illustration at the bottom of the screen and the clouds all remain static as the content scrolls across.

Dean Oakley

Volkswagen Electrique

This site promoting Volkswagen’s electric cars to the French audience uses a photo of the car in the center and landscape illustrations surrounding it. Navigation is either via the arrows center right and left of the screen, or by clicking on the dots towards the bottom of the screen.

Volkswagen Electrique

Q + H London

This design agency uses a grid style layout to showcase it’s works. Hovering the mouse over any image covers it with a white transparency with black headline text. Scrolling across the gallery is achieved with the mouse wheel.

Q + H London

The Mobile Playbook

This is a Google project, and is a book designed to be read on mobile devices, but it works well for this article too! Scrolling (on desktop) is by the mouse wheel, by dragging the slider at the bottom of the page, or by holding and dragging the arrows right and left of each page.

The Mobile Playbook

Lois Jeans

Each page of this site has one link amongst the images – and that image has a red transparency over it. With static images and videos on each page, this is a great example of both horizontal scrolling and general web design.

Lois Jeans

Anders Drage

This portfolio site uses horizontal scrolling that just goes round and around – the opening ‘about’ statement never appears again, it is replaced with a ‘thank you for visiting my portfolio’ comment.

Anders Drage

Roadtrips, South Australia

This site outlines the details of 5 roadtrips across South Australia. You can either use the small arrow along the top navigation bar (this starts a slideshow which can be stopped again), or the top navigation bar itself, you can scroll the mouse wheel or use the left and right arrows to navigate this site.

Roadtrips, South Australia

Conclusion

Most horizontal scrolling sites are inspirational in one way or another – maybe some give inspiration on how NOT to do it, but I think this collection definitely show just how to do it correctly and effectively – the navigation of the sites differ, and some make absolutely sure that you can find your way across their site by offering two, three or even four methods of doing so.

Have you created a horizontal scrolling site? Do you think this type of design will ever fully trend or will ever go completely out of style? Please share your links and opinions with us in the comments section below.


Onextrapixel – Web Design and Development Online Magazine

How to Get the Big Picture of Your Site’s User Experience — A Three-Step Approach

This is a sponsored post via Syndicate Ads.

Imagine you’re playing a game of chess. You first need to evaluate the whole board before you can make your next move. The same goes for your website’s user experience. To change a page or launch a test, you need to first understand the ‘Big Picture’ of what’s happening when users interact with your site.

There are many tools that help us get part of the big picture. Unfortunately, most of them are disconnected, leaving a big piece of the puzzle unsolved. What’s missing is a way to bring together the three crucial parts of the user experience: Drivers, Barriers and Hooks. In this post, we’ll explain how to find the Drivers, Barriers and Hooks for your own site and how having this information will generate the biggest impact on your site’s performance. We will use Hotjar, an all-in-one analytics and feedback tool, as an example for acquiring this information.

Drivers

Drivers tell you what is bringing visitors to your site. What are they looking for? Why do they want it? When you know the answers to these two questions, you’re loaded with some pretty powerful insights. Using Polls and Surveys, such as the ones within Hotjar, you can ask visitors to describe in their own words what they are looking for. You can then use these exact words on your site, allowing visitors to better connect with your content, interface, and experience.

Having this rich context, you can begin prioritizing the right selling points higher on your pages and you may even uncover new and unexpected channels for growth.

An example of a Driver in action:

  • Visitors on an e-commerce site selling headphones mentioned they read about the product on a music forum. This led to the discovery of very targeted advertising on music-related forums.

Barriers

Barriers show you where and why visitors abandon your site. By identifying specific barriers, you can stop changing button colors and page layouts “just because” and start focusing on your real barriers.

An example of a Barrier in action:

  • A SaaS company discovered that they were losing the majority of their visitors on their checkout page due to lack of trust in the brand. They boosted trust by placing customer reviews and ‘featured in’ logos higher up on the page.

With Heatmaps, Visitor Playback and Funnel Analytics from an all-in-one tool like Hotjar, you can quickly see the most impactful barriers and begin taking action on them.

Hooks

Hooks explain what persuaded users to act. Why are they buying from you? Are they just buying your product or service or are they actually buying into a new lifestyle? Knowing what motivates them is the fastest way to convert more visitors and can help you understand what will keep them coming back for more.

An example of a Hook in action:

  • Players on a gaming site were mainly interested in fun and social interaction – not just winning money. Adjusting site content to match this expectation had a huge impact on signup rates.

Designers can utilize Polls, Surveys and Real User Testing through Hotjar to ask these exact questions and reveal top opportunities for improvement and growth.

Piecing it All Together

Piecing it All Together

Knowing the three most important factors that boost website conversions and having the tools that give you this rich context will allow you to focus on the most pressing aspects of your site’s user experience. Even better — gathering all this information on one simple platform means less time making changes in the dark and more time adding real business value. What do you think your site’s biggest Drivers, Barriers and Hooks will be?


Onextrapixel – Web Design and Development Online Magazine

Sites for Browsing Type Pairings

Last weekend we did a post on Sites with High Quality Photos and it ended up being a kinda perfect fun weekend thing. Nothing you have to think too hard about, just enjoy. So let’s keep in that tradition a little bit! Why not! This week we’ll do sites that are intended to help you choose fonts for your website by showcasing nice pairings (as not any two typefaces necessarily go together well).

Typewolf

Typewolf helps designers choose the perfect font for their next design project. This site is an independent typography resource that features typefaces from all type foundries.

Font Pair

Font Pair helps designers pair Google Fonts together.

Google Web Fonts Typographic Project

There are over 650 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites.

Beautiful Web Type

A showcase of the best typefaces from the Google web fonts directory.

There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action.

Fonts In Use

An independent archive of typography.

Typekit Design Gallery

A collection of sites we like using fonts from Typekit

Typekit also has Typekit Practice featuring lessons like Selecting Typefaces for body text.

Discover.typography

From the designers at H&Co.

They also have a nice article Four Techniques for Combining Fonts that is simple and straightforward.

Palettab

Palettab is a chrome extension to help you discover new fonts and awesome color collections every time you hit the new tab button.

Font Pairings on Pinterest

I Font You

Type Connection

Start by choosing a typeface to pair. Like a conventional dating website, Type Connection presents you with potential “dates” for each main character—without the misleading profile photos and commitment-phobes. The game features well-known, workhorse typefaces and portrays each as a character searching for love. You are the matchmaker. You decide what kind of match to look for by choosing among several strategies for combining typefaces. Along the way, you explore typographic terminology, type history, and more. By playing Type Connection, you deepen your own connection with type.

Type Genius

Find the perfect font combo for your next project.

Typ.io

We’re revealing designers’ decisions for all to see; peeking under the hood of beautiful websites to find out what fonts they’re using and how they’re using them.

Ultimately, we want to know what font goes with what?

Mixing Typefaces (PDF)

Typestyles that are close in design, but not from the same family create a visual discordance. Our sensibilities seem to require either strong typographic contrast—or none at all. To some degree this has even been proven in legibility studies. Researchers have found that typefaces and typographic arrangements which are pleasing to the eye are also the most legible. Unlike color combinations that can benefit from subtle contrast, typeface changes need to be obvious.

Font Shop “Great Pairs”

Just My Type

A collection of font pairings from Typekit and H&Co.


Sites for Browsing Type Pairings is a post from CSS-Tricks

CSS-Tricks

Sites with High Quality Photos You Can Use for Free

I’ve been keeping a list like this around for a while, and the CSS-Tricks Staff just added a bunch of new links to it, so I figured HEY that sounds like fun little weekend post. There are so many of these it’s really no excuse to have crappy photos in the work you do, be it websites, presentations, print work, whatever.

New Old Stock

Vintage photos from the public archives. Free of known copyright restrictions.

Unsplash

Free (do whatever you want) high-resolution photos. 10 new photos every 10 days.

Also, I think re:splashed is the same photos with a different interface? Not sure.

Flickr Commons

The key goal of The Commons is to share hidden treasures from the world’s public photography archives.

Cupcake

A photographer’s treat by Jonas Nilsson Lee. Free (do what ever you want) photos.

Jay Mantri

Free pics. Do anything (CC0). Make magic. 7 new photos every Thursday.

Magdeleine

Hand-picked free photos for your inspiration.

MMT

Free for commercial use stock photos by Jeffrey Betts. CC0 license. New photos every week.

JÉSHOOTS

JÉSHOOTS I founded because they like to take pictures and it’s a shame some photos withhold the entire world for free, all designers, all working with photos, for those who need a thematic photo free.

ISO Republic

High-quality, free photos for creatives

FuriousCamera

Free Life Hi-Fi Photos. You can use on your personal and commercial projects. New photo every day.

Realistic Shots

Free stock photos (high resolution) for personal and commercial use. 7 new photos every week. Just make something creative!

Free Nature Stock

Royalty-free Nature Stock Photos. Use them however you want. Updated daily.

NOBL WEB

Free (do as you please), high-resolution photos and textures.

Bara Art

Free high resolution photos for your personal and even commercial projects!

FancyCrave

Royalty free high resolution images for your personal and commercial projects.

Freely Photos

Totally free high quality Christian stock photography All photos are published under the amazing ‘CC0 license’. Do what you want with them!

Barn Images

Barn Images offers you a collection of free high-resolution stock photography.

Trunklog

I’ve had a lot of pictures that I never used for a long time, but hopefully, you will find them useful. Feel free to browse and download any photo for personal or commercial use. You don’t have to notify or credit me if you use one of my pics, but I’ll be happy if you do.

Little Visuals

The author of this site, Nic, suddenly died. The archive of free photos is still online, though, and the site has more information and a way to donate.

Death to the Stock Photo

About a year ago we noticed an less-than-awesome industry pattern: too many extraordinary brands, bloggers, and creatives struggled to find images that fit their vibe + tribe. Turns out, the solution lay on our laptops. We had files upon files of our own photos gathering dust. We figured: why not spread ’em around?

Superfamous Images

The Superfamous Images are available under the conditions of a Creative Commons Attribution 3.0 license. This means that you can use the work for your own purposes as long as credit is provided.

The Pattern Library

Gratisography

Free high-resolution pictures you can use on your personal and commercial projects.

Foodies Feed

Picography

Free hi-resolution photos. Use them however you like.

raumrot

Free handpicked stock photos for your commercial and personal works.

More!

  • A lot of stock photo sites have a “free photo of the day” – so look for that. Doesn’t hurt to have a Dropbox folder full of design resources!
  • Google Images has a way to filter search results by license:

  • IM Free: A curated collection of free resources, all for commercial use.
  • Stock Up

If you know of some more good ones, drop them in the comments.


Sites with High Quality Photos You Can Use for Free is a post from CSS-Tricks

CSS-Tricks

Official Movie Website Design – Promotional Sites of Recent Movies

Marketing is a huge part of a new movie’s budget, and in the past the promotors had to rely on billboard advertising and TV and cinema advertising. These days it is unusual if a movie does not have its own dedicated official website as part of the marketing campaign, and these sites generally offer movie trailers and teasers, a synopsis and a list of cast and crew members.

Sometimes there are poster or wallpaper downloads, and even games and activities can be included, particularly on the sites for children’s films. The production of a website probably uses a minimal part of the marketing budget, but is no doubt one of the best marketing tools, so it is important that the site is well designed in all aspects. And official movie sites have not been left behind in keeping up with current trends – you can find a lot of trends utilized in these sites. Here is a selection of 20 official websites of movies that have already been released, or will be soon – we are looking at films released in late 2014 or early 2015.

Official Movie Websites

The Boy Next Door

When this site opens, you will see a very short trailer of the film, followed by the option to purchase tickets through two outlets, then a promotional grid of images of some TV episodes of Unbroken and Game of Thrones – this pop-up can be closed down to reveal the actual site for The Boy Next Door. The complete hero area – the white section with headline text and the blue navigation menu – remains static as you scroll down the page.

Here is the short synopsis from IMDb: ‘Shortly after her divorce, a woman falls for a younger man who just moved in across the street, though their torrid affair takes an obsessive, dangerous turn.’ The film stars Jennifer Lopez and Ryan Guzman.

The Boy Next Door

Mortdecai

Quite unusually, this site does not open with the movie trailer playing. A quite retro/vintage design sets the scene for this comedy film.

Here is the short synopsis from IMDb: ‘Juggling angry Russians, the British Mi5, and an international terrorist, debonair art dealer and part time rogue Charlie Mortdecai races to recover a stolen painting rumored to contain a code that leads to lost Nazi gold.’ Starring Johnny Depp and Gwyneth Paltrow.

Mortdecai

Strange Magic

As you would probably expect, this Disney movie’s home page is an amazing illustration. The trailer video is playing in the center, and when you land on this page you are at the bottom of the page – the only reason I can think of for that is that the navigation menu is placed at the bottom.

Here is the short synopsis from IMDb: ‘Goblins, elves, fairies and imps, and their misadventures sparked by the battle over a powerful potion.’ Starring the voices of Evan Rachel Wood and Elijah Kelley.

Strange Magic

Cake

This landing page starts with a pop up video trailer of the movie. When you close that pop up, the site is presented in very light, pastel colors with a dreamy tone.

Here is the short synopsis from IMDb: ‘Claire becomes fascinated by the suicide of a woman in her chronic pain support group while grappling with her own, very raw personal tragedy.’ Starring Jennifer Aniston and Adriana Barraza.

Cake

Selma

The landing page of this site has a slide show of very, very short clips from the film with a patterned transparency over each. They use a ‘hamburger’ menu button that drops the menu down over the map on the left side of the page.

Here is the short synopsis from IMDb: ‘A chronicle of Martin Luther King’s campaign to secure equal voting rights via an epic march from Selma to Montgomery, Alabama in 1965.’ Starring David Oyelowo and Carmen Ejogo.

Selma

Into The Woods

Another Disney film, but not animated in this case, so the site is presented very differently from the Strange Magic site. The home page has panels of images of each of the main characters in the film that expand on mouseover, revealing the actor’s name, a quote and the character’s name. They are:

  • Meryl Streep – ‘It’s not what I wish. It’s what you wish.’ – The Witch
  • Emily Blunt – ‘All will come to a happy end.’ – The Baker’s Wife
  • James Corden – ‘If we’re going to get through this we have to stick together.’ – The Baker
  • Anna Kendrick – ‘If you loved me, why would you stray?’ – Cinderella
  • Chris Pine – ‘I was raised to be charming, not sincere.’ – The Prince
  • Mackenzie Mauzy – ‘I am no longer a child, I wish to see the world.’ – Rapunzel
  • Lilla Crawford – ‘Maybe I shouldn’t have strayed from the path.’ – Little Red
  • Johnny Depp – ‘What’s your rush? You’re missing all the flowers.’ – The Wolf

Here is the short synopsis from IMDb: ‘A witch tasks a childless baker and his wife with procuring magical items from classic fairy tales to reverse the curse put on their family tree.’

Into The Woods

The Hobbit – The Battle of the Five Armies

This site has a slideshow of 3 different shots from the film, all of which are downloadable as posters. The navigation menu is in white text over the images on the left side of the screen. If you are really into The Hobbit movies, you can even create your own wallpaper from this site. You are offered a choice of desktop wallpaper, mobile wallpaper, profile icon, Facebook cover, Twitter skin or Pinterest image, then you scroll the image into the provided frame as required. You are then offered the option of adding the logo or not, then you can download the result.

Here is the short synopsis from IMDb: ‘Bilbo and Company are forced to engage in a war against an array of combatants and keep the Lonely Mountain from falling into the hands of a rising darkness.’ Starring Ian McKellen and Martin Freeman.

The Hobbit - The Battle of the Five Armies

Jupiter Ascending

Unusually, this site does not offer any video trailers. A beautiful, slightly animated large image greets you on the landing page, with a navigation menu across the top and social media links at the bottom. This is a slow loading and slow page-changing site.

Here is the short synopsis from IMDb: ‘In the future, a young destitute human woman gets targeted for assassination by the Queen of the Universe, and begins her destiny to finish the Queen’s reign.’ Starring Mila Kunis and Channing Tatum.

Jupiter Ascending

Kingsman: The Secret Service

As we have come to expect, this site opens with a video of short clips from the film that you can close down. There is a navigation menu at the top of the page and three call-to-action ghost buttons towards the bottom of the page.

Here is the short synopsis from IMDb: ‘A veteran secret agent takes a young upstart under his wing.’ Starring Colin Firth and Taron Egerton.

Kingsman The Secret Service

The Last Five Years

This is a very differently presented movie site with huge, bright orange social media buttons at the top of the page, and a pieced-together image with the title of the film and the tagline: ‘There are two sides to every love story’. It is a simple, one-page site with the opening date and a video trailer with call-to-action buttons in bright yellow and orange to ‘Join Our Newsletter’ and ‘Subscribe”.

Here is the short synopsis from IMDb: ‘Based on the musical, a struggling actress and her novelist lover each illustrate the struggle and deconstruction of their love affair.’ Starring Anna Kendrick and Jeremy Jordan.

The Last Five Years

The Boxtrolls

Although this film was released last year, the site is still available. With a slightly animated illustration, grungy-style navigation bar and call-to-action buttons and a font very similar to that used for The Nightmare Before Christmas – many years ago!

Here is the short synopsis from IMDb: ‘A young orphaned boy raised by underground cave-dwelling trash collectors tries to save his friends from an evil exterminator. Based on the children’s novel ‘Here Be Monsters’ by Alan Snow.’ Starring the voices of Ben Kingsley and Jared Harris.

The Boxtrolls

American Sniper

This site opens showing the video trailer which you can close via the word ‘close’ at the top of the screen. The menu is very discreet and placed at the top left of the screen with just one short line beside it. Hovering over the word reveals the drop-down menu in very small text, dark gray until you place the cursor over the category when it becomes black.

Here is the short synopsis from IMDb: ‘Navy SEAL sniper Chris Kyle’s pinpoint accuracy saves countless lives on the battlefield and turns him into a legend. Back home to his wife and kids after four tours of duty, however, Chris finds that it is the war he can’t leave behind.’ Starring Bradley Cooper and Sienna Miller.

American Sniper

Paddington

This firm favorite story among children has been a long time in the re-make! The site is clearly aimed toward children and uses large blocks of quite bright colors as you scroll down the site, there are widescreen images and posters available for download.

Here is the short synopsis from IMDb: ‘A young Peruvian bear travels to London in search of a home. Finding himself lost and alone at Paddington Station, he meets the kindly Brown family, who offer him a temporary haven.’ Starring Hugh Bonneville, Sally Hawkins and the voice of Ben Wishaw.

Paddington

Night at the Museum – Secret of the Tomb

The third in the Night at the Museum series of films, and the last film featuring the late Robin Williams. The site includes some games and activities for children, as well as widescreen image downloads.

Here is the short synopsis from IMDb: ‘Larry spans the globe, uniting favorite and new characters while embarking on an epic quest to save the magic before it is gone forever.’ Starring Ben Stiller and Owen Wilson.

Night at the Museum - Secret of  the Tomb

The Hunger Games – Mockingjay Part 1

This site uses a large hero area with a full width image and gold text, and the rest of the page, as you scroll down is presented in a blog-style format with white body area on a black background. For a movie site, this is really quite minimal and certainly easy to find whatever you may be looking for.

Here is the short synopsis from IMDb: ‘Katniss Everdeen is in District 13 after she shatters the games forever. Under the leadership of President Coin and the advice of her trusted friends, Katniss spreads her wings as she fights to save Peeta and a nation moved by her courage.’ Starring Jennifer Lawrence and Josh Hutcherson.

The Hunger Games - Mockingjay Part 1

The Theory of Everything

This is a very understated design for an official movie site. A montage of two images on a white background with some press comments at the top right, the stars, the title, the tagline, the navigation menu and finally the trailers offered in a small slide show, and that’s it!

Here is the short synopsis from IMDb: ‘The relationship between the famous physicist Stephen Hawking and his wife.’ Starring Eddie Redmayne and Felicity Jones.

The Theory of Everything

The Woman in Black – Angel of Death

The site representing this horror film has a suitably spooky full screen image on the landing page. The woman on the stairs has a bride shadow that is immediately unsettling. As you scroll down the site is presented in a grid-style layout in mainly black and white.

Here is the short synopsis from IMDb: ’40 years after the first haunting at Eel Marsh House, a group of children evacuated from WWII London arrive, awakening the house’s darkest inhabitant.’ Starring Helen McCrory and Jeremy Irvine.

The Woman In Black - Angel of Death

Interstellar

This space-age movie site has a large image slide show on the landing page using stills from the film. There is the navigation menu on the left of the screen that includes a selection of wallpaper for different devices and FB covers for download, a ‘Solar System Creator’, ‘Endurance Space Explorer’, ‘Patch Creator’ and ‘Test Flight’.

Here is the short synopsis from IMDb: ‘A team of explorers travel through a wormhole in an attempt to ensure humanity’s survival.’ Starring Matthew McConaughey and Anne Hathaway.

Interstellar

Exodus – Gods and Kings

This site uses a full screen slide show of short clips from the movie on the landing page. There is a ghost call-to-action button in the center of the screen and a triangular transparency at the bottom of the image with links to the trailer and the soundtrack. This site offers a selection of poster downloads.

Here is the short synopsis from IMDb: ‘The defiant leader Moses rises up against the Egyptian Pharaoh Ramses, setting 600,000 slaves on a monumental journey of escape from Egypt and its terrifying cycle of deadly plagues.’ Starring Christian Bale and Joel Edgerton.

Exodus - Gods and Kings

Top Five

This site has a navigation menu on the left side that is white text on a black background, and a grid layout of thumbnail images of stills from the movie on the rest of the page. These images are not links, but they all have a purple transparency overlay. You are offered to create your top five (of anything) and share it.

Here is the short synopsis from IMDb: ‘A comedian tries to make it as a serious actor when his reality-TV star fiancée talks him into broadcasting their wedding on her TV show.’ Starring Chris Rock and Rosario Dawson.

Top Five

Conclusion

These are just a selection of official movie sites. Some current or forthcoming movies didn’t make it into this list for a couple of reasons. Firstly, if they weren’t different or amazingly stunning, and secondly and very frustratingly, some official movie sites are not available to me in English as I am based in Spain – with a Spanish IP address – it is surprising in this day and age that some sites don’t offer a choice of language – especially when the original site is the one I wish to view!

Have you ever used movie sites for inspiration? Do you think they are inspirational for website design in other markets? Please share your thoughts and links with us in the section below.


Onextrapixel – Web Design and Development Online Magazine

The Best Crowdsourcing Sites for Clients and Designers

Crowdsourcing is a term that was coined in 2005 and it is defined as the division of labor. In relative terms for freelancers, it is an opportunity to make money, and from the client’s perspective, it is an opportunity to save money. Crowdsourcing sites offer jobs requested by clients, and freelancers vie for the chance to take the project on. The client can then choose to hire one or more freelancer to fulfill his requirements. From the point of view of the client, it means they don’t have to employ designers and developers, and they can get the best designs most suited to their business at a fair price.

From the point of view of the freelancer, they get paid quickly, and the better the freelancer performs, the higher rates he can charge. The freelancer does not necessarily need years of experience to gain projects, and participating in crowdsourcing will expand and enhance a new freelancer’s portfolio. So as it would seem that there are no losers with crowdsourcing, we are bringing you the best sites to sign up with and compete for work.

Crowdsourcing Sites

DesignContest

DesignContest is a crowdsourcing online platform you can access any time you need a professional design. All you have to do is to fill the brief, then the DesignContest team will take care of the rest. Once the design is provided, you just need to review and claim changes. Designers add their artworks and the client picks the winner.

DesignContest

Benefits:

  • Low fees, higher prizes for the winner
  • Free consultations via chat, phone or email
  • 100% money back guarantee
  • 75+ designs for 1 contest
  • Opportunity to hire a designer in 1-on-1 project
  • Responsive interface
  • Here you pay in your local currency

For partners there is an efficient affiliate program. Joining as a designer can be achieved through the ‘Designers Join Us‘ link in the footer.

Zillion Designs

Zillion Designs, formerly MycroBurst, offer a range of designs, including logos, web page templates, stationery and more.

Zillion Designs

Their process is via an easy 5-step route:

  • Select a service
  • Name a price
  • Write a creative brief
  • Give feedback
  • Pick a winning design

This site seems to lean more towards the client, it is not immediately obvious how to sign up as a designer – you need to visit the FAQs for Designers page.

Choosa

Choosa is a design crowdsourcing website founded in Buenos Aires, Argentina.

Choosa

Choosa offers a similar service to most other crowdsourcing site in 3 steps:

  • Post Your Design Contest: Use the online design brief to describe what you need and how much you wish to pay.
  • Provide Feedback to Designers: As designers submit concepts, you are encouraged to supply feedback to achieve your exact requirements
  • Choose Your Favorite Design: Once the contest deadline is reached, the client selects the winning entry, pays the designer and will then receive the design and copyright to the original artwork.

99designs

This Spanish site is one of the longest-standing crowdsourcing sites. They offer set packages for contests, ranging from $ 249 to $ 999.

99designs

  • Build a designer brief using the online form
  • Choose a design package: Bronze, Silver, Gold or Platinum
  • Launch your contest that will be visible to 976,000+ designers
  • Give feedback when the designers submit their concepts
  • Pick the winner

There is a link to ‘Become a designer’ in the footer of this site – no searching for the link here.

Microlancer

This Envato Studio site works a little differently to the others in this article. With this plan you choose a designer to work with. You also have to pay up front here, and Envato hold your payment until the job is completed.

Microlancer

  • Find the Talent You Need: Compare prices, portfolios, community recommendations and more to select the best designer for your project.
  • Supply Your Brief: Provide a job brief for the designer to review – this is where you have to make payment to Envato.
  • Manage Your Job Online: Share files and feedback through Envato’s job management tools.
  • Approve Job: Once you are happy with the work, you need to approve the job and you will receive the files and the designer will receive payment.

Conclusion

As with all buying and selling sites, the crowdsourcing site that meets your requirements in the best way possible for you. In this round-up we have selected a few such sites than bring slight differences in their service – which may just be the tipping point for your project requirements.

As a designer, it is also necessary to find the crowdsourcing site that you will best benefit from. Hopefully these sites are at least worth the time to take a look.

Do you use crowdsourcing sites for either outsourcing your projects or parts of them, or as a designer? Please share your thoughts with us in the comments section below.


Onextrapixel – Web Design and Development Online Magazine