Business Directory Plugin for WordPress

Create any kind of directory on your site, easily

Why WordPress Microinteractions Are Important for UX

By

Many designers and developers struggle with creating a better User Experience (UX), both for their own websites and for their clients.

The trouble with UX is that there are many different elements involved – websites must be accessible, usable, valuable, and, above all, desirable.

There are thousands of ways that UX could go wrong. If the copy of the website is off, visitors won’t click. If the button they’re supposed to click doesn’t work, they can’t click. If the page the button leads to doesn’t load, that’s the end of the journey.

Every interaction on a website matters.

One of the most nuanced components of UX, however, is microinteractions – those tiny, pesky little actions that no one notices when they work correctly but that can significantly harm UX when they’re broken.

For WordPress designers, these microinteractions can cause a lot of trouble, but getting them right is essential.

Free Download: 5 Examples of Microinteractions That Need Your Attention
Click Here

What are Microinteractions?

Microinteractions are “single-case interactions that revolve around the use of a product or technology.”

One example of a familiar microinteraction is the hyperlink, or links that change when you hover over them, like the example below.

(Image Source)

Everyone who has been on the Internet has clicked on a hyperlink at some point. It’s an action so micro that you wouldn’t consider it an action at all.

But what if that link doesn’t work? What if the link doesn’t change color when you think it would or the underline doesn’t show up? You might start to wonder if the link works at all.

Some other common microinteractions you might have experienced in WordPress include menu hovers:

(Image Source)

Microinteractions also include things such as liking blog posts or posting a comment on the blog, logging in to a site, or even signing up for a newsletter.

(Image Source)

While some might consider these “conversions,” the functionality of the action – the clicked link or button, for example – is a microinteraction.

Why Microinteractions Matter for UX

So how do microinteractions impact UX?

For one, they serve as sensory cues. They tell the user where to go, why to go there, and what they will get on the other side.

If the microinteraction is unsuccessful – the linked page is a 404 page, for instance – then the visitor is more likely to click away from the site instead of retrying the microinteraction.

The less a user interacts with a site, the less likely they are to convert on a larger scale. Think of it this way: If a user can’t get to your sign up page, how will they buy from you?

They also serve as a basis for judgment about the website (or business, or brand) itself.

If you went to a site where every link was broken, would you stay there?

Click To Tweet

Would you view the owner of the site as reputable? Or would you consider them “cheap” for not maintaining their site?

Microinteractions also provide direction.

If you were to click on an embedded video, for example, but no music was playing, what would you do? Most people might look for an audio symbol that indicates that the video is muted.

What Developers and Designers Should Know About Microinteractions

So what should you do about microinteractions as a designer or developer?

For one, it’s important to be aware of all the minute aspects of a site’s UX. While it sounds like a big task, consider that most of your job already revolves around the creation of microinteractions.

When you create a link, for example, double check to make sure it works properly. Easy, right?

Most microinteractions will take care of themselves in the design process, but that doesn’t mean you can turn off your brains. There’s a reason why they’re important, so it’s equally important to pay attention.

Here are a few things you can do in WordPress to ensure your microinteractions are not negatively impacting your UX.

1. Know your end user.

Microinteractions are all about the end user – who is interacting with the site and why?

Use the WordPress guidelines to make sure you understand why someone would click on your button (or interact with your site) and what they would expect from it. If someone expects a link to change in some way on a hover over, for example, make sure it does.

(Image Source)

2. Double check for errors.

Errors are a death sentence for a microinteractions (and UX).

Do your best to ensure that that the process of a microinteraction doesn’t break the flow of an entire action. For instance, if someone clicks a button to “go to the next step” on a form, that “next step” button needs to work.

3. Avoid adding extra features or unnecessary elements.

The key to a good microinteraction is simplicity.

Elements like hover overs and scroll bars are expected to behave in a particular way, and while it might be cool or trendy to make things perform differently than expected, it can also ruin the interaction for the user. Consider getting feedback if you want to change a microinteraction to something a little different.

4. Use human-oriented language.

Along with simplicity, microinteractions and any associated text should be easily understandable to most people (particularly the end user). This means using short, clear words wherever possible and using visual cues, like arrows or symbols, to help specify an action.

6. Keep animation to a minimum.

Again, simplicity is key. Animation is great for certain microinteractions, but can be over the top for others. When it doubt, go with simplicity, and get feedback for more interactive elements. You don’t want the design to hinder the functionality of the action.

7. Prepare for microinteractions to evolve over time.

The functionality of the Internet continues to grow and change, and that won’t stop anytime soon.

Pay attention to how others are using microinteractions in creative ways, and watch how they develop over time. Update your WordPress sites to make sure they support any new features, too.

You don’t want to get stuck with a beautiful and innovative microinteraction that doesn’t work and tanks your UX.

Here are 5 WordPress microinteractions you should focus on
Click Here

Final Thoughts

Like all UX, the microinteractions on your site will be specific to your end user.

Some users might prefer a simple link (as long as it does what they expect), while others might appreciate something with a little animation.

When in doubt – or when designing for a picky client – it’s important to keep things functional. If you have to choose between innovation and functionality, choose the latter.

While the creation of most microinteractions might escape your notice (they are micro, after all), pay close attention to the ones that could affect UX the most, like links, images or visual cues.

The last thing you want is a simple link hover over to ruin the user experience.

Why You Should Be Designing for Customer Experience Not Just UX

By

Is it UX or CX? Does it really matter?

A lot of web designers focus their time designing for User Experience (UX), but not necessarily for Customer Experience (CX).

That’s because the issue of CX is often far more complicated, and involves more than just pure website development.

CX represents every step of the customer journey, not just your website.

Click To Tweet

But it’s also an integral part of design. If you’re only designing for UX, but missing the larger picture of the customer journey, you will miss out on a core component of your audience base.

Not to mention you’ll cut off your conversions.

Here’s what every web designer and developer should know about building a site with CX (and UX) in mind.

Free download: Customer Experience Design Checklist
Click Here

Customer Experience (CX) vs. User Experience (UX)

CX represents every step of the customer journey from first touchpoint to last exit, which in most cases is actually a buy-in of some kind.

This could include a conversion (signing up for a newsletter) or purchasing a product, or something in between.

It also incorporates things like branding, advertising, pricing, and so on:

Image Source

This is in comparison to UX, which focuses on functionality, visual design, and the content of the site itself.

The final buy-in is what separates a user – someone who is actively perusing a site and navigating to and fro – to a customer – someone who is now an integral part of the business.

Designing for UX alone will give you a smooth and highly optimized website. Visitors will be able to find CTAs and landing pages and move through the funnel.

But designing for CX means that the focus is on getting them through the middle of the funnel and converting into a customer. They have to actually sign up or buy from you.

And that’s a bigger challenge than just building a beautiful and functional website.

The Most Important Components of Designing for CX

Designing for CX involves a look at the bigger picture. You have to see the customer journey starting from the point someone becomes aware of your brand’s existence, not just when they first land on your website.

This means paying attention to things like social media integration and other marketing efforts that bring people to the site.

When it comes to CX, where people come from is just as important as how they interact on the site.

There are also components to CX that may not be a strict part of UX design.

  • Creation of Value – CX revolves around the value of the brand, not just the value proposition found in a CTA or headlines on a landing page. It’s about showing what the overall value to the customer is when they first come to your site.
  • Storytelling – CX uses functional components, like images, colors and so on, to tell a specific story. This story is also part of a funnel that moves towards the ultimate sale or conversion point.
  • Hierarchy of Needs – CX meets customers at every need. If they’re just looking for information, there’s a connection point for them on the site. If they’re coming in with a buy-in already, they’re pointed to the conversion-optimized landing page.
  • Limited Choices – CX limits the choices that a customer has to make when coming to the site. There’s a clear pathway that leads them to the ultimate goal without much thought or effort on their part. Think of this as Hick’s Law.
  • Immersion – CX is a fully immersive strategy. It’s not just about the aesthetics of the site, it’s about how well the experience reflects the real world needs of the customer. For example, if they’re unhappy, does the site improve their mood?
  • Customer Life Cycle Stages – CX includes all stages of the journey, including awareness, consideration, acquisition, service and warranty and reconsideration.

Incorporating all of these components into a design strategy requires input from more than just the designer or developer. Usually, this is a team process that encompasses marketing and sales, too.

CX (and UX) Tips for Web Designers

So how do you design for the best CX experience, while still staying true to all the things you know about UX?

Here are a few tips and strategies for good CX and UX design.

Use UX components to push through the funnel. It’s not about having beautiful pop-ups or colorful CTA buttons. If your pop-ups don’t trigger at the right time, or your CTA button doesn’t lead to the right page, it doesn’t matter how functional they are. Make sure your UX components actually lead to other conversion components.

Focus on UX that impact CX touchpoints. Don’t just code for “optimization.” Your website needs to be fast not just because it’s more functional that way, but because the first experience (touchpoint) a customer has is with whatever page they land on first.

So it needs to load quickly enough for them to make a (hopefully positive) judgment about the content. Think about the why behind the what when you’re designing.

Don’t create the design alone. Work with others who understand the target customer and can tell you exactly what they want. If they know that the customer will most likely land on a product page rather than the homepage, for example, it may change how you spend your time designing.

You might focus on creating a better product page rather than creating a beautiful homepage that only a fraction of your site visitors will actually see.

Optimize for mobile. Mobile-friendliness is a key component for a lot of things, like SEO and UX. But it’s also a big factor in CX, too. More people are converting from their phones and mobile devices than ever before.

Make sure your forms are optimized for mobile, and that customers can buy-in (or purchase a product) from anywhere on the site, using any device.

Focus on branding and brand loyalty. Make sure that every part of the design remains consistent and on-brand. While UX is important for an overall positive experience, CX is what creates lifetime customers.

Don’t miss our free CX checklist for web designers and developers
Click Here

Final Thoughts

CX and UX go hand in hand, so there’s not a lot of benefit in nitpicking which components of a site are technically customer or user related.

But it is still important to understand that CX goes beyond mere functionality. It takes into account the lifetime value of a visitor, not just how happy and engaged your site made them feel.

While UX turns a visitor into a happy visitor, CX turns that same visitor into a customer.

If you’re not sure how to design with CX in mind, get outside of your box. Work with your clients or others in your field to determine what the target customer really needs. Then create a site with great UX to meet those needs.

Your Web Design Should Have These 5 Core Components of UX

By

Most people interact with the Internet on a daily basis, but not everyone experiences the Web in the same way or for the same reasons.

One user may jump online to shop, another to connect with friends (or strangers) on social media, others to stay up-to-date on the news and other trending topics. Some prefer to access sites on their smartphones or mobile devices, while others use laptops or desktop computers.

Some users will have the latest devices with all the most current technology, while others remain beholden to their favorite devices that may not include the most relevant features.

This variety of user activity makes UX design essential, but also challenging. You need to be able to design a consistent experience for people with different motivations, devices and technological capabilities.

The variety of user activity makes UX design essential, but also challenging.

Click To Tweet

In order to ensure the UX of your website is just as good (if not better) than everyone else’s, there are a few key components you should consider during the design process.

Download Our Free Web Designer’s Guide to Better UX:
Click Here

Information Architecture

“Information Architecture” (IA) is the structural design of your site’s information hierarchy – your navigation, sitemap, homepage, categories, and so on. It helps you answer the question, “Is our site structured in a way that anyone can navigate it, no matter what device or browser they’re using?”

One of the biggest components of IA is navigation. Will a top-level navigation menu help customers find what they’re looking for faster than sidebar navigation? Should you include dropdowns? If so, how should those dropdowns be ordered – in terms of importance to the user or based on your sitemap?

IA strategy is about more than just knowing where certain elements on a landing page go. It’s also about how those elements impact the perception of your brand, the ease of navigation, the impact on design, and the positive (or negative) emotional response a user has to your site.

IA is the overarching plan that says, “We’re putting these elements in these specific places, and here’s why…” Without it, users may miss out on important information, may become lost on your site, or even click away due to confusion. (UX Booth has a great beginner’s guide to IA here.)

Interaction Design

While Information Architecture tells you how a user interacts with your site in terms of where they find information, Interaction Design deals with specific interactions between users, their screens and your website.

Interaction Design is comprised of things like interface interactions – How users interact with the interface (depending on their device), what actions they can do with their mouse, finger or stylus and what elements they can interact with – and feedback responses – How long between an action does the website take to respond and how does a user know their action has been successful?

Unlike visual design, which is about how the user responds to visual elements like branding, graphics, images and fonts, Interaction Design focuses on the response to actions taken on the site. Without it, you may have a beautiful site with which no one wants to actually interact.

Visual Design

Visual Design is equally important to UX as well. It tells you how various design elements impact user behavior – how appearances (color, shape, size, etc.) impact interaction.

If you use the color red for your lead magnet button, for example, will it get more clicks? Will using a large, bold font create a sense of urgency? If you place your CTA at the top of the page, will it convert better? If you put a smiling person as your website header, will you have a more positive response to your brand?

Visual Design is about more than just image choices, however. According to UX Booth, it should be thought of “as a mix between graphic design and user experience design.” While graphic design focuses on static images and visuals, Visual Design incorporates Interaction Design to bring the whole picture together.

The topic of Visual Design can be polarizing for many designers, as some feel that focusing too much on aesthetics over usability can actually harm a site’s UX. But without Visual Design, users won’t have much of an experience at all. Finding a balance between visual appeal and function is key.

Usability

Usability – sometimes labeled “user-friendliness” – combines elements from Information Architecture, Interaction Design and Visual Design in addition to other functions like site speed to answer the question, “How easy is this site to use?”

It includes the simplicity of decision-making as well: Do users know where to get the information they want on their first visit to the site? Is information chunked enough so that they can remember it if they navigate away from the page? How likely are they to click a conversion button or to interact with the company in some way?

Usability also deals with the way sites handle errors and how users are directed if an error or mistake occurs. Are they notified if something goes wrong or a page doesn’t load properly? Does that error message direct them somewhere else or are they left on their own?

You can measure usability throughout the development process before the site is even built, using wireframes to prototype the final result, but usability testing should happen once the site is launched, too. The more usability feedback you receive from users once the site is launched, the better your UX will be.

Prototyping

Speaking of prototyping, creating a mockup or simulation of the site before it’s developed is another key component of UX that many designers overlook. Prototyping offers a cheap and flexible way to test the look, usability and interactive elements of a site before its launch.

Prototypes can range from highly polished or near-finished (called “high fidelity” prototypes) to simple sketches on the back of a napkin (low fidelity).

Designer Arijit Banerjee from UX Magazine believes that designers should start with a low-fidelity prototype and move up from there, noting that “as long as a prototype simulates the desired interaction flow and feel of the product, I’m good. Elements like visual design can take a back seat for the moment. And, to be fair, it takes less time and effort to build low-fidelity prototypes compared to their hi-fidelity counterparts.”

There are several tools that can be used for building prototypes as well, ranging from pen and paper to more advanced tools like Adobe Fireworks, but the point of a prototype is to bring all of the elements of UX together to test them accordingly.

Without a preliminary mockup, you risk missing key components of UX that may impact the final result.

Web Designers: Don’t miss our handy guide for better website UX.
Click Here

Final Thoughts

Designing for UX goes beyond making a beautiful site – it’s about creating a site that appeals to users visually as well as functionally, and allows them to interact with it in a variety of ways.

Users should be able to view your site from multiple devices and perform multiple actions if necessary (swipes on mobile devices, mouse clicks on desktops, etc.), but they should also know which actions will lead them to their desired results.

UX incorporates motivation as well as usability. Users should understand where to go to get the information they need and how to get there quickly and easily. Good UX design allows them to browse with minimal effort and maximum autonomy.

How to Do a User Experience Audit for Your Website

By

How good is your website’s user experience? If your user experience were poor, how would you know?

There are many factors that can impact user experience (UX), from the words on a landing page to the images you use. The balance between each element is equally important, too.

The right pictures combined with the right words, for example, will create an ideal environment for customers to buy your product or subscribe to your service when they may have otherwise taken a pass.

On the other hand, the wrong pictures – even with the right words – can send a customer running for the hills.

So how do you know if your user experience is bringing in business or turning it away? You perform a UX audit, of course.

Here’s what you should know…

Take Our Quiz: How User-Friendly Are My Landing Pages?
Click Here

The Benefits of a UX Audit

If you’ve never performed a UX audit before, the idea may seem daunting. But rest assured, taking the time now to review your site for optimum performance will do wonders for your conversions in the long run.

Your UX audit should allow you to see things like:

  • Areas where customers are getting confused or stuck
  • Customer pain points that aren’t being addressed
  • Places on your site where conversions are lowest
  • Onboarding practices that keep customers from converting
  • Any holes in your sales funnel

By performing an assessment of your site, you’ll have a clear understanding of who is using your product or service (not just who you thought was going to use your product or service), any issues preventing conversions, and the ROI of your site as a whole.

What Areas Should You Audit?

The goal of an audit is to pinpoint any areas where customers aren’t converting. This means looking through your site’s content, design, and functionality.

The goal of an audit is to pinpoint any areas where customers aren’t converting.

Click To Tweet

Content

Your text should be easily digestible and enticing – words should be simple and straightforward (not too many buzzwords) and clearly communicate the value of your product or service (the higher up on the page, the better).

Quantity of text also matters. Too much of it and someone won’t bother reading it through; too little and they won’t get enough information to make a decision. Your content on any given landing page shouldn’t take more than a minute or so to read, but it should also keep them on the page.

A good rule of thumb is for content to be readable (out loud) for a length of 15 to 60 seconds.

Call-to-Action

The CTA is one of the most important elements on any landing page, and the phrasing of the words can make a big difference to conversions.

A good CTA will clearly tell the user what they should do while letting them know they’ll receive something of value on the other side of the action.

Words like “contact us for more information” don’t offer enough value, for example, but “click here” may entice them to click on a link if what follows is something important to them (“click here to get your free copy of our ebook”).

Above-the-Fold Design

Design is another factor in conversions, and above-the-fold design – what appears at the top of your landing pages without someone having to scroll – is arguably one of the more important aspects of good design.

If the information and imagery at the top of your page isn’t appealing enough to hold someone’s interest, there’s less of a chance they’ll continue to scroll through the rest of your information or become a customer.

The top of your page should help visitors understand what your company is about, determine if your product is worthwhile, understand the exact value you have to offer, and show them how they should proceed through your site (call-to-action).

Imagery

Part of your UX audit will involve looking at your image choices to determine what message they communicate to potential customers, particularly on your homepage.

The first images your customers see will be the impression of your business. If the images are irrelevant to your product or service or are generally low quality (or boring stock images), it reflects poorly on your site and your company as a whole.

The key is to find images that are high quality, reflect the relevant surrounding content, and appeal to the aesthetics of your target market.

Mobile Accessibility

You may not specifically target mobile traffic with your design and content, but that doesn’t mean it’s not playing a role in conversions. In fact, mobile traffic represents almost 65% of all digital interactions.

If someone has to pull or pinch their screen in order to see content on your mobile site, that may frustrate them enough to navigate away from the page all together.

If your website is hard to view or navigate on a mobile device, it will cost you customers. When performing a UX audit, it’s essential to test the usability of your website on a variety of different devices.

SEO

There are a lot of ways to generate traffic to your site, including things like content marketing, word of mouth, and social media. But search engine traffic is another key area where many websites fall short.

While SEO can be complicated, many websites fail to rank because they don’t use the appropriate keywords in their content, or they’re using them in the wrong places.

If possible, you will want to create a list of ranking keywords and phrases for your business and follow SEO best practices to ensure that your site appears in search engines when and where it should.

Page Speed

Another important element of any UX audit is site speed. Studies show that most website visitors will wait two seconds for website content to appear before navigating away from a page. That means if your content takes longer than that to load, you could be missing conversions.

Part of your UX audit will involve testing your site speed on a variety of different devices and browsers to ensure that download speeds fall in a reasonable range. (If you need to test your site, Pingdom has a tool for that here).

You will also want to look into anything on your page that may be slowing down your site and do your best to remove, replace, or rearrange elements as needed to keep things working as fast as possible.

Tips for Conducting a UX Audit

If you’ve never performed an audit before, you’ll want to follow a few guidelines.

During the audit:

  • Don’t assume you know what users are thinking. Instead, look at the results for clues to any conversion gaps
  • Go through the process as if you had never been to your site before (if you can’t do this without bias, find someone who can and have them report on the experience)
  • Record user screens during the audit if possible so you have both objective and subjective data
  • Create a timeline for your audit and stick to it – make sure you set aside enough time to review your site but don’t get so caught up that it consumes you
  • Start with your content and eliminate other elements – like images – from there (so you know your core message is still being communicated)
  • Make sure your user experience is the same on both PC and mobile devices

If you’re performing your own audit, check out Somia Customer Experience’s DIY audit toolkit here. If you’re not sure you know enough about what you’re doing to do it yourself, consider outsourcing your UX audit to a third-party, like Unfunnel’s UX Audit Tool.

How User-Friendly Are Your Landing Pages? Take the quiz to find out:
Click Here

Final Thoughts

Consider doing an audit at least once a year, or more often if you’ve noticed significant lag in your conversion funnel, or if there have been any major changes to your site.

Be sure to look at a variety of different elements in both your content and design, and don’t forget to check pages that are often overlooked, like a contact page.

As much as possible, try to be objective about areas where you feel conversions are lacking, and don’t take it personally if things are falling short. The whole point of a UX is to spot errors so you can make things better.