Articles

User experience design is something that most of us associate with websites. But why isn’t it something we extend beyond the website?

Here’s why I ask this:

As a consumer, it’s so rare that your only interaction with a brand is through its website. Take an ecommerce site, for example. You buy a product from it, and then what happens?

  • You get a confirmation email;
  • You get another email when the package ships;
  • You might get another email or SMS notification when the package is delivered;
  • You retrieve the package and open it;
  • You open up your purchase and use it.

These are all an extension of that initial user experience on the site. If there’s just one hiccup along the way, it could easily erode the trust and happiness you felt after quickly finding and buying what you needed on the site.

So, what I’d like to do today is look at 10 areas where UX design should extend beyond the website to ensure that the frictionless experience started there remains untarnished.

Extending UX Design Beyond the Website

As a web designer, you might be thinking that this part of the user experience doesn’t fall under the umbrella of your responsibilities. And you may be right about that.

For brands to truly be successful and profitable, someone needs to carefully examine the bigger picture and ensure that the user experience is flawless no matter how far away from the site it is. At the very least, you should share the UX research and strategy you do for a client’s site so their team can ensure it carries over to other areas of the business.

Here are some things to think about:

1. Mobile App

It’s not uncommon for websites to have mobile app counterparts these days. The layout doesn’t need to be identical since mobile users tend to behave differently than those on desktop.

That said, an app shouldn’t force users accustomed to the desktop experience to re-learn how to navigate or engage with the brand. So, the branding, UI design, speed, security, and navigation all need to be on par with what’s already been established in terms of usability.

2. Email

Most websites have a direct connection to email. For example, blog newsletters, purchase confirmation emails, and lead generation follow-ups all start on the website.

Consumers are well aware that when they hand over their email address, they will receive an email in return. In many cases, those emails are welcomed when they’re done right. But if something feels off, that bridge could easily burn between brand and consumer.

To preserve the UX, emails should come with the following:

  • The same branding and visual style as the website;
  • A personalized subject line, greeting, or offer;
  • Consistent messaging as the site, especially when it comes to the CTA.

Another thing to remember is that email isn’t the time to inject dark patterns into the experience. So, the “Unsubscribe” option should be in an easy-to-spot area and a sharply contrasting font color.

3. Social Media

Social media is another channel that’s commonly connected to a website. While you can’t control the aesthetics of social media websites themselves, the visuals and messaging in posts need to be on-brand.

That means that things like memes and emojis — which are popular means of communication on social — should only be used if they’re normally part of the brand identity. If not, you’ll need to find other ways to communicate engagingly.

Another part of the user experience to think about is customer support. Social media is a lot like going into a store. If someone has an issue with what they bought or the service they received, there will be many people around to witness the complaint. Social media only amplifies that — so the quality of customer care needs to be consistent with how the brand handles it everywhere else.

4. SMS

Not every brand will need to be connected to customers via text messaging. eCommerce companies, news sites, and personal services providers likely will, though.

However a brand uses SMS, the same UX guidelines apply here as they do across all other channels:

  • Keep messages concise;
  • Make sure they’re relevant and valuable;
  • Use branded messaging and design;
  • Don’t abuse the privilege and send too many;
  • Make it easy to opt out.

Basically, if you can’t make it a valuable extension of the brand’s offering, don’t use it.

5. Phone

Any website that publishes its phone number should expect to receive calls from prospects and customers. While there’s nothing to design here visually, the experience of getting on the phone with a company should be consistent with what they experience elsewhere.

One way to do this is to design an easy-to-follow routing system. It should be simple for callers to figure out which number to choose. What’s more, there should be no endless loops. If a caller has exhausted the options, they should be immediately directed to a representative.

Another way to ensure consistency is to adhere to a script — that goes for call centers for enterprises as well as the local lawyer’s office. Every caller should be greeted with the same tone and handled in the same manner (depending on the situation, of course).

6. Ads

There are a lot of places where brands can advertise these days:

  • Google search;
  • Social media;
  • Ad networks;
  • TV;
  • Radio;
  • Podcasts;
  • Blogs;
  • Billboards;
  • Direct mail.

When designing an ad campaign, there should be consistent messaging, aesthetics (when relevant), and CTAs presented. If branding isn’t consistent from ad to ad, there may be a delay in consumers recognizing the brand or its offer. Or, worse, not recognizing it at all.

7. Packaging

For brands that sell products, you have to think about how the packaging will impact the user experience. There are two types of packages to consider, too.

The first is the product’s own packaging. Branding should be clear as day and consistent with the site they bought it from.

It should also be easy to open. There’s nothing more frustrating than finally getting your purchase, only to realize you need tools to get it out of the packaging.

You also have to think about packaging for products that get shipped.

The product should fit well within the packaging. A too-roomy package will feel downright wasteful. So will excessive bubble wrap and paper filler.

Having a shipping label present in the package is also important. If the website makes it easy to make a purchase, the package should offer a convenient way to return the product if they’re not happy.

8. Product

The product itself has to align with the expectations set by the website.

Take the example of a SaaS. You’ve built an awesome landing page and mobile app store page to promote it. It looks great, it loads fast, and it’s easy to get around. But if the SaaS itself is ugly, disorganized, slow, or otherwise just clunky, all of the work you did to market it will end up being just false advertising.

So, make sure the expectations set before and during purchase naturally carry over to the experience with the product.

9. Business Exterior

For brick-and-mortar companies, the business’s exterior matters just as much as what happens inside it.

The most obvious thing to focus on is the aesthetics of the building. Does it look attractive? Is it in a safe area? Is there clear signage around it? Is it easy to find?

But you also have to think about user experiences that take place outside of the building. For example, there’s now a rise in curbside pickup. There are tons of things that can affect how happy the customer is with the experience — like if the pickup area is hard to find, there are never enough spots or the associates who deliver the orders always seem to be in a foul mood.

The business’s exterior should always set a good impression for what takes place inside.

10. Business Interior

Here are some things to think about when it comes to “designing” business interiors for a good UX:

  • Decor;
  • Layout;
  • Signage;
  • Furnishings;
  • Product discoverability;
  • Availability (of products or people);
  • Quality of customer service;
  • Checkout process.

It doesn’t matter what the company does — whether it’s a large retailer like Walmart or your own freelance design business. If a business’s establishment doesn’t look good, operate flawlessly, or provide a good person-to-person experience, it’s going to be very hard to get people to return.

So, all those things you do to design a streamlined website journey should be applied to a bricks-and-mortar business’s interior.

Wrapping Up

Depending on the types of companies you build sites for, some of the channels and suggestions above might not be relevant. Hopefully, this has got you thinking about other ways you (and your clients) can extend the UX design and strategy from the website.

If you can maintain the high-quality user experience from channel to channel, your clients’ brands will get more business, grow their profitability, and see a rise in loyalty, too.

 

Featured image via Pexels.

Source

The post UX Design Doesn’t End With Your Website first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Since there are so many CMS plugins out there, it can be overwhelming to choose the best ones for your website. We’ve done the research for you; this list contains the top new CMS plugins for November 2020. You’ll find useful plugins for WordPress, Craft, Shopify, and Joomla.

Let’s get started…

WordPress

404 Page Editor

404 Page Editor is a simple WordPress plugin that helps you add custom text to the default 404 page on your website. The plugin comes with seasonal and industry-related 404 templates. One useful feature of the plugin is that it backups your current 404 page before changing it. So you can restore the backup page anytime you choose. The plugin duplicates your current 404.php page to wp-content/uploads/404-page-editor/ so you can easily find it. You can also change the text on the plugin to fit your local dialect. 

UnusedCSS Power-Up

Most WordPress themes and plugins load their CSS in the wrong areas of your website. This can slow down your site. A slow website will reduce user experience and lead to increased bounce rates.

UnusedCSS will help reduce the size of your website’s CSS files by up to 95%. The best part is that the plugin works automatically. It will remove any unused CSS when visitors view any page on your website. UnusedCSS will automatically reduce your website’s load times by reducing your CSS files and page size. The plugin also optimizes the performance of other WordPress plugins and extensions. UnusedCSS also works with WooCommerce themes and plugins.

Simple Redirects

Simple Redirects is a WordPress plugin that helps you to automatically redirect requests to another page on your site or any other place on the web. The plugin allows you to easily redirect users from your old web pages to new pages using 301 or 302 redirects. You don’t have to worry about losing backlinks or page rank. Any incoming links to the old web page will be automatically passed along to the new page. The page rank on the old page is also transferred to the new page. The plugin is useful when migrating a WordPress site when don’t want to retain the URL structure. 

HTML Validation

HTML Validation plugin helps you identify any HTML validation errors on your website. The plugin works automatically in the background of your website and will send you regular reports. There is a progress bar on the report screen to show you the progress of the scan. The plugin uses WordPress Cron to scan the content of your website. There is also an option for the plugin to automatically fix any HTML validation issues on your website. You can also choose to fix the issues manually. 

Just Highlight

Just Highlight is a simple WordPress plugin that helps you highlight text in your posts or pages. You can use this plugin to highlight any portion of the page you want to draw the reader’s attention to. You can highlight the background of the page and also add animation to the highlighted text. In the WordPress admin area, you can change the speed and color of the animation. The plugin is compatible with Gutenberg, and the WordPress classic editor. 

DeviantArt Embed

DeviantArt Embed is a simple plugin that helps you embed any work from Deviant Art into a post. The plugin provides a block for the WordPress block editor so you can easily embed the image. It uses a DeviantArt oEmbed API to pull the images and their descriptions, and creates an embedded image. 

Static Optimizer

Static Optimizer is a static file optimization plugin that serves and optimizes static files on your website. The plugin will help you increase your website speed by automatically compressing your static files. It is easy to set up, you just need an API key to get started. Other useful features that the plugin offers include automatic JS and CSS minification, automatic image optimization, and processing of responsive images. You don’t have to worry about losing your files if their server is down. The plugin automatically backs up your files and will load your original files when their servers are down (either because of an upgrade, maintenance, or outage).  By default, only images are compressed when you activate the plugin; you can also choose to optimize fonts, CSS, and JS files. 

RankBear

RankBear is a keyword rank tracker plugin that helps you analyze your SEO efforts. With RankBear, you can track the keywords for each of the posts and pages on your site. While the plugin has a paid plan, you can track up to five keywords for free. On the free plan, you will receive weekly reports on each keyword you are tracking. You can search for the rank and volume of a keyword in every location supported by the Google search engine. RankBear is a lightweight software-as-a-service plugin hosted by Amazon Cloud Services. The plugin also offers the option to download the keyword reports to CSV. 

Table of Contents Block

Table of Contents Block is a plugin that allows you to easily create a Table of Contents for your WordPress posts. The plugin is lightweight and will automatically add a Table of Content in your website’s posts and pages. You can select the heading tags you want to add to the Table of Content. It also has a dedicated support team to assist you. The plugin works fine with all standard WordPress themes. 

Markease For WooCommerce

Markeaze is an all-in-one communication plugin that allows you to add live chat to your online stores. The plugin will help you improve your customer service by decreasing your response times. With the plugin, you can collect your visitor’s contact information via a widget. This feature is useful in building a subscriber database. You can also use the plugin to track customer behavior on your site, inform customers about new products, help customers with active orders, and collect customer feedback. You can also use the auto-reply function to answer commonly asked questions. 

Craft CMS

Image Toolbox

Image Toolbox is a Craft CMS plugin that offers image-related tools for your templates. The plugin will automatically create a WebP variant of the images you upload. It also has a fallback for browsers that do not support WebP images. Other useful features the plugin offers include automatic creation of placeholder images and generation of responsive images with multiple variants. The plugin also supports Imager-X (or old Imager). 

Element Panel

Element Panel plugin allows you to add elements and an eager-loading panel to the debug toolbar. This feature will help you benchmark your templates in Craft CMS. For elements, the panel has a dashboard that shows how many elements are populated. It also shows how many elements are duplicates. The plugin also shows you how many eager-loading elements are detected. Duplicate elements are grouped by field name. 

Shopify 

VStore Shoppable Videos

VStore Shoppable Videos is a Shopify plugin that allows your customers to shop directly from your videos. The plugin allows you to embed your products into any video. Since videos have a high engagement rate, this plugin will significantly improve your store’s conversion rates. 

ProofMotion Video Testimonials

ProofMotion Video Testimonials plugin helps you to easily collect video testimonials. The plugin sends an automated email or SMS requests to customers asking for their satisfaction feedback after making a purchase. The responses are analyzed to determine whether the customer had a negative or positive experience. Customers that offer negative feedback are sent to customer care to help them with the problem they encountered. Happy customers are prompted to make video testimonials of their positive shopping experience. ProofMotion guides the customer through the interview so they can give the best testimonial. They also offer an on-site widget so you can easily share your testimonials. 

Real ID

Real ID is a Shopify plugin that allows you to verify customers’ real identity using a photo ID and facial biometrics. The plugin is perfect for orders that have an age restriction, verifying flagged fraud goods, and selling expensive goods. Real ID will help you identify whether a government-issued-ID is fake during fulfilment. All the customer needs to do is take a selfie on their phone. This way, even if a customer has access to a stolen physical ID, they won’t still be able to make any purchase. The plugin can verify documents such as passports, visas, national IDs, driver licenses, and more. Real ID will help you handle GDPR compliance. The plugin is available in hundreds of countries around the world. 

Joomla

Accessibility

Accessibility is a Joomla plugin that allows your website visitors to easily access your website content. The plugin will remove any barrier between the visitor and your Joomla site. There is no coding required and you can customize the plugin directly from the module manager. The plugin has a useful feature called Dyslexic Readability; this feature allows your visitors to set the entire document font to a dyslexic-friendly font. Visitors can also grayscale the page, resize the fonts, and resize the word space. From the backend module, you can add any custom CSS and JS. The plugin is also available in 12 different languages. 

Reading Time

Reading Time is a simple plugin that will help you easily show the reading time of your Joomla articles. The plugin is easy to set up and does not require any coding. You can customize every parameter, including the text, in minutes. You can also choose to exclude categories, articles, and menu items. Reading Time also allows you to easily add custom CSS code from the plugin parameters. 

 

Featured image via Pexels.

Source


Source de l’article sur Webdesignerdepot