Web News

Many apps today, such as Google Now, Spotify and Amazon, make assumptions about user preferences based on personal data. They may even use this information to make decisions on our behalf, without any direct input from us. For example, Facebook tailors your news feed and Amazon recommends products — both hiding “irrelevant” information and only showing what they think you will like.

This type of design pattern, where user choice is removed, has recently been coined “anticipatory design”. Its aim is to leverage data on user behavior to automate the decision-making process in user interfaces. The outcome lowers the excessive number of decisions people currently make, thereby reducing decision fatigue and improving decisions overall.

Despite the good intentions imbued in anticipatory design, though, automating decisions can implicitly raise trust issues — especially at a time when trust has been eroded through the use of dark patterns¹ in user interfaces. Therefore, in contrast to the deceitful dark patterns that are meant to trick users, this article will look at how we can give people confidence in the decisions made for them by using “light patterns,” which ensure that user interfaces are honest and transparent, while even nudging users to make better decisions for themselves.

First, Why Decide For Your User? Link

In today’s online world, consumers face more options than ever before. For example, consider shopping in marketplaces such as Amazon and eBay. Even when we know exactly what we want (replacement Apple headphones, for example), the choice can still be overwhelming:

²

Another example is all-you-can-eat music services, such as Spotify, which put huge amounts of music at our fingertips, with no extra cost to listen to more. The additional choices quickly add up:

While more choice is welcome, too much can create a daunting experience for the user, because then actually making a decision becomes difficult. This problem has been highlighted extensively before, most notably by Barry Shwartz’s paradox of choice and Hick’s Law:

• Barry Shwartz’s paradox of choice⁷
  “Lots of choice makes people less likely to choose anything, and less happy when they do choose.”
• Hick’s law⁸
  “Every additional choice increases the time required to take a decision.”

Both studies suggest that by reducing the amount of choice in a user interface, we can improve a user’s ability to make decisions, thereby reducing frustration and making the user experience better.

Articles about “decision fatigue” back this up, stating that making high numbers of decisions can cause people to be less effective at making the important decisions in life. That’s why Mark Zuckerberg wears the same style of clothes⁹ every day:

I really want to clear my life to make it so that I have to make as few decisions as possible about anything except how to best serve this community.

How To Reduce Choice Link

Reducing the number of choices for a user has, therefore, become the focus for many of today’s apps. This has been done in a number of ways, two of which we’ll discuss now.

Make Options More Relevant Link

Many products are personalized to individual preferences, limiting options only to those deemed relevant to the current user. This has been done famously by Amazon, both on its website and through tailored email recommendations based on data collected on customers:

¹⁰

Anticipate Decisions Link

Recommendations such as those above might not be enough to reduce the difficulty of choice, because users are still faced with the many relevant options that have been filtered through. This is where products can go a step further by making decisions on the user’s behalf, totally removing the burden of choice.

For example, apps such as Google Now¹³ are increasingly carrying out actions for users, without any direct user input:

¹⁴

Google Now makes a lot of decisions in the background, from finding out where you’ve parked your car to searching for football scores — and notifying you at the right time without even having to be asked:

¹⁷

Spotify shows another instance of this type of assumptive approach by creating playlists for users before they even think to. As was stated in the announcement²⁰:

It’s like having your best friend make you a personalised mixtape every single week.

²¹

The task of searching for new music and deciding which tracks to add to a playlist are carried out for you.

This notion of making decisions for users has been called “anticipatory design²⁴” and has become a topic of debate because of the ethics involved in making decisions on behalf of users.

Creating Trust In Anticipatory Design Link

In the process of reducing choices and making decisions for people using the approaches outlined above, one could be accused of being presumptuous about what users want. This can create distrust if the app doesn’t do what the user expects, especially at a time when many apps have been exposed for exhibiting dark patterns²⁵, tricking users into doing things they don’t want to do.

Consequently, the higher the number of decisions an app makes for users, the more transparent it should be in order to maintain trust. This can be done by avoiding certain dark behaviors and instead favoring transparency through “light patterns,” which keep users informed and in control, even when anticipatory design is used. Let’s explore a few light patterns.

Avoid Limiting Information Link

When options are filtered away to show users more of what they might like (through app personalization and recommendation systems), an inherent problem can be created whereby users begin to see more and more of the same type of content:

²⁶

This can making discovery of new things tricky. It is evident not only on e-commerce websites such as Amazon, but also on social media websites such as Facebook. As Time magazine states²⁹:

Facebook hopes to show more links to people who click lots of links, more videos to people who watch lots of videos and so forth.

Many users might not be happy with this because they don’t want brands to determine what they see. For instance, Joel Spolsky, CEO of Stack Overflow, accuses Facebook of hiding information³⁰:

Facebook is not showing all posts. It is choosing what to show you. An interesting question is to what extent does the Facebook algorithm tend to reinforce your preconceptions? Because that’s what it has been trained to do.

Give the User Control Link

One way to avoid limiting information is to make it easier for users to improve the assumptions that are made about them, through feedback mechanisms.

This can be done in different ways, from obvious (and, therefore, easier) mechanisms to less obvious ones:

³¹

• Google Now (top left) prompts users directly underneath its Now cards to check that the information shown is relevant.
• Facebook (top right) is slightly less obvious, employing a dropdown caret in the top right of each news item. Clicking the caret reveals options to hide news you don’t want to see.
• Amazon (bottom) makes it even more difficult to tailor recommendations. You need to navigate to “Your Account” → “Your Recommendations” → “Improve Recommendations” to adjust what it shows you.

Of these three examples, Google offers the most transparent feedback mechanisms, giving multiple obvious interactions for users to provide feedback on cards, ensuring that the user is in control:

³³

As well as swiping cards, you can also access customization settings from the menu icon on each card:

³⁶

In the case of Facebook and Amazon, even though users can provide feedback to tailor what they see, the underlying news feed and recommendation algorithms have greater control, as outlined by Joel Spolsky³⁸.

Avoid Disguising Ads as Content Link

Disguising ads as content is a common dark pattern³⁹, and it can happen when actions are carried out without the user’s explicit consent.

As an example, Google Now recently partnered with brands such as Lyft, Airbnb, Uber and Instacart to prompt users with services available from those apps, at the time it thinks you need them. While cards from third-party services can be useful, when the cards are for paid services, it can almost seem like another form of advertising:

⁴⁰

When similar dark shades of design can be seen in related products, the motivation behind anticipatory decisions becomes more suspect. Google Maps is a good example of this, appearing to disguise ads as pins⁴³ on map search results:

⁴⁴

Make Use of Existing User Input Link

When making assumptions about users, it’s important that they be accurate. A tried and tested way to do this is to make use of previous user input, as seen in web browsers features such as pre-populated forms, or by remembering credit-card details and passwords in anticipation of future use:

⁴⁷

This saves users from having to repeat the same tasks. The same principle can be applied when making more complex assumptions that combine multiple streams of data. Campaign Live⁴⁸ highlights an example of this when it discussed how the taxi service Hailo’s “Now card” combines time, geolocation and previous user input to rebook taxis in Google Now:

Let’s say you come into London and you book a Hailo cab, and you go into a particular area between 7am and 10am. If you’re still there at 5pm, there’s an assumption you may want to leave and that’s when the Google Now card would prompt you to book a cab.

The assumption is likely to be more accurate in this case (and will appear less like a disguised ad) because the offer is based on a previous booking made by the user via the same service, within a reasonable time period:

⁴⁹

Let Users Opt Out Link

Despite being able to customize the recommendations given to them, sometimes people don’t want apps to make decisions for them at all. In this case, opting out must be easy. Even though you can’t delete the Google Now app, you can disable Now cards in the settings:

⁵¹

In contrast, there is no way to turn off Amazon recommendations, unless you log out completely — which makes sense (for Amazon) because 35% of product sales⁵³ are a result of recommendations, according to Venture Beat.

A question remains, therefore, as to whether features that record and make use of user data in these ways should be opt-in by default. There is a big difference between opt-in by choice and presumed consent, as shown in this example of organ donors from Dark Patterns⁵⁶⁵⁴:

⁵⁵

Basically, when opt-in is the default, consent to be an organ donor is nearly 100%, whereas when the decision to opt-in is not presumed, the consent percentage is very low.

Use Dark Patterns To Help People Link

It’s evident that companies use dark patterns to advance their own agendas, and it’s even easier today with the tools that help companies make decisions on behalf of users. However, what if similar methods could be used to help people make better decisions for themselves? Currently, many of us make poor decisions due to human frailties such as lack of self-control or a focus on short-term gains.

Nudge People to the Right Option Link

In their book Nudge: Improving Decisions About Health, Wealth, and Happiness⁵⁷, Richard Thaler and Cass Sunstein suggest creating an ethical “choice architecture⁵⁸” that nudges the user towards choosing the best overall option in the long run.

⁵⁹

In this vein, the techniques we have seen being used to create dark patterns can also be used to form light patterns that nudge users to make better choices.

Auto-Enrolment Link

For example, as life expectancy has increased, it’s become important for people to save for old age through pension plans such as the US’ 401(k)⁶¹. However, as explained by Thaler and Sunstein, even though these plans offer “free money,” many people still don’t choose to enroll. Possibile solutions suggested by Thaler and Sunstein to help people save for old age include:

• automatically enrolling people (similar to the organ donor example),
• forcing people to make a simple yes or no decision on whether to enroll.

These approaches are examples of light patterns because they serve to benefit users, pushing people to take action and to make good long-term decisions. Even though the latter approach forces people to decide, it simplifies the decision to an easy binary choice, which encourages people to participate.

Create Good Behavioral Patterns Link

Alan Shapiro suggests⁶² that anticipatory apps could actually encourage behavioral patterns in users. By being constantly advised where to go and what to buy, people could become conditioned by app notifications and the decisions made on their behalf.

This could make for some scary scenarios, such as when a company is primarily interested in selling you products, because it’s more likely to instill behavior that favors impulse purchases and the use of its services. For instance, Amazon’s new Prime Pantry service is full of shady patterns, starting with its Pantry Boxes, which encourage people to buy more than they intended:

⁶³

As put by Matt Crowley⁶⁶, head of product at Circadia:

Amazon has shifted the conversation away from “do I need this?” to “what else do I need to fill up this box?”

Amazon has even gone as far as filing patents for a system that leverages user data to predict and deliver products before the customer has even placed an order. Amazon calls it anticipatory shipping⁶⁷:

⁶⁸

Putting these motives aside, what if the same tactics could be used to help people form good behaviors and habits? There are plenty of examples of this today, with the emergence of many self-improvement and habit-forming apps.

For example, stickK⁷¹helps you⁷² kick bad habits by using “the psychological power of loss aversion and accountability to drive behavior change.”

⁷³

Duolingo⁷⁶ reminds you to practice your new language every day, helping you to form a beneficial habit.

⁷⁷

From what we see above, the benefits people get from decisions being made on their behalf in anticipatory design are largely determined by the ethics of the company behind the app. How willing is a company to exploit customer data for its own purposes, and how much data are users willing to trade for convenience?

As explained throughout, giving users control and staying transparent are key to maintaining trust. What do you think about dark patterns used in anticipatory design? Do light patterns really exist, and who is in control when design assumptions are made?

(il, yk, al)

Footnotes Link

1. 1 http://www.darkpatterns.org
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/09/1-A9vSF2GIo4k005KHHKOOqg-opt.png
3. 3 https://amazon.co.uk
4. 4 https://ebay.co.uk
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/09/1-A9vSF2GIo4k005KHHKOOqg-opt.png
6. 6 https://spotify.com
7. 7 http://www.ft.com/cms/s/9cebd444-cd9c-11de-8162-00144feabdc0,Authorised=false.html?siteedition=uk&_i_location=http%3A%2F%2Fwww.ft.com%2Fcms%2Fs%2F0%2F9cebd444-cd9c-11de-8162-00144feabdc0.html%3Fsiteedition%3Duk&_i_referer=&classification=conditional_standard&iab=barrier-app
8. 8 https://www.smashingmagazine.com/2012/02/redefining-hicks-law/
9. 9 http://www.independent.co.uk/news/people/why-mark-zuckerberg-wears-the-same-clothes-to-work-everyday-a6834161.html
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-choice-opt.png
11. 11 https://amazon.co.uk
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-choice-opt.png
13. 13 https://www.google.co.uk/landing/now/
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-now-opt.png
15. 15 https://google.co.uk
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-now-opt.png
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-now-overview-opt.png
18. 18 https://www.google.co.uk/landing/now/
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-now-overview-opt.png
20. 20 https://press.spotify.com/uk/2015/07/20/introducing-discover-weekly-your-ultimate-personalised-playlist/
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/09/spotify-discover-weekly-opt.png
22. 22 http://spotify.com
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/09/spotify-discover-weekly-opt.png
24. 24 https://www.smashingmagazine.com/2015/09/anticipatory-design/
25. 25 http://alistapart.com/article/dark-patterns-deception-vs.-honesty-in-ui-design
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-lamps-opt.png
27. 27 http://amazon.co.uk
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-lamps-opt.png
29. 29 http://time.com/3950525/facebook-news-feed-algorithm/
30. 30 http://www.techworld.com/social-media/facebook-makes-me-angry-stack-overflows-ceo-joel-spolsky-on-developers-ethical-choices-3644318/
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/09/feedback-mechanisms-opt.png
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/09/feedback-mechanisms-opt.png
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-control-opt.png
34. 34 https://www.google.com/search/about/learn-more/now/#cards
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-control-opt.png
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-control-animated.gif
37. 37 https://www.google.com/search/about/learn-more/now/#cards
38. 38 http://www.techworld.com/social-media/facebook-makes-me-angry-stack-overflows-ceo-joel-spolsky-on-developers-ethical-choices-3644318/
39. 39 http://darkpatterns.org/disguised-ads/
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-now-services-opt.png
41. 41 https://www.google.com/search/about/learn-more/now/#cards
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-now-services-opt.png
43. 43 http://thenextweb.com/google/2016/05/24/youll-soon-see-promoted-pins-google-maps-searches/#gref
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-disguised-ads-opt.png
45. 45 http://thenextweb.com/google/2016/05/24/youll-soon-see-promoted-pins-google-maps-searches/#gref
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-disguised-ads-opt.png
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/09/browser-autocomplete-opt.png
48. 48 http://www.campaignlive.com/article/brands-show-cards-google/1332234#wMhCR4FsQU1PWOG7.99
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/09/hailo-card-opt.png
50. 50 https://www.google.co.uk/landing/now/
51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-turn-off-opt.png
52. 52 https://www.google.co.uk/landing/now/
53. 53 http://venturebeat.com/2006/12/10/aggregate-knowledge-raises-5m-from-kleiner-on-a-roll/
54. 54 http://darkpatterns.org/
55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/09/dark-patterns-opt.jpeg
56. 56 http://darkpatterns.org/
57. 57 https://en.wikipedia.org/wiki/Nudge_(book)
58. 58 https://en.wikipedia.org/wiki/Choice_architecture
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/09/nudge-opt.jpg
60. 60 https://en.wikipedia.org/wiki/Nudge_(book)
61. 61 https://en.wikipedia.org/wiki/401(k)
62. 62 http://www.fastcodesign.com/3045039/the-next-big-thing-in-design-fewer-choices
63. 63 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-pantry-opt.png
64. 64 http://redefinedmom.com/how-does-amazon-prime-pantry-work/
65. 65 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-pantry-opt.png
66. 66 https://medium.com/@mwcrowley/the-sketchy-ux-decisions-behind-amazons-prime-pantry-f7cf12878c17#.8lhlf42sv
67. 67 http://www.forbes.com/forbes/welcome/?toURL=http://www.forbes.com/sites/onmarketing/2014/01/28/why-amazons-anticipatory-shipping-is-pure-genius/&refURL=&referrer=#14fea58d2fac
68. 68 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-anticipatory-shipping-opt.png
69. 69 https://techcrunch.com/2014/01/18/amazon-pre-ships/
70. 70 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-anticipatory-shipping-opt.png
71. 71 http://www.stickk.com/
72. 72 http://www.stickk.com/tour
73. 73 https://www.smashingmagazine.com/wp-content/uploads/2016/09/stick-opt.png
74. 74 https://stickk.com/
75. 75 https://www.smashingmagazine.com/wp-content/uploads/2016/09/stick-opt.png
76. 76 https://www.duolingo.com/
77. 77 https://www.smashingmagazine.com/wp-content/uploads/2016/09/duolingo-opt.png
78. 78 http://upquire.com/blog/smart-targeting-dumb/

↑ Back to topTweet itShare on Facebook

Once upon a time, in the not-so-distant past, people considered websites to be a prime indication of how users’ attention was brief and unforgiving. Remember the dreaded bounce rate? Remember the numerous times you worried that your content and graphics might not be 100% clear to users? That was nothing. Compared to mobile, engaging users on the web is a piece of cake.

Researchers claim that we humans can no longer brag about being able to concentrate for a full 12 seconds on a coherent thought, thanks to the digitization of our lives. We now lose concentration after about 8 seconds¹, which, sadly, is 1 second less than the attention span of a goldfish. This is the attention-deficit state of mobile users that you need to overcome in order to successfully engage with them. Mobile users don’t just have brief attention spans — they also expect immediate satisfaction when interacting with your app, otherwise they might be quick to close or even uninstall it.

So, what should you do when tasked with “improving app engagement”? There are several actions you should take, but one of the most crucial is to get up close and personal with users. If you don’t segment and personalize your users’ journeys, then you should expect lower rates of conversion and retention.

Whether your product is a bookstore, baby supplies store or retail app, your users expect you to know who they are, what they want to get from your app and how they prefer to receive it. This means that only using your users’ first names in messages is not enough.

²

Here are the three fundamentals you should follow:

• Show that you understand them.
  
  To become personal with your app’s users, you have to truly know who they are and what they want. Segment your audiences, understand their activity patterns in your app, and respond appropriately to their interests and preferences. Several tools on the market⁴ enable you to analyze your users’ in-app behavior, and you can also connect the app to your CRM for deeper segmentation.
• Communicate with users at the right mobile moment.
  
  Analyzing your users’ general usage and past behavior is just one step. You also have to track their real-time interaction with the app⁵ and act upon it. People open your app to perform a particular action. Make sure to interact with them using mobile-engagement features such as surveys, messages and banners in a way that respects the reason they opened your app in the first place and that adds value to what they were planning to do.
• Provide meaningful content.
  
  Mobile engagement needs to be done in context. You need to know the point a user has reached in their journey, their demographics, their physical location, and information about their overall app usage. All of these should be taken into account for optimal personalization.

To better explain these three points, here are five examples of using personalization to drive mobile engagement.

Gamified In-App Messages Link

The first step towards personalization is to segment your users. Collecting data on users’ past interactions with your app will enable you to segment them by how active they are (visit frequency, time in app, actual usage, etc.).

Each and every app has its power users — the people who are most active and loyal. According to Capgemini Consulting, a customer who is loyal to a brand delivers a 23% premium⁶ in share of wallet, revenue and profitability compared to the average customer. Loyal users should receive a totally different type of in-app message than less active or dormant users, who might feel harassed by gamified messages.

At the right time and in the relevant context, power users should receive in-app messages that are gamified and that drive them to perform a certain action.

In the example below, a frequent user of a bookstore app is asked to recommend a book to a friend to gain 15 points to become a “Super Reader.” This is a great example of how gamified messages give users the feeling that they are an integral part of your app’s community. In addition, they will be thrilled to be recognized for their commitment to your app and to know that you appreciate them.

When users feel this way, they are more likely to rate the app or share it with their friends and connections, helping to create a community of readers who use the app.

⁷

Gamified in-app messages can be as simple as this one or more complex. You might choose to give your power users credits, points, access to special features and offers, and more.

Whatever type of gamified in-app message you choose, make it fun and make it personal.

Video Messages Link

Let’s say you want to drive users to learn more about one of your products and to purchase it. Understanding how the product works and its value is a strong motivator for consumers to purchase it, and even to learn about more products that they might purchase in the future.

If you’ve already used banners or in-app messages (triggered at the right time, of course) to promote this particular product, but your users aren’t converting as much as you’d like, then a video could be a great way to improve your conversion rates. In the example below, an explainer video is triggered when users who have already engaged with items such as baby food and baby clothes in past sessions are now visiting your toys section for the first time. The video drives purchasing intent by explaining how the baby toy would nurture their baby’s development.

⁹

Combining the right video with the right mobile moment could lead to better engagement results.

Don’t forget, too, that video is increasingly popular among mobile users. According to an IAB study¹¹, video is on the rise, with 35% of respondents viewing content on mobile devices (in the US, it’s almost 50%). Using mobile video messages is a great way to communicate with users to convey a message that requires a more detailed explanation, or to deliver an emotional message that connects retail buyers to your brand.

Reminder Push Notifications Link

It is not uncommon for a user to add items to their shopping cart but then suddenly not continue with the purchasing process. You want the user to complete the action as soon as possible, though. Push notifications are the ideal solution in this type of scenario, because they can be highly personalized and can contain a deep link that takes the user to exactly where they left off. Push notifications without personalization can drive users insane, whereas one small personalized message — triggered at the right mobile moment — can push (pun intended) users in the right direction.

When possible, add new information to push notifications that can help drive conversion decisions. For example, receiving an offer for free shipping after having added products to their shopping cart could persuade a user to take the next step and finalize the order. Just like the gamification example in our first point, push notifications serve to recognize and reward past activity in the app.

¹²

Use Surveys To Ask And Respond To User Feedback Link

You can’t only talk to your users; you need to listen, too. Whereas tracking their “digital body language” can help you understand what users feel about your app, surveys are more about listening to them and taking the conversation to the next level.

An important step when using surveys is to provide each user with different feedback (such as messages, a secondary survey screen, a video, etc.) and not to use identical “thank you” messages, which are sometimes a turn-off.

In the example below, a user who says that they wouldn’t likely return to a hotel is shown another screen that asks them their main reason for not returning. Meanwhile, those who respond very positively are asked whether they would like to write a short review.

¹³

A combo survey personalizes the responses of users and drives them to complete the proper action in the right mobile moment.

Offer Coupons Based On The User’s Journey And Purchasing History Link

Coupons have a better chance of being redeemed if they are relevant to the customer’s purchasing history. But you also need to consider the right moment to present a coupon. Choose a time when the user is most likely to be interested in what the coupon offers.

Let’s say you have a customer who has looked at a particular pair of shoes several times throughout the day but has yet to purchase them. To drive the user to purchase, you could offer a time-limited coupon of 20% off the item the next time they visit the screen.

Targeting the right users at the right moment is key to increasing your conversion rate.

¹⁵

Understanding the individual user’s journey and how they are using the app overall is key to personalizing your mobile app experience. Mobile users have high expectations¹⁶ of the mobile experience and brief attention spans, so careful personalization and in-context awareness are crucial for effective communication and engagement with them.

(yk, il, al)

Footnotes Link

1. 1 http://time.com/3858309/attention-spans-goldfish/
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/08/personalization-large-preview-opt.png
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/08/personalization-large-preview-opt.png
4. 4 http://www.apptamin.com/blog/app-analytics-tools/
5. 5 http://www.insert.io/real-time-personalization-2/
6. 6 https://www.capgemini-consulting.com/reinventing-loyalty-programs
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/08/books_sm-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/08/books_sm-opt.png
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/08/video_baby_sm-opt.png
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/08/video_baby_sm-opt.png
11. 11 http://www.businessofapps.com/video-gone-mobile-consumption-and-marketing-statistics/
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/08/cart-reminder-push-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/08/travel_combo_survey-opt.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/08/travel_combo_survey-opt.png
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Retail_banner2_coupon-opt.png
16. 16 http://www.cioinsight.com/it-strategy/mobile-wireless/slideshows/why-mobile-users-expect-a-better-experience.html

↑ Back to topTweet itShare on Facebook

Let’s say you want to quickly sketch out your idea of a website, or just quickly whip up a small site for testing purposes. Also, neither should take a lot of time to build nor should they need a full-stack toolkit. So, where and how do you start? Have you tried creating a website with some Dropbox-powered hosting tools? Well, they certainly can provide a fast and easy solution for these occasions. You don’t have to fiddle with servers or bother about deployment, some of them even come with pre-configured templates that you can use or customize to spare you coding time.

In today’s article, we’ve collected nine tools for you that hook up to your Dropbox to streamline the process of creating and hosting static websites. However, before you settle on a Dropbox-powered platform, always balance the pros and cons to make sure it is the right choice for your project — including performance-wise. As for prototyping, the following tools are a great way to make your workflow more efficient so you can spend more time on the details that really matter.

Small Victories Link

One creation tool that is based on Dropbox is Small Victories³¹. The idea behind it is simple: The tool connects to your Dropbox, creates a special folder there, and whatever you drop into the folder (be it HTML, Markdown or TXT files, images or videos) will automatically be turned into a website. No installation, server, CMS or uploading necessary; every change you make in the Dropbox folder will be pushed to your site instantly. To ease the job, you can draw on nine ready-made themes (among them a homepage, an e-commerce product page and a feed stream) or if you want more control, you can code your own static HTML files instead and use Dropbox essentially as a hosting service.

²

To keep everything as simple as possible, the content will be displayed on your site in the order as it appears in your Dropbox folder. This requires a bit of planning ahead when it comes to choosing file names, and, as it turns out, numbering them is the easiest way to maintain a structure. Alternatively, you can set the order to sort by date or by manually comma-delimiting the file names in the order you want them to appear in the settings.txt file. Despite its simplicity, the tool isn’t inflexible at all, but surprises with quite some customization features. Adding your own styles and scripts to the default CSS and JS files goes without saying, while Google Fonts and Typekit support give you even more freedom.

By default, every site created with Small Victories will be hosted as a subdomain of .smvi.co, but you can also use a custom domain if you prefer. Just enter the domain in the settings.txt file and make sure to register it in your domain’s DNS settings, too. If you want to make your content available only to a selected group of users, to show an idea to a client, for example, or to share slides, you can also set a password protection. Especially when you’re looking for fast results or want to collaborate with your team members, the tool is convenient to work with. A shared Dropbox folder is all it takes.

Here some examples of sites that were built using Small Victories:

⁴

⁶

⁸

¹⁰

Pancake Link

Also based on the “drop your files into a Dropbox folder” idea, is Pancake¹⁴¹². Apart from HTML, it supports .md and .txt and creates a page for every text file you save to the respective Dropbox folder. By default, your project will be hosted as a subdomain of .pancakeapps.com (which is SSL-secured, by the way), but you can also use your own domain with a Pancake site. Apart from Dropbox sync, the platform offers a beta version with git push that comes with version control and supports popular generators such as Jekyll, Sphinx, and Wintersmith.

¹³

DropPages Link

DropPages¹⁷¹⁵ already launched back in 2011 and offers the same approach as the tools above. Three sub-folders in your Dropbox’s project folder house text (which can also be written in Markdown), images and CSS, and, finally, HTML files to render the text. You simply edit the files on your computer, save, and they’ll automatically sync with your live site. If you don’t want to edit live content, create a folder called _drafts and get started with your new content in there. When you’re done, overwrite the live version with it. Content is minified, gzipped and cached. DropPages is free to use.

¹⁶

Site44 Link

Site44²⁰¹⁸ updates your website as soon as you’ve saved any changes within the folder you’ve created in Dropbox (it constantly monitors it specially for this purpose, too). Sites created with the tool usually live on a .site44.com sub-domain, but using custom domains is possible as well. For fast response times, your content will be cached on Site44’s servers. Advanced features include password protection, custom 404 pages, and support for redirects. A 30-day trial is free, personal plans start at $4.95 per month.

¹⁹

Sitebox.io Link

Another static site generator living in a symbiosis with Dropbox is Sitebox.io²¹. You can code your own layout (Markdown is supported) or use one of three ready-made, responsive themes. The possibility to set a meta description for every page helps make your website search-engine friendly. A nice bonus: The tool won’t push all changes you make to the folder live instantly. Instead, you can preview your changes first, and when everything is as you want it to be, you can publish in one click. Sitebox is free to use with up to five pages with a subdomain at .sitebox.io, a professional license with an unlimited amount of websites and the option to connect your own domain is available for $10 a month.

²²

Cloud Cannon Link

Cloud Cannon²⁶²⁴ is a simple CMS that syncs back and forth with Dropbox or, alternatively, GitHub and Bitbucket, to build and deploy your website to a test or custom domain. Focus lies on collaboration between developers and non-developers. While developers have full control over the source code and can use their favorite tools to build static or Jekyll sites, non-developers can update content visually in the inline editor. For improved performance, websites built with Cloud Cannon are optimized and assets served from a CDN.

Here’s a handy feature: You can set up a staging site for testing purposes and easily push to the live site when you’re ready. Restricting public access to your site or to parts of it is also possible. Plans for Cloud Cannon start at $25 for one user and unlimited websites, more expensive agency and enterprise plans are also available. If you just want to give it a try, there’s a 30-day free trial, too.

²⁵

KISSr Link

No frills, just a Dropbox-powered hosting service — that’s KISSr²⁹²⁷. You save your website to Dropbox, and when you update files, the changes will be copied to KISSr’s servers. One prototype site is free, for $5 per month you get unlimited sites, storage, and bandwidth.

²⁸

Paperplane Link

Paperplane³²³⁰ spares you fiddling around with FTP by connecting to your Dropbox (or GitHub if you prefer). To use it, pick a name, point Paperplane to your files, and that’s it — the service will transform your assets into a website. Custom domains can be used, too. Paperplane weighs in with $9 per month, but you can also test it out for free with three sites max and no custom domains.

³¹

Synkee Link

Synkee³⁵³³ works differently than the other tools on our list. It connects to your Dropbox but doesn’t replace an FTP server — simple deployment and version control are the magic words here. A typical workflow with Synkee is as follows: You save your website assets to Dropbox, edit them with your favorite text editor, and the changes get synced to your website’s server as your Dropbox syncs. Deployments can be handled via a dashboard either manually, or you set them to apply automatically when you save a file. Built-in version control and the possibility to revert changes on the FTP server also add to a more efficient workflow. Synkee also works with GitHub and Bitbucket and offers a two-week free trial. After the trial has ended, plans start at $5 per month for one user and ten projects, team plans are also available.

³⁴

What are your experiences? Have you used one of these tools before? Or do you know of one we haven’t listed? Let us know in the comment section below.

(il)

Footnotes Link

1. 1 http://www.smallvictori.es/
2. 2 http://www.smallvictori.es/
3. 3 http://www.smallvictori.es/
4. 4 http://vis.dmcg.co/
5. 5 http://vis.dmcg.co/
6. 6 http://www.salondesrefus.es/
7. 7 http://www.salondesrefus.es/
8. 8 http://xxix-store.smvi.co/
9. 9 http://xxix-store.smvi.co/
10. 10 http://www.wiseapp.com/
11. 11 http://www.wiseapp.com/
12. 12 https://www.pancake.io/
13. 13 https://www.pancake.io/
14. 14 https://www.pancake.io/
15. 15 http://droppages.com/
16. 16 http://droppages.com/
17. 17 http://droppages.com/
18. 18 http://www.site44.com/
19. 19 http://www.site44.com/
20. 20 http://www.site44.com/
21. 21 https://www.sitebox.io/
22. 22 https://www.sitebox.io/
23. 23 https://www.sitebox.io/
24. 24 http://cloudcannon.com/
25. 25 http://cloudcannon.com/
26. 26 http://cloudcannon.com/
27. 27 https://www.kissr.com/
28. 28 https://www.kissr.com/
29. 29 https://www.kissr.com/
30. 30 https://www.paperplane.io/
31. 31 https://www.paperplane.io/
32. 32 https://www.paperplane.io/
33. 33 https://www.synkee.com/
34. 34 https://www.synkee.com/
35. 35 https://www.synkee.com/

↑ Back to topTweet itShare on Facebook

It is often easy to overlook the underlying principles that compel people to take action. Instead, we tend to obsess over minute details — things like button color¹, pricing² and headlines. While these things can compel users to take action, it is worth considering the psychological principles that influence users’ behavior.

Unfortunately, few organizations try to understand what influences user action. Research by Eisenberg Holdings³ shows that for every $92 the average company spends attracting customers, a meager $1 is spent converting them. Real conversion optimization is rooted deeply in psychology.

In this article, we will analyze seven psychology studies that date as far back as 1961. Each experiment raises principles that will help you boost conversions on your website. Some of the experiments are so controversial that they will make you cringe, but the lessons are fundamental.

The Authority Principle: Leverage The Influence Of Authority Figures To Get People To Act Link

In perhaps the most famous study about obedience in psychology, Yale University psychologist Stanley Milgram conducted a series of experiments⁴ to observe how people react when instructed by an authority figure to do something that conflicts with their conscience. The aim of the experiment was to see how far people would go to obey authority, even if the act of obedience involved harming someone else and acting against their conscience.

For the studies, which began in 1961, Milgram selected participants for his experiment by placing an advert in a newspaper. Once people responded to the advert, Milgram paired the participants and cast lots to determine which of each pair would be the learner and which the teacher. Unbeknownst to the participants, the experiment was rigged — all of them would be teachers, while all of Milgram’s associates would be chosen as learners.

The learner (Milgram’s associate) was taken into a room and connected to an electric chair; the teacher (one of the participants) was then taken to a room next door that contained a row of switches, marked with a scale of 15 to 450 volts — with 15 volts being a “slight shock” and 450 volts producing a “fatal shock.” The teacher was able to see the reactions of the learner through a screen.

⁵

Once in the other room, the researcher told the teacher (i.e. the participant) to administer an electric shock every time the learner answered a question incorrectly. The learner was then asked a series of questions and mainly gave wrong answers (on purpose). In return, the authority figure — dressed in a gray lab coat — asked the teacher to administer an electric shock for each wrong answer. The result was stunning: 65% of participants administered the electric shock to the maximum 450 volts, even when the learner long stopped showing signs of breathing. In a variation of the experiment, the authority figure was replaced with an ordinary person, and compliance dropped to a stunning 20%.

Milgram’s experiment⁷ shows that we will go to great lengths to obey orders, especially from those seen to be as legitimate authorities (whether legal or moral).

How to Use The Authority Principle to Boost Conversions Link

The authority principle can be used to boost conversions in your business. For instance, getting authority endorsements will always go a long way to boosting your conversions and profits. You are far better off, of course, avoiding trying to sell products to people who don’t want them, but even scrupulous websites can boost conversions by tapping into the power of authority. Here are some tips:

• Get an authority figure or respected celebrity in your industry to endorse you.
  
  A great example⁸ of the effectiveness of endorsements from authority figures is Dr. Oz. Dr. Oz is renowned in the health field, and products will sell out at stores as soon as he recommends them. The phrase “Dr. Oz Approved” currently has 1.6 million results in Google (shown below), showing how seriously people take his recommendations.

  ⁹
  

  On a smaller scale, Plum District noticed that customers who were referred¹⁰ to its products by influential online mothers¹¹boosted the company’s sales by double¹² that of customers from other channels. Authority endorsement can come in many forms — a post on social media, a testimonial or active involvement with your brand.

• Get an authoritative publication to endorse you.
  
  Mainstream publications are also regarded as authorities. In the absence of an endorsement from a person, an endorsement from a reputable publication would go a long way to boosting your credibility. Rent the Runway reported a 200% increase in conversions¹³ from visitors referred by fashion magazines and blogs compared to visitors from paid search ads.
• Become an authority yourself.
  
  Why get Oprah to endorse you when you can be Oprah yourself? Establish yourself as an authority figure and an industry leader by writing for relevant publications, speaking at relevant events and conferences and establishing relationships with other authority figures. Think of the difference between receiving an email from a stranger and receiving an email from a known thought leader. Making a name for yourself is a great way to warm up your sales leads before you even reach out to them. Seven-figure blogger Neil Patel¹⁴ (pictured below) established himself as an authority by highlighting major brands he has worked with, his recognition from the United Nations and the President of the United States, and major publications that have featured him.

  ¹⁵
  

The Amos Tversky And Daniel Kahneman Experiment: Use Anchoring To Make People Feel They Are Getting A Bargain Link

Whether you are working for a company or selling your own products, you have probably seen prospective customers bounce from your website because they feel that your products are too expensive. Well, an experiment¹⁶ (PDF) conducted by psychologists Amos Tversky and Daniel Kahneman in 1974 holds a solution to boost conversions with these customers, too.

During the experiment, the researchers observed how an initial perception influenced the subjects’ behavior. They surveyed people and asked them to estimate the percentage of African nations that are a part of the United Nations. Before people were allowed to answer, though, the researchers had them spin a wheel painted with numbers from 0 to 100. Unbeknownst to the participants, the wheel had been rigged to stop at either 10 or 65. The experimenters found that the people who landed on the higher number on the wheel were more likely to choose a higher percentage than people who had landed on the lower number. Those who were shown 10 on the wheel estimated, on average, that 25% of African nations were a part of the UN, while those who were shown 65 estimated that the percentage was 45%.

The study reveals the effect of anchoring on our actions. If you want to buy a bomber jacket, and all of the jackets you find are around $200, and you later see a similar jacket that costs $150, you would think it’s a bargain, even if the jacket actually costs $50.

Amazon does this effectively, and automatically, for most of its products:

¹⁷

How to Use the Anchoring Principle to Boost Conversions Link

You can use this psychological effect to boost your sales. First, put your product in high esteem — if possible, make people feel that your product is so amazing that they would never be able to afford it. When they later find out the price you are asking, even if it is expensive, they will see it as a bargain. It is no longer a matter of “$500 is too much,” but rather, “Wow, this could easily sell for $2,500, and I’m getting it for $500!”

Many major brands leverage the anchoring effect by offering deals that appear to be such a great bargain that users might feel that they’re crazy to offer them. Below is shown AT&T deliberately offering both a 32 GB and a 64 GB iPad at the discount price of $529.

¹⁸

The original prices of the 32 GB and 64 GB iPads were $729 and $829, respectively. The latter would be regarded as expensive. At the discounted price of $529, however, it’s a bargain. The user feels, “Wow! I’m getting double the storage for the same price!” They no longer focus on the high cost of the 64 GB model, but rather on the fact that it costs the same as the model with half the storage.

The Little Albert Experiment: Use The Conditioning Principle To Turbocharge Your Conversions Link

The “Little Albert” experiment is pretty extreme compared to the other experiments discussed here, and it probably wouldn’t be allowed today, not only because of the nature of the experiment itself, but also because the subject was just a child at the time. (It was widely reported that the child, known as Little Albert, never recovered from the effects of the experiment.) The experiment, however, does teach some fundamental lessons about how the human brain is wired.

Psychologist John B. Watson conducted the experiment to observe the phenomenon of classical conditioning²⁰. In simple terms²¹, classical conditioning is “a learning process by which a subject comes to respond in a specific way to a previously neutral stimulus after the subject repeatedly encounters the neutral stimulus together with another stimulus that already elicits the response.”

The study observed a child who Watson referred to as Albert B. and who is popularly known today as “Little Albert.” Little Albert was nine months old at the time, and he loved animals prior to the experiment — particularly, a white rat. However, Watson began to pair the presence of the rat as well as other animals with the loud bang of a hammer hitting metal. Eventually, Little Albert developed a fear of animals, including the white rat he initially loved, due to the associated discomfort that came with the loud bang. Although the two stimuli were completely unrelated, their association was strong enough to elicit a response in Little Albert.

How to Use the Little Albert Principle to Boost Your Conversions Link

• Associate a positive emotion with your brand and products.
  
  In Little Albert’s case, the emotion associated with the presence of animals was fear and anxiety. As a result, he came to dislike animals. For Nike, this emotion is a feeling of being able to achieve your goals by using its products. Nike has carefully positioned itself as the brand to help you achieve your goals. From its trademarked “Just do it” slogan to its strategic use of the underdog character who becomes a hero in some of its ads, Nike has associated the positive emotion of achievement with its brand.
• Make this positive association obvious.
  
  Constantly repeat the association until an image is created in the mind of your users, and you’ll notice a significant increase in responses to your messages.

In Nike’s “Find Your Greatness²²” ad, we see an overweight boy running desperately and not giving up. The implied message is that anyone can do it, which is in line with Nike’s advertising over the decades.

²³

The Jam Study: Giving People Too Many Choices Can Cripple Sales Link

In his book The Paradox of Choice, psychologist Barry Schwartz famously argues that having too many choices isn’t necessarily good for people and might have unintended effects. This holds true for conversion optimization. The effect was well demonstrated through the famous “jam study.”

Psychologists Sheena Iyengar and Mark Lepper published the jam study in 2000. The study observed the behavior of 754 shoppers²⁵ in an upscale grocery store and how they responded to the choices they were presented with. The shoppers were observed on two consecutive Saturdays. A tasting booth was set up in the grocery store with jam selections on display. The first group of people were exposed to a table displaying 24 varieties of gourmet jam, while the second group were exposed to a table displaying 6 varieties of jam.

The study found that, while the table with more varieties of jam attracted more consumer attention (60% of shoppers stopped at the booth) than the table with fewer varieties of jam (40% of shoppers stopped at the booth), the latter outperformed the former in sales by a factor of 10 to 1.

That’s basically a 900% increase in conversion rate. How would you like the same?

²⁶

This has a fairly logical explanation. Research shows²⁸ that human attention span is rapidly declining, shrinking from 12 seconds back in 2000 to 8 seconds now. Rather than increasing your conversions, giving people more options will actually harm it by crippling their decision-making ability.

How to Use the Choice Principle to Boost Your Conversions Link

Offering more options sounds like a good thing, until it isn’t. Giving people more options will draw their attention; if you ask them, they will tell you that’s what they want. However, research shows that most people actually respond better to fewer options. Limit the choices you present to users, and you will more likely get them to take the action you desire right away.

Dropbox’s minimalist home page²⁹ is a great example of this. It’s plainly obvious that Dropbox simply wants you to sign up, and its home page focuses on helping you do just that.

³⁰

In “The Minimal Homepage³¹,” Mattan Griffel observes that the fastest-growing companies in the world — especially in their early days, when they needed fast adoption — all had something in common: a minimalist home page. Dropbox, Quora, LinkedIn, Twitter and Pinterest are some notable examples.

The Decoy Principle: Drive Users Toward One Option Link

Another famous conversion optimization experiment is known as the economist pricing experiment. Psychologist Dan Ariely popularized this experiment³² in his book Predictably Irrational. Ariely surveyed 100 of his students at the Massachusetts Institute of Technology and asked them to choose between the following three options:

• web-only subscription ($59),
• print-only subscription ($125),
• print and web subscription ($125).

The results of the experiment were amazing³³: 16 of the 100 people surveyed chose the web-only subscription, while 84 people chose the print and web subscription. Nobody chose the print-only subscription.

³⁴

Ariely then removed the print-only subscription, which nobody chose, and gave another group of 100 students the following options:

• web-only subscription ($59),
• print and web subscription ($125).

The findings were surprising: 68% chose the web-only option, while 32% chose the print and web option.

³⁵

Why is the contrast so sharp? This is the decoy effect in action; the print-only option was introduced to make the print and web option more attractive and to make the web-only option less attractive. Seeing that the print and web option cost the same amount as the print-only option, people felt that there must have been an error and that they were getting a bargain. But this was psychology in action.

The AT&T offer referred to earlier in the section on anchoring is also a form of decoy pricing. The fact that both the 32 and 64 GB iPads were sold at the same price made the 64 GB model an instant bargain. The 32 GB model could be said to be a decoy to boost sales of the 64 GB.

How to Use the Decoy Principle to Boost Your Conversions Link

You can use the decoy principle to boost sales by introducing an appealing offer that costs less and has more features. This way, people will feel that they are getting a bargain and will be compelled to act immediately. When people see that package A has twice the features of package B, yet both cost the same, they will instantly develop a preference for package A.

Here is another example of decoy pricing used by Apple to sell the iPod Touch:

³⁷

By putting the 8 and 32 GB iPod Touch models side by side and pricing them so closely, some users will feel compelled to select the 32 GB model without considering that competing products might be superior and cost less. Instead, they will focus on the fact that they are getting the 32 GB at a much better price. With those three models marked at those price points, and all with apparently similar features, the 32 GB model looks like the bargain!

As you can see, adding one or more purchasing options can boost conversions. However, something more fundamental is going on here. Why will many people easily hand over their money for a product from one brand, yet be reluctant to pay a fraction of that amount for a similar competing product? Let’s find out.

The Richard Thaler Experiment: Use Context To Boost The Perceived Value Of Your Product Link

Context influences value, which explains why people are more likely to bargain in a flea market than in a boutique. Richard Thaler conducted an experiment³⁹ to demonstrate this principle. Subjects were asked how much they were willing to pay for beer. The first group was told that the beer would be purchased from a local grocery store, while the second group was told that the beer would be purchased from a fancy hotel. The study revealed that people offered to pay more for the very same beer when it came from the fancy hotel.

To boost conversions, master the art of conveying exclusivity through context. The grander people consider your brand to be, the more likely they will pay for your product, even if it is worth much less.

For example, you are more likely to pay a premium for a baseball glove like the ones shown below if you see it on a curated e-commerce website than in an online superstore. Canopy’s home page lists one glove for $250, whereas Amazon’s search results display infielder baseball gloves ranging from $9 to $45.

⁴⁰

⁴²

How to Use the Principle of Context to Boost Your Conversions Link

Create a premium feel to attract premium customers. Some believe that offering discounts or competing on price is not a smart long-term approach to business. Instead, create a premium impression and you will command premium rates.

That being said, it’s not always about what you’re offering. Simple brand positioning and marketing can go a long way to improving your conversions. This brings us to our next point.

The Familiarity Principle: Use Repetition To Get People To Notice Your Offer Link

The power of repetition in boosting conversions is deeply rooted in psychology, and it is one of the principles advocated by Robert Cialdini in his book Influence: The Psychology of Persuasion.

A 2013 study by Jaroslaw Jankowski⁴⁴ found that content repetition can boost conversions on websites. The more exposed people are to your offer, the more familiar they become with it, and the higher the probability that they will act on it. This is known in marketing as the rule of seven⁴⁵; that is, prospective customers need to come across your offer at least seven times before they take action.

How to Use the Familiarity Principle to Boost Your Conversions Link

Don’t limit yourself to one marketing channel. Spread your message across multiple channels, maximizing touch points, and you will likely notice a boost in conversions. Jay Baer offers a great case study⁴⁶. He says that his Jay Today show, a daily three-minute video, is one of his strongest content-marketing performers. After each video is published, he repurposes it into eight different pieces of useful content, which he then distributes on eight different platforms, including YouTube, LinkedIn and Medium. This helps grow his business by attracting more attention and increasing his likability, using the power of repetition.

Below is the YouTube version of one of his recent shows promoted as a linked post on Facebook, followed by the same content in iTunes podcast form.

⁴⁷

⁴⁹

His effective distribution of content based on the familiarity principle has been a key driver of growth for Baer’s company.

The familiarity principle also works well in advertising. Research shows that companies will consistently repeat ads⁵¹ to the same people because it creates in them a subconscious desire for the products.

Conclusion Link

Effective conversion optimization goes beyond simply changing a button’s color or making a few tweaks here and there. The trick is knowing the fundamental principles that make people act the way they do. Hopefully, the psychology studies reviewed in this article have provided you with some practical insight to boost your conversion rates.

Whether by leveraging the power of classical conditioning (the Little Albert experiment), keying into the effectiveness of decoy pricing (the economist pricing experiment) or using plain-old social proof (Milgram’s experiments), you can do much to boost your website’s conversion rates. The key is in the implementation. Take lessons from the studies referred to above, implement them on your website, and watch your conversions increase.

Further Reading Link

• Influence: The Psychology of Persuasion, Robert Cialdini
• Predictably Irrational, Dan Ariely
• “More Isn’t Always Better⁵²,” Barry Schwartz, Harvard Business Review

(ah, yk, al, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/2009/10/call-to-action-buttons-examples-and-best-practices/
2. 2 https://www.smashingmagazine.com/2009/10/call-to-action-buttons-examples-and-best-practices/
3. 3 https://econsultancy.com/blog/7657-92-1-marketings-dirty-little-statistic-5/
4. 4 http://www.simplypsychology.org/milgram.html
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/08/milgram-scale-opt.jpg
6. 6 http://www.gina-perry.com/behind-the-shock/milgrams-obedience-experiments/
7. 7 https://www.mtholyoke.edu/~apkokot/results.htm
8. 8 https://blog.kissmetrics.com/being-an-authority/
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Dr-Oz-approved-opt.png
10. 10 https://techcrunch.com/2011/11/27/social-proof-why-people-like-to-follow-the-crowd/
11. 11 https://techcrunch.com/2011/11/27/social-proof-why-people-like-to-follow-the-crowd/
12. 12 https://techcrunch.com/2011/11/27/social-proof-why-people-like-to-follow-the-crowd/
13. 13 https://techcrunch.com/2011/11/27/social-proof-why-people-like-to-follow-the-crowd/
14. 14 https://www.quicksprout.com/blog/
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Neil-Patel-opt.png
16. 16 http://people.hss.caltech.edu/~camerer/Ec101/JudgementUncertainty.pdf
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Amazon-anchoring-opt.png
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/09/iPadSale-opt.png
19. 19 http://www.geek.com/apple/att-slashes-300-off-ipad-3g-64gb-1330393/
20. 20 http://www.simplypsychology.org/classical-conditioning.html
21. 21 http://www.thefreedictionary.com/classical+conditioning
22. 22 https://www.youtube.com/watch?v=2JnYcuRW_qo
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/09/find-your-greatness.jpg
24. 24 http://www.dailymail.co.uk/news/article-2185150/Find-Your-Greatness-advert-Story-200lb-jogging-boy-Nathan-Sorrell-new-Nike-ad-charmed-America.html
25. 25 https://hbr.org/2006/06/more-isnt-always-better
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/09/jam-study-results-opt.jpg
27. 27 http://noahrickun.com/lets-jam-make-more-sales-by-using-the-paradox-of-choice/
28. 28 https://hostingfacts.com/internet-facts-stats-2016/
29. 29 https://www.dropbox.com/
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Dropbox-opt.png
31. 31 http://www.growhack.com/2013/04/the-minimal-homepage/#.V40u3esrLnA
32. 32 http://conversionxl.com/pricing-experiments-you-might-not-know-but-can-learn-from/
33. 33 http://www.digitalcurrent.com/digital-marketing/boost-conversion-optimization/
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/09/decoy-pricing-the-economist-pricing-opt.png
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/09/decoy-pricing-the-economist-pricing2-opt-.jpg
36. 36 http://conversionxl.com/pricing-experiments-you-might-not-know-but-can-learn-from/
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/09/The-Decoy-Effect-opt.jpg
38. 38 http://www.advancedwebranking.com/blog/eight-proven-pricing-strategies-guarantee-conversions/
39. 39 https://econsultancy.com/blog/62591-why-pricing-experiments-prove-our-assumptions-are-wrong/
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Canopy-opt.png
41. 41 https://canopy.co/
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Amazon-listings-opt.png
43. 43 http://www.amazon.com/
44. 44 http://link.springer.com/chapter/10.1007%2F978-3-642-36543-0_45
45. 45 http://www.effectivebusinessideas.com/the-rule-of-7/
46. 46 http://contentmarketinginstitute.com/content-inc/blog/repurpose-one-video/
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Convince-and-Convert-opt.png
48. 48 https://www.facebook.com/ConvinceConvert
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Jay-Baer-opt.png
50. 50 https://itunes.apple.com/us/podcast/jay-today-podcast/id915527026?mt=2
51. 51 https://www.sciencedaily.com/releases/2008/12/081209125828.htm
52. 52 https://hbr.org/2006/06/more-isnt-always-better

↑ Back to topTweet itShare on Facebook

A long time ago, my personal website was attacked. I do not know how it happened, but it happened. Fortunately, the damage from the attack was quite minor: A piece of JavaScript was inserted at the bottom of some pages. I updated the FTP and other credentials, cleaned up some files, and that was that.

One point made me mad: At the time, there was no simple solution that could have informed me there was a problem and — more importantly — that could have protected the website’s visitors from this annoying piece of code.

A solution exists now, and it is a technology that succeeds in both roles. Its name is content security policy (CSP).

What Is A CSP? Link

The idea is quite simple: By sending a CSP header from a website, you are telling the browser what it is authorized to execute and what it is authorized to block.

Here is an example with PHP:

<?php header("Content-Security-Policy: <your directives>"); ?>

Some Directives Link

You may define global rules or define rules related to a type of asset:

default-src 'self' ; # self = same port, same domain name, same protocol => OK 

The base argument is default-src: If no directive is defined for a type of asset, then the browser will use this value.

script-src 'self' www.google-analytics.com ; # JS files on these domains => OK 

In this example, we’ve authorized the domain name www.google-analytics.com as a source of JavaScript files to use on our website. We’ve added the keyword 'self'; if we redefined the directive script-src with another rule, it would override default-src rules.

If no scheme or port is specified, then it enforces the same scheme or port from the current page. This prevents mixed content. If the page is https://example.com, then you wouldn’t be able to load http://www.google-analytics.com/file.js because it would be blocked (the scheme wouldn’t match). However, there is an exception to allow a scheme upgrade. If http://example.com tries to load https://www.google-analytics.com/file.js, then the scheme or port would be allowed to change to facilitate the scheme upgrade.

style-src 'self' data: ; # Data-Uri in a CSS => OK 

In this example, the keyword data: authorizes embedded content in CSS files.

Under the CSP level 1 specification, you may also define rules for the following:

• img-src
  
  valid sources of images
• connect-src
  
  applies to XMLHttpRequest (AJAX), WebSocket or EventSource
• font-src
  
  valid sources of fonts
• object-src
  
  valid sources of plugins (for example, <object>, <embed>, <applet>)
• media-src
  
  valid sources of <audio> and <video>

CSP level 2 rules include the following:

• child-src
  
  valid sources of web workers and elements such as <frame> and <iframe> (this replaces the deprecated frame-src from CSP level 1)
• form-action
  
  valid sources that can be used as an HTML <form> action
• frame-ancestors
  
  valid sources for embedding the resource using <frame>, <iframe>, <object>, <embed> or <applet>.
• upgrade-insecure-requests
  
  instructs user agents to rewrite URL schemes, changing HTTP to HTTPS (for websites with a lot of old URLs that need to be rewritten).

For better backwards-compatibility with deprecated properties, you may simply copy the contents of the actual directive and duplicate them in the deprecated one. For example, you may copy the contents of child-src and duplicate them in frame-src.

CSP 2 allows you to whitelist paths (CSP 1 allows only domains to be whitelisted). So, rather than whitelisting all of www.foo.com, you could whitelist www.foo.com/some/folder to restrict it further. This does require CSP 2 support in the browser, but it is obviously more secure.

An Example Link

I made a simple example for the Paris Web 2015 conference, where I presented a talk entitled “CSP in Action¹.”

Without CSP, the page would look like this:

²

Not very nice. What if we enabled the following CSP directives?

<?php header("Content-Security-Policy: default-src 'self' ; script-src 'self' www.google-analytics.com stats.g.doubleclick.net ; style-src 'self' data: ; img-src 'self' www.google-analytics.com stats.g.doubleclick.net data: ; frame-src 'self' ;"); ?>

What would the browser do? It would (very strictly) apply these directives under the primary rule of CSP, which is that anything not authorized in a CSP directive will be blocked (“blocked” meaning not executed, not displayed and not used by the website).

By default in CSP, inline scripts and styles are not authorized, which means that every <script>, onclick or style attribute will be blocked. You could authorize inline CSS with style-src 'unsafe-inline' ;.

In a modern browser with CSP support, the example would look like this:

⁴

What happened? The browser applied the directives and rejected anything that was not authorized. It sent these notifications to the console:

⁶

If you’re still not convinced of the value of CSP, have a look at Aaron Gustafson’s article “More Proof We Don’t Control Our Web Pages⁸.”

Of course, you may use stricter directives than the ones in the example provided above:

• set default-src to 'none',
• specify what you need for each rule,
• specify the exact paths of required files,
• etc.

More Information On CSP Link

Support Link

CSP is not a nightly feature requiring three flags to be activated in order for it to work. CSP levels 1 and 2 are candidate recommendations! Browser support for CSP level 1⁹ is excellent.

¹⁰

The level 2 specification is more recent¹², so it is a bit less supported.

¹³

CSP level 3 is an early draft now, so it is not yet supported, but you can already do great things with levels 1 and 2.

Other Considerations Link

CSP has been designed to reduce cross-site scripting (XSS) risks, which is why enabling inline scripts in script-src directives is not recommended. Firefox illustrates this issue very nicely: In the browser, hit Shift + F2 and type security csp, and it will show you directives and advice. For example, here it is used on Twitter’s website:

¹⁵

Another possibility for inline scripts or inline styles, if you really have to use them, is to create a hash value. For example, suppose you need to have this inline script:

<script>alert('Hello, world.');</script>

You might add 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng=' as a valid source in your script-src directives. The hash generated is the result of this in PHP:

<?phpecho base64_encode(hash('sha256', "alert('Hello, world.');", true)); ?>

I said earlier that CSP is designed to reduce XSS risks — I could have added, “… and reduce the risks of unsolicited content.” With CSP, you have to know where your sources of content are and what they are doing on your front end (inline styles, etc.). CSP can also help you force contributors, developers and others to respect your rules about sources of content!

Now your question is, “OK, this is great, but how do we use it in a production environment?”

How To Use It In The Real World Link

The easiest way to get discouraged with using CSP the first time is to test it in a live environment, thinking, “This will be easy. My code is bad ass and perfectly clean.” Don’t do this. I did it. It’s stupid, trust me.

As I explained, CSP directives are activated with a CSP header — there is no middle ground. You are the weak link here. You might forget to authorize something or forget a piece of code on your website. CSP will not forgive your oversight. However, two features of CSP greatly simplify this problem.

report-uri Link

Remember the notifications that CSP sends to the console? The directive report-uri can be used to tell the browser to send them to the specified address. Reports are sent in JSON format.

report-uri /csp-parser.php ; 

So, in the csp-parser.php file, we can process the data sent by the browser. Here is the most basic example in PHP:

$data = file_get_contents('php://input'); if ($data = json_decode($data, true)) { $data = json_encode( $data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES ); mail(EMAIL, SUBJECT, $data); } 

This notification will be transformed into an email. During development, you might not need anything more complex than this.

For a production environment (or a more visited development environment), you’d better use a way other than email to collect information, because there is no auth or rate limiting on the endpoint, and CSP can be very noisy. Just imagine a page that generates 100 CSP notifications (for example, a script that display images from an unauthorized source) and that is viewed 100 times a day — you could get 10,000 notifications a day!

A service such as report-uri.io¹⁷ can be used to simplify the management of reporting. You can see other simple examples for report-uri¹⁸ (with a database, with some optimizations, etc.) on GitHub.

report-only Link

As we have seen, the biggest issue is that there is no middle ground between CSP being enabled and disabled. However, a feature named report-only sends a slightly different header:

<?php header("Content-Security-Policy-Report-Only: <your directives>"); ?>

Basically, this tells the browser, “Act as if these CSP directives were being applied, but do not block anything. Just send me the notifications.” It is a great way to test directives without the risk of blocking any required assets.

With report-only and report-uri, you can test CSP directives with no risk, and you can monitor in real time everything CSP-related on a website. These two features are really powerful for deploying and maintaining CSP!

Conclusion Link

Why CSP Is Cool Link

CSP is most important for your users: They don’t have to suffer any unsolicited scripts or content or XSS vulnerabilities on your website.

The most important advantage of CSP for website maintainers is awareness. If you’ve set strict rules for image sources, and a script kiddie attempts to insert an image on your website from an unauthorized source, that image will be blocked, and you will be notified instantly.

Developers, meanwhile, need to know exactly what their front-end code does, and CSP helps them master that. They will be prompted to refactor parts of their code (avoiding inline functions and styles, etc.) and to follow best practices.

How CSP Could Be Even Cooler Link

Ironically, CSP is too efficient in some browsers — it creates bugs with bookmarklets. So, do not update your CSP directives to allow bookmarklets. We can’t blame any one browser in particular; all of them have issues:

• Firefox¹⁹
• Chrome (Blink)²⁰
• WebKit²¹

Most of the time, the bugs are false positives in blocked notifications. All browser vendors are working on these issues, so we can expect fixes soon. Anyway, this should not stop you from using CSP.

Other Resources And Articles Link

General Information Link

• Content Security Policy Quick Reference Guide²², Foundeo
• “Content Security Policy Level 2²³,” W3C
• “An Introduction to Content Security Policy²⁴,” HTML5 Rocks
• SecurityHeaders.io²⁵, Scott Helme
• CSP Useful, a Collection of Scripts, Thoughts About CSP²⁶, Nicolas Hoffmann, GitHub
• CSP Validator²⁷
• “Upgrade Insecure Requests²⁸,” W3C
• “CSP Cheat Sheet²⁹,” Scott Helme

Dropbox’s Series on Its CSP Policies Link

• “[CSP] On Reporting and Filtering³⁰”
• “[CSP] Unsafe-Inline and Nonce Deployment³¹”
• “[CSP] The Unexpected Eval³²”
• “[CSP] Third Party Integrations and Privilege Separation³³”

GitHub’s CSP policies Link

• “GitHub’s CSP journey³⁴”

Other Companies Link

• “We Said We’d Be Transparent: WIRED’s First Big HTTPS Snag³⁵,” Wired
• “Content Security Policy for Single Page Web Apps³⁶,” Square

About Reporting Link

• “Twitter’s CSP Report Collector³⁷,” Neil Matatall, GitHub

Examples of Directives Link

• Collection of Examples³⁸, Nicolas Hoffmann, GitHub

The Future of CSP Link

• “Making CSP Great Again!³⁹” (slides), Michele Spagnuolo and Lukas Weichselbaum
• “Content Security Policy Level 3⁴⁰,” W3C
• “Content Security Policy⁴¹,” W3C, GitHub

(ds, il, al)

Footnotes Link

1. 1 https://rocssti.net/en/example-csp-paris-web2015
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing1b.jpg
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing1b.jpg
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing5.jpg
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing5.jpg
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing2.jpg
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing2.jpg
8. 8 https://www.aaron-gustafson.com/notebook/more-proof-we-dont-control-our-web-pages/
9. 9 http://caniuse.com/#feat=contentsecuritypolicy
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing3.jpg
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing3.jpg
12. 12 http://caniuse.com/#feat=contentsecuritypolicy2
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing4.jpg
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing4.jpg
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing6b.jpg
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing6b.jpg
17. 17 https://report-uri.io/
18. 18 https://github.com/nico3333fr/CSP-useful/tree/master/report-uri
19. 19 https://bugzilla.mozilla.org/show_bug.cgi?id=866522
20. 20 https://bugs.chromium.org/p/chromium/issues/detail?id=233903
21. 21 https://bugs.webkit.org/show_bug.cgi?id=149000
22. 22 http://content-security-policy.com/
23. 23 http://www.w3.org/TR/CSP/
24. 24 http://www.html5rocks.com/en/tutorials/security/content-security-policy/
25. 25 https://securityheaders.io/
26. 26 https://github.com/nico3333fr/CSP-useful
27. 27 https://cspvalidator.org/
28. 28 https://www.w3.org/TR/upgrade-insecure-requests/
29. 29 https://scotthelme.co.uk/csp-cheat-sheet/
30. 30 https://blogs.dropbox.com/tech/2015/09/on-csp-reporting-and-filtering/
31. 31 https://blogs.dropbox.com/tech/2015/09/unsafe-inline-and-nonce-deployment/
32. 32 https://blogs.dropbox.com/tech/2015/09/csp-the-unexpected-eval/
33. 33 https://blogs.dropbox.com/tech/2015/09/csp-third-party-integrations-and-privilege-separation/
34. 34 http://githubengineering.com/githubs-csp-journey/
35. 35 https://www.wired.com/2016/05/wired-first-big-https-rollout-snag/
36. 36 https://corner.squareup.com/2016/05/content-security-policy-single-page-app.html
37. 37 https://oreoshake.github.io/csp/twitter/2014/07/25/twitters-csp-report-collector-design.html
38. 38 https://github.com/nico3333fr/CSP-useful/tree/master/csp-for-third-party-services
39. 39 https://speakerdeck.com/mikispag/making-csp-great-again-michele-spagnuolo-and-lukas-weichselbaum
40. 40 https://www.w3.org/TR/CSP3/
41. 41 https://github.com/w3c/webappsec-csp/

↑ Back to topTweet itShare on Facebook

We recently released version 3 of React Boilerplate¹, one of the most popular React starter kits, after several months of work. The team spoke with hundreds of developers about how they build and scale their web applications, and I want to share some things we learned along the way.

²

We realized early on in the process that we didn’t want it to be “just another boilerplate.” We wanted to give developers who were starting a company or building a product the best foundation to start from and to scale.

Traditionally, scaling was mostly relevant for server-side systems. As more and more users would use your application, you needed to make sure that you could add more servers to your cluster, that your database could be split across multiple servers, and so on.

Nowadays, due to rich web applications, scaling has become an important topic on the front end, too! The front end of a complex app needs to be able to handle a large number of users, developers and parts. These three categories of scaling (users, developers and parts) need to be accounted for; otherwise, there will be problems down the line.

Containers And Components Link

The first big improvement in clarity for big applications is the differentiation between stateful (“containers”) and stateless (“components”) components. Containers manage data or are connected to the state and generally don’t have styling associated with them. On the other hand, components have styling associated with them and aren’t responsible for any data or state management. I found this confusing at first. Basically, containers are responsible for how things work, and components are responsible for how things look.

Splitting our components like this enables us to cleanly separate reusable components and intermediary layers of data management. As a result, you can confidently go in and edit your components without worrying about your data structures getting messed up, and you can edit your containers without worrying about the styling getting messed up. Reasoning through and working with your application become much easier that way, the clarity being greatly improved!

Structure Link

Traditionally, developers structured their React applications by type. This means they had folders like actions/, components/, containers/, etc.

Imagine a navigation bar container named NavBar. It would have some state associated with it and a toggleNav action that opens and closes it. This is how the files would be structured when grouped by type:

react-app-by-type ├── css ├── actions │ └── NavBarActions.js ├── containers │ └── NavBar.jsx ├── constants │ └── NavBarConstants.js ├── components │ └── App.jsx └── reducers └── NavBarReducer.js

While this works fine for examples, once you have hundreds or potentially thousands of components, development becomes very hard. To add a feature, you would have to search for the correct file in half a dozen different folders with thousands of files. This would quickly become tedious, and confidence in the code base would wane.

After a long discussion in our GitHub issues tracker and trying out a bunch of different structures, we believe we have found a much better solution:

Instead of grouping the files of your application by type, group them by feature! That is, put all files related to one feature (for example, the navigation bar) in the same folder.

Let’s look at what the folder structure would look like for our NavBar example:

react-app-by-feature ├── css ├── containers │ └── NavBar │ ├── NavBar.jsx │ ├── actions.js │ ├── constants.js │ └── reducer.js └── components └── App.jsx

Developers working on this application would need to go into only a single folder to work on something. And they would need to create only a single folder to add a new feature. Renaming is easy with find and replace, and hundreds of developers could work on the same application at once without causing any conflicts!

When I first read about this way of writing React applications, I thought, “Why would I ever do that? The other way works absolutely fine!” I pride myself on keeping an open mind, though, so I tried it on a small project. I was smitten within 15 minutes. My confidence in the code base was immense, and, with the container-component split, working on it was a breeze.

It’s important to note that this doesn’t mean the redux actions and reducers can only be used in that component. They can (and should) be imported and used from other components!

Two questions popped into my head while working like this, though: “How do we handle styling?” and “How do we handle data-fetching?” Let me tackle these separately.

Styling Link

Apart from architectural decisions, working with CSS in a component-based architecture is hard due to two specific properties of the language itself: global names and inheritance.

Unique Class Names Link

Imagine this CSS somewhere in a large application:

.header { /* … */ } .title { background-color: yellow; }

Immediately, you’ll recognize a problem: title is a very generic name. Another developer (or maybe even the same one some time later) might go in and write this code:

.footer { /* … */ } .title { border-color: blue; }

This will create a naming conflict, and suddenly your title will have a blue border and a yellow background everywhere, and you’ll be digging into thousands of files to find the one declaration that has messed everything up!

Thankfully, a few smart developers have come up with a solution to this problem, which they’ve named CSS Modules⁴. The key to their approach is to co-locate the styles of a component in their folder:

react-app-with-css-modules ├── containers └── components └── Button ├── Button.jsx └── styles.css

The CSS looks exactly the same, except that we don’t have to worry about specific naming conventions, and we can give our code quite generic names:

.button { /* … */ }

We then require (or import) these CSS files into our component and assign our JSX tag a className of styles.button:

/* Button.jsx */ var styles = require('./styles.css'); <div className={styles.button}></div> 

If you now look into the DOM in the browser, you’ll see <div></div>! CSS Modules takes care of “uniquifying” our class names by prepending the application’s name and postpending a short hash of the contents of the class. This means that the chance of overlapping classes is almost nil, and if they overlap, they will have the same contents anyway (because the hash — that is, the contents — has to be the same).

Reset Properties For Each Component Link

In CSS, certain properties inherit across nodes. For example, if the parent node has a line-height set and the child doesn’t have anything specified, it will automatically have the same line-height applied as the parent.

In a component-based architecture, that’s not what we want. Imagine a Header component and a Footer component with these styles:

.header { line-height: 1.5em; /* … */ } .footer { line-height: 1; /* … */ }

Let’s say we render a Button inside these two components, and suddenly our buttons look different in the header and footer of our page! This is true not only for line-height: About a dozen CSS properties will inherit, and tracking down and getting rid of those bugs in your application would be very hard.

In the front-end world, using a reset style sheet to normalize styles across browsers is quite common. Popular options include Reset CSS, Normalize.css and sanitize.css! What if we took that concept and had a reset for every component?

This is called an auto-reset, and it exists as a plugin for PostCSS⁵! If you add PostCSS Auto Reset⁶ to your PostCSS plugins, it’ll do this exactly: wrap a local reset around each component, setting all inheritable properties to their default values to override the inheritances.

Data-Fetching Link

The second problem associated with this architecture is data-fetching. Co-locating your actions to your components makes sense for most actions, but data-fetching is inherently a global action that’s not tied to a single component!

Most developers at the moment use Redux Thunk⁷ to handle data-fetching with Redux. A typical thunked action would look something like this:

/* actions.js */ function fetchData() { return function thunk(dispatch) { // Load something asynchronously. fetch('https://someurl.com/somendpoint', function callback(data) { // Add the data to the store. dispatch(dataLoaded(data)); }); } }

This is a brilliant way to allow data-fetching from the actions, but it has two pain points: Testing those functions is very hard, and, conceptually, having data-fetching in the actions doesn’t quite seem right.

A big benefit of Redux is the pure action creators, which are easily testable. When returning a thunk from an action, suddenly you have to double-call the action, mock the dispatch function, etc.

Recently, a new approach has taken the React world by storm: redux-saga⁸. redux-saga utilizes Esnext generator functions to make asynchronous code look synchronous, and it makes those asynchronous flows very easy to test. The mental model behind sagas is that they are like a separate thread in your application that handles all asynchronous things, without bothering the rest of the application!

Let me illustrate with an example:

/* sagas.js */ import { call, take, put } from 'redux-saga/effects'; // The asterisk behind the function keyword tells us that this is a generator. function* fetchData() { // The yield keyword means that we'll wait until the (asynchronous) function // after it completes. // In this case, we wait until the FETCH_DATA action happens. yield take(FETCH_DATA); // We then fetch the data from the server, again waiting for it with yield // before continuing. var data = yield call(fetch, 'https://someurl.com/someendpoint'); // When the data has finished loading, we dispatch the dataLoaded action. put(dataLoaded(data)); }

Don’t be scared by the strange-looking code: This is a brilliant way to handle asynchronous flows!

The source code above almost reads like a novel, avoids callback hell and, on top of that, is easy to test. Now, you might ask yourself, why is it easy to test? The reason has to do with our ability to test for the “effects” that redux-saga exports without needing them to complete.

These effects that we import at the top of the file are handlers that enable us to easily interact with our redux code:

• put() dispatches an action from our saga.
• take() pauses our saga until an action happens in our app.
• select() gets a part of the redux state (kind of like mapStateToProps).
• call() calls the function passed as the first argument with the remaining arguments.

Why are these effects useful? Let’s see what the test for our example would look like:

/* sagas.test.js */ var sagaGenerator = fetchData(); describe('fetchData saga', function() { // Test that our saga starts when an action is dispatched, // without having to simulate that the dispatch actually happened! it('should wait for the FETCH_DATA action', function() { expect(sagaGenerator.next()).to.equal(take(FETCH_DATA)); }); // Test that our saga calls fetch with a specific URL, // without having to mock fetch or use the API or be connected to a network! it('should fetch the data from the server', function() { expect(sagaGenerator.next()).to.equal(call(fetch, 'https://someurl.com/someendpoint')); }); // Test that our saga dispatches an action, // without having to have the main application running! it('should dispatch the dataLoaded action when the data has loaded', function() { expect(sagaGenerator.next()).to.equal(put(dataLoaded())); }); });

Esnext generators don’t go past the yield keyword until generator.next() is called, at which point they run the function, until they encounter the next yield keyword! By using the redux-saga effects, we can thus easily test asynchronous things without needing to mock anything and without relying on the network for our tests.

By the way, we co-locate the test files to the files we are testing, too. Why should they be in a separate folder? That way, all of the files associated with a component are truly in the same folder, even when we’re testing things!

If you think this is where the benefits of redux-saga end, you’d be mistaken! In fact, making data-fetching easy, beautiful and testable might be its smallest benefits!

Using redux-saga as Mortar Link

Our components are now decoupled. They don’t care about any other styling or logic; they are concerned solely with their own business — well, almost.

Imagine a Clock and a Timer component. When a button on the clock is pressed, we want to start the timer; and when the stop button on the timer is pressed, you want to show the time on the clock.

Conventionally, you might have done something like this:

/* Clock.jsx */ import { startTimer } from '../Timer/actions'; class Clock extends React.Component { render() { return ( /* … */ <button onClick={this.props.dispatch(startTimer())} /> /* … */ ); } }

/* Timer.jsx */ import { showTime } from '../Clock/actions'; class Timer extends React.Component { render() { return ( /* … */ <button onClick={this.props.dispatch(showTime(currentTime))} /> /* … */ ); } }

Suddenly, you cannot use those components separately, and reusing them becomes almost impossible!

Instead, we can use redux-saga as the “mortar” between these decoupled components, so to speak. By listening for certain actions, we can react (pun intended) in different ways, depending on the application, which means that our components are now truly reusable.

Let’s fix our components first:

/* Clock.jsx */ import { startButtonClicked } from '../Clock/actions'; class Clock extends React.Component { /* … */ <button onClick={this.props.dispatch(startButtonClicked())} /> /* … */ }

/* Timer.jsx */ import { stopButtonClicked } from '../Timer/actions'; class Timer extends React.Component { /* … */ <button onClick={this.props.dispatch(stopButtonClicked(currentTime))} /> /* … */ }

Notice how each component is concerned only with itself and imports only its own actions!

Now, let’s use a saga to tie those two decoupled components back together:

/* sagas.js */ import { call, take, put, select } from 'redux-saga/effects'; import { showTime } from '../Clock/actions'; import { START_BUTTON_CLICKED } from '../Clock/constants'; import { startTimer } from '../Timer/actions'; import { STOP_BUTTON_CLICKED } from '../Timer/constants'; function* clockAndTimer() { // Wait for the startButtonClicked action of the Clock // to be dispatched. yield take(START_BUTTON_CLICKED); // When that happens, start the timer. put(startTimer()); // Then, wait for the stopButtonClick action of the Timer // to be dispatched. yield take(STOP_BUTTON_CLICKED); // Get the current time of the timer from the global state. var currentTime = select(function (state) { return state.timer.currentTime }); // And show the time on the clock. put(showTime(currentTime)); }

Beautiful.

Summary Link

Here are the key takeaways for you to remember:

• Differentiate between containers and components.
• Structure your files by feature.
• Use CSS modules and PostCSS Auto Reset.
• Use redux-saga to:
  • have readable and testable asynchronous flows,
  • tie together your decoupled components.

(il, vf, al)

Footnotes Link

1. 1 https://github.com/mxstbr/react-boilerplate
2. 2 https://twitter.com/mxstbr/status/732833839140229120
3. 3 https://twitter.com/mxstbr/status/732833839140229120
4. 4 https://github.com/css-modules/css-modules
5. 5 http://postcss.org/
6. 6 https://github.com/maximkoretskiy/postcss-autoreset
7. 7 https://github.com/gaearon/redux-thunk
8. 8 https://github.com/yelouafi/redux-saga

↑ Back to topTweet itShare on Facebook

Inspiration isn’t tied to a specific timeframe or shows up when you need it. There isn’t a magic formula to rely on. Luckily, this year’s summer vacation was fruitful in providing us with many visual stimuli to get the creative process going. Enjoy!

The Hollywood Reporter Link

This editorial illustration for the Hollywood Reporter has a really nice style. The face expressions are so well done with just a few simple lines. That’s not easy to accomplish!

¹

Wanderlust Alphabet #A Link

A fantastic series to get the travel bug. Just by looking at this you’ve probably already guessed that the ‘A’ in this case stands for ‘Amsterdam’. Lovely usage of two complimentary colors cleverly applied, especially to add depth into shadows and highlights.

⁴

Wanderlust Alphabet #B Link

Second installment of the travel bug illustrations I’ll be sure to follow. The letter ‘B’ stands for ‘BarcelonaÄ. Again, look at how depth is created by using a strong color palette and this beautiful clean 2D style. The famous parts of this city are so well done with such simple lines.

⁷

Giphy Pool Link

James Curran is one of the masters of animated gifs to watch. This one made laugh and is so colorfully pleasant. And look at that jump! Just perfect.

Slack — Work Simplified Link

Great integration of the colors used by Slack¹¹. It shows how crazy work life is. Beautiful illustration style. Just perfect branding material.

¹²

Stamps Inspired (1965) Link

Illustration based on original stamps from Bulgaria. Quite beautiful! I love the bright yellow in combination with the darker color, as well as the red and orange tones.

¹⁵

Saga Magazine Link

I first noticed the interesting structure/texture that works so well with the chosen colors. Love the circles, and ‘straight’ 90° lines — very geometrical. Feels a bit like a puzzle.

¹⁸

Vans Surf Pro Classic Link

The colors just pop so magnificently off the screen in this surf-related illustration. Very fitting for the subject. Inspiration came from late 80s and 90s surf artwork.

²¹

Firenze Duomo Link

Lovely illustration of the Duomo in Florence. Color palette is on point. Tasty texture, too. Simply beautiful to look at and get inspired.

²⁴

In The Woods Link

Well taken shot of one of my favorite moments in the month of May. The smell is just overwhelming of these beautiful bluebells. Magical light and bokeh.

²⁷

Mastercard Campaign Link

Some clever use of white space. The dog is just so awesomely done.

³⁰

City Bike Miami Link

Love the eyes and the illusion of the hair in the wind. Same with the dog ears, so cute. That lovely summer feeling on the bike! Perfectly expressed.

³³

Umami Link

An illustration which takes on curiosity and exploration of different tastes and flavors. It’s a great composition and an inspiring color palette.

³⁶

Cinque Terre Link

Great color scheme! Illustration that documents a trip to Italy to see Cinque Terre. It’s a must-see apparently. The geometry combined with how the colors are applied is just so perfect.

³⁹

Protected Trees Link

An illustration for The Telegraph‘s property section on buying a home with protected trees in vicinity. Some inspiring choices of shapes and lines.

⁴²

Shop Magazine — Eye Blue Link

If you like interesting collages, you’ll love the work of Jimmy Turell. The colors and the half-tone effects are the items that made me pick this one.

⁴⁵

Year In Ideas (2014) Link

Created for Wired⁴⁸. Another color combo that works wonderfully well together. I always look at how things are constructed, and I’m quite impressed by this illustration.

⁴⁹

The Westfjords Link

Beautiful colors of the sky — almost like fire.

⁵²

Saison Link

Wonderful die cut beer label design. I always admire such great lettering work. Be sure to check the rest of Ben Didier’s the portfolio⁵⁵ as there is some stellar lettering work in there.

⁵⁶

Wanderlust Alphabet #C Link

The third installment in the Wanderlust alphabet that Jack Daly is creating. This time I believe the ‘C’ stands for ‘Copenhagen’. Interesting palette of colors in this one.

⁵⁹

No-Li Small Batch Festival Link

Nice logo for the No-Li Brewhouse’s Small Batch Festival. The different styles of typefaces really work well together. Beautiful and elegant!

⁶²

SHOP Magazine Austria Spring/Summer 2016 Link

The cover illustration for the spring edition of SHOP magazine in Austria. It depicts the Museum quarter of Vienna. Lovely combination of geometrical and elegant organic lines. Such perfect soft color tones combined with a few more brighter accents.

⁶⁵

Girl On The Go Link

Such a wonderful scene! Especially the colors used and the inspiring details such as the skirt of the woman and the boots of the guy sitting on the bench on the right.

⁶⁸

Wanderlust Alphabet #D Link

The fourth installment in the Wanderlust alphabet that Jack Daly is creating. This time the ‘D’ stands for ‘Dublin’. Just look at how shadows and highlights are applied — such perfect contrast.

⁷¹

An Afternoon At Miticocha Link

Well worth a two-hour round-trip hike I would say if you get to see a scenery like this. This place has a beautiful view of Ninachanca, Jirishanca, and Jirishanca Chico. Pure wanderlust!

⁷⁴

Ponderosa 2016 Link

Not just because there’s a bicycle in it 😉 Most of all picked because it has a wonderful composition with fine details.

⁷⁷

Music Girls Link

A wonderful fusion between contemporary and retro. Some inspiring texture work going on in there as well. The wooden floor and the little details on the faces — look at those eyes!

⁸⁰

Facebook Events — Naomi Link

Part of a set of illustrations created for Facebook’s event cover images. Totally loving these colors! Lovely simplistic style, too.

⁸³

Hiding Behind Mom Link

A great example of what is possible with a few pencil strokes. The socks on the girl are adorable.

⁸⁶

Look Around Link

An illustration to get the travel bug going. Great style and subtle usage of textures. For a touristic guide of the Garda Lake.

⁸⁹

Summertime Link

“Let the waves hit your feet and the sand be your seat!” Exactly. I love compositions where there is much to discover. Great mix of colors.

⁹²

Summer Bike Ride Link

Love how the diagonal line adds to the whole composition. Subtle use of shadows and transparency. Such perfect curved lines, especially hair and hat are done so perfectly in every way. Looking at this makes me want to go outside and ride.

⁹⁵

Wanderlust Alphabet #E Link

The fifth installment in the Wanderlust alphabet that Jack Daly is creating. This time the ‘E’ stands for ‘Edinburgh’. The color treatment is great again. So many good details.

⁹⁸

American Illustration 33 Link

Super clean and the character really gets your attention. Love how the stockings are done. So simple, yet so elegant.

¹⁰¹

Procesni Mehanize Link

Illustrating the never-ending cycle. I always love to analyze the many elements that make a fantastic illustration. You can learn a lot from it.

¹⁰⁴

Blossom Link

One of the hardest things to get right is shooting directly into sunlight. This one nails it beautifully. Summer vibes!

¹⁰⁷

Focus Magazine Illustration Link

Adorable cuteness and great usage of some basic shapes. Look at that cute mustache of the guy on the left. The color palette is absolutely perfect.

¹¹⁰

The Joy Of New Roads Link

Getting out on your bicycle and discovering new roads and amazing sceneries is a joy hard to describe in words. Lovely light in this photo.

¹¹³

City Guide Berlin-London-Paris Link

Inspiring arrangement of all the different items in this composition. Beautiful 2D style with lovely subtle textures and patterns to finish things off. The colors also draw you in.

¹¹⁶

Velorama — Lightyear Link

Love the combination of line art and typography. Looks so elegant! The bike is so well drawn. It shines! Look at the frame, the handlebars and the saddle.

¹¹⁹

Els Amos Ocults Del Totxo Link

The Brickmasters in the Shadows. Great editorial illustration. The duplication of the gentleman withthe hat is the eye-catcher. The chosen colors make the whole scene complete.

¹²²

Bison Link

Right on target! Love what is done with the lines here.

¹²⁵

No Man’s Sky Link

Pretty fly! It looks highly complicated but is quite simplistic at the same time. The color scheming is on point, too. The subtle background gradient is so perfect.

¹²⁸

FiveThirtyEight Election Link

This looks fantastic! The many layers of typography are so inspiring.

¹³¹

The Secret To Sleep Link

Lovely muted color palette for starters and some subtle textures work in combination with double shading makes this interesting. I really love the imagination and fantasy.

¹³⁴

On Geoengineering Link

Created for an editorial piece about geoengineering. Love how it all has been translated to the screen.

¹³⁷

Bicycle Adventure Meeting (BAM) Link

In my opinion, a bit of humor always adds something special to any illustration. This one is about the Bicycle Adventure Meeting, a place where lonely, adventurous bike travelers join together. The lovely bright colors give this illustration a happy feeling.

¹⁴⁰

Brooklyn Bridge Link

Well captured! The tranquility of the water is what does it for me. Just the right shutter speed I’m assuming to get the effect.

¹⁴³

SHOP Magazine — Czech Republic Link

Charming textured style and an inspiring color palette.

¹⁴⁶

Bicycling Magazine Link

Editorial illustration for an article on the importance of teamwork when learning road biking. I like how the three guys are nicely aligned and how the legs are drawn. As an illustrator, you have the freedom to break with reality in order to achieve beautiful compositions.

¹⁴⁹

(yk, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/wp-content/uploads/2016/09/hollywood-reporter-ale-big-opt.jpg
2. 2 https://www.behance.net/gallery/41166307/Editorial-Illustration-vol-1
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/09/hollywood-reporter-ale-big-opt.jpg
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/09/wanderlust-series-A-big-opt.jpg
5. 5 https://dribbble.com/shots/2872483-Wanderlust-Alphabet
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/09/wanderlust-series-A-big-opt.jpg
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/09/wanderlust-series-B-big-opt.jpg
8. 8 https://dribbble.com/shots/2874109-Wanderlust-Alphabet
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/09/wanderlust-series-B-big-opt.jpg
10. 10 https://dribbble.com/shots/2836393-LA-Gifathon-Day-13
11. 11 https://slack.com/
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/09/work-simplified-slack-big-opt.jpg
13. 13 https://www.behance.net/gallery/40894619/Slack-Work-Simplified
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/09/work-simplified-slack-big-opt.jpg
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/09/stamps-inspired-bulgaria-big-opt.jpg
16. 16 https://dribbble.com/shots/2876067-STAMPS-INSPIRED
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/09/stamps-inspired-bulgaria-big-opt.jpg
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/09/saga-magazine-big-opt.jpg
19. 19 https://www.behance.net/gallery/41111981/Selected-Editorial-Work-01
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/09/saga-magazine-big-opt.jpg
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Vans-Surf-Pro-Classic-big-opt.jpg
22. 22 https://www.behance.net/gallery/41053301/Vans-Surf-Pro-Classic
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Vans-Surf-Pro-Classic-big-opt.jpg
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/09/firenze-duomo-big-opt.jpg
25. 25 https://dribbble.com/shots/2635802-Firenze
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/09/firenze-duomo-big-opt.jpg
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/09/in-the-woods-big-opt.jpg
28. 28 https://www.flickr.com/photos/kirstinmckee/27120293751/
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/09/in-the-woods-big-opt.jpg
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Mastercard-campaign-big-opt.jpg
31. 31 http://www.stephenkelleher.com/Mastercard-1
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Mastercard-campaign-big-opt.jpg
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/09/city-bike-miami-big-opt.jpg
34. 34 http://agentpekka.com/artist/pietari-posti/citi-bike-miami-4/
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/09/city-bike-miami-big-opt.jpg
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Umami-big-opt.jpg
37. 37 https://www.behance.net/gallery/41466863/Various-illustrations-2016
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Umami-big-opt.jpg
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Cinque-Terre-big-opt.jpg
40. 40 https://dribbble.com/shots/2872019-Cinque-Terre
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Cinque-Terre-big-opt.jpg
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Protected-trees-big-opt.jpg
43. 43 https://www.behance.net/gallery/41466863/Various-illustrations-2016
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Protected-trees-big-opt.jpg
45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/09/eye-blue-big-opt.jpg
46. 46 http://www.jimmyturrell.com/2011/09/19/various-collages/
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/09/eye-blue-big-opt.jpg
48. 48 http://www.wired.com/
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/09/year-in-ideas-2014-big-opt.jpg
50. 50 http://www.vesa-s.com/Wired-1
51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/09/year-in-ideas-2014-big-opt.jpg
52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/09/The-Westfjords-big-opt.jpg
53. 53 https://www.flickr.com/photos/thefella/9155895849/
54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/09/The-Westfjords-big-opt.jpg
55. 55 https://dribbble.com/prettyuglydesign
56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/09/saison-big-opt.jpg
57. 57 https://dribbble.com/shots/2139224-Saison
58. 58 https://www.smashingmagazine.com/wp-content/uploads/2016/09/saison-big-opt.jpg
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Wanderlust-Alphabet-C-big-opt.jpg
60. 60 https://dribbble.com/shots/2881262-Travel-Letters-C-Dribbble
61. 61 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Wanderlust-Alphabet-C-big-opt.jpg
62. 62 https://www.smashingmagazine.com/wp-content/uploads/2016/09/no-li-small-batch-big-opt.jpg
63. 63 http://www.2016.rileycran.com/#/no-li-small-batch-festival/
64. 64 https://www.smashingmagazine.com/wp-content/uploads/2016/09/no-li-small-batch-big-opt.jpg
65. 65 https://www.smashingmagazine.com/wp-content/uploads/2016/09/shop-magazine-austria-big-opt.jpg
66. 66 http://www.lyonsa.com/SHOP-magazine-Austria
67. 67 https://www.smashingmagazine.com/wp-content/uploads/2016/09/shop-magazine-austria-big-opt.jpg
68. 68 https://www.smashingmagazine.com/wp-content/uploads/2016/09/girl-on-the-go-big-opt.jpg
69. 69 https://www.behance.net/gallery/41530311/Editorial-projects-june-july-2016
70. 70 https://www.smashingmagazine.com/wp-content/uploads/2016/09/girl-on-the-go-big-opt.jpg
71. 71 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Wanderlust-Alphabet-D-big-opt.jpg
72. 72 https://dribbble.com/shots/2885564-Wanderlust-Alphabet-D
73. 73 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Wanderlust-Alphabet-D-big-opt.jpg
74. 74 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Miticocha-big-opt.jpg
75. 75 https://www.flickr.com/photos/zolashine/27570839274/
76. 76 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Miticocha-big-opt.jpg
77. 77 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Ponderosa-2016-big-opt.jpg
78. 78 https://www.behance.net/gallery/41404221/Ponderosa-2016
79. 79 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Ponderosa-2016-big-opt.jpg
80. 80 https://www.smashingmagazine.com/wp-content/uploads/2016/09/music-girls-big-opt.jpg
81. 81 http://www.lorislora.com/First-Aid-Kit
82. 82 https://www.smashingmagazine.com/wp-content/uploads/2016/09/music-girls-big-opt.jpg
83. 83 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Facebook-Events-Naomi-big-opt.jpg
84. 84 http://naomiwilkinson.co.uk/Facebook-Events
85. 85 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Facebook-Events-Naomi-big-opt.jpg
86. 86 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Hiding-behind-mom-big-opt.jpg
87. 87 http://simonaciraolo.com/illustration/
88. 88 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Hiding-behind-mom-big-opt.jpg
89. 89 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Garda-Lake-tourist-guide-big-opt.jpg
90. 90 https://www.behance.net/gallery/11760603/Look-Around
91. 91 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Garda-Lake-tourist-guide-big-opt.jpg
92. 92 https://www.smashingmagazine.com/wp-content/uploads/2016/09/summertime-putri-big-opt.jpg
93. 93 https://www.behance.net/gallery/24118509/Summertime
94. 94 https://www.smashingmagazine.com/wp-content/uploads/2016/09/summertime-putri-big-opt.jpg
95. 95 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Summer-bike-ride-tjeerd-big-opt.jpg
96. 96 https://dribbble.com/shots/2909923-Summer
97. 97 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Summer-bike-ride-tjeerd-big-opt.jpg
98. 98 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Wanderlust-Alphabet-E-big-opt.jpg
99. 99 https://dribbble.com/shots/2893203-Wanderlust-Alphabet-E
100. 100 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Wanderlust-Alphabet-E-big-opt.jpg
101. 101 https://www.smashingmagazine.com/wp-content/uploads/2016/09/American-Illustration-33-big-opt.jpg
102. 102 https://www.behance.net/gallery/16752439/American-Illustration-33
103. 103 https://www.smashingmagazine.com/wp-content/uploads/2016/09/American-Illustration-33-big-opt.jpg
104. 104 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Procesni-Mehanize-big-opt.jpg
105. 105 https://www.behance.net/gallery/41466863/Various-illustrations-2016
106. 106 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Procesni-Mehanize-big-opt.jpg
107. 107 https://www.smashingmagazine.com/wp-content/uploads/2016/09/blossom-big-opt.jpg
108. 108 https://unsplash.com/photos/O85h02qZ24w
109. 109 https://www.smashingmagazine.com/wp-content/uploads/2016/09/blossom-big-opt.jpg
110. 110 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Focus-Magazine-Illustration-big-opt.jpg
111. 111 https://www.behance.net/gallery/41407903/Focus-Magazine-illustrations
112. 112 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Focus-Magazine-Illustration-big-opt.jpg
113. 113 https://www.smashingmagazine.com/wp-content/uploads/2016/09/The-joy-of-new-roads-big-opt.jpg
114. 114 https://unsplash.com/new?photo=VfUN94cUy4o
115. 115 https://www.smashingmagazine.com/wp-content/uploads/2016/09/The-joy-of-new-roads-big-opt.jpg
116. 116 https://www.smashingmagazine.com/wp-content/uploads/2016/09/city-guide-paris-london-berlin-big-opt.jpg
117. 117 http://www.maitefranchi.com/index.html
118. 118 https://www.smashingmagazine.com/wp-content/uploads/2016/09/city-guide-paris-london-berlin-big-opt.jpg
119. 119 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Velorama-Lightyear-big-opt.jpg
120. 120 http://silencetv.com/work.html
121. 121 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Velorama-Lightyear-big-opt.jpg
122. 122 https://www.smashingmagazine.com/wp-content/uploads/2016/09/the-Brickmasters-big-opt.jpg
123. 123 http://www.raulsoria.de/#/els-amos-ocults-del-totxo/
124. 124 https://www.smashingmagazine.com/wp-content/uploads/2016/09/the-Brickmasters-big-opt.jpg
125. 125 https://www.smashingmagazine.com/wp-content/uploads/2016/09/bison-big-opt.jpg
126. 126 https://dribbble.com/shots/2899113-Bison
127. 127 https://www.smashingmagazine.com/wp-content/uploads/2016/09/bison-big-opt.jpg
128. 128 https://www.smashingmagazine.com/wp-content/uploads/2016/09/No-Mans-Sky-big-opt.jpg
129. 129 https://dribbble.com/shots/2894892-No-Man-s-Sky
130. 130 https://www.smashingmagazine.com/wp-content/uploads/2016/09/No-Mans-Sky-big-opt.jpg
131. 131 https://www.smashingmagazine.com/wp-content/uploads/2016/09/FiveThirtyEight-Election-big-opt.jpg
132. 132 https://dribbble.com/shots/2905222-FiveThirtyEight-Election
133. 133 https://www.smashingmagazine.com/wp-content/uploads/2016/09/FiveThirtyEight-Election-big-opt.jpg
134. 134 https://www.smashingmagazine.com/wp-content/uploads/2016/09/The-Secret-To-Sleep-big-opt.jpg
135. 135 https://dribbble.com/shots/2924242-The-Secret-To-Sleep
136. 136 https://www.smashingmagazine.com/wp-content/uploads/2016/09/The-Secret-To-Sleep-big-opt.jpg
137. 137 https://www.smashingmagazine.com/wp-content/uploads/2016/09/geoengineering-big-opt.jpg
138. 138 http://www.raulsoria.de/#/om-de-opwarming-te-stoppen-moeten-we-het-klimaat-leren-manipuleren/
139. 139 https://www.smashingmagazine.com/wp-content/uploads/2016/09/geoengineering-big-opt.jpg
140. 140 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Bicycle-Adventure-Meeting-big-opt.jpg
141. 141 http://www.fabioconsoli.com/bam-bike-adventure-meeting/
142. 142 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Bicycle-Adventure-Meeting-big-opt.jpg
143. 143 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Brooklyn-Bridge-big-opt.jpg
144. 144 https://unsplash.com/?photo=-sQ4FsomXEs
145. 145 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Brooklyn-Bridge-big-opt.jpg
146. 146 https://www.smashingmagazine.com/wp-content/uploads/2016/09/shop-magazine-czech-republic-big-opt.jpg
147. 147 https://www.behance.net/gallery/31551067/Mait-Franchi-SHOP-magazine-Czech-Republic
148. 148 https://www.smashingmagazine.com/wp-content/uploads/2016/09/shop-magazine-czech-republic-big-opt.jpg
149. 149 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Bicycling-Magazine-douglas-big-opt.jpg
150. 150 http://www.douglasjones.com/134442/1336565/gallery/bicycling-magazine
151. 151 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Bicycling-Magazine-douglas-big-opt.jpg

↑ Back to topTweet itShare on Facebook