I was once tasked to create a makeshift customer service survey that would allow an employee to receive a customer call and send a survey to the custom once the call ended. The goal was to track customer satisfaction, which is a totally legit thing to want.

There are some solutions out there that do this out of the box. The problem was that my client neither had the desire or budget to use them. They did, however already use Campaign Monitor for sending emails and Wufoo for embedded forms. I figured, hey, if MacGyver can create complex gadgets out of bubble gum and paper clips, then I can cobble something together with these two robust tools. Right?

Right!

Knowing the data

The biggest challenge for a phone call is that it’s sometimes difficult to track down an email address during the call. Without that, there’s nowhere to send the survey, so that’s a big bummer. That means the employee needs to capture the address, whether it’s getting a custom ID at the start of the call or straight up asking for it.

I decided I would spin up Wufoo to create an internal form that employees can use to capture the data. Nothing fancy, only the following fields:

• Employee Name: Used to associate the employee with the call
• Customer Name: Used to personalize the email sent containing the survey link
• Customer Email: Used to send the survey link

Wufoo makes this trivial, of course. Create a new form, add a few text fields, copy and paste the snippet onto a page. Voilà! We have a form! We could make it a little simpler (and dummy-proof) by creating a select field containing all employee names so the data remains consistent. We can also make the fields required and use Wufoo’s built-in validation to ensure the email address is properly formatted.

There’s also a lot of flexibility with the styling to boot, meaning the form can look like a native part of the site.

The employee can now fill that out during the call and submit it once the call is done. Plus, the form is embedded on a private page that can’t accidentally get out to others.

Sending the survey

Did you know Wufoo can auto-send emails anywhere once a form is completed? Well, now you do!

This is super handy for most cases and I really wanted to use it for this task, but decided to go with Campaign Monitor because there’s one little snag which is…

Each employee needs a unique survey form

Yep, that’s a thing. Otherwise, we’d have to ask the customer to identify the employee’s name in the survey, which we can’t expect them to know. Sure, we could use another select field, but that requires the customer to recall the name as well, and not having the employee name makes it difficult to associate customer satisfaction results with specific employees for tracking.

So, the email needs to contain a unique link that goes to a form that’s associated with a specific employee. Again, there are solutions for this stuff, but we’re MacGyver’ing this thing.

I’m so glad Wufoo makes building forms so simple. All I needed to do was create one form, duplicate it for each employee, and change the employee value in each one.

On that note, we don’t necessarily need to display the employee’s name in the survey form. Wufoo accepts custom CSS which means we can hide any field! Plus, it allows us to pre-populate a field, so that gives us hidden fields that already contains the values we need to associate the survey data with a specific employee and create a webpage containing the form for that employee. ?

Now that there’s a survey for each employee, all I needed to do was create webpages where I could embed each employee form and use those as the survey links.

Here’s the flow:

Auto-sending the survey link

Let’s go back to the first form for a moment. Remember, that’s the one an employee fills out and submits once the call has ended. This should send an email to the customer containing a link to the webpage that has the survey form for that employee.

Campaign Monitor can segment lists by custom variables. In other words, we can create one list that contains all of the customers who have called in and create sub-lists that are divided by employee since we have that as a value in the internal employee form. And, since Campaign Monitor and Wufoo play nice together, all of the data we capture is contained in both places.

The other thing Campaign Monitor can do is trigger emails to send based on conditions. So, if the employee submits the internal form, Campaign Monitor can be configured to send a specific email template/campaign to a new subscriber that is added to the list. If we set up a trigger to send an email to any new customer who is added to the list, we can personalize the email to contain the link for the employee who took the call.

Watch the data roll in!

Great! We have a form employees can use to send a survey, surveys set up on webpages for each employee, and an auto-triggered email that’s sent to a customer containing the survey link for the employee who submitted the internal survey.

All that’s left is to monitor the data and — wouldn’t you know it — Wufoo has reporting built right into it where all of that can be accessed and monitored 24/7. Heck, it even permits us to create custom reporting dashboards on a per-survey basis.

Wrapping up

Was this the best way to hack things together? Probably not. Is it bulletproof from incorrect data or misuse? Not entirely. But the fact that Wufoo could intervene at all and is flexible enough to power this sort of thing is awesome. It’s more than awesome; it’s amazing. It sure wasn’t intended to be used that way, but it did the trick anyway.

Thanks, Wufoo!

The post Customer Satisfaction Surveys with Wufoo appeared first on CSS-Tricks.

const isFormValid = useMemo(
  () => Object.values(errors).every(error => error === null), 
  [errors]
);

function warning(condition, message) {
  if (process.env.NODE_ENV === 'production' || condition) {
    return;
  }

  console.warn('useValidation: ' + message);
}
function invariant(condition, message) {
  if (process.env.NODE_ENV === 'production' || condition) {
    return;
  }

  throw new Error('useValidation: ' + message);
}

function validateConfigSchema(config) {
  if (process.env.NODE_ENV === 'production') {
    return;
  }
  if (typeof config === 'function') {
    config = config({});
  }

  invariant(
    typeof config === 'object',
    `useValidation should be called with an object or a function returning an object. You passed a ${typeof config}.`,
  );

  invariant(
    typeof config.fields === 'object',
    'useValidation requires a `field` prop with an object containing the fields and their validators. Please refer to the documentation on usage: https://link.to/docs'
  );

  
  invariant(
    Object.values(config.fields).every(field => typeof field === 'object'),
    'useValidation requires that the `field` object only contains objects. It looks like yours isn't. Please refer to the documentation on usage: https://link.to/docs'
  );

  warning(
    ['always', 'blur', 'submit', undefined].includes(config.showError),
    'useValidation received an unsupported value in the `showError` prop. Valid values are "always", "blur" or "submit".'
  )

  // And so on
}

getFieldProps: (fieldName, overrides = {}) => ({
  onChange: e => {
    const { value } = e.target;
    if (!config.fields[fieldName]) {
      return;
    }
    dispatch({
      type: 'change',
      payload: { [fieldName]: value },
    });
    if (overrides.onChange) {
      overrides.onChange(e);
    }
  },
  onBlur: e => {
    dispatch({ type: 'blur', payload: fieldName });
    if (overrides.onBlur) {
      overrides.onBlur(e)
    }
  },
  name: overrides.name || fieldName,
  value: state.values[fieldName] || '',
}),

export const ValidationContext = React.createContext({});

export const ValidationProvider = props => {
  const context = useValidation(props.config);
  return (
    
      {props.children}
    
  );
};

Import React, { useContext } from 'react';
import { ValidationContext } from './useValidation';

function UsernameForm(props) {
  const { getFieldProps, errors } = useContext(ValidationContext);
  return (
    <>
      <input {...getFieldProps('username')} />
      {errors.username && {errors.username}></span>}
    </>
  );
}

I’ve never really enjoyed writing brand guidelines, I always felt it got in the way of the “real” design work i wanted to be doing. But I also really don’t enjoy designing a carefully thought out, beautifully executed logo only to see it used and abused by a poorly informed client. To work on creating a visual identity and then to send it out into the world with the equivalent of a hastily scrawled map on the back of a cigarette packet is woefully inadequate.

Through research and conversations with some world class identity designers I’ve found a solution to helping clients use their new visual identity to their absolute – a pattern library. We’ve all seen the beautiful digital UI kits, pattern libraries and style guides created by the likes of Mailchimp for their digital products, well its time to start creating similar for identity guidelines.

I’ve found the easiest solution is to establish and understand all the ways the identity is going to be used during the discovery stage. A real deep dive into what the client has in mind for the logo and second guessing uses they might not have thought of means there are no surprises and it can also really help inform the final design.

Here are some guidelines I’ve been using recently – these will all be included in the final identity pattern library.

For Use on Digital

A logo has to be responsive these days, it needs to work on all screen sizes so undoubtedly there will be several different versions of the logo — a desktop version, a different more simplified version for small screen sizes, possibly one for tablets. You may need an even more simplified version for use on the favicon in different sizes and and in different colors for various browsers.

For Use on Social Media

When using the identity in social media remember one size does not fit all on the various platforms — find out which platforms your client uses or may use. have test accounts set up on all the major platforms so you can test the usage as you are designing it. Some platforms use square images some use round. Nobody wants those black edges when the wrong shaped jpg has been used in a profile pic. Mock up each social media platform page to demonstrate how to use the logo and on twitter include a suggested theme color. Also suggest image styles to use in the profile header.

For Use in Emails

What about emails, do they need a file specific for an email signature or a few different versions for Mailchimp. Consider using thumbnail mockups of a couple of different mail chimp layout scenarios so the client can see which logo to use where.

For Use on Imagery

Does the logotype need to overlay imagery, at what screen size? Again maybe different versions for different size imagery, what about dark imagery and light imagery — show which version to use on which. Demonstrate the type of photography that would be a good fit for them and that would work well with their logo.

For Use on Videos

Which logo needs to be used on videos if the logo is overlaying a video what size and opacity should they use?

For Use in Print

Demonstrate how the variations of the logo can be used on different documents from business cards to brochures, what backgrounds should the white logo version be used on and what background should the colored version be used on. Whether there are any elements of the document that can be used alone for example shapes or an ampersand used in the logo. These don’t have to be long drawn out full blown documents but thumbnails and mock ups. Things that will enable the client as much as possible. Explain why a certain layout will work best.

Usage Variations

Is there a logotype version or just a logomark, is there a stacked version or a version with a strapline. When should these be used? Will the strapline be used on its own. How will this work? What will it look like? Again show real life scenarios.

Clear Labeling on Files

Label the files clearly and demonstrate their use in real life scenarios through mock ups and detail which file name should be used for which scenario.

Colors

Demonstrate the colors, contrast and variations and show how they can be used and explain why certain scenarios won’t work and demonstrate why. Explain when transparency is appropriate and when it isn’t. Think about what the client truly needs as opposed to what you’ve always sent out. Will they really need a black version of their logo? Might they use it incorrectly if you supply them with one? Explain when PNGs should be used and when Jpegs should be. Explain the color variations that will be experienced from print and digital. Include Hex, CMYK, RGB and Pantone where possible. explain why colors look different in print than digitally

Type

If type is used in the logo explain whether it’s appropriate to use it on other things such as websites, often it isn’t but I’ve seen clients use it because that is what there logo is in. So suggest typefaces that would work really well even if there is not a typeface used in the logo make suggestions for their other collateral.

Conclusion

More than anything I’ve found that mocking up in situ scenarios has been the most effective way of enabling the client. Together with the use of clear and concise language — communication is key. Label files clearly and in a way that will make sense to a client and then reference these in your guidelines so they are not left guessing which one to use. As well as supplying the appropriate files its important to demonstrate each of these versions in the identity guidelines don’t leave them guessing.

I know this seems like a huge amount of work but it is beneficial for everybody involved. The client will feel truly empowered and to go out and use the brand correctly, you will have provided a top notch service to your client, their beautiful new brand will be out in the world showcasing your stunning work and you will have helped them create a sense of cohesion through everything which will not only reflect well on them but on you too.

Featured image via DepositPhotos.

Source

Have you ever read a post and were in awe of the writer’s skills, from the flow of their content to their beautiful use of imagery?

Well, most of us have! I bet the question running through your mind right now is how did these blogging gurus come to be?

Truth is, everyone starts from somewhere and once upon a time today’s blogging experts were novices just like the rest of us. All of them experienced frustrations and made tons of mistakes in the process of becoming the experts they are today.

Blogging has become one of the best ways to drive traffic and generate leads when done correctly. It’s time to revamp your skills and avoid making some of the mistakes that could be affecting the impact your blog has. So, if you are struggling to achieve your goals through your blog, then you might be doing something wrong. Below is a list of common blogging mistakes that most bloggers make:

1- Do not understand their target audience

One of the biggest mistake bloggers make is failing to understand who their audience is and instead write about what they want to write about. Yes, your content can be excellent, but does it connect to your audience? Before crafting any blog post consider your audience and the information they need, then tailor your post to provide the relevant information to your target audience. Otherwise, you’ll only be creating journal entry posts and struggle to achieve results from your blog.

2- Failing to capture leads

When it comes to blogging, simply creating blog posts isn’t enough. You need to ensure that your blog posts drive traffic and conversions. You can use lead capture tools such as hello Bar on your blog so that your content serves its purpose.

3- Inconsistency

Writing blogs should be done consistently. Consider the fact that the more you blog, the more traffic, subscribers and leads you’ll generate from your posts. Blogs that thrive are the ones that established a publishing routine, separate from their daily inspirations. Here is the tricky part, although consistency can be achieved, this does not mean that you post shoddy posts and expect magic to happen. Remember, quality always triumphs frequency.

4- Using a stiff writing style

Do you ever start to read a post and first few sentences in you click out of the page? I know it happens to most of us. Writing a blog is not the same as writing a term paper; your post should be exciting—something that people will enjoy reading. If your content fails to hook a reader, how do you expect people to continue reading it? When crafting your blog posts ensure you provide your readers with an incentive to continue reading the post. A great hook can be a problem or issue that your audience is facing. Also, a conversational style makes your writing more approachable meaning that people will enjoy reading your post.

5- Not writing long-form content

Time is of the essence, and you may have a lot on your plate as a blogger. But making a habit of creating long-form content increases your opportunity to generate more leads as compared to short blog posts. Generally, posts that rank highly on SERPs are usually 1500+ words. As you create your blog posts, you should always aim to offer a solution, don’t just explain a problem and leave it at that.

6- Making it about you

As long as you are not one of the Kardashians, focus on providing content that your users find entertaining, useful or interesting. People are interested in the information your content offers and what it can teach them, not about your interests. But you can incorporate aspects of your character in your writing to make your readers more at ease with you. You can infuse your personality in your writing style by using a personal, engaging and approachable tone.

7- Failing to use data as evidence

Whatever you are writing about, ensure you provide the relevant data from your research. For instance, if you are writing about how businesses can use social media to improve sales or hire the social media company, simply stating;

• Numerous people can be found across social media platforms which makes it a great platform to market your business.
• With the growing social media user base currently at 2 billion and expected to rise to 3 billion by 2021, using social media as part of your company’s marketing mix is essential.

The second claims are more compelling compared to the first one. With data-driven content, you not only convince people to see your point about an issue, but you also persuade them to take action.

8- Concentrating your analysis on immediate traffic

Bloggers tend to get frustrated when their blog posts fail to generate the expected traffic immediately. However, instead of concentrating on short-term traffic, you can concentrate on the accumulative potential of organic traffic gained with time.

As mentioned earlier, we all have to start somewhere. So if you’ve read through this list and feel like most of these apply to you, don’t worry. Instead, use these tips to improve your blog’s content.

We’ve been talking a lot about Dark Mode around here ever since Apple released it as a system setting in MacOS 10.14 and subsequently as part of Safari. It’s interesting because of both what it opens up as as far as design opportunities as well as tailoring user experience based on actual user preferences.

This week, we got an Editor’s Draft for the Color Adjust Module Level 1 specification and the First Public Working Draft of it. All of this is a work-in-progress, but the progression of it has been interesting to track. The spec introduces three new CSS properties that help inform how much control the user agent should have when determining the visual appearance of a rendered page based on user preferences.

color-scheme is the first property defined in the spec and perhaps the centerpiece of it. It accepts light and dark values which — as you may have guessed — correspond to Light Mode and Dark Mode preferences for operating systems that support them. And, for what it’s worth, we could be dealing with labels other than “Light” and “Dark” (e.g. “Day” and “Night”) but what we’re dealing with boils down to a light color scheme versus a dark one.

This single property carries some important implications. For one, the idea is that it allows us to set styles based on a user’s system preferences which gives us fine-grained control over that experience.

Another possible implication is that declaring the property at all enables the user agent to take some responsibility for determining an element’s colors, where declaring light or dark informs the user agent that an element is “aware” of color schemes and should be styled according to a preference setting matching the value. On the other hand, we can give the browser full control to determine what color scheme to use based on the user’s system preferences by using the auto value. That tells the browser that an element is “unaware” of color schemes and that the browser can determine how to proceed using the user preferences and a systems’s default styling as a guide.

It’s worth noting at this point that we may also have a prefers-color-scheme media feature (currently in the Editor’s Draft for the Media Queries Level 5 specification) that also serves to let us detect a user’s preference and help gives us greater control of the user experience based on system preferences. Robin has a nice overview of it. The Color Adjust Module Level 1 Working Draft also makes mention of possibly using a color scheme value in a element to indicate color scheme support.

There’s more to the property, of course, including an only keyword, chaining values to indicate an order of preference, and even an open-ended custom ident keyword. So definitely dig in there because there’s a lot to take in.

Pretty interesting, right? Hopefully you’re starting to see how this draft could open up new possibilities and even impacts how we make design decisions. And that’s only the start because there are two more properties!

• forced-color-adjust: This is used when we want to support color schemes but override the user agent’s default stylesheet with our own CSS. This includes a note about possibly merging this into color-adjust.
• color-adjust: Unlike forcing CSS overrides onto the user agent, this property provides a hint to browsers that they can change color values based on the both the user’s preferences and other factors, such as screen quality, bandwidth, or whatever is “deem[ed] necessary and prudent for the output device.” Eric Bailey wrote up the possibilities this property could open up as far as use cases, enhanced accessibility, and general implementations.

The current draft is sure to expand but, hey, this is where we get to be aware of the awesome work that W3C authors are doing, gain context for the challenges they face, and even contribute to the work. (See Rachel Andrew’s advice on making contributions.)

The post A Quick Look at the First Public Working Draft for Color Adjust Module 1 appeared first on CSS-Tricks.

There are a few differences between keyboards and screen readers and Léonie Watson highlights of them:

When using the tab key, keyboard focus and screen reader focus are synchronised with each other. The rest of the time, screen reader users have an enormous range of commands at their disposal for reading and navigating content independently of keyboard focus. The commands vary between screen readers, but they all have one thing in common: they’re tied to different HTML elements.

This is also a good reminder that screen readers behave differently from one another. It’s worth doing some research to see how our sites work in all these environments. One thing is clear from this post though: writing semantic and concise HTML is the best way to improve accessibility for both users with keyboards and screen readers. For example, Scott O’Hara has this recent post on best practices using the tabindex attribute to ensure accessible navigation using the keyboard.

Direct Link to Article — Permalink

The post The difference between keyboard and screen reader navigation appeared first on CSS-Tricks.

The MapSVG plugin for WordPress allows you to create feature-rich, interactive maps quickly and through a smart admin UI. Interactive maps are a common request for projects when you need to visualize impact over particular locations. If you are already on WordPress, this comprehensive plugin could be your solution for production-ready maps.

Think about the last time you implemented or scoped an interactive map. You may wind up estimating a significant amount of time for mapping your data from its original source into JSON to be hooked to a visualization framework, like D3. Then comes configuring how users interact with the map itself. These are already significant development lifts.

Next comes the question of how you will manage your map data. Did it live in an external file? Require regular API calls to fetch data? It would be a lot easier to manage this data directly within your site’s WordPress admin as you would all other site content. No need to open up a code editor and maintain the map separately!

These and many other common map functionalities come baked into the MapSVG plugin for you to create multiple unique maps to fit your visualization needs. We’re going to dig into the plugin a little bit and use it to build an interactive SVG-based map in WordPress

Options for creating new maps

Once installed, MapSVG gives you five options for creating a new map based on vector, image, or Google Maps features. For the sake of this article, I will be focusing on the SVG features.

Within that New SVG map option are nearly 200 geo-calibrated and un-calibrated vector maps of countries and regions. The free version of this plugin, MapSVG Lite, lets site administrators create interactive maps with tooltips, customizable detail views, and markers placed by latitude/longitude coordinates. Upgrading to the paid version ($46) provides support for: map directory, integrated search, location filters, a detailed view of a map region, integrations with WordPress posts and Advanced Custom Fields, custom tooltips, and choropleth maps, among other premium features.

Creating a new map

Right, so we’ve chosen to create a new SVG-based map. Select one of the options from the dropdown to create a vector map. Whenever possible, choose geo-calibrated maps over ones that are un-calibrated. Geo-calibrated maps are newer and have region titles. Plus, they allow you to add map markers by geo-coordinates (i.e. latitude and longitude), or by entering an address that automatically converts to coordinates.

If using your own custom SVG file, select the Upload SVG option. Once uploaded, your custom file will be available in the New SVG Map dropdown under user-uploads/your-file-name.svg. There are a few additional steps I recommend to optimize your file prior to uploading it to the plugin’s map:

1. Regions that contain multiple vector paths (e.g. Hawaii), need to be grouped as a compound path in Illustrator. In Illustrator, this can be done by selecting the relevant paths, then going to Object > Compound Path > Make (or CMD + 8).



2. Ensure your layers have clear, unique names. The layer name will be used as the region {{id}} for templating and organizational purposes.
3. Next, open your SVG file in a text editor and give each path a title attribute. This will be used as the region {{title}} in the templates.

   

The id and title fields are default attributes pulled from the file to associate them with the individual paths. As of the latest release (currently 5.3.7) of the plugin, you can edit the SVG file directly in the WordPress admin to set the id and title values of each path, along with adjusting the path definition and drawing new paths. I personally prefer the control of editing in Illustrator and a code editor, but this is a nice option to have available to you.

Let’s proceed by creating a demo using the geo-calibrated maps provided by the plugin and using entries from https://confs.tech to visualize (some of) this year’s tech conference data from around the world.

Styling the map

Now that we’ve got our SVG file all set up and selected for use, the plugin interface opens to the settings panel. This is where we set the map name, define sizing dimensions, and enable tooltips, among other primary settings.

Alongside the settings tab, you will see tabs for controlling and setting specific map features. Switching over to the next tab, Colors, is where we set the map theme.

As you can see above, we can control the fill and stroke values of the map and the various active states of each path. A benefit of using a vector based map! For that reason, I prefer to leave the fill and stroke values undefined in Illustrator if I’m creating a custom map file. Stroke width, however, cannot be efficiently adjusted within the UI (because it would requires editing the SVG and changing the value for every single path), so it is best to set it in Illustrator and re-upload the file.

Further down are color options for the containers (e.g. directory, filters, sidebars, etc.) as well as the minimum and max colors values for a choropleth map (more on this later!). Container styles can also be set globally either in your theme’s stylesheet or in the setting’s CSS tab.

Setting up map data

By default, the Regions tab will be pre-populated by regions based on the paths of the selected SVG, displaying their id and title values. You can edit and create your own region’s fields as needed. The same applies for the Database tab — where you enter your map data and associate it with the regions of the map.

For both region and database entries, you have the option of manually creating the fields and content in the UI or upload the data from a CSV file.

Notice the final dataset in the screenshot above, specifically the custom Regions fields for conference_details, conference details, and a field to upload images that display the flag of each country in the database. We can take this a step further by separating the content from the map itself and pulling it in as post data of any WordPress post type. That’s where Advanced Custom Fields can help to create fields for that data in the post editor and creating a relationship between the submitted data to populate the values in the map. Not required, of course, but it’s nice to have this option for the sake of separation of concerns.

Displaying map data

When showing information about a region or database object on a map, we have to set up a template in the plugin. There are five types of templates: popovers, tooltips, detail view, directory, and labels.

Templates accept plain text, HTML, and Handlebar markup to display region and database variable values. If pulling in post data via the Post database field, you will have access to the standard WordPress fields, post.id, post.post_title, post.post_content, post.url, along with any custom fields created with Advanced Custom Fields with this syntax: post.acf.my_field_name. Whenever you need to render a rich text field such as with
post.post_content, you have to use Handlebars’ {{{triple-stash}}} syntax to output the rendered HTML.

The use of Handlebar syntax also means we can build conditional logic into the templates to create dynamic template views based on region and database values. In MapSVG 5.0 and up, the template options come pre-populated with HTML comments and starter markup for the default region and database fields. Super helpful!

Adding a map to a page

MapSVG includes a shortcode used to embed a map on any page or post. Drop a Gutenberg shortcode block on the page and call MapSVG with the ID of the map to embed: [mapsvg id="418"].

For those working in the classic WordPress editor or with a plugin version that predates 5.0, a map icon will be added to the TinyMCE toolbar, which will inject the shortcode to your post content that takes the map ID. The map ID can be found in the MapSVG editor dashboard or in the top breadcrumbs of the active map. A handy Copy to clipboard button is included next to both instances shortcode to grab it for use in the post editor.

Demo

With data entry complete and a few toggles of additional MapSVG settings, we have a fully functional interactive and responsive map! And notice just how little code we had to touch along the way.

View Full Demo

Going beyond maps

The great thing about the SVG feature of the plugin is that, at it’s core, SVG can be whatever we want. You can create an interactive “map” from the vector paths of just about anything: a building floor plan, an infographic, or maybe an interactive timeline of your career? It’s more than just maps!

Not on WordPress? No problem. MapSVG also comes as a jQuery plugin that’s equally worth trying for interactive maps outside of WordPress.

Resources

• MapSVG website (Includes live demo of the admin)
• MapSVG tutorials
• MapSVG documentation
• MapSVG Lite (WordPress Plugins Directory)
• MapSVG video tutorial archive (YouTube)

The post Creating Interactive Maps in WordPress with MapSVG appeared first on CSS-Tricks.

The Internet of today is a highly competitive place. With so many individuals and businesses spending money and time on digital marketing and SEO — trying to outperform their rivals and sit at the top of the Google heap — it’s harder than ever to get users to visit any given website over another.

Given the difficulty of acquiring new visitors, you might think that all the webmasters of the world would do everything in their power to provide a delightful user experience and ultimately retain each hard-won customer, but we all know that there are a number of unpleasant and off-putting bad habits that seem to crop up time and time again.

Let’s take a look at some of the most common offenders making users leave in frustration…

1. The Site is Too Slow

In a world where almost everybody has a super-powered smartphone in their pocket, the Internet has become synonymous with instant gratification. A user who might be idly wondering about some half-remembered trivia can have the answer delivered to them via Google within a few seconds, and if they want to contact a friend in another country thousands of miles away, they can do so basically as quickly as they can type the Facebook or Whatsapp message.

We’ve all become spoiled by the speed and responsiveness of our hyper-connected world, and so when we click on a search result and sit on a blank loading page for three seconds or more it can seem like an eternity. If the original click was motivated by nothing more than frivolous curiosity, the user is very likely to think, “ugh, never mind” and try somewhere else.

The BBC reported in 2018 that they’d found that every additional second spent loading pages tended to cost them around 10% of their users, which in Internet terms is huge (by this measure, the passing of ten seconds can mean that your traffic is all but gone).

Google have also stated that according to their research, more than half (53%) of mobile users will abandon a site that takes longer than three seconds to load. After six seconds, it’s almost a guarantee that they’ll look elsewhere. ??Of course, the functional needs of the majority of websites are not very complicated — the average e-commerce store or blog site really has no excuse for taking longer than a couple of seconds to load.

2. Too Much Popup Clutter

We’ve all had the experience of clicking a link in our Google search results and being taken to a page that seems to be doing everything in its power to stop us from reading the content. Within two seconds, an enormous screen-filling popup will appear, along with — something familiar to all Internet users in the EU — a GDPR/cookie popup, giving you two things to click on at once.

Combined with a browser alert that “this website would like to send you notifications”, the overall effect is one of being bombarded with irrelevant nonsense that entirely buries the actual content you were trying to reach — content that you are now expected to excavate yourself by manually dismissing each of the popups.

The use of popups continues to be a divisive topic; some designers and advertisers cite significantly improved conversion rates thanks to their use, whilst others are put off by their potential for user irritation (with one study from 2013 finding that a startling 70% of people consider them annoying). ??However you feel about them, we can probably all at least agree that popups are often done badly. They may have their uses, but delivering too many at once and not respecting the user’s desire to see content that is relevant to their interests is more likely to result in a bounce than not.

As for GDPR and cookie notifications, whilst these are a legal requirement for all websites serving data to users from the European Union there are certainly ways of presenting them that are more disruptive than others — and web designers from outside the EU can sometimes forget that these messages can add another layer of visual clutter for a significant percentage of their audience.

3. Mobile-Unfriendliness

It’s remarkable to see in 2019, but many web designers still seem to treat the mobile version of a website almost as an afterthought. It’s still not uncommon to find a mobile site where items are misaligned, overlapping, formatted strangely or subject to some other oversight from the designer, all of which can signal to a visitor that your company doesn’t take the time to go over little details.

It’s worth remembering that catering for mobile users is not “serving a niche”, it’s now the most important part of the job. Statista reported that 52.2% of all Internet traffic happened on mobile phones in 2018 (up from 50.3% the previous year), proving that desktop browsing is actually now the less-used way to explore the web.

Coupled with Google’s algorithm change in March 2018 to prioritise mobile-first indexing, there is now no reason at all to neglect the mobile experience of your website. A low-quality mobile site can negatively affect your SEO performance as well as the experiences of your users, so it’s important to get it right.

4. Too Much Animation

We get it: animation looks great. Nothing says, “I’m a professionally-designed website!” like some nice smooth transitions, transforms and appearances, and well-deployed animation can breathe vital life into an otherwise static and sterile layout.

However, animation is a spice to be used sparingly and it can be distracting if overdone. Ideally it should support and draw attention to key content and call-to-action buttons – and not overwhelm the user with things popping up and swooshing around to the point that they’re too bewildered to read the actual text. ??Animated introductory screens, too, are great attention-grabbers when users first arrive on your site, but don’t make them sit through the same animation every time they want to return to the homepage. ??In general, the function of website elements shouldn’t be dictated by their aesthetic presentation; requiring users to wait for an element to appear or to become interactive because of an animation is not a great tactic, and this can cause users to resent the animation for getting in the way of what they’re trying to do.

For example, a returning user may know as soon as they arrive that they’re intending to click the “About Us” button, but making them wait while the navigation bar unhurriedly does a fade-in animation to show them the button before they can click is likely to cause irritation.

A related note is that some animations can cause accessibility problems; using a lot of moving parts or content that flashes can pose problems for some users (such as those who might have an attention deficit disorder), making it very difficult for them to concentrate on the content.

5. Autoplay Media

No discussion of irritating web design faux pas would be complete without mentioning autoplay media. It’s been the bane of web users since the early days of the Internet, but unlike status bar marquees and GIFs of CGI dancing babies it still hasn’t gone away.

There are ways to do it tastefully, but it’s so often misused that it certainly deserves a spot on our list. Whereas autoplayed MIDI music and Flash sites with audio were the scourge of the 1990s and early 2000s, the pox of today’s world is autoplay video. ??Many sites today will put a video playing next to the body text of an article or blog post — often this is entirely irrelevant to the content of the page, and if you close it before navigating to another page, it quickly reappears. Of course, this is highly distracting and often feels rather presumptuous (as though the website is saying, “hey, I know you clicked to read an article about digital design trends, but wouldn’t you prefer to watch this video of our glitzy charity gala?”)

Even worse, many sites preface these videos with automated advertisements which, given that the videos themselves are generally advertisements in one form or another in the first place, is tantamount to asking visitors to sit through an advert for an advert.

One small mercy, at least, is that modern browsers such as Chrome have been moving towards only allowing autoplay on videos which are either silent or muted, significantly curbing the frequency of the extremely annoying user experience of having unsolicited audio played at you.

Wrapping Up

Ultimately, all of the problems discussed in this article are issues of bad UX design. Every element of the site must be appraised for its impact on the function of the page: Does it help or hinder the user in finding what they’re looking for? Does it enhance or detract from the actual content of the page? Does it shorten or lengthen the process the user must undergo in order to complete a transaction???

Attracting users to your website is often no mean feat, and it makes sense to reward those who do arrive by anticipating their needs and treating both their time and their attention with the respect they deserve. In this way, well-treated users can become loyal repeat visitors, and a website can never, ever have too many of those.

Featured image via DepositPhotos.

Source