A client may be pleased with themselves and happy to get their own way. But at what cost? The ensuing results aren’t always pretty. Crowded layouts, inaccessible design elements, and a general sloppiness can seriously harm the user experience (UX).

For example, consider a client who meddles in the design details of their eCommerce website. Leaving UX decisions regarding product layouts, calls-to-action, and hero areas to a non-designer could be disastrous for sales. And yet, any potential fallout may land squarely on your shoulders. Fair? I think not.

Therefore, it’s up to us to prevent such silliness from happening in the first place. Let’s explore some ways to keep clients at a safe distance from UX.

Define the Stakes

User experience is a critical factor for every website. Yet, clients aren’t always fully aware of what’s at stake. As is often the case, it’s up to web designers to provide some background.

It’s worth taking the time to talk about the importance of accessibility and ease of use. How the design of each element within a page needs to be measured against these factors. Oh, and the massive roles that performance and mobile compatibility play as well.

Then there’s the matter of personal preference. Clients often (and unwittingly) put their own opinions above the needs of the average user. Sometimes, implementing their preference is a detriment to everyone else.

The importance of UX and its contributing factors should be brought up from the very start. When clients are informed, they’ll be more likely to follow your lead.

Welcome Feedback, but Set Boundaries

How does a client go from providing useful feedback to taking over a designer’s job? It’s often subtle and can happen quicker than you think.

To be sure, some people insist on having control of a given situation. They may be just as likely to stand over the plumber fixing their leaky pipes as they are to pester a web designer.

In other cases, the mere fact that a client is paying good money for your services gives them a certain sense of entitlement. And although they may be well-meaning, it can lead to overstepping boundaries.

The dilemma is that getting a client’s feedback is necessary for a successful outcome. But it can also be fertile ground for such a takeover. So, how do you prevent it from happening?

The key is in setting clear guidelines. For example, defining goals for a particular item and asking for feedback based on those parameters.

Consider the hero area of a home page. Let’s say you’ve built something beautiful and need client approval. You might approach them by saying something like:

“I’ve set up the hero area, please take a look! Here is what we were hoping to achieve:

• Introduce branding elements, including the logo, colors and fonts;
• Encourage users to subscribe to the mailing list;
• Mention the 20% off discount for new subscribers;
• Keep the entire area accessible, easy-to-read and concise;

What do you think?”

The example above isn’t all-encompassing. But it puts the stated goals into a client’s mind. This helps you to narrow the scope of their feedback and (hopefully) avoid anything that distracts from the desired outcome.

Put UX Back Into the Hands of Experts

Don’t get me wrong – clients should absolutely be involved in the design process. It’s their brand, after all. And things usually turn out best with their input.

But the heavy lifting of UX should be done by experts like you. Your job is to turn a client’s vision into something that is highly usable. It’s about establishing a brand while helping users get to where they want to go.

If all goes well, they’ll take the path to conversion – whether that means sales, contact, or a subscription. That’s simply too important to leave to client whims.

Instead, educate and work with your clients in an effort to drive home UX best practices. Provide them with parameters to work within. The result will be a website that benefits its owner and users alike.

The post How to Stop Design Clients Making Too Many UX Decisions appeared first on Speckyboy Design Magazine.

OK, maybe that gee-whiz moment has passed. But links are still as important as ever. And they’re something designers need to make both obvious and accessible.

Though simplistic, the default behavior of underlining text links works well enough. Yet, modern CSS and JavaScript allow us to do so much more. Not only can links look prettier than ever, they can also provide greater context and fit into your overall branding.

Today, we’ll show you some examples of link styles that go beyond the ordinary. They stand out and make for a better (or more interesting, at least) user experience.

How to Subtly Stand Out

Link underlines that offer contrast from the text itself can be a great solution. They’re intuitive for users without being over-the-top with styling. Here, the blue underline separates itself nicely from the dark text. And the nifty hover animation only adds to the experience.

See the Pen Link hover w/ line by Aaron Iker

Accounting for Descending Characters

Descending characters (like the lowercase g, j or p) can sometimes look awkward when underlined. But this animated “guitar string” demo provides a consistent look. It’s a little thing, but brings a uniform neatness to the overall design.

See the Pen Guitar String Link Underlines by James Almeida

Coming up Short

Check out the underlined links in the following body text. Margins on either side result in an underline that doesn’t quite cover the full width of the linked text. Upon hovering, the underline smoothly transforms to cover the empty space. This microinteraction is again subtle, but very user friendly.

See the Pen Link Style Tests by Nick Ciliak (@nickcil)

Wired for Style

Thickly-underlined links were initially made popular by Wired.com. And while the publication has since moved on in styling, their legacy is still worth considering. It’s hard for users to miss these hyperlinks – yet the impact of the style isn’t too overwhelming. This is the kind of balance designers should aim for.

See the Pen Wired.com Huge Underlined Link Style by Mike Mai

Animated Highlights

Hover effects are a great way to add some personality to your site’s hyperlinks. Take this CSS keyframe example. It transforms basic text and produces an attention-grabbing highlight effect upon hover. It both looks cool and helps guide users at the same time.

See the Pen CSS3 Keyframes Animation Link Style by auginator

Marginal Context

By themselves, links don’t always provide full context. Sure, some of it depends on the content itself. But there’s only so much text you can realistically hyperlink. That’s where this example comes in handy. It adds citational content that is shown off to the side. Hovering over a link will also highlight the relevant citation. This could be a perfect fit for academic work or even tutorials.

See the Pen Links with Marginalia Notes by Amelia Bellamy-Royds

Moving Tooltips

If citations aren’t a great fit for your project, perhaps tooltips could do the job. With this jQuery script, you can add tooltips to virtually any element – links included. What’s more, they’ll move right along with your cursor.

See the Pen Moving tooltip on anything – mouse tracking by Eric Porter

Take Your Pick

Hover animations can help ensure that users know when their cursor is in the right place. If you’re looking for an animation that is both compelling and lightweight, this collection of effects is worth checking out. There are a number of attention-getters to enhance your links.

See the Pen SCSS link hover animations by Jens Lettkemann

Link up with Compelling Style

Dressing up your site’s hyperlinks is one of the easiest ways to improve usability. A few lines of CSS could be all that stands between better engaging users and maybe even increasing conversions.

The examples above demonstrate a variety of different approaches. Some are a bit more complex, while others are dead simple. That’s great, because these effects aren’t one-size-fits-all. The key is in picking the solution that fits your site and will appeal to your particular audience.

Links are too important to ignore. Hopefully these examples will inspire you to do more than the bare minimum.

The post 8 CSS Snippets for Creative Hyperlink Hover Effects appeared first on Speckyboy Design Magazine.

Sometimes these elements can be afterthoughts. Or put into place for marketing or analytical purposes. But they will drive users both crazy and away from your website.

Overdramatic? Maybe. But it’s a stark reality. Regardless of how brilliant your design and content may be, a bad UX sticks with users. And unless they have a compelling reason to come back, they probably won’t. You can’t blame them. Who needs the bother?

Let’s take a moment to outline some of these annoying practices. Sadly, they’re prevalent across the web. But that doesn’t mean we have to partake in them.

Modal Windows That Change Your Scroll Position

Modals are everywhere. It seems like everyone is vying for our attention by putting pop-up windows in our faces.

The practice has become so commonplace that it’s easy to ignore. Users can simply click and rid themselves of the interruption. No harm done.

But there is one implementation that is harder to justify. And it may not even be intentional.

Imagine visiting a page and beginning to scroll down. Everything’s going great until a modal window appears – and resets your scroll position to the top of the screen.

This puts users right back where they started. And not everyone will have the patience to restart their journey.

Whether this effect is due to buggy JavaScript or by design, it’s not ideal for UX. Regardless, it’s worth testing modal features to ensure that they’re as minimally invasive as possible.

Requiring Extra Clicks To See Full Content

For news-oriented websites, it’s standard practice to display an index of articles. A user can find an item of interest and click to access it. Content management systems (CMS) like WordPress make this easy to implement.

And that’s usually the end of the process. Users can view the chosen content and decide what comes next. Except it doesn’t work that way on every site.

Some websites have added an extra step. You’ll only get a partial view of the content – maybe a paragraph or two. At some point along the way, you’ll be asked to click a button to reveal the rest of the article.

If the content is behind a paywall and requires a login, that’s an understandable step. But otherwise, it’s preventing users from accessing the very item they wanted to see.

Whatever the benefits of this strategy, happy users are not among them. Users should not have to click twice to view content.

Third-party Features That Slow Page Load

Modern websites are capable of loading content and functionality from third-party sources. Connecting to social media APIs, for example, is a widespread practice. The same can be said for analytics, remotely-hosted fonts, and various software-as-a-service (SaSS) providers.

These features can be problematic, however. First, there are potential privacy issues. Users are becoming more aware of what they share and who they share it with. Some may be turned off by the idea of allowing Facebook, etc. to track their movements.

Page load times are also a concern. Even if your web host performs well, pages can still be slowed to a crawl by these third parties. They may prevent users from navigating your website.

Thankfully there are ways around this issue. Fonts can be stored locally. And some plugins cache social media feeds for faster loading. Locally-hosted analytical apps are also available.

Implementing features from third parties is fine. But it should be done in a way that minimizes the inconvenience to users.

Multimedia That Scrolls With the User

Video presentations are often placed at the top of a page. This makes it easy for users to find and watch. But if they scroll past the video, what does that say about their intent?

Far too often, these videos are configured to travel along with the user. As a user scrolls, the video shrinks and tucks into a corner. In some cases, it completely disregards user intent and is set to automatically play.

This is particularly frustrating for those hoping to read the associated content. Having moving images in the field of view, even if they’re off to the side, can be a distraction.

And mobile users are in worse shape. The unwanted video takes precious screen real estate away. This makes it more difficult to focus and read.

Is Your Website Frustrating Users?

When it comes to poor UX, the items above merely scratch the surface. But they’re prime examples of well-intentioned features gone wrong.

There are often legitimate reasons to put them into place. And the occasional feature may end up being more annoying than you realize. Still, it’s worth weighing the benefits and drawbacks.

Anything that gets in the way of a user’s ability to access your content is a risk. Push them too far and you may end up missing out on conversions. And who can afford that?

Conducting UX testing is a great way to catch these annoyances before they cost you. But it’s not necessarily within every budget.

In that case, take a closer look at how your website works. If you find items that aren’t user-friendly, take action to improve them. It may be the difference between a loyal customer and one that got away.

The post Little Things That Hamper the User Experience appeared first on Speckyboy Design Magazine.

Text-based hyperlinks are a great example. Virtually every website used the same default shade of blue. It was possible to change the link color. But most sites tended to stick with blue.

Yes, it was boring on the surface. But it was also a great way to help users quickly spot links. Designers couldn’t implement fancy styles. And so, the first generation of web users learned to look for blue, underlined text.

Then CSS came along and completely changed what was possible. Hyperlinks could be any color of the rainbow. They could also sport backgrounds, animations, and custom typography.

Plus, we could change link styles based on context. That made it possible to have differently styled links in your header and content areas, for example. It’s great to have options. But there are also some drawbacks.

Sometimes we take custom link styling too far. We trade simplicity for complexity. That can make it harder for users to discern. It impacts both usability and accessibility.

So, what should we keep in mind when styling hyperlinks? Here are some tips for making them beautiful and keeping them usable.

Make Hyperlinks Easy To Recognize

Users are more web-savvy than they were a few decades ago. Web designers recognize this. But it sometimes leads them to give users a bit too much credit.

We see examples in links that are barely perceptible. Perhaps the link color is nearly identical to the rest of the text. Or the underline blends into the page background.

Subtlety has its place in design. But that doesn’t apply to hyperlinks. They need to stand out – regardless of how you style them.

The link’s color should contrast with other text. And it needs to pass accessibility guidelines as well.

Links should also include one or more design features. That could be an underline or a change in font weight. This helps colorblind individuals discern a link from plain text.

Another accessibility note: always use the outline property on the link :focus state. Users navigating via the keyboard can more easily identify your links. We’ve used it within all snippets here.

See the Pen Styling Hyperlinks:Make Them Recognizable by Eric Karkovack

Underlines Should Be the First Choice

CSS opened the floodgates in terms of how we style hyperlinks. And many designers used it to remove underlines.

Jettisoning underlines may result in a “clean” look. However, it also makes links harder to recognize. It’s particularly troublesome in body text.

Long passages of text can frustrate users. It becomes hard to maintain focus. But things get worse when they can’t spot any links within.

That’s why underlining links should be your first choice. It’s a simple feature that makes skimming content easier.

The unfortunate thing is that client preferences can get in the way. Some associate underlines with old school web design.

This is a great time to educate them. Explain how underlines help users get where they need to go. The
added convenience could result in more conversions. Hopefully, that will convince them to put users first.

Besides, we can use CSS to make underlines more attractive. The text-decoration-color and text-decoration-style properties add plenty of styling options. Underlines may be old-school, but they don’t have to be boring.

See the Pen Styling Hyperlinks:Use Underlines by Eric Karkovack

Ensure That Styling Is Consistent

Link styling should also be consistent. Navigating a website will become more predictable. Users won’t have to think twice about how to get around.

Every link doesn’t have to look the same, however. Context also plays a role here. For example, you may use different styles in your site’s header and footer. And content within a sidebar could look different than the body text.

These different styles should be implemented within reason, though. The look should fit a defined pattern.

Using radically different typography, for instance, may throw users off. As with other design elements, there should be a rhyme and reason in how links look and work.

See the Pen Styling Hyperlinks:Stay Consistent by Eric Karkovack

Links Can Be Beautiful and Functional

Styling hyperlinks runs the gamut. Some web designers completely ignore them. Others add a kitchen sink worth of custom CSS.

When it comes to usability, the former is probably the safer path. Users will be able to spot links in the middle of your content.

Still, it’s possible to achieve a balance. You can create custom styles to dress up links to match your brand. And you can do so in a way that keeps users in mind.

Therefore, don’t be afraid to experiment with link styles. Just keep your site’s goals along with best practices in mind.

The post The Dos & Don’ts for Styling Hyperlinks appeared first on Speckyboy Design Magazine.

First – designers do their best to create beautiful websites. Not a surprise – it’s their job, and they want their portfolios to look astonishing (and often really do).

But is a beautiful design the ultimate goal? Not really. You also want a website to fulfill its business objectives. If you run an eCommerce business, you want it to convert visitors into satisfied buyers. If you have a news website, you want to encourage visitors to read and engage with the content. If you have a portfolio site, you want it to attract potential clients. Long story short: you want the website to present your company in a particular way to provide a high conversion rate.

On top of that, you must take into account what your visitors want and expect. They won’t buy anything from your website if it’s not user-friendly or if they simply don’t like it. They might not understand how fancy elements work and want your site to behave similarly to the other websites they already know.

It’s their opinion that matters the most – not designers or conversion optimization experts. Why? Because it’s visitors that pay your bills. Every website has a unique audience and sometimes following the tips of top CRO or UX experts won’t result in a design that satisfies your audience.

So how to align all those goals? Analyzing qualitative data collected with tools like Google Analytics can help. For example, after changing the web design, the bounce rate increases. This suggests that the new design for whatever reason scares people away. But why? Google Analytics or heat maps won’t tell you that. But visitors will.

In this article, I will show you how you can use user feedback in the process of assessing the effectiveness of a website design.

Questions to Ask About Your Design

The key to collecting valuable information is asking the right question at the right moment. Here’s a list of 5 questions that will provide you with actionable insights.

1. Do you prefer the old or new design?

This is the simplest question you can ask after introducing a new design. Just remember to ask visitors that are familiar with your old design. Don’t forget to ask the follow-up question ‘why?‘.

Visitors will point out what the biggest issue is. Also, keep in mind that sometimes users don’t like big changes (even those that are right for them) and may need some time to get used to them. You can investigate the magnitude of this issue by asking this question over time and observe how responses change.

2. What do you like the most about our website?

This a good question to ask before implementing any changes to the website. Changing things your visitors like can be counterproductive. If your visitors like your classically simple design, then upgrading it to anything too modern can be dangerous.

3. On a scale of 1-10, how trustworthy is this website?

If people don’t trust a site they won’t buy anything or endorse it. SSL certificates will help, but the design itself influences how visitors perceive the security of your website. If it turns out that people don’t appear to trust your site, take a look at this article to learn how to fix it.

4. Did you accomplish the goal of your visit?

Some people visit your website because they are merely curious and don’t have any particular objectives. But most visitors want to accomplish something. It might be to buy, learn or just read something.

When a person is unable to accomplish that goal (no matter what it is) they are dissatisfied and less likely to come back. Don’t forget to ask the follow-up question ‘what prevented you from achieving the goal?‘.

5. What was your first impression when you entered the website?

As already mentioned, you can’t make the first impression twice. Your website should immediately create the perceived image you want. If it’s the website of a bank, it should create a picture of trust and security. If it’s a website about funny GIFs, it should be more relaxed. Everything from colors and shapes to the website structure affects that first impression.

Does User Feedback Really Work?

In theory, it sounds interesting, doesn’t it? You ask questions, collect feedback and learn what visitors think of your website. But does it really work? Yup, it does, and big businesses are actively using feedback in the process of designing their websites. Companies like Nationale-Nederlanden Investment Partners.

This asset management company went through a rebranding process and used this opportunity to redesign their website. To make sure the newly redesigned site worked as intended, they collected feedback from users. What did they learn? That visitors simply didn’t like the design. The company used this information to rework the design, which immediately increased users’ satisfaction.

Key Takeaways

Collecting feedback from visitors is not only a method to get to know your users better, but can help to improve your web design. Asking the right questions will help you quickly decide whether your design is effective. But how can you collect feedback from visitors?

A simple answer – by using the right tools. Survicate and Qualaroo are two you could consider using. Both of these tools offer simple widgets you can place on your website to collect feedback from visitors in an unobtrusive way.

Keep in mind that improving your design is a contact process and collecting feedback is not enough. After gathering a meaningful amount of responses, you should analyze them, turn into them into actions and monitor their performance. Only then will you ensure that your design is as good as it can and should be.

If you’re looking for guidelines for getting better feedback from clients on web design, take a look at this post.

The post 5 Simple Questions to Ask When Looking for User Feedback appeared first on Speckyboy Design Magazine.

The problem for designers is that, while some parts of accessibility are fairly obvious (like adding alternative text to images), other facets aren’t as widely publicized. Plus, we often depend on third-party items like themes, plugins, et al, that may claim compliance – but how do we really know?

The other question many designers may have is: When is a website accessible enough? In other words, at what point does a site cross that threshold to being accessible?

Designers (including yours truly) have a lot of questions about accessibility. So, we’ve enlisted the help of Joe Dolson, an accessibility consultant who is both knowledgeable and passionate about the subject. He’ll provide some insights into some of the most vexing questions we face.

Read on to get a better understanding of web accessibility and discover some helpful resources to point you in the right direction.

Missing Pieces

Accessibility encompasses a vast array of practices and techniques – more than we may realize.  Even those of us who think we have a decent handle on accessibility issues may be missing some important elements.

“When developers and designers start to learn about accessibility issues, they usually start by focusing on issues for people who are blind.” says Dolson. “This results in missing two areas of accessibility that are crucial to sighted people with other disabilities.”

Visual Focus

The first item on Dolson’s list is Visual Focus. He explains it as such:

“Visual focus is the ability to visually identify where you are on a page as you navigate using a keyboard. If you press the tab key to navigate through links, form fields, and buttons on a page, you’ll frequently find that you are unable to distinguish where you currently are on the page – this is due to a lack of visual focus.”

Learn more about Visual Focus: https://accessibility.oregonstate.edu/focus

Enlarged Text

Another missed element of design is – what happens when a user enlarges the text? Dolson elaborates:

“Enlarging text is crucial to people with low vision, who may need to enlarge text to several times its normal size to be able to read it. There are a few different problems this can cause: overlapping text, horizontal scrolling to see the entire page or extremely narrow columns where the text wraps every few characters can all make the page very difficult to consume.”

Accessible Content Strategy

When adding content to a website, sometimes the easier thing to do is to write a blurb of text and link to an attachment file, such as a PDF, that contains more information. But, is this the best practice for accessibility?

Dolson says that attachments should be made accessible, but notes “It’s the content of your document that needs to be accessible – and that can be accomplished in a wide variety of ways. You could make an argument that an accessible web page would constitute an alternative to an inaccessible PDF.”

So, while the content of PDF files and the like should be made accessible, it may still be preferable to take that same content and place into HTML.

Learn more about Creating Accessible PDF Files: https://webaim.org/techniques/acrobat/

Utilizing Tools to Find Potential Problems

One of the great advancements in creating accessible websites is the availability of tools that can help you sniff out issues. According to Dolson, these tools “…have an invaluable role in the process of evaluating for web accessibility”. However, he cautions that, “…while they are important, they are in no way something that can substitute for human judgment and review”.

WAVE (Web Accessibility Evaluation Tool) is one of the best known solutions out there. Paste in your site’s URL (or, better yet, use their Chrome or Firefox extensions) and WAVE will load in the page with a sort-of heat map of what’s good and what’s not. It will catch things like missing alt tags, form labels and even point out color contrast issues. You’re then able to click on specific errors and see them highlighted right on the page you’re currently testing.

It’s a tool that really shows you how easy it is to miss certain things. But it’s also good for pointing out deficiencies in third-party plugins and themes.

Once a tool like WAVE has found any issues, you can then go through the process of manually applying fixes. Dolson points out, however, that there can be a bit of an issue with alt text that tools won’t necessarily detect. He says “…an automated tool can only tell whether or not your image has alternative text provided. What it can’t do is determine whether the text is truly an appropriate alternative to the image.”

So, while a tool like WAVE can make your life much easier, you’ll still have to do a little sleuthing to ensure accessibility.

Learn more about Alternative (ALT) Text: https://oregonstate.edu/accessibility/alttext

Are You in Compliance?

Here’s the question that can really cause some confusion for designers and site owners. In fact, even accessibility experts aren’t able to provide an absolute declaration. Dolson explains the challenges:

“The first challenge is identifying what the law actually dictates about the accessibility of your web site. This will vary depending on who pays for your web site, what segment of industry you’re in, and what country your web site is liable in (which is a separate and even more complicated question!). Within the United States, accessibility is governed largely under the Americans with Disabilities Act of 1990, or ADA.

The ADA dictates that places of business should provide equal accommodation for people with disabilities – but, as you can surmise from the date of the act, it doesn’t actually include any information about what would constitute an accessible web site. There are specific guidelines covering US Federal Government web sites described in Section 508 of the Rehabilitation Act of 1998, but that’s a completely separate body of law, and you can’t draw the conclusion that the ADA would or should follow the same guidelines.”

So, it’s complicated to say the very least. In Dolson’s view, following the Web Content Accessibility Guidelines (WGAC) 2.0 will at least give you some sound defense should you be legally challenged.
* As always, be sure to consult a legal professional for advice specific to your situation.

Advice for Testing Your Site

In addition to testing for and fixing errors through an automated tool, it’s also advisable to do some testing on your own. This way, you’ll at least get a sense of what the user experience is like. Among Dolson’s suggestions:

Use a Screen Reader

Mac or iOS users can enable the VoiceOver feature. Windows 10 has a built-in Narrator feature. Or, you may want to install a third-party app like NVDA.

Unplug Your Mouse

Try navigating your site using only a keyboard. Here are some tips for enabling keyboard access.

Increase Fonts

Zoom in on your site to make its text 400% and see how it affects layout.

Install Browser Extensions

NoCoffee is a free Chrome extension that will simulate color blindness and other vision problems. RGBlind performs a similar task for Firefox users.

Utilizing these methods is a great way to at least give yourself an idea of how accessible your site is. But they shouldn’t be considered a full-on simulation. Dolson advises that these tools, while valuable, aren’t always an accurate representation. For example, experienced users of a screen reader will probably have a different experience with your site – especially if you’re not familiar with using such software yourself.

Worth the Effort

As we have learned, there is a lot to consider when it comes to accessibility. Thankfully, there are some very useful tools, resources and experts we can lean on to get us going in the right direction.

Ideally, the practices and concepts discussed above should become just another part of your typical site design and build process. That way, it will become second-nature to you – just like HTML or CSS. Slowly but surely, it will help lead us to a more accessible web.

The post The Challenges Web Designers Face in Ensuring Website Accessibility appeared first on Speckyboy Design Magazine.

However, designers tend to overlook one crucial element in favor of logic, statistics, and everything our rational mind can cook up. It is the one thing that user experience designer Aaron Walter described as “the lingua franca of humanity”: Emotions.

Why Emotional Websites Work

Consider how cigarette packs are designed with graphic images of diseases caused by smoking; how a humorous commercial that went viral on social media increases awareness of a cause; or how sex sells in pop songs.

The same concept applies to web design.

Emotional web design deliberately affects the feelings of site visitors through the colors, fonts, call-to-action buttons, even down to the last image and words used in the body text.

Appealing to your users’ emotions work because it:

• Shows that there is a human being behind the website. Visitors would feel that they are not talking to machines; rather, human beings they can relate to and actually converse with.
• Puts human beings front and center. A website designed for emotions are more human-centric, as opposed to a website made for search engines algorithms or any other site metric. It goes back to the core of UX – that is, to build a website to ultimately benefit the user.
• Helps customers be reminded of you. When done right, an emotional web design leaves a longer lasting imprint in the memories of visitors. A memorable image that, for instance, they were able to emotionally connect with would make them stay on your website more. The more time they spend on your site, the more they lose interest in competitors.
• Influences decision making. Some of the most powerful advertisements appeal to emotions. They work because they tap into the desire or fear of a customer that would ultimately make them decide to buy. Numerous studies have been conducted establishing how emotions affect buying behavior, be it online or offline.
• Establishes relationships with customers. Connecting with customers is the Holy Grail of marketing campaigns, as this is the first step towards building a relationship and ultimately forming trust in a brand. The key to connecting is knowing which emotion a website needs to trigger and how to execute it properly.

Understanding what compels human behavior and translating that abstract idea into specific elements of a website will vastly improve user engagement.

As UX designers, emotion-based websites means giving visitors more impetus to follow the journey you have laid out for them – whether it is to sign up for a newsletter, to become more aware of a brand, or to purchase a product or service.

Fundamental Elements Of An Emotion-based Website

Much like building any edifice, creating an emotionally-infused website requires a strong foundation. These are the elements to take note of:

Know Your Audience

While designing with metrics in consideration are important, numbers are not the crux of emotional websites. Simply put, user experience is about the user, not the algorithm. Think of them as human beings, not as a numbers on the site visitor counter.

To do that, find out information about general details like age, sex, country, and line of work to get a clear image of who the website is for.

Connecting on an emotional level, however, entails more than demographics. Find out who they are. What are their goals? How will they interact with your website? What are the things that they consider important? What problems do they have?

It’s vital to get to know your audience and ultimately what they feel, in order to deliver the site’s message properly. A service page, for instance, needs to communicate the feeling that you understand and are able to provide solutions to the customers’ problems.

Trigger the Right Emotion

Set your goals at the beginning. What would you like your users to feel upon visiting your website?

One of the common mistakes of designers is to target multiple emotions within the website. The trick here is to focus on just one emotion.

Is it joy, surprise, pleasure, anticipation, calm? Pick one and work your way towards achieving that one emotion, from your images, to colors, to the text, and overall tone of the website.

Use The Right Image

Visual content continues to be one of the most powerful tools in online marketing. In fact, colored visuals would compel your reader to read your content by as much as 80%.

However, if you wish to emotionally connect with your audience, you can’t use randomly Googled photos or stock images. The key here is to provide relevant and relatable photos to engage site users. Relevant images paired with content gets 94% more views than content without any relevant images.

Keep in mind that if the images you chose do not complement your message, it will cause confusion to your users which could then result in your losing credibility.

Use Appropriate Color Combinations

Color psychology looks at how different colors sway human behavior. It works powerfully on a subconscious level that a change in hue can impact the way your website is perceived, be it positively or negatively.

Which colors you choose depends largely on the emotion you want to evoke. For example, blue and green are safe, go-to colors when designing websites. However, different shades would connote different emotions.

Light and dark blue are calming colors, but go to darker shades of blue and you will evoke emotions of security and strength. Red signifies passion, green for health and wealth, black for formality, purple for elegance and femininity. Men and women would also differ in their color preference.

Always keep your target audience in mind-who they are, what they want, what are their goals-so you can pick the colors that would lead them to conversions.

Write Compelling Words

Writing is more than just stringing together words and phrases that sound edgy or is a close synonym of the emotion that you want to evoke.

There is an art and a science involved in writing compelling copy, especially for websites that want to connect with emotions. The tagline or header title, for instance, can immediately set the entire personality of the website.

Moreover, it’s important to use the proper tone of voice. Should you be professional? Should you be empathetic? Or is your target audience receptive to witty and funny lines?

When creating a website that appeals to emotions, you need to make sure that every element is intentional. Words, images, colors-these should all blend into one coherent design that would ultimately evoke the right kind of emotion to your target audience.

At the end of the day, a good emotion-infused website grabs the user’s attention, guides them into interacting with your website, is visually appealing, and leaves a long-lasting imprint on their memories.

The post Improve UX by Understanding What Compels Human Behavior appeared first on Speckyboy Design Magazine.

At the time, doing so was clunky. Today, many micro-interactions are the standard, but focusing on optimizing key engagements can significantly affect overall site engagement and conversion.

What Are Micro-Interactions?

We see micro-interactions every day. When you switch your iPhone off of silent mode, and it makes that little vibration, when you scroll down to reload a page, and the loading symbol appears at the top – even turning on a faucet using a sensor – all of these are micro-interactions.

While they may not seem highly visible or important, they are. They’re ingrained in our brains. They let us know that the action we just completed actually did something. Micro-interactions in web design done correctly can vastly improve the user experience.

The Four Pillars of Micro-Interaction Design

There are four main components to a micro-interaction: the trigger, the rules, feedback, and loops or modes. A micro-interaction that’s well-crafted will encompass all of these concepts:

• The trigger is what initiates the micro-interaction process. A trigger can be a manual action, like flipping a switch or clicking an icon. It can also be a trigger built into the system that will occur whenever an action is completed. For example, the sound you hear when you receive a text message is the result of a system trigger. When the trigger is switched, it engages the rules of the interaction. The rules are programmed into the micro-interaction itself and tell it what it can and can’t do. Since these rules aren’t made apparent to the user, we only understand them through feedback.
• Feedback is how we know the trigger engaged the rules and the micro-interaction is working. For example, the vibration your phone makes when you take it off silent. It lets you know you triggered the action and the rules were followed correctly. Without the feedback, you wouldn’t know what was happening. If you switch your phone to silent and it doesn’t vibrate, you know something might not be working correctly.
• Loops and modes are the final stage of the micro-interaction. Loops define how long a micro-interaction will continue, like the cycling of the loading icon. Modes define an uncommon action critical to continuing the process, like inputting geographical data to find local weather.

Image Source.

Tips for Designing Micro-Interactions

Micro-interactions are based on human-centered design. Feedback from the micro-interaction is meant to be intuitive and easy to understand. Users don’t need to think about the feedback because it naturally confirms the interaction has been initiated. That’s an important thing to remember when designing micro-interactions. Here are some general guidelines for designing micro-interactions:

• You should always have some idea about your end-user or the platform before you begin. This enables you to make the experience more familiar and more human.
• Make sure actions completed during the micro-interaction process don’t inadvertently break the interaction. Basically, you need to account for human error and attempt to prevent it.
• Avoid clutter. Use capabilities already available on the platform instead of adding new elements. For example, the cursor, a dial, a button, and a scroll bar can all be programmed to reflect micro-interaction feedback. This fits in with other web design best practices.
• Talk to users in their language. This again ties into the human element. If your micro-interaction triggers text, use language people can easily understand-unless, of course, the end-users understand technical jargon.
• Ensure micro-interactions can withstand the test of time. There’s nothing worse than a micro-interaction that grows more annoying each time you trigger it. Stay away from anything that feels too gimmicky or has over-the-top animations.
• Animation can make micro-interactions more fun when they’re used sparingly. The key is making sure the micro-interaction doesn’t overwhelm other actions – for example, when you want to delete an app on your iPhone and all the icons start to wiggle. It’s an adorable animation (almost like they’re shaking in fear of deletion), but it doesn’t impede functionality.
• Color theory is important in web design and micro-interaction design. While contrast can work to highlight a specific process or action, it can easily become distracting. Make sure the colors in your design mesh with those in the micro-interactions. Remember, the micro-interaction is just a small piece in the picture of design; everything should be cohesive.
• Lastly, identify if and how the interaction will evolve over the future of its use. Does it make sense for it to change over time or stay the same?

Micro-Interactions in Social Media and Apps

Micro-interactions are incredibly important to web and mobile design – especially with apps. They’re what makes or breaks the experience of using one particular app over another. Users will either love or hate an app based on how it functions, not solely on how it looks. When it comes to social media networks and apps, micro-interactions should be kept as simple and intuitive as possible.

Image Source: Favorite Animation By John Noussis..

This is because almost all users access these apps from a mobile device. The like button on Instagram is a perfect example; it’s instantly understandable, easy to find, and offers feedback without interrupting other functions. When you double-tap on the image, and the heart appears for a brief moment, you immediately understand what it means.

Using Micro-Interactions to Teach New Things

Micro-interactions aren’t only used to enhance a website’s functionality; they can teach users how to interact with a new concept. For example, when a photo gallery is in an uncommon layout, a micro-interaction can show users how to scroll through the images and navigate other aspects of the site.

A simple arrow could point out the direction to swipe, or an animation of the photos moving could provide an example of what the user is supposed to do. In this way, micro-interactions go beyond just confirming a user completed an action. They teach users how to interact with a website.

Image Source: Cut Copy Share Delete By Srikant Shetty.

Micro-Interactions in CTA Design

Another excellent way to use micro-interactions is in Call to Action (CTA) design. We all know CTAs are important to sealing the deal between businesses and their customers. Sadly, the majority of them these days look like one person designed them. While that can sometimes be a good thing (since everyone recognizes what they are), it gets old quickly.

Creative CTAs with unique and attractive micro-interactions can be used to encourage users to click, share, or like, making the process more like a game and less like a chore.

The Importance of Micro-Interactions

Micro-interactions are important to web and mobile app design because they close the gap between humans and machines. By humanizing computer tasks and making them act in ways people understand, you’re infusing the design with personality. What’s even better is that this personality can convey the image of the brand or business by making small changes to micro-interactions.

They can be fun, cartoony, streamlined, or professional, and when placed against the backdrop of the website, help strengthen the brand image and voice. Perhaps the most important aspect of micro-interactions is that they make user experiences more enjoyable overall. Whether they offer a little entertainment, teach us something new, or confirm we’ve done something correctly, micro-interactions improve the way we connect with the digital world.

You might also like to read about Interaction Design Mistakes That Drive Us Nuts.

The post Simple Methods for Using Micro-Interactions on Your Site appeared first on Speckyboy Design Magazine.

You can’t always see it, but you’ll feel the difference when using an interface with optimized UX. Whether you’re creating an e-commerce app to run on multiple devices or developing a new cloud-based platform, a well-designed UX can ultimately set your product apart from the competition.

Why UX Matters More Today Than Ever Before

In the current era, most people interact with some form of technology on a daily basis. From using a smart TV to access the latest weather report to accessing work applications on a smartphone, technology is more hands-on, valuable, and user-friendly than ever before.

For technological advancements to continue to take root in society, hardware and software professionals must focus on creating a seamless experience. Devices, websites, and applications that are too difficult to use or learn fall to the wayside in favor of solutions that intuitively make more sense.

While UX is a fairly new field, some professionals have been working on optimizing end-user experiences for 10 to 15 years.

Today, every business with a digital presence has a stake in successful UX. On the business side, UX drives market visibility, adoption rates, and customer satisfaction. Content producers, coders, graphic designers, web designers, information architects, and SEO strategists all play a role in creating a positive user experience.

Dissect the Main Elements of Strong UX

The user experience is something that, if done well, end-users will never notice. When web pages, applications, and devices are designed with UX in mind, a user can focus on the purpose of the product – typically a message or interaction.

Many UX professionals take an outcomes-first approach to UX. Instead of looking at core components, create a list of the user-outcomes a development team wants to achieve. These typically include:

• Functionality: A positive UX is both learnable and forgiving for users from all backgrounds. For an eCommerce site, for instance, a user expects to intuitively access product information, graphics, video (if applicable), user reviews, and a streamlined checkout experience. This component requires UX teams to focus on navigational cues/hierarchy, forgiving formats, and responsive design.
• Value: Every piece of digital content should provide value. In the eCommerce example, value might translate to a rewards program and/or the easily accessible information a consumer needs to make a purchasing decision. This component typically connects with content, content layouts, and information architecture.
• Satisfaction: When humans interact with technology, the interaction can elicit an emotional response. You never want the response to be frustration, anger, or confusion. UX means creating an interaction that leaves a user feeling content, satisfied, or even happy. To create satisfaction, UX professionals work closely with UI professionals to create micro-impressions and use psychologically rewarding colors, graphics, and interactions.

You may see these basic components in many different forms, but these three items span every discussion of core UX criteria. In the image below, UX is described as “look, feel, and usability.”; Other terms you may see to describe the same essentials include adaptability, efficiency, desirability, and user-friendliness.

Image Source

UX in Practice

Compare the Uber interface with a local cab company. Within a few moments on the website, any average user can identify the UX-optimized site. You can probably identify which is more user-friendly just by looking at the screenshot. Uber’s mobile app and desktop site feature simple, actionable cues, comforting colors, and responsive interfaces.

The typical cab company, on the other hand, has a busy-looking site with so many different navigational cues that a user might forego the digital cab-hailing experience altogether.

In the case of the cab industry, the effects of poor digital UX have had repercussions on businesses. In LA, taxi travel has dropped 20% since rideshare apps came to the marketplace. People of all ages prefer the user-friendly, straightforward, and transparent process of booking a rideshare car.

Your Checklist for Successful UX

UX is an area of design that is constantly in motion. Once you optimize one area of a site or application, it’s time to revisit another. Keeping the three essential outcomes in mind, here are some guidelines that UX professionals need to remember to create a seamless and compelling digital experience for end-users:

1. Speed is Important: Speed issues associated with remote geographical locations are acceptable. Speed issues associated with poor design choices are not. Optimize each component to ensure fast transition times for apps and websites.
2. Remember that UX Extends to all Digital Products: If you have a website, an app, and/or a software product, give each of them a familiar look and feel. A user should know they are using your brand’s product. Navigational cues, layouts, core colors, and workflows should follow the same patterns.
3. Create Layouts that Direct Users: A user-friendly format should direct the user’s line of sight as well as their actions. Instead of focusing on the number of clicks a user has to make, think about creating clarity during the process. Each task flow should feel simple and confirm a user’s actions.
4. Incorporate Multiple Fail-Safes: Have you ever clicked on something before you were ready to submit it? Give users an opportunity to undo, modify, or save input.
5. Focus on Micro-UX: Small interactions can make a major impact for an end-user. Asking for readers to engage in a poll, incorporating gamification tactics, and giving users progressive tips can all engage the user and add value to the experience. However, use caution when adding micro-UX features to a product. Too many additions and/or unintuitive additions can quickly backfire.
6. Use Data to Inform Changes: UX professionals must focus on the user-outcomes as well as the technical aspects of a process. Validate design choices with strong consumer Leveraging User Data for Improved UXdata-backed KPIs that go beyond a traffic count. Look for individual feedback as well as metrics on the number of time users spend on the page and where they go as they navigate.
7. Work Closely with Other Team Members: UX professionals need to know what content creators, UI designers, and other team members are doing to create a seamless experience. Focus on collaboration between departments that have a stake in the digital experience to maximize a product’s potential.
8. Remember the Business Side of the Project: In the real world, UX team members aren’t solely focused on product development. Think about how every design choice impacts a brand’s budget, reputation, and schedule. Develop strategies that consider tech decisions and business outcomes.
9. Engage in Ongoing UX Educational Opportunities: Like many other tech fields, UX is constantly evolving. The prescribed methodologies of today may not work for the user experiences of tomorrow. Use online courses, forward-looking seminars, and trade publications to maintain current knowledge of UX trends and philosophies.

UX is an art and a science. Creating a phenomenal user experience requires knowing the tech, the user, and your team. Keep the essential components in mind, and then focus on the technology and design trends that fit your company’s brand personality.

As long as you’re thinking about the end result and the individual steps it takes to get there, you’re on the right track.

The post A Primer on the Essential Elements of Successful UX appeared first on Speckyboy Design Magazine.

When you shop online, there’s very little effort involved in anything you do, including abandoning your cart. Simply close the tab, and that’s it. When you’re on the other side of the cart, however, it means that all that effort and time you spent to get them to that point is flushed down the drain.

Some Shocking Statistics

The fact is shopping cart abandonment is the most difficult roadblock for online retailers to get past. According to the digital marketing platform Listrak, an average of 81% of shopping carts are abandoned. Others report the number as 73% for desktop users, on tablet 80%, and 85% on mobile.

This article reports that 68% of all eCommerce sales were via a mobile device, which means that the percentage would be even higher if more mobile users actually went all the way to checkout.

Think about those numbers for a second. At best, it means that for almost every seven people out of ten that shop on your online store do not go through with the purchase. It’s enough to make you weep, isn’t it?

Of course, that is the average, which means there are retailers that get much better results than others do, and your goal is to be on the winning team. To do that, you should learn from the mistakes of others before you also become part of a sad statistic.

These proven tactics can help you avoid shopping cart abandonment on your eCommerce site as much as possible,

Use Familiar Trust Signals in Your Transaction Form

Remember that song “Trust In Me” from the Jungle Book, where the treacherous python Kaa tries to lure Mowgli into his coils? That is essentially what you are doing with a transaction form without familiar trust signals. You’re telling your buyers to trust you blindly with sensitive personal and financial information.

That’s fine if they do, but unfortunately for you, 61% of shoppers say they will abandon their cart because there were no security logos, and 75% will do the same because they didn’t recognize the trust signal you put on your trust form. Surrender to the inevitable; place a recognizable security logo on your transaction form.

Be Upfront About Added Costs

Your promotion or sales pitch was successful, and you get your shoppers to click on the ‘Buy Now’ button. Lo and behold, you hit them with shipping costs and other fees, and they abandon the cart. A whopping 44% will not go through with a purchase when they perceive the shipping and handling costs to be too high.

More importantly, unexpected shipping costs at checkout is the number one reason for shopping cart abandonment. Shoppers don’t like nasty surprises.

If you can’t afford free shipping, then at least be upfront about it. Let your customers know how much they should expect to pay before they add the item to the cart. If they add it to the cart anyway, they are less likely to abandon it.

Go for Free Shipping

According to a report from UPS, 38% of shoppers state that they have purchased from a site because of a shipping offer, and 39% are willing to purchase enough to qualify for free shipping.

It is obvious that going for free shipping for your eCommerce site is a great way to get people to go complete the checkout process, so it is worth considering.

If you will incur considerable costs to offer free shipping, crunch the numbers so that your customers will buy enough to make it worth your while. It works for Amazon, why not you?

Have a Retargeting Strategy

While your goal is to have 0% shopping cart abandonment, that just isn’t going to happen. There will always be people that will abandon their carts even if you do everything right.

The good news is about 72% of people that abandon their carts have some intention of coming back. Your best reaction is to retarget those customers by sending them an email reminding them that they haven’t completed their purchase and maybe offering them a freebie or other incentive.

Have a Cart Icon Visible at All Times

Sometimes, people abandon their carts because they were distracted by a burning smell in the kitchen or they had to go to a meeting.

It is important to remind them about it the next time they visit your site by having a cart icon clearly visible that displays the number of unbought items, or they’ll simply forget.

Make It Easy for Them to Buy More

Shopping navigation has to be a seamless experience to encourage people to buy more. If they click on a product, which brings them to the cart, you should have buttons on that window that allows them to “Continue Shopping” or “Proceed to Checkout.”

If you make it hard for them to get back to the product pages, you might frustrate them, leading to just the one purchase, or worse, cart abandonment.

Offer Several Payment Options

Online shopping is convenient in many ways, but it has its downside. One of them is the availability of the preferred payment method. Some people prefer PayPal or similar, others want to pay with a credit card, while still others prefer mobile payment systems like Apple Pay.

If you don’t offer the payment option they want, they will go elsewhere. Sure, it’s a hassle, but you want their money, so make an effort to give them what they want. Have as many payment options as you can manage to capture more sales.

Accommodate Guests

Registering an account to buy a $2 item is a pain, and most people simply won’t bother. Don’t force your buyers to create an account to buy. You can make account creation optional, so it is easy for them to make a purchase anonymously through a guest checkout.

Maybe later on, when they are regular customers, they won’t mind doing so, especially if you offer them an incentive to do so, such as a discount code for their next purchase.

Streamline the Checkout Process

If you are playing an online game, going through several stages to get to the Big Boss is a good idea. Not so much when you’re trying to sell something. For that, you want the checkout process to be ridiculously fast and effortless.

Reduce the number of pages your customer has to go through to get to the checkout to as few as possible. Remember that each click they have to make increases the chances of abandonment, so keep the count low.

Activate Exit Pop-up Reminders

You’ve probably seen these several times when you’re about to leave a site. A window pops up that asks you if you’re sure you want to leave the page.

On eCommerce sites, these pop-up windows usually come with some incentive for you to keep on browsing, such as a reminder that you still have items in your cart or a discount offer for concluding the purchase. It is very effective, and easy to implement

Offer Them Their Money Back

Finally, convince the fence-sitters to take the plunge by offering them a no-questions-asked money back guarantee. It reassures the customer that if they change their mind later on, or they’re not satisfied with the product or service, they don’t risk anything by giving it a try now.

It also makes them trust your site more, because you stand by your product or service.

Don’t be under any illusions; you will still have some cart abandonment on your site. However, if you follow the foregoing suggestions, you reduce the risk considerably. Any decrease in your cart abandonment is well worth the effort in the long run.

The post Proven Tactics to Avoiding Shopping Cart Abandonment appeared first on Speckyboy Design Magazine.