Weekly News for Designers № 401

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter or follow us on Twitter for some more amazing design articles, resources and freebies.

New Resources & Tools

Vivify – A free CSS animation library.

turretcss – A styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.

10 Super-Useful React Components, Libraries & Tools – A collection of cool React components to help you create a top-notch interface.
10 Super-Useful React Components, Libraries & Tools

Baseline Type – Great typographic pairings with quick to implement HTML & CSS.
Baseline Type

Study Web Development – A free eBook on how to become a web developer and successful freelancer.
Study Web Development

7 Columns Calendar Creator – An easy-to-use plugin for Sketch that allows you to generate a 7 Columns Calendar for any month.
7 Columns Calendar Creator

Free UI Resources

Current Icon Family – Attractive SVG icons with several style options.
Current Icon Family

Wires – Two free wireframe UX kits for mobile and web, built exclusively for Adobe XD.

10 Free Onboarding UIs Built With CSS and JavaScript – A collection of onboarding UIs that offer plenty of ideas for inspiration and code snippets to help you get started.
10 Free Onboarding UIs Built With CSS and JavaScript

Free WordPress Resources

WordPress Plugins to Improve Website Accessibility – WordPress plugins that cover a wide range of accessibility issues.
WordPress Plugins to Improve Website Accessibility

Simple Tools and Tips to Help You Speed Up WordPress – Plugins and techniques you can use to improve the performance of your WordPress site.
Simple Tools and Tips to Help You Speed Up WordPress

8 Free WordPress Maintenance and “Coming Soon” Plugins – WordPress plugins that put your site into maintenance mode or add “Coming Soon” pages.
8 Free WordPress Maintenance and “Coming Soon” Plugins

Learning Guides, Tutorials & Tips

Mirrored atomicity: designers and developers speaking the same language By Vitor Guerra
Mirrored atomicity: designers and developers speaking the same language

12 Essential Scroll-To-View Animation Trends By Jake Rocheleau
12 Essential Scroll-To-View Animation Trends

Bringing Sketch and After Effects Closer Together By Josh Fleetwood
Bringing Sketch and After Effects Closer Together

How To Create A Sketch Plugin With Front-End Technologies By Zachary Schuessler
How To Create A Sketch Plugin With Front-End Technologies

7 Really Good Unsubscribe Pages + Preference Centers By Kait Creamer
7 Really Good Unsubscribe Pages + Preference Centers

Medium’s New Logo: A Review By Luke Trayser
Medium’s New Logo: A Review

…and finally…

Offline Only – Chris Bolin encourages us to go offline to be more productive.
Offline Only

Browse the Designer News Archives

The post Weekly News for Designers № 401 appeared first on Speckyboy Design Magazine.

Collective #345


Yes, That Web Project Should Be a PWA

Aaron Gustafson writes about how misinformation has convinced many designers and developers that PWAs aren’t appropriate for their projects and shows how actually every site should be a PWA.

Read it


Now UI Kit

A responsive Bootstrap 4 UI kit by Invision and Creative Tim.

Get it



A bookmarks alternative with lots of great features that groups your tabs based on when you saved them.

Check it out



Semiotic is a React based framework optimized to enable effective communication through data visualization.

Check it out



A unified SDK and API to positioning, geofencing and triggering that allows to build apps that react to the physical world.

Check it out

Collective #345 was written by Pedro Botelho and published on Codrops.

Comics of the Week #405

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Saving a buck

Hard to please



Can you relate to these situations? Please share your funny stories and comments below…

4 Modern Calligraphy Font Families, 30+ Individual Typefaces – only $12!


WordPress SEO Tips: 15 Steps To Improve Your Rankings within 30 Days

Search Engine Optimization is a fascinating concept which is advantageous to offer a higher and accurate rank for the site in various search engines like Google, Yahoo, Bing etc. Obtaining a commendable SEO helps to increase one’s WordPress Search Engine Results Page (SERP) ranking. To get the WordPress link to be at a higher position than the millions of other links available online requires a good SEO strategy for which certain steps are to be followed. SEO Favorable Title The title of the WordPress post plays a very crucial role in positioning the post at a higher level and increasing … Continue reading

Visit us at InstantShift.com


What’s the Best Music for Designing to?

Madonna once said that music makes the rebel and the bourgeoisie come together. I find it difficult to believe that either of these demographics would spend much time listening to pop from the year 2000, but who am I to argue with Madonna?

Now, for the young rebels out there, Madonna was our… ummm… Beyonce, maybe? I’m not good at these comparisons.

In any case, Madonna did not say that music is a huge part of the web design process, but she should have. Not on the front-end, thank God. Anyone who autoplays music on their site should be forced to browse with Netscape Navigator for a year, per infraction. But creatives of all kinds, the world over, use music to help them create. Whether they use it to lighten the mood during tedious tasks, to occupy the parts of their brain that aren’t busy, or take direct inspiration from it, music is there, helping synapses make connections.

We thought it would be fun to ask our community what music they listen to. To keep some semblance of organization, we’re going to do this with a series of polls. However, no one on this Earth has the time or resources it would take to make a comprehensive music genre survey, so this will understandably be limited. We’re also going to heavily favor the kinds of music that people typically use to help them concentrate.

Can’t find an option you like? Go blow up the comment section with your genre choices.

Lyrics or no lyrics?

Our first poll is going to be pretty all-encompassing. Simply put, do you like your work music to have words in it, or not? Some people simply can’t concentrate at all if the music has any lyrics, whereas others treat all music as a sort of extra-pleasant white noise.

The Classical Poll

Classical music is often treated as one genre by people who aren’t that into it. Dig past the surface, and you could say that every major composer developed their own genre. Some of them developed more than one, and nearly all of them experimented with what their friends came up with.

Ride of the Valkyries by Wagner is almost the quintessential “epic moment music”. Beethoven wrote massive epic symphonies, too (quite a few, in fact), but some of his most recognizable tunes are piano pieces for quieter moments, such as Fur Elise, and Moonlight Sonata. Many will recognize Tchaikovsky’s most famous work as the soundtrack to fairy tales and cartoons, while Debussy is known for his more sedate orchestral works.

So what’s your classical poison?

The Pop Poll

From cheesy, naïve love ballads, to the literal song-and-dance routines of boy bands, pop is designed to appeal to as many of us as possible. So… it’s no surprise that it does appeal to most of us. I mostly listen to metal and techno of various kinds, but even I can’t help but love some now-classic ’90s pop from my youth. However, I still don’t have a favorite Backstreet boy, and even if I do like some of their songs, I refuse to learn their names.

Going back further, we have Michael and Madonna, the indisputable king and queen of the genre (sorry Cher). Bringing it back to the present, Divas rule the scene, with Beyonce and Lady Gaga each having a fan base that would make some cult leaders green with envy. Look, I’m not saying either one is leading a cult, but if they did, they’d have so many people signing up.

So if you’re in the mood to have your ears soothed by the familiar while you make websites, which would you go for?

The Pre-rock Poll

Before Rock ‘n’ Roll, we had… well we had a lot. But the musical styles that were most popular right before the the introduction of rock include Jazz, Blues, Country, and Big Band. Heck, the Beatles made albums that were almost entirely Country. Beyond that, I have to admit that I am not particularly familiar with the subgenres here, nor any of the legendary musicians of these musical styles. This is largely why they got grouped together.

If you’re in the mood from something out of another time, or just something from the rural U.S., what’s your pick?

The Rock Poll

This is not the greatest music blog post in the world. This is just a tribute. To call yourself a lover of rock doesn’t really narrow it down, much. Rock has more subgenres than several other styles of music combined, and half of them are just metal subgenres. But, if you think of it in terms of your mood, it’s a little easier.

Wanna listen to something angry? Metal always has your back. Ditto grunge. Want something romantic and sappy? Soft rock probably has something for you. Want to hear the legends scream their way to greatness? Classic rock now technically includes everything from the ’90s on backwards, so there’s a lot there. Listening to something but you have no idea what to call it? It probably fits into “alternative rock”.

So what’s your mood?

The Electronica Poll

Ah, electronica. As a young whippersnapper in the ‘90s, we just called it “techno”, and we liked it that way! Oh, don’t hurt me Disco fans, you know I’m kidding. Mostly.

But yeah, we have Disco, and we have all the dance music that came post ‘90s. Then there’s more experimental instrumental stuff like Trance, which was brought to the mainstream, and my attention, by the late Robert Miles. Rest in peace. Then there’s Chillout, a decidedly slower, more sedate form of electronica, often instrumental, which is supposed to help you do what it says on the label.

The Hip-hop Poll

I’ll admit, hip-hop is a genre about which I could be much better educated, though I do rather like most of what I’ve been exposed to. The most popular genres seem to have sprung from the classic days of rap.

There’s Gangsta Rap, for when you need motivation to get your hustle on. There’s Conscious Rap for those who want to spend their day contemplating social issues, and wireframing. Then there’s Battle Rap, where people insult each other a lot. Hey, it can be funny. Lastly, I’m including Instrumental Hip-hop, which can be quite relaxing, actually.

So that’s everything I have space for, and then some. I am now expecting some actual music experts to go nuts in 3…2…1…

Convert PDFs into Interactive Animated Publications – only $9.97!


Why Designers Need Creativity and Practicality to Succeed

One of the lasting messages we see across the world of web design is the idea of inspiring creativity. Designers everywhere are encouraging us to find our inner artist by any means possible. I admit, I’ve written a post or two on that very subject.

In many ways, that makes perfect sense. Our jobs require a certain level of creativity – we probably wouldn’t be in this line of work without it. But that doesn’t mean endless creativity has to flow through our veins. It’s just not realistic.

What we never hear mentioned is another essential skill: Practicality. I know, it sounds like something your grandparents would talk about. But I’d argue that it’s just as – if not more – important that being creative.

Practical Matters

Practical Matters

Being practical may mean different things to different people. For designers, it’s all about doing things in a safe and well-thought-out manner. The results show up in things like placing navigation where users are most likely to expect it and making sure websites are accessible, among other things.

In other words, our job is to carry out the main mission of virtually every website: Build something that allows users to access the information they need as painlessly as possible. You can’t do that without being at least a little practical.

Back in the early days of web design, practicality wasn’t often a consideration. Since the web was a new medium, the philosophy was often more about throwing a bunch of components together and seeing what would stick.

I think about the first websites I built and how little consistency there was from page to page. There wasn’t a whole lot of thought put into why I did things – I just did them.

But as the web has matured, we have seen the light of what practicality can do for design. What the best designers have found is that all the crazy special effects in the world mean nothing if they take away from the purpose of the website. Being practical means that we’re only adding bells and whistles that enhance the user experience – not take away from it.

When Creative Solutions Turn Practical

Where creativity comes in is not only about aesthetics, but also finding solutions to potential problems. For example, some wise soul out there decided that mega menus were the answer to helping people navigate a site with a large amount of categorized content.

But the interesting thing is that sometimes a creative solution can grow up to become a practical one. In the case of mega menus, we now see that as an acceptable way to implement vast navigation structures. In the right circumstance, it’s the most practical thing to do.

That’s not to say we don’t still have room for a more unbridled type of creative work. There are still designers out there working to build experimental interfaces and pushing the boundaries of what works on the web. Those renegades are still an important part of the overall picture.

Their risk-taking is an essential part of moving things forward. And, their successes may very well become the next mainstream solution to whatever issues we face.

The Practical Approach to Design

The Practical Approach to Design

How, then to add practicality to your design arsenal? The good news is that you’re most likely doing some practical things every day – even if you aren’t really thinking about it in that way.

The process of planning out a project, for instance, is a very practical thing to do. Figuring out content structure and the specific needs of the site you’re working on are the first steps. From there, you move on to prototyping, revision and implementation. It all sounds like a pretty well-thought-out way to do things.

Beyond that, the key is to think about the challenges you face and how to best approach them. Think it out rather than go for the first idea that pops into your head. Look deeper into the potential issues each idea can resolve, along with any unintended consequences that will go along with it. In the end, make your decision based on what makes the most sense for users.

At that point, it’s time for your creativity to kick in. Implementing the choices you’ve made will require a creative touch. Going back to the earlier example, if we decide that using a mega menu is the best route to go, we then need to carry out the task of building it using our imagination. The menus will need styled, organized and any special touches can be added in from there.

If you’re working on a problem so unique that it either doesn’t have a practical solution or the ones out there aren’t so great, you can then use creativity to make things better. Remember that everything now considered practical was once radical to someone out there.

You Need Both

You Need Both

While creative inspiration may be the sexier subject, a practical approach to web design is just waiting for someone to give it some love – and rightfully so. It, after all, is a big part of the overall equation when it comes to creating a great website.

Therefore, this is my ode to practicality. Let’s celebrate all it does and can do for us. Alright, now it can go quietly into the background. Bring on the creative inspiration posts.

The post Why Designers Need Creativity and Practicality to Succeed appeared first on Speckyboy Design Magazine.

7 Questions to Ask your Client as a Freelancer

Understanding what your client wants is absolutely crucial as a freelancer. Bad communication can threaten your livelihood as a freelancer, putting you at risk of not only not getting clients, but of developing a bad reputation on sites like Upwork or Freelancer, which means you’ll hardly stand to make it as a freelancer.

You need to effectively hone your communication skills by developing a standard way of talking to clients and asking them questions before you even start. It’ll save you lots of time (and since time is money, it’ll save you money, too!) in regards to completing a project, and it’ll ensure that you deliver a quality product without having to visit the drawing board over and over again.

1: What is the timeline for the project?

This is an easy one. Know how long the client expects you to take so you can then cut the project up into smaller pieces and help you stay on task.

Additionally, if you find out upfront that the client’s expectations are unrealistic, you can communicate that with them and find a timeline that works for the both of you. Don’t let a client try and get you to develop a website in two days if you don’t think you can handle it.

2: Who is your intended audience?

Get them to establish the end users that will be utilizing the product you develop. It can be risky to jump into a project without fully understanding who it’s for.

You’ll be able to research specific demographics and see what works best and what attracts them the most if you know who you’re targeting.

3: What is your personal or corporate brand?

Determine their vision, mission, desired tone and mood in regards to verbiage and intent, brand, and the overall image they want to communicate through their end product.

4: What are your intended goals from the project deliverable?

Do they expect to gain more visitors to their site? Do they just want to have a visually impressive eCommerce site or app? Do they want copy that’s going to sell a product? Encourage site visitors to donate to a foundation?

Know upfront what their goals are.

5: What are some additional concerns, requirements, or comments they want you to be aware of?

Give the client the chance to ask a few things that you didn’t offer up the answer to already. This lets them feel like you value their feedback, and lets you hear things you didn’t even know you needed to know.

6: Do you have any further clarification on…?

Ask for further clarification on anything they may have left to the imagination. This is especially crucial if their job description hasn’t fully explained what their project is or what they need from you.

7: Would you like to have a phone call or Skype session?

Asking this upfront will let the client know that your communication channels are wide open, and they’ll feel more comfortable knowing they can reach you through an alternate medium should explaining things through text prove to be difficult for them.


Let them know about the business overhead and any additional research. Don’t forget that sometimes projects require a lot more than clients realize, and helping them to understand the full extent of their project is going to make them trust you a lot more, have faith you can deliver a quality product, and know more about your process.

Also, attempt to standardize your methods of communication. It’s helpful if you can utilize Google Forms to create a standard form with the questions listed above that you can send to every client. It communicates professionalism and shows that you know what you’re doing.

Don’t let bad communication be your downfall. You might be afraid of a phone call, or you might be afraid to let a client know that you need an extension, but clients want more than anything an open and consistent form of discussion so they feel like they’re able to be more involved in the process.

Don’t make the mistake of not speaking with a client at all during the building process and then follow-up with an MVP and find out they don’t like at all what you’ve created.

Communication can make or break you, so make it work for you.

The post 7 Questions to Ask your Client as a Freelancer appeared first on Speckyboy Design Magazine.

Automating Google Chrome with Node.js

In this tutorial we explore the new Headless Chrome platform and try out some scripts for automated browser testing.

Continue reading on Tutorialzine.

How to Design Checkout UX Like a Pro

The checkout experience is arguably the most crucial aspect of your online store. Any hiccups and the customer could get distracted, disappointed, or leave—outing your company (that pays your salary) of precious revenue. It needs to be perfect. As a user experience designer, it’s your job to ensure the checkout experience is seamless and effective. No mistakes.

In this article, I’d like to discuss checkout design and several tenets that make for the best shopping-to-payment experience. I know. When you hear “checkout design,” you’re probably jumping for joy…

…but it’s where the rubber meets the road when it comes to making money online. Without a checkout, you don’t get paid. So it better be good.

To answer this question of what makes the best checkout experience, I sought out three veteran UX designers at major ecommerce brands: ThinkGeek, Shopify, and REI. These companies see millions and millions of dollars and users pass through their checkout “lanes” daily. The three folks were:

  • Matt Chwat, Director of User Experience at ThinkGeek. Matt’s been at ThinkGeek, the Internet’s #1 largest (and nerdiest) online store, for nine years. He’s as much a front end developer as he is a UX designer.
  • Kevin Clark, Design Lead at Shopify. Kevin Clark is the Design Lead at Shopify’s Montreal-based purchase experience design team. He oversees the team responsible for the checkout experience across the ecommerce platform. As soon as a user clicks the cart icon, you’ve entered the domain of Kevin’s team. Everything from email receipts, merchant-customer interactions, to the live order status page—if you’re purchasing something on a Shopify site, odd’s are, Kevin and his team had a hand in it.
  • Catherine Ho, Senior UX Designer at REI. Formerly at Intuit, Catherine’s been with REI for two years in Seattle. She loves UX because it focuses on people and it’s both technical and creative. Her role at REI is hybrid between research and design. Her projects have included in-store devices, such as an iPod touch for the POS system, iOS apps and membership and accounts, specifically redesigning the sign-in and wishlist experiences.

Throughout my conversations with them, I noticed 5 common principles to remember when designing seamless checkouts.

1. Shopify’s three gold standards of the checkout experience: easy to understand, simple, and fast

In 2016, Kevin Clark and his team were responsible for redesigning the checkout experience for all Shopify sites. That’s almost half a million stores. As a chart-topper in the ecommerce space, expectations were high.

Working closely with the Themes team, Kevin and his team focused on the standardizing a universal Shopify checkout experience. It’s the same in all Shopify themes.

Users need to feel secure and comfortable when dealing with money. The checkout experience needed to be consistent and familiar across all online stores.

—Kevin Clark, Shopify

Beyond the foundational sense of security, the Shopify purchase experience should be easy to understand, simple, and fast.

The best way to design something as transactional and process-driven as the checkout is to test everything.

For example, to test an assumption about how many steps should be in the checkout experience, he and his team conducted a test comparing one-page, two-page, and three-page experiences — each with the same information.

Example of single page checkout:

Example of a two-page checkout:

The results showed one page felt overwhelming to the user because it presented too much information on one page, two pages divided the steps awkwardly, and three pages felt simple and easy.

The three steps are Customer Information, Shipping Method, and Payment:

We learned that by grouping relevant information together in chunks, and putting it in a logical order, you allow the user to focus on one task at a time. There is, however, a limit. You don’t want to go too far, like having a ten step checkout experience.

—Kevin Clark, Shopify

These three steps are set in stone across all sites. But other than that, store owners are permitted a handful of customizations to match their brand.

We looked at thousands and thousands of stores and determined that we can replicate almost every store’s design by giving the user five default customization choices: fonts, accent colors, button colors, header image, and the logo.

But with customizations, Kevin recommends not overdoing it:

Don’t give users so much rope that they hang themselves.

Rather, there should be controls set in place to protect a baseline experience that is consistent, familiar, and secure. An example of this is the Shopify system knows which colors to use and not use based on a contrast algorithm (i.e., light text on dark background) and adjusts for readability.

The checkout system Kevin and his team created laid the foundation for future work to be built on top of it. It’s a component-based system, so new components can be added, such as fields and button elements, and features can be modified or added, without overhauling the entire system.

2. The ultimate goal: “frictionlessness”

The father of Windows and Internet Explorer, former Microsoft-legend Steven Sinofsky currently advises companies like Product Hunt, Box, and sits on the board of Andreessen Horowitz. He is a designer at heart and a master of product development. In his post Frictionless Product Design, he pointed out the difference between minimalism and frictionless design.

He wrote that while minimalist design reduces the surface area of an experience, frictionless design is about reducing the energy required by an experience. This is especially important in checkout design.

He gives 6 principles of frictionless design:

  1. Decide on a default rather than options
  2. Create one path to a feature or task
  3. Offer personalization rather than customization
  4. Stick with changes you make
  5. Build features, not futzers
  6. Guess correctly all the time

At REI, Catherine recently implemented an example of frictionless design on a project. Her team found that when a customer is ready to add an item to their cart, signing-in sends the customer to a new webpage, thus breaking the shopping experience. To fix this, she A/B tested a sign-in widget that opened a drop down sign-in modal, keeping the experience on-page instead of sending the shopper to a new sign-in page.


The data analytics showed no difference in traffic or drop-offs, so they kept it. Visitors could sign in and continue shopping from the same page without losing their sense of place. This is an example of Sinofsky’s #2 principle: Create one path to a feature or task. Instead of creating a fork in the road to sign in or continue shopping, the user’s path is unilateral.

It’s worth mentioning Sinofsky’s #5 principle here as well: Build features, not futzers. What the heck is a “futzer?”

A futzer is the word “futzing” (which probably sounds more familiar to you) cleverly disguised as a noun. It’s a thing that causes pointless fiddling around and wasted time.

This is where designers get tripped up. How do you determine the difference between a feature and a futzer? As Sinofsky alludes, it requires a delicate balance of giving the user what they want but not so much that it overwhelms them.

A great way to illustrate this is to look at the top reasons shoppers abandon their shopping carts. I’d like to highlight two cart abandonment studies and pull insights from both.

In the first study (2013), payment processing company Worldpay surveyed why people left their online shopping carts without paying.


Six of the reasons given are related to this balance between features and futzers. Check it out:

  1. “Website navigation too complicated” … Too many futzers.
  2. “Process was taking too long” … Too many futzers.
  3. “Excessive payment security checks” … Too many futzers.
  4. “Concerns about payment security” … Not enough features.
  5. “Delivery options were unsuitable” … Not enough features.
  6. “Price presented in a foreign currency” … Not enough features.

In other words, companies are losing revenue because shoppers leave when there are too many futzers and not enough features.

In a similar study performed in 2016 by Baymard Institute usability researchers found that 27% of US online shoppers abandoned their carts solely due to a “too long / complicated checkout process.

Baymard’s benchmark database revealed that the average US checkout flow contains 23.48 form elements displayed to users by default. However, the results of the study demonstrated it’s possible to reduce the average checkout length by 20-60%.

The qualitative 1:1 moderated usability testing and eye-tracking research of the checkout study showed that an ideal checkout flow can be reduced to as little as 12 form elements (7 form fields, 2 checkboxes, 2 drop-downs, and 1 radio button interface).

How many form elements does your checkout have? Anything more than 12 may indicate the presence of futzers in your checkout flow. How do you cut down the number of form elements? Unique testing is the ultimate answer, but, for now, the next steps will suffice.

3. Maintaining Data

Here’s a question to ask your checkout designers: how are you leveraging data throughout the checkout process?

Matt at ThinkGeek believes the best checkout experiences collect only the necessary data and then maintain that data all the way through the end of the transaction:

This is especially important for account holders. Don’t ask for email again, and pre-fill the name when you already have it.

If your database has information about a customer, use it to reduce the number of fields he or she has to fill out. Amazon’s One-Click purchase feature is a prime example of this.


By knowing the customer’s data, it can correctly “guess” the user’s preferred shipping mode, address, and payment details with zero added effort from the user. With a one-click-one-sale checkout, there are no opportunities for chokepoints.

Shopify maintains data with “checkpoints.” Meaning, if a user proceeds through Shipping but drops out during Payment, the collected data is maintained and the user can pick up their journey right where they left off.

4. Forgiving Design

The final common thread between all three brands was the idea of “forgiving design”—where the designer’s goal is to prevent any mistakes in the checkout process. Instead of being strict on mistakes, great checkouts let users get away with being, for lack of a better word, lazy.

Below are three examples of “forgiving design” in the checkout flow: 1) adding gift cards and discounts, 2) disabling the “Submit” button, and 3) inputting phone numbers.

In the first example, all three brands have gift cards and discounts—well-established tools for closing sales online. But typically, it’s not always clear where to input the codes or redeem the cards.

According to Kevin Clark:

Usually, they’re two separate fields and people mismatch them all the time.

At Shopify, a significant engineering effort allowed users to paste in a gift card or discount code into the same field and the system sorts it out automatically. It’s impossible to make a mistake.

Second, sometimes shops will disable or “gray out” the submit/continue button until a user completes all required fields.

Should you do this? It’s a heated debate in the UX community about whether to leave the submit/continue button enabled, but according to the unofficial research of one user on Stack Exchange, around 5% or less of a small sampling of websites keep the submit/continue button disabled.

At Shopify, ThinkGeek, and REI, the submit/continue button is always enabled, even with missing information. Why? For three reasons:

  1. It prevents user confusion. The “grayed out” button tells a shopper something is wrong but doesn’t indicate where exactly and sends the user on a blind hunt for the error. An active button would convey clickability which would then result in a simple message (often in red) on the field needing a valid input.
  2. It’s accessible. In some instances (rare), a user may have Javascript disabled in their browser which would prevent the dynamic state change of the button from disabled to enabled.
  3. It prevents developer error. A valid use case or input that should have activated the submit/continue button could have been missed (i.e., internationality), trapping the shopper with no options but to refresh or exit.

Warby Parker does a great job in turning what would usually be an annoyance into a chance to cleverly express some brand personality.

The ThinkGeek checkout page maintains an active “Go to checkout” blue button even when fields are empty.

The “Continue” blue button is active on the empty REI checkout page.

All Shopify stores keep the blue “Continue to shipping method” button active at all times.

Lastly, the third example of forgiving design is phone numbers. One user posted the following problem on Stack Exchange:

Currently on my website users are required to input their phone number in a very specific format (555-555-5555). If you forget the dashes it breaks. Does anyone have a good suggestions for how to be more flexible with allowing users to input in any way they choose, but still allowing the system to validate if it is a real phone number. How are phone extensions handled?

Unforgiving design requires this specific format (i.e., number of characters, dashes vs. periods, spaces). Forgiving design allows users to input it how they want and let the system figure out what the number is.

By allowing for maximum flexibility in typing a phone number, the user is less likely to “make mistakes.”

Another user responded with how to fix this, using forgiving design:

The best approach for user experience is to let the user type in the phone number using the format they are most comfortable with. Don’t break it into separate fields, don’t force a mask, let it be typed freeform. Then, after the user has finished entering the field (by leaving the field for submitting the data), format the number into a standard format for your purposes.

Since you are talking about a Web site, you can do the format on the blur event using the Google libphonenumber http://code.google.com/p/libphonenumber/ project. This tool handles international phone numbers and a wide variety of formats.

The reason this approach is better for the user experience is that it allows the user’s mental model to remain unchanged and allows them to say, “Don’t Make Me Think.” Masking and separate fields force a mental model of phone numbers onto users and requires more thinking.

Similar to the gift cards example, phone numbers should be accepted in any format so that shoppers can proceed “without thinking” or wondering if they were correct.

Forgiving design allows you to reduce the number of fields in your checkout flow, thus helping to eliminate the complaint that 1 in 4 shoppers voiced in Baymard’s checkout usability study (too long / complicated checkout process)

5. Common checkout design mistakes to avoid

Finally, the three ecommerce experts each mentioned and cautioned against three simple errors they’ve encountered when designing checkouts:

Mistake #1: Don’t include an order review. Put yourself in the shoes of a customer who tediously fills out their information only to find themselves doubting they ordered the right item or quantity. Not seeing a chance to review their order before purchase will lead them to bail and start over, or worse, give up. REI keeps the shopper informed throughout the entire checkout process with a floating “Order Summary” box and a clear opportunity to review before placing the order.

In addition to displaying the order summary on the right perpetually throughout the checkout process, REI incorporates a final review alongside placing the order.

Mistake #2: Unhelpful error messages. It’s easy for a customer to enter information incorrectly in the checkout forms. Rather than just displaying “Invalid” or similar unspecific copy, use adaptive error messaging. ThinkGeek’s error messages update live from “This field is required.” to “Please enter a valid [blank]” to show the customer where and why the error is occuring.

ThinkGeek adapts its error messages to indicate more specific instructions.

Mistake #3: Not mobile-friendly. If you’re selling online, this is a no-brainer. Please. If you have an online checkout, don’t put your customers through the pain of zooming in and out, panning around, and squinting at an unresponive checkout.

Takeaways and action items

Checkouts are a part of every ecommerce experience. As the final step before a product is purchased, you don’t want anything to go wrong. I was glad to hear from Matt, Kevin, and Catherine about the five principles they follow to design their customers’ online shopping path:

  1. For the best checkout experience, make sure your checkout design is consistent, familiar, and secure. Does your checkout give the user a sense of familiarity and security?
  2. The ultimate goal is frictionlessness. Go over Sinofsky’s 6 principles and assess your checkout experience, paying special attention to #2 and #5. Are there any features missing or can any futzers be removed?
  3. As your user goes through the purchasing process, maintain their data to make it easy and intuitive. But remember, if you can’t guess correctly every time, don’t guess. What data do you already have that you can use to save the user keystrokes and streamline the purchase process?
  4. Use forgiving design so that users don’t feel like they’ve made a mistake. It’s worth the extra effort to build in forgiving functionality when you see increased conversions. Do you have analytics plugged into your checkout? Where is the greatest point of abandonment? How can you remove this obstacle?
  5. Avoid simple mistakes. Even the best designers are not invincible to overlooking details, especially when it comes to something as “boring” as checkout design. Periodically, go through the your site’s checkout process in incognito mode on a desktop, tablet, and mobile device and ask yourself, “Could this be easier? Simpler? More intuitive?”
8 Professional Graphic Design Magazine Templates – only $17!


Envato Elements Now Gives You Access to 240+ Web Design eBooks

We web designers are always reading, trying to gain that extra knowledge to improve our skills. It’s that constant flow of learning that helps us to become better at our job (and make more money while we’re at it).

One of the challenges we often face is searching around for reputable learning information. It can be time-consuming and you don’t always know if what you’re reading is accurate.

You may know Envato Elements from their incredible library of design assets.

Well, they’ve made things even better by expanding their unlimited service to include a Tuts+ subscription that includes over 240 eBooks. Now you can find everything you need to both get projects done and continue educating yourself all for one low-priced monthly subscription.

Exciting Topics, Trusted Sources

Exciting Topics, Trusted Sources

Tuts+ offers a collection of eBooks that will help designers develop their technical and creative skills. What’s more, these titles come from some of the top publishers in the industry, including A Book Apart, Packt and Smashing Magazine. That means you’ll learn from some of the most knowledgeable and trusted names out there.

The eBooks offered run the gamut of essential topics, including:

  • Accessibility
  • Atomic Design
  • Command Line
  • Content Strategy
  • Creativity
  • CSS Grid
  • Git
  • HTML5/CSS3
  • JavaScript
  • Responsive Design
  • Running a Web Design Business
  • Sass
  • Sketch
  • SVG
  • UX
  • Web Typography
  • WordPress

With access to this collection, you’ll have the opportunity to learn both the classic fundamentals and cutting-edge skills you need to up your game. Whether you want to shore up existing skills or learn something completely new, Tuts+ has you covered.

And because it’s included with your subscription to Envato Elements, you’ll have unlimited access to every single eBook. You can learn on your own time and at your own pace. That’s great for busy designers who have other responsibilities. The entire collection will be ready whenever you are.

Titles at a Glance

Titles at a Glance

With over 240 eBooks to choose from, we can’t possibly go through all of them here. But we can give you a taste of the type of high-quality titles you can expect with an Envato Elements subscription:

JavaScript for Web Designers
Author Mat Marquis of A Book Apart aims to help you learn the fundamentals of JavaScript in an approachable way. Even if you have a bit of trepidation about the challenge, this eBook will help you build confidence as your skills improve.

User Experience Revolution
Paul Boag’s eBook for Smashing Magazine will help you advocate for the importance of a great UX. You’ll learn techniques for convincing clients and colleagues to put users first.

Customizing WordPress
Smashing Magazine’s guide will show you how to make a WordPress site that reflects your creative vision. You’ll learn about essentials like creating custom templates, post types and what it takes to make your own plugins.

Angular 2 Cookbook
Packt Publishing brings the most important concepts of Angular 2 for you to conquer. You’ll get the fundamentals, along with more advanced details.

Designing for Emotion

Written by Aaron Walter for A Book Apart, this eBook will show you how to stop designing for machines and start designing for humans. Packed with relevant principles and concepts, you’ll learn to create a connection with users through design.

Powerful eBooks…and so Much More

Powerful eBooks…and so Much More

A subscription to Envato Elements provides you with everything you need to be a complete web designer. Design assets like templates, graphics, photos and fonts are go-to creative resources for any project. And now the addition of a Tuts+ subscription means that you have access to the eBook library, plus over 1,000 video courses and a total of 24,000+ ad-free online tutorials.

Subscribe today and gain unlimited access to some of the most valuable resources out there. You’ll be a better designer for it.

The post Envato Elements Now Gives You Access to 240+ Web Design eBooks appeared first on Speckyboy Design Magazine.