Articles

3 Essential Design Trends, October 2020

,

Design can make a statement. It evokes feeling and can encourage thought and conversation. That’s the common theme among the three trends in website design this month.

Each trend is rooted on the time and place where we live and includes elements that provoke thought. Kudos to these designers and design teams for jumpstarting conversations. Here’s what’s trending in design this month.

1. “Taking a Stance” Design

From social to environmental issues, design projects are echoing the sentiments of their audiences and organization in a way that take a stance on an issue.

Once taboo, this is becoming increasingly used as a technique for brands who are no longer worried about turning off a certain segment. The goal is to rally the core audience and people who feel the same way about an issue or cause.

There’s also a secondary thing happening here. Some designs aren’t really position based, but use imagery and language that resonates with a movement to associate with that feeling.

Never Heart uses “Join the Revolution” and a dark image with a heart to tug at your feelings. It can help create an association to a cause that you believe in without stating that cause directly. The design feels strong and inviting while making you feel like part of something.

Skye High uses “powerful” twice in the headline to convey a particular messages to women. The agency is looking to work with “powerful” women. It’s a timely statement and message that could resonate with a lot of business-women at various levels of their careers.

Discovered Wildfoods is a brand that is rooted in sustainability. The corporate model and responsibility of the brand shows through in the website. This type of design helps connect people with mutual feelings to the brand and products.

It’s refreshing to see more websites and brands embracing social causes and issues. It can be tricky for a number of reasons. But for some brands, it pays off.

2. Abstract Art Elements

If you are worried about a lack of images, or not sure how to portray images in an appropriate way due to the worldwide pandemic – groups or not, masked or not – abstract art elements can be the solution.

Widely used for startups and apps, more abstract design elements are everywhere. It’s an easy way to create strong visual interest without photography.

The most common use of abstract art elements is often in the form of geometric shapes with animation. This is something that almost anyone can understand and simple shapes and movement can be quite stunning when done well.

The good news is this aesthetic can work for almost any type of website. Try it for a redesign when you don’t have photography that feels appropriate in the current environment or if you want to create focus for content that drives website visitors to the words or scroll. This works with more abstract concepts when they are simple and help you move quickly from the visual to text.

Here’s how each of the examples handles abstract art elements:

Indicius uses bouncing circles that move toward text and down the screen to drive users to the headline and scroll action.

With Code uses a fun fuzzy circle with different animations to draw you in.

Appimized uses bright color and a monotone scheme with geometric shapes to sell its services.

3. Images That Make You Think

This might be the most visually interesting, and thought-provoking, website design trend we’ve seen in a while. These designs all feature images with a little something different or unusual that make you think.

There are a lot of different ways to do this – marry photographs and illustrations, create imaginary imagery, animations or effects, visual tricks that play on depth perception or create pseudo-3D effects.

The commonality is that the visual is so striking and unusual that website visitors stop and engage with the design. What do the “oddball” visuals mean? What message do they convey? How did they do that?

All of the questions could be associated with this different style of visual representation.

Bling uses a combination of a photo with illustrated animated elements to draw the eye. The yin and yang between reality and fantasy is quickly evident and makes you want to know more. (It doesn’t hurt that the animation uses dollars and lightning.)

Kibun is interesting because the photo choices create an optical illusion of depth. It matches the content of the design well because the website features artistic textile panels with an artistic design. The illusion is in the angles and coloring of photographs and their placements on the screen. The only downside of this design is that it loses the artistic panache on mobile because the images stack.

Oddball images can sell. We Are Mad stands out because it uses a contrived image, but doesn’t go oversized with it. The more subtle placement is ideal and arguably more attention-grabbing.

Conclusion

Website design can be a powerful thing, as these trends and examples show. Don’t discredit the power of choices in color, imagery, animation, and text when creating a digital experience. Design can mean a lot of different things depending on the audience as these examples show.

At the same time, these design trends are powerful and meaningful. They provide context into our world, our time, and our feelings. Don’t be afraid to experiment and make a statement with your design work. Just remember to keep in mind all potential impacts (positive and negative) before taking the project live.

Source


Source de l’article sur Webdesignerdepot

/par

7 All-Too-Common Landing Page Errors You Must Avoid

,

And it does this 24 hours a day, 7 days a week, 52 weeks a year without ever asking for a pay raise.

But this is true only if your website landing page is designed well, maintained, and optimized to the gills. The art and science of a flawless landing page is beyond the scope of a single article, but we can start with helping you spot seven of the most common – and damaging – trouble spots.

1. Unclear Value Statement

Typically, new visitors to your page will only stay on it 3 to 15 seconds before they get distracted. In that span of time, you must offer a clear and visible reason to stick around and interact with the page.

That reason is your value statement. What value do your readers get in exchange for the time you ask them to spend? High-quality content is a must (and hopefully a given), but you also need to pull them in so they experience that content.

Does your landing page do that? If yes, great! If no, you should fix that. If you’re not sure, ask yourself:

  • Is there a compelling, visible headline that expresses the end benefits clearly and succinctly?
  • Is there a subheadline explaining your offering in more detail?
  • Are there supporting graphics that pull the eye toward your headline and subheadline?

If there aren’t, add them now.

2. Poor Signposting

Your landing page isn’t just there to be pretty. It’s meant to convince people to take action. If you don’t make it easy to find your call to action, most viewers won’t look for it.

deliver enough value to make it worth the hassle

You must make it clear — in as succinct and efficient terms as possible — why the action you want a reader to take will deliver enough value to make it worth the hassle. Tell them, in words that stand out from the rest of the page, what you want them to do next and what they’ll receive for doing so.

Improving your signposting stats by asking yourself the following questions:

  • Do you have a clear understanding of what the next step in a visitor’s customer journey should be?
  • Is it easy to find and take that step on your website?
  • Does your copy make a clear and compelling argument in favor of taking that step?

If you can answer yes to all three questions, your signposting is likely good (or at least good enough for now). If not, now you know what you have to do to improve it.

3. Slow Loading Time

Remember that 3 to 15-second maximum time limit we mentioned earlier? That span includes time spent waiting for your landing page to load, and every microsecond of that wait increases a reader’s likelihood of bailing on the whole thing. You must get your loading time to be as quick as possible.

Viewers who exit your landing page early – including while still waiting for it to load – increase your site’s bounce rate. Higher bounce rates reduce your rankings on Google and other search engines, meaning a page that loads too slowly not only impresses fewer viewers, but it also gets fewer viewers overall.

Improving your loading time is usually a job for your tech team or whoever in the office is responsible for overseeing your hosting service. That said, here are a few of the most important ways to optimize this important factor:

  • Optimize image size, file format, and compression;
  • Clean up your database by deleting saved drafts, old revisions, unused plugins, and similar virtual detritus;
  • Confirm that your WordPress theme (if applicable) is optimized for quick loading;
  • Use a content distribution network for file storage;
  • Analyze server response time with your hosting service, and work with them to reduce it;
  • Install tools that leverage browser caching;
  • Fix all your broken links;
  • Remove all render-blocking from JavaScript;
  • Reduce the number of redirects necessary to reach your page;
  • Optimize your code, especially in CSS, JavaScript, and HTML;
  • Enable file compression — except for on images;
  • Replace all PHP content with HTML wherever possible.

This is technical, detailed work, but it’s important. If you don’t have team members up to these tasks, it can be worth hiring an outside consulting company to do it for you.

4. Only One Landing Page

You have a good idea of your ideal customer’s hopes, fears, pain points, demographics, likes and dislikes, and other important information. If you have several different types of customers, you can’t use the same landing page for each of your customer groups. Each group has different characteristics that will prompt them to follow your call to action, so you don’t want to offer just one landing page.

Similarly, you also probably have more than one product or set of content and offerings to generate sales. Having only one landing page can lose leads because the page is only optimized for one of those products or content sets.

Ideally, you should have a unique landing page with a tailored offer for each of your customer models that would send those individuals to each of the products and content sets. An ad for professionals in their 30s making over $50,000 a year would lead to a landing page built for them, while an ad for heads of households working from home would lead to a landing page built for them.

Yes, that means a company with three profiles and four content sets would need 12 landing pages. And yes, it’s worth that kind of effort.

5. Insufficient Visuals

“A picture is worth 1,000 words” is ancient wisdom, but it’s far from true in the internet world – it’s actually worth more. A quick look at social media and blog performance will tell you many people will look at, enjoy, and share a photo or video, but not many will read an entire 1,000-word post on the same topic.

How well your landing page performs depends on the images you use and how you present them. Does your page’s layout conform to the best practices of visual web design:

  • Including images that emotionally reinforce the value expressions of your product’s core benefits;
  • Containing sufficient white space to not be intimidating;
  • Providing data images to indicate the worth of what you do;
  • Using visual design cues to lead the eye toward your conversion points;
  • Applying color gradients to highlight offers and your call to action;
  • Using infographics to replace the dreaded “wall of text”.

If you can say yes for half of these things, carry on. If not, this point may be among the better places to start with a landing page redesign.

6. Asking For Too Much, Too Soon

Craft a custom calls to action that meet all levels of interest, need, and desire

Not every landing page visitor is created equal. Some are hardcore fans and experts in what you do, ready for a 10,000-word white paper that dives deeply into the research supporting your use case. Others might have heard about your industry on an Instagram page and want to know the basics of what you do.

There’s nothing worse than going to a website and being asked for all of your personal information right away. If your call to action requires too much knowledge, too deep a commitment, or even too much personal information, consider scaling back. Otherwise, you risk turning away potential customers.

Better yet, go back to No. 5 above and build a new landing page for beginners and early-stage leads. Craft a custom calls to action that meet all levels of interest, need, and desire.

7. No Trust Elements

Offering some type of authentic customer referral or testimonial is important. It all boils down to the same thing: telling those who read your landing page that other people already like what you do and how you do it.

Examples of effective modern trust elements include:

  • Quotes from positive reviews next to a photo of the reviewer;
  • Screenshots of social media posts praising your company or product;
  • Short video interviews of happy clients;
  • Blurbs for industry thought leaders approving of you;
  • Images portraying business credentials and certifications;
  • Links to positive press coverage;
  • Logos of known business customers who buy and trust your brand.

Final Thought: What’s Next?

There isn’t one guaranteed way to turn a landing page from something full of holes into something perfect. But first, run an audit of your landing page using this list as a guide. Note which errors are there. Next, sort them in order of what takes the least time to fix to what takes the most time to fix.

Then, fix them in that order. We find that getting the quick fixes done builds excitement and momentum, whereas starting with a harder fix can mire down the whole process.

If none of these errors exist on your landing page, congratulations. There’s still lots of work to do on your website and content marketing, but it’s not among these rookie mistakes.

 

Featured image via Pexels.

Source


Source de l’article sur Webdesignerdepot

/par

AccessiBe Review 2020: Solving Web Accessibility with AI and Scalability

Web accessibility is important for two reasons:

  1. Being ADA & WCAG compliant is required by law (we’ll explain this further) so if your website isn’t compliant, you can get sued.
  2. It allows people with disabilities to browse your website, which increases your potential audience and it is the decent thing to do.

In this accessiBe review, we’ll cover:

How Does accessiBe Work

accessiBe is an automated solution that combines two applications to achieve full compliance.

Foreground application: the accessibility interface. This is the accessibility menu that allows users with disabilities to adjust the various UI and design elements on your website so it meets their unique needs.

Background application: proprietary AI technology that’s responsible for the ‘heavy lifting’, screen-reader, and keyboard navigation optimization.

The combination of these two applications is unique for accessiBe for a few reasons. While most available accessibility solutions offer just one of the two or rely on manual remediation, accessiBe checks both boxes and does it in a fully automated way.

Additionally, and most importantly, accessiBe continuously scans your website, every 24 hours, identifying and fixing new accessibility issues as they arise. Websites are dynamic – meaning, keep updating constantly with new content, pages, images and so on; being ADA and WCAG compliant is an ongoing concern, not a one-time fix.

How to Install and Setup accessiBe

You install accessiBe by inserting a single line of code on your website.

From your end, that’s all it takes.

The first thing that happens is that the accessibility interface appears on your website. The menu is available via the accessibility icon (that also appears automatically.)

Source: accessiBe website

Next, the AI application scans and analyzes your website for accessibility issues and compatibility with screen-readers and keyboard navigation requirements and fixes them. This automated process takes 48 hours.

Once the initial 48 hours have elapsed, your website is compliant.

From here on, accessiBe automatically scans your website every 24 hours to identify and fix new accessibility issues as they arise due to website updates.

Why Ongoing Compliance is Important

We’ve mentioned this already, but it’s important to stress this point.

Whether you have an e-commerce website or a company website, you keep updating and changing your website; new items go up for sale, new videos and content pieces are added. Every addition or removal from your website has the potential of creating accessibility gaps (like missing alt text for images.)

By continuously scanning and fixing your website, accessiBe ensures that you stay compliant. An accessibility audit remediates your website for the specific point in time the audit took place. Meaning, you’ll need to audit your website periodically to remain compliant, which is a costly affair. With accessiBe you don’t need to worry about this.

accessiBe Front End Features – The Accessibility Interface

The accessiBe accessibility interface (the menu that is available for users) is installed automatically on your website once you insert the line of code. Let’s look at the various features that are available for people with disabilities.

Accessibility Profiles Explained

First, it allows you to choose from a pre-defined set of profiles optimized for various disability needs:

When one of the profiles is selected, the required adjustments are instantly applied to your entire website.

For example, The ADHD Friendly Profile creates a reading mark that follows your mouse movements that diminish distractions and allows better focus:

The Cognitive Disability Profile frames all the elements in bounding boxes and adds an ‘reading cursor’ that acts as your mouse to allow enhanced orientation:

Each of the predefined profiles includes a suite of features that target the unique accessibility needs of the disability; the Epilepsy Safe Profile prevents videos from playing automatically, dims all the colors on your website and eliminates flashing and blinking animations; the Visually Impaired Profile enhances all your website’s visuals, enlarges all fonts to allow most visual impairments conditions (degrading eyesight, tunnel vision, cataract, glaucoma and more) to be able to browse your website with ease.

The last two profiles, Blind Users and Keyboard Navigation, work in unison. They allow blind and motor-impaired individuals to browse and use your website as they are used to, through screen-readers and keyboard functionality, respectively.

Two things need to be mentioned here:

  1. Blind individuals have screen-readers installed on their computers in the OS-level, meaning, on the hard drive of the computer. They use them to navigate the internet by having the software read for them every text that appears on the screen. As can be seen in the screenshot above, the Blind User profile is ‘launched’ automatically once accessiBe detects that the user is using a screen-reader. This is a crucial functionality since obviously blind users aren’t able to locate the accessibility icon.
  2. The same goes for individuals that are using the keyboard instead of a mouse to navigate the web, both the motor-impaired and the blind. accessiBe detects and automatically enables keyboard navigation on your website.

On top of the predefined accessibility profiles, accessiBe’s interface allows for further adjustments that can be controlled specifically to allow a personalized browsing experience according to the user’s needs. Let’s look at these adjustments.

Accessibility Content Adjustments Explained

The content adjustments allow you to control every aspect of the written content on your website. The menu looks like this:

Each of these elements allows for granular control of the way content, or text, is presented. From altering the entire website’s text to a readable, sans-serif font that is easier to follow, to highlighting titles and links, to adjusting font size, the spacing between lines and letters and using a text magnifier that follows your cursor on the screen.

Here’s how it looks with Highlight Titles and Highlight Links turned on:

You can see all the links are highlighted with an orange bounding box while all titles are highlighted with a blue bounding box.

Accessibility Color Adjustments Explained

The color adjustments allows users to control every aspect of the color scheme on the website:

From adjusting contrast and saturation, to switching the entire website to a monochrome color scheme, to adjusting textual elements and background colors. Let’s look at a few examples.

Here’s a side-by-side of default appearance and the Dark Contrast adjustment turned on:

And here’s how it looks with the Monochrome adjustment turned on:

Accessibility Orientation Adjustments Explained

The orientation adjustments allow full control of ‘distractions’ that make it hard for individuals with epilepsy, ADHD, and cognitive disability to browse the web:

As such, the orientation adjustments allow users to mute sound, hide images, stop animations and additional ‘focus’ features such as an enlarged cursor and reading assistance that highlights the text being read.

Here’s how the Remove Images adjustment works:

accessiBe Back End Features

Unlike ‘accessibility plugins’ (more on that later) accessiBe provides a comprehensive back end treatment to your website – automated, AI-powered analysis of compatibility with accessibility requirements and fixing of the elements that need adjustment.

It should be noted that 70% of the WCAG compliance requirements deal with screen-reader and keyboard navigation compatibility and all these requirements are not answered by installing an accessibility interface widget that merely makes UI and design adjustments.

For example, an accessibility widget will enable you to enlarge the font on your website, to adjust the saturation or to highlight links, but it won’t enable a blind individual to differentiate between a shopping cart icon and a checkout icon, nor will it enable a motor impaired individual to easily navigate a menu.

This is a crucial consideration to make when choosing a web accessibility solution. Being WCAG compliant is a YES / NO situation. Your website is either compliant or it’s not, there is no middle ground here.

accessiBe’s back end features come to solve and answer all these compatibility issues that enable full screen-reader and keyboard navigation functionalities.

Screen Reader Compatibility Explained

Screen Reader is a software for blind individuals to use computers and browse the web. As the name suggests, the software reads aloud what is seen on the screen for blind individuals.

The screen reader software is installed on the computer. But in order for it to work with websites, the website needs to be compatible with the software. To achieve compatibility with screen reader software, WCAG requires that a website should adhere to a set of attributes called Accessible Rich Internet Applications (ARIA) that are installed within the website’s code, allowing it to ‘communicate’ with the screen reader.

Let’s take social icons as an example. We are all familiar with those icons – Facebook, Twitter, Instagram – they are instantly recognizable for us visually. A screen reader software doesn’t actually ‘see’ elements on the screen, rather it scans the website’s code to understand what appears on the screen. As such, a Facebook icon code simply says ‘link’ and has the URL that directs the user when clicking the link.

So with a website that isn’t compatible with a screen reader, that doesn’t have ARIA tags implemented, the screen reader will read to the blind person “link” for the Facebook icon; not very helpful, is it?

When ARIA tags are implemented, additional information is added to the Facebook icon – and any other visual link on the website – that describes what is the link. So the screen reader will read to the blind person “Facebook link”.

It’s not difficult to imagine the scope and effort of the work needed in order to implement ARIA tags on your entire website.

Keyboard Navigation Compatibility Explained

Keyboard navigation means that motor-impaired individuals are using their computers only through their keyboard, rather than a mouse. Scrolling, clicking links and menu buttons, opening and closing tabs – everything is done using designated keys.

There are many issues relating to keyboard navigation as today’s websites are highly complex, layered with content elements, and react dynamically to user behavior. Any element of the website must be compatible to allow full keyboard navigation.

Let’s look at a popup as an example.

Popups can be triggered for a variety of reasons. For mouse users, it is a simple occurrence; you can bring the cursor to the area of the popup, click on one of the fields to input details or click the X to close the popup.

But how do you handle the popup using only the keyboard? How do you differentiate between ‘regular’ functionalities of the website and that of the popup? How do you ‘shift the focus’ of the keystrokes to a layered element? You need to allow unique keystrokes to operate the popup, keystrokes that are activated only when a popup appears.

It’s one example of the many challenges making your website compatible with keyboard navigation. The list of WCAG requirements for compatibility with keyboard navigation is a long one, and understandably so as it needs to enable motor-impaired individuals to navigate your website with the same ease as the rest of us using a mouse.

How accessiBe’s Background Processing Achieves Screen Reader and Keyboard Navigation Compatibility

Without getting too technical, what accessiBe does is scan the entire code of your website and adds keyboard functionalities and ARIA tags to various elements on your website directly. It won’t interfere with your site’s code, but rather add an additional ‘layer’.

accessiBe’s AI ‘learned’ all of ARIA’s tags and keyboard functionalities required by WCAG and when scanning your website’s code implements all the required adjustments to achieve full compliance.

How accessiBe Makes Menus Accessible

Menus are a good example for understanding what the accessiBe background processing does and the benefits it provides.

We recognize menus on websites instantly, because we saw thousands and thousands of them. We know how they look, we know what their functionality is, and we know where to hover and click in order to reach the various pages of the website.

But if you remember, we said that screen readers don’t ‘look’ at the screen, but rather scan the site’s code to understand structure, identify links and read them aloud with all the text that appears on the page.

So menus are coded as a list structure, because in a way they are. A screen reader will announce a menu as a list, which might be confusing for a blind user. Additionally, many menus have drop-down sub-menus, accessible via a hover or by clicking a little triangle. Without proper ARIA tagging, a screen reader will miss the sub-menu.

What accessiBe does is adding readable tags for every element in the menu so a screen reader will recognize and announce each element properly. The ‘list’ code structure will get a “menu” tag, and the sub-menu will get a tag for ‘sub-menu’, thus allowing the blind individual to utilize the full functionality of the website.

Additionally, accessiBe alternates the tags on-the-fly while the site is being browsed. Once a sub-menu has been opened, a tag that says “sub-menu open” will be added to indicate to the screen reader what has happened, and will be changed with the tag “sub-menu close” once the sub-menu has been closed.

Image Recognition

One of the key elements of accessibility compliance with screen readers is to provide accurate alternative descriptions for images, known as alt text.

accessiBe utilizes various image, object and character recognition technologies (OCR and Iris) to provide highly descriptive and accurate depictions of images displayed on the website. Without adding screen-reader compatible alt tags to images a blind individual would simply not be aware of the existence of images, and miss out on the information usually displayed on images.

Let’s look at the following banner images from an e-commerce website:

As you can see, valuable information is communicated via the images – sales and discounts – the kind of information any shopper would want to know.

This is the descriptive text that accessiBe’s AI assigned to these images, completely automated with no human intervention (from left to right):

  • Image contains: shopping,  shorts, woman, ashion; image text: extra 50% off shorts
  • Image contains: shopping, red top, woman, jeans, fashion; image text: 50% off bottoms
  • Image contains: shopping, blue jumpsuit, woman, fashion, bed, ; image text: 50% off jumpsuits & rompers
  • Image contains: shopping, shoes, ocean, woman, fashion; image text: 50% off shoes

Again, doing this kind of work for the hundreds to thousands of images that are displayed on every e-commerce website requires a lot of time and effort. accessiBe achieves this in a completely automated way, and every image added to your website instantly gets its alt text.

Comparison of accessiBe with Accessibility Plugins

There are many web accessibility plugins out there. They offer a ‘quick fix’ for ADA and WCAG compliance – add an accessibility menu and you’re done.

As tempting as it may sound, the distinction between an accessibility menu and being fully compliant must be made.

As we’ve mentioned earlier, there are two parallel tasks that need to handle in order to achieve ADA and WCAG compliance:

  • Front end – UI and design adjustments, achieved by the Accessibility Interface (the visible menu for content, font, color and orientation adjustments)
  • Back end – screen-reader and keyboard navigation compatibility, achieved by implementing ARIA tags and further code adjustments

Reminder: 70% of accessibility compliance requirements deal with back end adjustments, meaning, screen-readers, and keyboard navigation compatibility.

Accessibility plugins, whether free or paid, only answer the front-end requirements. Meaning, after installing an accessibility plugin, you are just 30% compliant. Since accessibility compliance is not a scale (you don’t ‘get points’ for making it halfway through) you’ll need to turn to an additional provider to do the back end work.

accessiBe, on the other hand, provides a full accessibility compliance solution, covering both UI and design requirements through the accessibility interface AND screen-reader and keyboard navigation compatibility requirements through it’s automated AI technology that analyzes and makes adjustments in the code-level of the website.

Benefits of Using accessiBe Over Accessibility Plugins

  • Achieving complete accessibility compliance
  • Dealing with a single provider, rather than two or more
  • Cost-efficiency (manual audit and remediation service are expensive)
  • Complete compatibility with screen-readers and keyboard navigation
  • Enabling true accessibility to individuals with disabilities

Comparison of accessiBe with Manual Accessibility Services

Manual accessibility services can help you achieve full accessibility compliance, but it comes with two major disclaimers:

  1. You’ll still need an additional solution for an accessibility interface, which the service companies don’t provide
  2. The compliance achieved is for the point in time the audit and remediation were performed. Let’s explain this point further.

Companies that offer a manual accessibility service assign a team of accessibility experts to do an audit of your website. The result of this audit is a lengthy document detailing all the accessibility faults that your website has. It is a valuable document as it gives you a precise depiction of what needs to be fixed in order to achieve compliance.

From here there are two possible paths:

You can either take the audit results to your development team and have them remediate your website accordingly.

Or, some of the service companies offer a remediation service, meaning, they’ll assign their own engineers to manually make the necessary changes in your website. Needless to say this extra service isn’t given for free.

In both cases, you are looking at a process that takes weeks if not months (depending on the number of pages your website has.)

Additionally, since it is a manual process done by experts, it comes with a hefty price tag.

But most importantly, the audit and remediation hold for the time they were done. Unless you have a 100% static website, meaning, you do not make any changes to your website – never add or remove products, never update content – the ‘effect’ of the audit and remediation fades away with time.

Since the process was manual, any changes you make to your website must be handled manually accessibility-wise. You added a new banner with a link to items on sale, you’ll need to go into the code and add ARIA tags. You added a new image, you’ll need to go into the code and add alt text compatible with screen-readers. And so on.

Some of the manual accessibility service companies offer maintenance services as well. They will periodically audit your website (manually) and provide a remediation document that will need to be implemented (manually) either by your development team or by theirs for an additional cost.

These costs add up. Having your website audited and remediated for compliance on an ongoing basis takes time, effort, and money. But you don’t have a choice. Being ADA and WCAG compliant is an ongoing task, since websites are dynamic and being updated regularly.

accessiBe, on the other hand, offers a 100% automated and ongoing compliance solution. The initial audit and remediation process is carried out – with no human intervention – in 48 hours (compared to weeks or months by a manual provider). Then, your website is scanned every 24 hours to identify and fix accessibility issues using accessiBe AI technology. Meaning, compliance maintenance is constantly carried out ‘in the background’ keeping you ADA & WCAG compliant at all times.

Which brings us to another crucial point regarding manual accessibility services. They make it extremely hard for you to scale up. Every business has a constant aim to grow, but with a manual accessibility service, scalability becomes a pain point. The more you grow the more time, effort and money you need to put in to remain compliant. You want to add another section to your website, you want to launch an additional website? Using a manual accessibility service will hold you back. You’ll need to account for additional time before going live to manually enable accessibility and additional funds. For fast-moving companies, time becomes a serious burden.

Since accessiBe offers an automated and ongoing accessibility solution, scalability is not an issue.

Benefits of Using accessiBe Over Manual Accessibility Services

  • Time-efficient
  • Cost-effective
  • 100% automated
  • Ongoing compliance
  • Infinite scale
  • Single provider for full compliance (front end and back end)

How to Check Your Web Accessibility Compliance Level

Before you get started on your path to being ADA & WCAG compliant it’s important to understand the current state of accessibility your website provides.

Obviously, if you’ve never taken any steps to make your website accessible to individuals with disabilities, there’s no need for this – your website isn’t accessible in any way.

This is actually highly important if you have taken steps to make your website accessible, like for example, installing one of the accessibility plugins. You might be under the impression that by doing so your website is both compliant and accessible to individuals with disabilities.

There’s a simple and quick way to face the accessibility reality.

accessiBe offers a free, automated compliance audit tool available online named aCe. It uses accessiBe AI technology to scan your site, detect accessibility issues and provide quite a detailed report on the various elements that impact your website’s accessibility, and those include:

  • General score
  • Clickables
  • Titles
  • Orientation
  • Menus
  • Graphics
  • Forms
  • Documents
  • Readability
  • Carousels
  • Tables

Each of these elements is given a score and some explanations to the specific issues that need attention within the context of these elements.

In addition to gaining a compliance audit with the remediation steps needed to be taken in order to fix these issues, aCe gives you a very clear idea of where you stand and what needs your attention in order to achieve compliance.

We gave it a try. We ran a website that has installed one of the accessibility plugins (which was recognized, by name, by the aCe audit tool) and the results cement the point that these plugins aren’t comprehensive enough of a solution for true ADA & WCAG compliance.

Here are the results:

As can be expected, the UI and design side got relatively high scores, due to the accessibility plugin installed on the website, but anything that has to do with back end compatibility with screen readers and keyboard navigation got a failing score.

Conclusion

accessiBe is an automated and comprehensive web accessibility solution that achieves ongoing compliance with ADA and WCAG regulations for your website.

It offers a unique combination of front end and back end compatibility, meaning, it provides an end-to-end solution for both user-facing accessibility interface, and compatibility with screen readers and keyboard navigation.

The solution offered by accessiBe is a no-touch, no-code, continuous compliance utilizing proprietary AI technology that audits and remediates your website.

It is by far one of the most affordable web accessibility solutions, starting at $490 for websites with up to 1,000 unique pages.

When compared to accessibility plugins, accessiBe’s offering is robust and comprehensive, delivering full compliance that plugins aren’t able to.

When compared to accessibility manual services, accessiBe offers a speedy and automated audit and remediation process compared to the lengthy, manual and highly expensive offering of the service companies. Additionally, accessiBe, unlike accessibility manual services, delivers ongoing compliance and the ability to scale with ease and speed.

The combination of AI-based audit and remediation, the most comprehensive accessibility interface on the market, ongoing compliance, scalability, and a highly affordable plan makes accessiBe stand out from the competition by offering a unique end-to-end solution for achieving ADA and WCAG compliance in a fast and simple way.

Featured image via Unsplash.

Source de l’article sur Webdesignerdepot

/par

When Does Emotional Design Cross a Line?

,

Designing for emotion in and of itself is not a problem. Websites are bound to elicit an emotional reaction from visitors, even if it’s as simple as them feeling at ease because of the soft, pastel color palette you’ve designed the site with.

I don’t want to outright villainize emotional design. Unless there is some form of unethical manipulation at play, designing for your visitors’ emotions can actually provide them with a more positive experience.

So, here’s what I’d like to look at today:

  1. What is emotional design?
  2. When does emotional design cross a line?
  3. What’s the right way to design for emotions?

1. What Is Emotional Design?

When we look at emotional design in the context of a website, we’re focused on three types of emotional reactions:

a. Visceral Reactions

Visceral reactions are instinctive ones. Usually, visitors experience these as their first impressions of a website or web page. For instance, a cluttered or otherwise poorly designed homepage might leave visitors feeling overwhelmed, hesitant, or wanting to flea.

A minimally designed homepage interface, on the other hand, might have visitors not feeling much of a reaction at all. In this case, no feeling is a good feeling.

Like Irene Au said:

b. Behavioral Reactions

Behavioral reactions stem from the usability of a website. There’s a lot that can stir up negative emotions here, like:

  • Extra-long contact forms
  • Confusing menus
  • Error-ridden content
  • Slow-loading pages
  • And more

Again, if a website is easy to get through and attractively designed, visitors aren’t likely going to “ooh” and “aah” with every step they take on the site. And that’s a good thing. If they’re focusing more on how the design looks, they’re not paying attention to the brand’s actual offer.

c. Reflective Reactions

Reflective reactions are the third type of emotions we design for.

This is complicated because there’s a lot wrapped up in how visitors feel about a website after the fact. Sometimes the most well-designed interfaces and experiences can’t save them from a bad experience, whether they realized too late that the products were overpriced or they were treated poorly by a live chat representative.

As a web designer, all you can really do is to make sure you’re working with reputable companies and then aligning the designs of their sites with their values.

When Does Emotional Design Cross a Line?

There’s already enough social pressure online; your website doesn’t need to be one of those places, too

Emotional design shouldn’t be about manipulating consumers’ emotions. In most cases, emotional design is about controlling the environment of the website so that emotions don’t go spinning wildly out of control — in either direction.

It’s when we take what we know about influencing someone’s emotional state to monetarily benefit from it that emotional design becomes problematic.

Here are some ways in which you might negatively impact the emotions of your visitors through design:

FOMO

The fear-of-missing-out isn’t always a bad marketing strategy. However, when FOMO is used for the purposes of rushing consumers to take action now and without time to really think it through, it definitely can be.

Chances are good they’ll feel badly no matter what. Either because they regret the rushed (and probably unnecessary, or expensive) decision or they blame themselves for missing out on an opportunity to be like everyone else.

There’s already enough social pressure online; your website doesn’t need to be one of those places, too. So, be careful with how you present customers with limits (on time, on products, etc.) or how you frame the call-to-action (“If you don’t buy this now, expect to fail/be miserable/suffer even more”).

Analysis Paralysis

It doesn’t matter why people specifically seek out your website. They have a problem or a hole in their life, and they’re looking for something to fix it.

Now, you can’t help it if the website has too much to offer in the way of options or solutions. Companies have to provide every possible solution/option so their users don’t feel like they have to go somewhere else to get what they need. However, the way you design these options can lead to a negative emotional state if you’re not careful.

For instance, your visitors might experience analysis paralysis, where there are so many options that it becomes impossible to take action. Similar to FOMO, this can lead to regret either with the decision they made or the one they were incapable of making.

By simplifying how many choices are presented at once, or designing a clear and supportive pathway to the right option of many, your website will leave visitors feeling much more positively about the whole experience.

Trendy Nostalgia

Nostalgia can be a great way to play upon the positive associations and emotions consumers feel towards an era gone by or a place they once knew. But, again, it depends on how you design with it.

For example, if you design a vintage website for an agency launched in 2019 and run by a group of 20-somethings, it might come off feeling disingenuous once customers start to catch on.

For a restaurant known as the oldest bar in the state, that would be a different story. That nostalgically designed website would be a real part of its story; not just done as a sales gimmick. As a result, customers would likely embrace those warm feelings for the “good ol’ days” they get from the website.

Also, think about how quickly nostalgia fades if it’s done to align with a trend. Unless you’re committed to redesigning a website the second that nostalgic feeling falls out of favor, you could be condemning your client to an outdated website mere months after launch.

What’s the Right Way to Design for Emotions?

Like I said before, there’s nothing wrong with designing for emotions. You just have to make sure your website visitors don’t feel manipulated and that they welcome the pleasant feelings the site gives them.

make sure your website visitors don’t feel manipulated

It might seem harmless at the time. After all, what are they doing on the site if they weren’t interested in the first place? And it’s not like they were bullied into spending their money, right?

But if they sense in any way that their response was driven by an emotion they wouldn’t have otherwise felt, they’re not going to be happy. While it might not be enough for them to cancel their subscription or services, or to return products they bought, it will definitely leave a bad taste in their mouth. And, ultimately, it can cost your website loyal visitors and customers.

So, if you’re going to use emotional design on a website, do it to improve their experience, not to put more money into your clients’ pockets. That means your emotional design choices need to be honest, transparent, and focused on eliciting naturally positive emotions like:

  • Satisfaction
  • Feeling impressed
  • Trust
  • Calm
  • Feeling valued

Go back to the three emotional reactions I brought up earlier. If you can design a website to give off a positive first impression, and to be pain-free and usable, you can spend the rest of your time injecting small bits of happiness and positivity into the website with color choices, friendly micro-interactions, personalized content, and more.

 

Featured image via Unsplash.

Source


Source de l’article sur Webdesignerdepot

/par

How to Design the Perfect Developer Portfolio

,

As a freelance web developer, how many clients do you get from your website? If you’re like most, you’re probably lucky to get one client every 2-3 months. Unfortunately, that’s very common.

These days it’s not enough just to be a web developer if you want to make really good money. You have to be able to differentiate yourself in the marketplace to get more opportunities. If you can do this successfully, I’m 100% sure that it will help you win more projects and charge higher rates.

So today I’d like to share with you a little bit of my own story. In the last 4 months, I was able to position myself as a specialist with my personal site that ultimately helped me win more projects and get better clients.

The Importance of Niching Down

The first thing that I would invite you to do is to shift your thinking a little bit.

If you want to be a high-paid professional (especially if you’re a freelancer), you need to learn how to market and sell yourself. And the first rule of marketing is to identify your target audience and the result that you help them achieve.

I can’t over emphasize the importance of this.

You need to know exactly who you help and the outcome that you provide. That is ultimately what you get paid for. So you need to define your ideal client.

My suggestion is to pick a market segment that you would love to work with, that has the money to afford you and (ideally) those that have already done some projects for. Once you have identified your target market, you need to create your positioning statement. Your positioning statement should immediately tell who you help and what results you help them achieve.

Here is a formula that you can use to create your positioning statement:

I help __ (target audience) __ do (build/achieve/overcome) ___ (problem that you help them solve).

For example: I help startup SaaS companies build highly converting websites. You can go even narrower if you want, but this is already much better than just saying, “I’m a web developer.”

If your positioning statement is “I help startup SaaS companies build highly converting websites” it can still be narrowed down and improved. As you gain more experience and work with more clients, you can refine it to something like: “I help healthcare SaaS companies build highly converting websites.”

Now imagine if a SaaS startup founder from a healthcare niche came to your site and saw that positioning statement vs a very generic one like “I’m a web developer”. How much easier would it be for you to differentiate yourself and gain a huge advantage over your competitors in the marketplace?

4 Elements of a Perfect Landing Page

“I am passionate about coding, I have 10+ years of experience, client satisfaction is my main goal…” 

Have you ever seen statements like that on someone’s portfolio site? Or maybe it even says that on your own site. From my experience, statements like that don’t really help you convert site visitors into customers.

If you personally go to a company’s website, what would you like to see yourself as a visitor? Somebody saying how good they are, or to find out if they can be a good fit to solve your problem? I think that most of the time the latter is what you’re after. That’s what other people usually go to your website for; they want to know how you can help them solve their problems.

For instance, take a look at this section from Tom Hirst’s website:

As you can see, this immediately helps the visitors understand if Tom is a good fit for them or not. He doesn’t just boast about how good he is, but rather helps the client understand what problems he can solve for them. Another important part here is that Tom doesn’t use a lot of technical terms. Since a lot of his visitors may be not as tech-savvy as he is, there is no point in confusing them with technical jargon. The more you can speak their language – the easier it will be for you to build trust and connection that will later help you during the sales process.

Let me tell you a bit about the 4 parts of my site that I think have contributed significantly to having me win more projects. The 4 elements are problem, solution, proof, and call to action. Let me go over them 1 by 1 and explain why they’re important.

1. Problem

A good way to start your landing page sales letter is by identifying the problem of the client. If you know their pain points and you mention them, you should be able to hook them into reading your copy. And a well-written copy plays a significant role in persuading your visitors to take the next action.

2. Solution

Once you have mentioned their problem, you need to present them with a solution that you provide. You need to show them how working with you can solve their problems. Whatever their problems are, you have to show them that you understand them and can help solve them.

That’s what UX designer Matt Oplinski is doing on his website is doing. He knows that his clients might need help with 3 types of projects: Digital Products, Marketing Websites or Mobile Apps. For example, the clients who are seeking a redesign of their website may have an issue with their current conversion rates. And that’s exactly what Matthew lists in the middle section under “Custom Marketing Website” headline. I would even argue that he may have been a bit more specific with the solutions that he can offer.

The main takeaway here is that it’s important to be very specific with the result that you can help your clients achieve. The more accurate it is, the better it is going to convert.

3. Social Proof

Social proof plays an extremely important role in converting a lead into a customer. When someone comes to your site, they don’t know if they can trust you. If they were to spend one, two, five, ten or even more thousand dollars – they need to feel comfortable with you. They need to have at least some level of trust. That’s why they want to see as many signs as possible that you’re trustworthy.

Social proof obviously can come in many different forms. The most popular and important ones, in my opinion, are case studies with results that you’ve produced and testimonials. They will be absolutely crucial to persuade your clients and be able to differentiate yourself from others.

Here is a good example from Bill Erickson’s site:

Ideally, your testimonials should showcase a particular business goal that you’ve helped your client to achieve. But even if you don’t have those, you can use ordinary testimonials that your clients give you. That alone is better than no testimonials at all.

4. Call to Action

Last but not least you should have a single call to action on your site. Most likely it will be a button to contact you, or book a call with you.

In my opinion, it’s important to have a single call to action because if you give people too many options they will not be so focused on taking an action that you actually want them to take.

I also suggest that you have a call to action button at least 2-3 times on the page: one on the first screen where you have your positioning statement and/or your offer, and one at the very bottom of the page so that when they finish reading they don’t need to go back to the top to take action. Having another call to action in the middle of your page is also a good idea. My advice would be to add it after you’ve described the problem, your solution and presented yourself as someone who can help your leads with their problems.

Results

I started niching down and created my own website four months ago. Being a member of multiple freelance platforms, I’ve been fortunate enough to get enough leads in my target market to test out my strategy. So far the results are pretty amazing.

It has become a lot easier for me to win projects, get clients that respect my knowledge, and my process. Besides that, I’ve been able to significantly increase my rates for my work. A great thing about working with similar projects every time is that you automate and streamline a lot of things, improve your delivery process and become much more efficient. You can even create a productized service. This is something that is very hard to achieve if you’re constantly working on custom projects that have different requirements and involve different technologies.

To be completely transparent, I’m still in the process of building my authority in the niche, polishing my offer and gaining experience. I still have a long way to go. What I can certainly say today is that it has been one of the best decisions in my professional career.

To become a high paying professional in your industry you have to do things differently. Today I tried to show you one of the ways that you can improve your career or freelancing business fast. It probably won’t happen overnight, but in a matter of a few months you can be so much ahead of your competition if you deploy some of the strategies that I’ve shared with you today.

I really hope that this article has helped you gain some perspective and you will start to consider doing a similar thing that I did to achieve amazing results.

 

Featured image via Unsplash.

Source


Source de l’article sur Webdesignerdepot

/par

5 Tips for Designing One-Page Websites That Work

,

Smart design choices can help reduce the fatigue and frustration people would otherwise feel when using the web.

There are a lot of ways web designers can minimize distractions, information overload, and analysis paralysis. For instance, designing with abundant white space, shorter snippets of text, and calming color palettes all work.

One-page websites might be another design choice worth exploring.

When done right, a single-page website could be very useful in creating a simpler and more welcoming environment for today’s overwhelmed consumers.

With its diminutive structure, it would leave a unique and memorable impression on visitors. What’s more, a well-crafted one-page website would provide visitors with a clean, narrow, and logical pathway to conversion.

For those of you who use BeTheme’s pre-built sites (or are thinking about adopting them for your next site), there’s good news. In addition to the great selection of traditionally structured sites available, Be also has single-page websites for you to work with.

So, the technical aspects you’d need to master to get the one-page formula right are already taken care of.

Let’s have a look at some of the features that make single-page websites shine and how you can design them:

1. Give Visitors a Succinct Journey Through the Website and Brand’s Story

The typical business websites you design include pages like Home, About, and Contact, as well as pages that explain the company’s services or sell their products. Unless you’re building really long sales landing pages, there’s usually about 400 to 600 words on each page.

That’s still a lot of content for your visitors to get through and it can make perusing a single website an overwhelming experience. Imagine how they feel about reading through all that content when they have to do it multiple times when comparing other websites and options.

In some cases, this multi-page website structure is overkill. The information you’d otherwise fill a full page with can easily be edited down to fit a single pane or block on a one-page website and still be as useful.

Like how design and development studio Pixel Lab does it:

Pixel Lab

Notice how all the key points are hit in a concise and visually attractive manner:

  • The Featured Work portfolio
  • The About Us introduction
  • The FAQs
  • The contact form

The BeCV pre-built site is built in a similar manner (and for a similar purpose, too):

BeCV

Just remember to keep a sticky navigation bar present at all times so visitors know exactly how much content there is on the page.

2. Opt For a Non-Traditional Navigation for a Uniquely Memorable Experience

Typically, the rule is that website navigation should follow one of two patterns:

  • Logo on the left, navigation links on the right.
  • Logo on the left, hamburger menu storing the navigation on the right (for mobile or desktop).

There are a number of reasons why this layout is beneficial. Ultimately, it comes down to the predictability and comfort of having a navigation be right where visitors expect it, no matter where they end up on your website.

However, with a single-page website, this is one of those rules you can bend, so long as you have a way to keep the navigation ever-present and easy to use.

There are some great examples of one-page sites that have done this, usually opting for a stylized left-aligned sidebar that contains links to the various parts of the page. Purple Orange is just one of them:

Purple Orange

And you can use a Be pre-built site like BeHairdresser to create a similar navigation for your website:

BeHairdresser

If you’re trying to make a bold brand stand out, this is a neat layout option to experiment with.

3. Tell a More Visually Striking Story

One of the problems with building a website with WordPress is that you always have to worry about how your design decisions affect speed. Even once the code is optimized, images are usually the low-hanging fruit that have to be dealt with.

But when your website only contains one page, this means images aren’t as much of a problem (so long as you compress and resize them). It’s only when you continue to add pages, products, and galleries that you have to scale back your visual content.

So, if your brand has a strong visual identity and you want the website to show that off through images, a one-page website is a great place to do it.

Just remember to keep a good balance between text and images as Vodka A does:

Vodka A

There’s no reason for a liquor distribution company to mince words when the elegant product photos effectively communicate to consumers what it’s all about.

In fact, this image-heavy, single-page style would work well for any vendor selling a small inventory of products: food, beverages, subscription boxes, health and beauty products, etc. And you can use the pre-built BeBistro to carefully craft it:

BeBistro

4. Turn a Complex Business Idea or Offering into Something Simple to Understand

When a company sells a technical or complex solution to consumers, it can be a real struggle to explain what it does and why they should buy it.

But here’s the thing: Consumers don’t really care about all that technical stuff. Even if you were to explain how an app worked or how you use a software like Sketch or WordPress to design a website, their eyes would glaze over.

What matters most to them is that you have an effective and affordable solution that they can trust. So, why bog them down with page after page of technical specs and sales jargon?

A one-page website enables you to simplify even the most complex of solutions.

Take Critical TechWorks, for instance. It offers an advanced technological solution for the automobile industry…and, yet, this is all it needs to explain the technology at work:

Critical Techworks

If your website’s visitors are more concerned with the outcomes rather than the “how”, you’d do well to make the website and content as easy to digest as possible. And you can use a pre-built site like BeCourse to do that:

BeCourse

Notice how both of these sites take visitors through a small handful of sections (pages) before delivering them to the main attraction: the contact or sign-up form.

5. Capture Leads and Sales at Different Stages of the Sales Funnel

Some of your visitors will be brand new to the site and need more information before they pull the trigger. Others will already have a good idea of what they’re getting into and just need one small push to get them to take action.

With a single-page website, you can design each section to cater to the different kinds of leads and prospects that arrive there.

The top sections should be introductory in nature, providing new visitors with information they need to decide if this is an option worth pursuing. The sections further below should drill down into the remaining questions or concerns that interested prospects have.

Regardless of which section they’re looking at, your one-page site will have CTA buttons built in along the way that drive them to conversion the second they’re ready.

This will enable your site to always be prepared to convert leads, whether visitors read the first two sections or make their way through all of them until they reach the conversion point (e.g. a contact form, a checkout page, etc.).

You’ll find a nice example of this on the Cycle website, with CTAs strategically placed along the single-page’s design:

Cycle

BePersonalTrainer is a good pre-built site option if you want to ensure that you include a CTA button at the perfect stopping points throughout your page:

BePersonalTrainer

You won’t find them at the bottom of every section, but that’s okay. You just need them whenever your visitors are seriously thinking about taking action.

What Should You Build: A Multi-Page or One-Page Website?

Although a single-page website won’t work for larger websites (especially in ecommerce), it could work well for business websites that are on the smaller side to begin with.

By centralizing all of that information into a single page, you’ll create a fresh experience that wows visitors with how succinct yet powerful both the message and offering are.

Just be careful. Many single-page websites are poorly done (which is probably why they fell out of fashion for a while).

Remember: This is not your chance to throw web design rules out the window. In fact, this will be an opportunity to clear out the fluff and the clutter that’s accumulated over the years and to return to a more scaled-back and classic approach to design.

And with the help of Be’s pre-built one-page websites, it won’t require much work on your part to make that happen.

 

[– This is a sponsored post on behalf of BeTheme –]

Source


Source de l’article sur Webdesignerdepot

/par

8 Easy Ways To Ruin Your User Onboarding

,

To understand why user onboarding is such an indispensable tool, we need to empathize with the people using our products; we all come from different backgrounds and cultures, we make different assumptions, and we see the world differently.

User onboarding helps mitigate these differences by making your product’s learning curve less steep.

However, companies often make unfortunate mistakes that hinder user experience and cause frustration. In today’s article, we’ll take a look at eight ways companies ruin their products’ onboarding process.

Let’s dive right in, shall we?

1. No User Onboarding at all

As a part of the team that created a product, you’ve probably spent hundreds of hours going over its features and the most minute detail. Naturally, you know the product like the back of your hand. The user does not.

Naturally, you know the product like the back of your hand. The user does not

We may believe that the app we’ve worked on is straightforward and that user onboarding is probably overkill — but that’s almost never the case. Guiding our users through a product will help with retention, conversion, and their overall satisfaction.

However, there are very rare cases when you can do without user onboarding, here are a few:

  • Your product is too straightforward to cause any confusion;
  • Your product has a formulaic structure, similar to that of other products’ in your category, i.e., social media or e-commerce;
  • Your product relies heavily on Google or iOS design guidelines with common design patterns;
  • Your product is too complex (enterprise or business-oriented) — in such cases, users need special training, rather than just an onboarding;

2. Assuming That Users “Get It”

 One of the vital UX mottos we should always be mindful of is that “we are not our users.” When onboarding them, we always need to assume that they’re at square one. We should communicate with them as if they have no prior knowledge of our product, its terminology, and the way it works.

Providing freshly-registered users with highly contextual information will most likely confuse them. As a result, this will render your attempts to create a helpful onboarding process useless.  

3. Onboarding Users on a Single Touchpoint

it’s tempting to brainstorm which features should make it into the onboarding, then design and code them; that’s a very bad idea

The main problem with the previous point is that it’s too contextual for new users. However, providing no context altogether can be problematic as well. This is commonly found in onboarding processes that focus on a single touchpoint while leaving out the rest of the product.

By choosing to inform users of our product’s features, we force them to detour from their “normal” course of action. This comes at the cost of the user’s frustration.

Since we’re asking people to pay this price, it’s best to provide them with information that will also help them navigate the entire product. As a result, this will decrease the number of times we’ll have to distract them from their ordinary flow.

4. Forcing Users Through Onboarding

We’ve previously mentioned that we mustn’t assume that users have any background knowledge about our products.

The opposite argument can be made — experienced users don’t need a basic onboarding process. It will most likely frustrate them, and it won’t provide them with any real value. Also, forcing users through this process will most likely take the onboarding frustration to a whole other level.

This is why it’s essential that we allow them to skip the parts they don’t find useful. This way, we’ll address the knowledge gaps of the people who really want it and need it.

5. Onboarding Based Purely on Assumptions

This is yet another point that’s implicit in “we are not our users”. Oftentimes, it’s tempting to brainstorm which features should make it into the onboarding, then design and code them; that’s a very bad idea.

Here’s what every designer should do instead:

  • Do user interviews: You should conduct these before having anything designed; user interviews will help you shortlist and prioritize features in terms of their significance, so that the onboarding is focused around the features that matter most.
  • Do usability testing: Once you have a good idea of what features your users consider most important, design onboarding that reflects that; having completed your design, make sure to conduct at least 5 usability testing sessions with users, so that you can make sure that your design works.

6. Just Letting Users Quit

While we shouldn’t force people to go through onboarding, it doesn’t mean we shouldn’t nudge them in the right direction.

find that sweet spot between being front of mind and annoying

People choose not to onboard for many reasons, but showing them around will benefit both parties. Therefore, it’s never wrong to remind them that they can always resume onboarding via email or push notifications (unless you’re too pushy). Make sure to find that sweet spot between being front of mind and annoying. 

Similarly, these two mediums are a great way to deliver valuable information as well.

Here’s a great example of an onboarding email from InVision:

And here’s a clever notification from TripPlanner:

Source: clevertap.com

7. Asking For Too Much Information

We need to always be mindful of the fact that the product’s spokesperson should act as a guide during onboarding. Its goal at the very beginning is to build trust.

We can ask for small favors when we’ve built a solid and lasting relationship

Not only is asking for too much information from the get-go unproductive, but it will also undermine the trust that the user already gave us.

It’s best to abstain from asking freshly-registered users for their credit card information. Nearly 100% of businesses care about profits — and there’s no shame in it. However, today’s most successful companies make money by providing users with value. So it’s best to stimulate users to share their financial data in subtler ways while focusing on customer experience.

The same can be said about subjecting the people using your service to extensive questionnaires. At the first steps of our interaction, it’s all about giving and gaining trust. We can ask for small favors when we’ve built a solid and lasting relationship.

8. Onboarding for the Sake of Onboarding

While there are dozens of reasons why you should guide your users through your product, it needs to be done well. A pointless onboarding process that doesn’t provide users with value is more frustrating than the lack thereof.

Onboarding can be a bit frustrating at times. Pointless onboarding will just raise eyebrows. It will slow users down and disengage them, which is exactly the opposite of what we want.

Conclusion

The process of introducing your users to your product is one of the factors that will define its success.

A critical aspect of user onboarding that we need to always take into account is value. Is this detour from our user’s ordinary course of action valuable to them? Will this improve their experience with the product?

Onboarding demands careful and continuous tailoring. Once perfected, this process will help you win new users’ hearts and help you build brand loyalty.

 

Featured image via Unsplash.

Source


Source de l’article sur Webdesignerdepot

/par

Website Hosting with MuleSoft API

,

Introduction

One of the interesting features of MuleSoft is that we can use a MuleSoft application to package and host website content. We package our website pages inside a MuleSoft application and deploy it to Anypoint Platform or Cloudhub and our website is published and accessible to the end-users. In this article, I will give you an example scenario of how it’s done so, you can use it for your own needs.

Imagine you are doing file transfers with MuleSoft and your target location is not always accessible. You have an option to move files in a temporary location and retry at a later point in time. While you can automate all of this, sometimes your customers would like a little bit more flexibility and control around retrying and clear visibility into what has not been yet transferred successfully.

Source de l’article sur DZONE

/par